Generated API snapshot

@askrjs/themes/block

Exports from the declarations published in @askrjs/themes. Signatures reflect the published artifact.

Exports

This entrypoint publishes 21 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

`Block`type

Block: { (props: BlockNativeProps): JSX.Element; (props: BlockAsChildProps): JSX.Element; }

Low-level layout primitive: renders any element in {@link BlockElement } (default <div>) and turns layout-only props (spacing, alignment, direction, sizing, etc.) into a generated utility class. With asChild, the layout is merged onto a single child element instead of a wrapper.

`BlockAlign`type

BlockAlign: "start" | "end" | "center" | "stretch" | "baseline"

`BlockAsChildProps`type

BlockAsChildProps: Omit<BlockOwnProps, "as"> & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}

Props for {@link Block } rendered with asChild, merging layout onto a single child element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
asChild: asChild: true;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children: JSXElement;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockBackground`type

BlockBackground: "surface" | "muted" | "selected" | "canvas" | "raised" | "overlay" | "transparent"

`BlockDirection`type

BlockDirection: "row" | "column" | "row-reverse" | "column-reverse"

`BlockDivProps`type

BlockDivProps: BlockElementProps<"div">

{@link Block } props specialized for a <div> element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "div" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockElement`type

BlockElement: "div" | "span" | "main" | "header" | "footer" | "section" | "aside" | "nav" | "a" | "ul" | "ol" | "li" | "form" | "article"

Element tags {@link Block } can render as via its as prop.

`BlockElementProps`type

BlockElementProps: Omit<JSX.IntrinsicElements[TElement], "children" | "ref"> & BlockOwnProps & {
  as?: TElement;
  asChild?: false;
  ref?: Ref<unknown>;
}

{@link Block } props specialized for a given {@link BlockElement} tag TElement.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: TElement | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockJustify`type

BlockJustify: "start" | "end" | "center" | "between"

`BlockMargin`type

BlockMargin: BlockSpace | "auto"

`BlockNativeProps`type

BlockNativeProps: { [TElement in BlockElement]: BlockElementProps<TElement>; }[BlockElement]

Union of {@link BlockElementProps} across every {@link BlockElement}, used for {@link Block }'s native (non-asChild) overload.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "a" | "article" | "aside" | "div" | "form" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | ((() => IntrinsicClassValue) & string) | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockOwnProps`type

BlockOwnProps: BlockLayoutProps & {
  as?: BlockElement;
  children?: unknown;
  className?: string;
}

Layout and structural props accepted by {@link Block }, independent of the rendered element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: BlockElement | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockProps`type

BlockProps: BlockNativeProps | BlockAsChildProps

Union of all prop shapes accepted by {@link Block }.

align: align?: ResponsiveValue<BlockAlign> | undefined;
asChild: asChild?: boolean | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | ((() => IntrinsicClassValue) & string) | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockRadius`type

BlockRadius: true | "sm" | "md" | "lg" | "xl" | "round"

`BlockResponsiveValue`type

ResponsiveValue: T | Partial<Record<LayoutBreakpoint, T>>

`BlockRowFrom`type

BlockRowFrom: Exclude<LayoutBreakpoint, "base">

`BlockShadow`type

BlockShadow: true | "sm" | "md" | "lg"

`BlockSize`type

BlockSize: "auto" | "full" | "screen" | "content" | "sidebar" | "page" | "sm" | "md" | "lg" | "xl"

`BlockSpace`type

BlockSpace: "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page"

`BlockSpanProps`type

BlockSpanProps: BlockElementProps<"span">

{@link Block } props specialized for a <span> element.

align: align?: ResponsiveValue<BlockAlign> | undefined;
as: as?: "span" | undefined;
asChild: asChild?: false | undefined;
background: background?: ResponsiveValue<BlockBackground> | undefined;
border: border?: ResponsiveValue<boolean> | undefined;
borderBottom: borderBottom?: ResponsiveValue<boolean> | undefined;
borderRight: borderRight?: ResponsiveValue<boolean> | undefined;
borderTop: borderTop?: ResponsiveValue<boolean> | undefined;
center: center?: ResponsiveValue<boolean> | undefined;
children: children?: unknown;
className: className?: string | undefined;
direction: direction?: ResponsiveValue<BlockDirection> | undefined;
gap: gap?: ResponsiveValue<BlockSpace> | undefined;
grow: grow?: ResponsiveValue<number | boolean> | undefined;
height: height?: ResponsiveValue<BlockSize> | undefined;
hide: hide?: ResponsiveValue<boolean> | undefined;
justify: justify?: ResponsiveValue<BlockJustify> | undefined;
margin: margin?: ResponsiveValue<BlockMargin> | undefined;
marginX: marginX?: ResponsiveValue<BlockMargin> | undefined;
marginY: marginY?: ResponsiveValue<BlockMargin> | undefined;
maxHeight: maxHeight?: ResponsiveValue<BlockSize> | undefined;
maxWidth: maxWidth?: ResponsiveValue<BlockSize> | undefined;
minHeight: minHeight?: ResponsiveValue<BlockSize> | undefined;
minWidth: minWidth?: ResponsiveValue<BlockSize> | undefined;
padding: padding?: ResponsiveValue<BlockSpace> | undefined;
paddingX: paddingX?: ResponsiveValue<BlockSpace> | undefined;
paddingY: paddingY?: ResponsiveValue<BlockSpace> | undefined;
radius: radius?: ResponsiveValue<BlockRadius> | undefined;
ref: ref?: Ref<unknown>;
rowFrom: rowFrom?: BlockRowFrom | undefined;
shadow: shadow?: ResponsiveValue<BlockShadow> | undefined;
shrink: shrink?: ResponsiveValue<number | boolean> | undefined;
sticky: sticky?: boolean | undefined;
top: top?: ResponsiveValue<BlockSpace> | undefined;
width: width?: ResponsiveValue<BlockSize> | undefined;
wrap: wrap?: ResponsiveValue<boolean> | undefined;
zIndex: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

`BlockZIndex`type

BlockZIndex: "header" | "sticky" | "fixed" | "dropdown" | "modal" | "popover" | "toast" | "tooltip"

Exports

Blocktype

BlockAligntype

BlockAsChildPropstype

BlockBackgroundtype

BlockDirectiontype

BlockDivPropstype

BlockElementtype

BlockElementPropstype

BlockJustifytype

BlockMargintype

BlockNativePropstype

BlockOwnPropstype

BlockPropstype

BlockRadiustype

BlockResponsiveValuetype

BlockRowFromtype

BlockShadowtype

BlockSizetype

BlockSpacetype

BlockSpanPropstype

BlockZIndextype