@askrjs/themes 0.0.8 → 0.0.10

package/src/components/container/container.a11y.ts

@@ -2,11 +2,6 @@ export const CONTAINER_A11Y_CONTRACT = {
   DATA_ATTRIBUTES: {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
-    variant: "data-variant" as const,
-    maxWidth: "data-max-width" as const,
-    padding: "data-padding" as const,
-    size: "data-size" as const,
-    align: "data-align" as const,
   },
   SLOT_VALUES: {
     root: "container" as const,

package/src/components/container/container.tsx

@@ -1,129 +1,19 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import {
-  applyBoxLayoutStyles,
-  splitBoxLayoutProps,
-  withBoxLayoutClass,
-} from "../_internal/box-layout";
-import {
-  isResponsiveValue,
-  resolveContainerSizeValue,
-  resolveInlineAlignValue,
-  resolveSpaceValue,
-  serializeResponsiveValueIf,
-  setResponsiveStyleVar,
-} from "../_internal/layout";
-import type { ContainerAsChildProps, ContainerNativeProps } from "./container.types";
-
-const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl", "fluid"]);
-
-function isContainerWidthToken(value: unknown): value is string {
-  return typeof value === "string" && CONTAINER_WIDTH_TOKENS.has(value.trim());
-}
-
-function isContainerAlignToken(value: unknown): value is "left" | "center" | "right" {
-  return typeof value === "string" && ["left", "center", "right"].includes(value.trim());
-}
-
-function hasStyleValue(value: unknown): boolean {
-  if (typeof value === "string") return value.trim().length > 0;
-  if (value && typeof value === "object") {
-    return Object.keys(value as Record<string, unknown>).length > 0;
-  }
-
-  return false;
-}
-
-function isStaticValue(value: unknown): boolean {
-  return !isResponsiveValue(value as Record<string, unknown> | undefined);
-}
-
-export function Container(props: ContainerNativeProps): JSX.Element;
-export function Container(props: ContainerAsChildProps): JSX.Element;
-export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
-  const {
-    asChild,
-    children,
-    variant,
-    maxWidth,
-    padding,
-    size,
-    align = "center",
-    ref,
-    style: userStyle,
-    ...rest
-  } = props;
-
-  const responsiveVariant =
-    size === undefined && maxWidth === undefined ? (variant ?? "default") : undefined;
-
-  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
-  const layoutStyle: Record<string, string | number> = {
-    boxSizing: "border-box",
-    width: "100%",
-  };
-  applyBoxLayoutStyles(layoutStyle, boxProps);
-
-  const widthValue = maxWidth ?? size;
-  const usesInlineMaxWidth =
-    boxProps.maxWidth === undefined &&
-    widthValue !== undefined &&
-    (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue));
-
-  if (usesInlineMaxWidth) {
-    setResponsiveStyleVar(layoutStyle, "max-width", widthValue, (value) =>
-      typeof value === "string" && isContainerWidthToken(value)
-        ? resolveContainerSizeValue(value)
-        : value,
-    );
-  }
-
-  if (
-    padding !== undefined &&
-    boxProps.px === undefined &&
-    boxProps.pl === undefined &&
-    boxProps.pr === undefined
-  ) {
-    setResponsiveStyleVar(layoutStyle, "px", padding, resolveSpaceValue);
-  }
-
-  const applyAlign = (side: "marginLeft" | "marginRight", value: typeof align) => {
-    setResponsiveStyleVar(layoutStyle, side === "marginLeft" ? "ml" : "mr", value, (input) => {
-      const margins = resolveInlineAlignValue(input);
-      return side === "marginLeft" ? margins.marginLeft : margins.marginRight;
-    });
-  };
-
-  if (boxProps.ml === undefined && boxProps.mr === undefined && isResponsiveValue(align)) {
-    applyAlign("marginLeft", align);
-    applyAlign("marginRight", align);
-  }
-
-  const layoutClass =
-    Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)
-      ? withBoxLayoutClass(layoutStyle, userStyle)
-      : undefined;
-
-  const finalProps = mergeProps(passthroughProps, {
-    ref,
-    "data-slot": "container",
-    "data-ak-layout": "true",
-    "data-variant": responsiveVariant,
-    "data-size": isStaticValue(size)
-      ? serializeResponsiveValueIf(size, isContainerWidthToken)
-      : undefined,
-    "data-align": isStaticValue(align)
-      ? serializeResponsiveValueIf(align, isContainerAlignToken)
-      : undefined,
-    "data-max-width": isStaticValue(maxWidth)
-      ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
-      : undefined,
-    ...(layoutClass ? { class: layoutClass } : {}),
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <div {...finalProps}>{children}</div>;
+import { Block } from "../block";
+import type { ContainerProps } from "./container.types";
+
+export function Container(props: ContainerProps): JSX.Element {
+  const { children, size = "page", ...rest } = props;
+
+  return (
+    <Block
+      maxWidth={size}
+      marginX="auto"
+      paddingX="page"
+      width="full"
+      {...rest}
+      data-slot="container"
+    >
+      {children}
+    </Block>
+  );
 }

package/src/components/container/container.types.ts

@@ -1,34 +1,5 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+import type { BlockDivProps, BlockSize } from "../block";
 
-export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "fluid";
-
-export type ContainerOwnProps = BoxLayoutOwnProps & {
-  /** Bootstrap-like responsive container variant. */
-  variant?: ContainerVariant;
-  /** Radix-style container size token. */
-  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl" | "fluid">;
-  /** Horizontal alignment of the constrained container. */
-  align?: LayoutResponsive<"left" | "center" | "right">;
-  /** Compatibility max-width override. */
-  maxWidth?: LayoutResponsive<string>;
-  /** Compatibility horizontal padding override. */
-  padding?: LayoutResponsive<string | number>;
-  children?: unknown;
+export type ContainerProps = Omit<BlockDivProps, "maxWidth"> & {
+  size?: BlockSize;
 };
-
-export type ContainerNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  ContainerOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type ContainerAsChildProps = ContainerOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["div"]["style"];
-};
-
-export type ContainerProps = ContainerNativeProps | ContainerAsChildProps;

package/src/components/container/index.ts

@@ -1,9 +1,2 @@
 export { Container } from "./container";
-export { CONTAINER_A11Y_CONTRACT, type ContainerA11yContract } from "./container.a11y";
-export type {
-  ContainerProps,
-  ContainerVariant,
-  ContainerOwnProps,
-  ContainerNativeProps,
-  ContainerAsChildProps,
-} from "./container.types";
+export type { ContainerProps } from "./container.types";

package/src/components/empty-state/empty-state.tsx

@@ -1,42 +1,24 @@
-import { classes } from "../_internal/classes";
+import { Block } from "../block";
 import type { EmptyStateProps } from "./empty-state.types";
 
 export function EmptyState(props: EmptyStateProps): JSX.Element {
-  const {
-    icon,
-    title,
-    titleAs: TitleTag = "h2",
-    description,
-    actions,
-    children,
-    ref,
-    class: className,
-    ...rest
-  } = props;
+  const { icon, title, titleAs: TitleTag = "h2", description, action, children, ...rest } = props;
 
   return (
-    <div {...rest} ref={ref} class={classes("empty-state", className)} data-slot="empty-state">
-      {icon !== undefined ? (
-        <div class="empty-state-icon" data-slot="empty-state-icon">
-          {icon}
-        </div>
-      ) : null}
-      {title !== undefined ? (
-        <TitleTag class="empty-state-title" data-slot="empty-state-title">
-          {title}
-        </TitleTag>
-      ) : null}
-      {description !== undefined ? (
-        <p class="empty-state-description" data-slot="empty-state-description">
-          {description}
-        </p>
-      ) : null}
-      {children}
-      {actions !== undefined ? (
-        <div class="empty-state-actions" data-slot="empty-state-actions">
-          {actions}
-        </div>
-      ) : null}
-    </div>
+    <Block center minHeight="content" padding="xl" {...rest} data-slot="empty-state">
+      <Block align="center" gap="md" maxWidth="sm" data-slot="empty-state-content">
+        {icon !== undefined ? <div data-slot="empty-state-icon">{icon}</div> : null}
+        {title !== undefined ? <TitleTag data-slot="empty-state-title">{title}</TitleTag> : null}
+        {description !== undefined ? (
+          <p data-slot="empty-state-description">{description}</p>
+        ) : null}
+        {children}
+        {action !== undefined ? (
+          <Block direction="row" justify="center" gap="sm" data-slot="empty-state-actions">
+            {action}
+          </Block>
+        ) : null}
+      </Block>
+    </Block>
   );
 }

package/src/components/empty-state/empty-state.types.ts

@@ -1,13 +1,11 @@
-import type { Ref } from "@askrjs/askr/foundations/utilities";
+import type { BlockDivProps } from "../block";
 
 export type EmptyStateHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-export type EmptyStateProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+export type EmptyStateProps = BlockDivProps & {
   icon?: unknown;
   title?: unknown;
   titleAs?: EmptyStateHeadingTag;
   description?: unknown;
-  actions?: unknown;
-  children?: unknown;
-  ref?: Ref<HTMLDivElement>;
+  action?: unknown;
 };

package/src/components/field/field.tsx

@@ -3,11 +3,12 @@ import { mergeProps } from "../_internal/merge-props";
 import type { FieldErrorProps, FieldHintProps, FieldProps } from "./field.types";
 
 export function Field(props: FieldProps): JSX.Element {
-  const { children, class: className, ref, ...rest } = props;
+  const { children, class: className, invalid = false, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
     class: classes("field", className),
     ref,
     "data-slot": "field",
+    "data-invalid": invalid ? "true" : undefined,
   });
 
   return <div {...finalProps}>{children}</div>;
@@ -29,6 +30,7 @@ export function FieldError(props: FieldErrorProps): JSX.Element {
   const finalProps = mergeProps(rest, {
     class: classes("field-error", className),
     ref,
+    role: "alert",
     "data-slot": "field-error",
   });
 

package/src/components/field/field.types.ts

@@ -5,6 +5,7 @@ type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
 
 export type FieldProps = DivProps & {
   children?: unknown;
+  invalid?: boolean;
   ref?: Ref<HTMLDivElement>;
 };
 

package/src/components/footer/footer.tsx

@@ -0,0 +1,88 @@
+import { Block } from "../block";
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  FooterContentProps,
+  FooterDescriptionProps,
+  FooterLinkProps,
+  FooterLinksProps,
+  FooterProps,
+  FooterSectionProps,
+  FooterTitleProps,
+} from "./footer.types";
+
+export function Footer(props: FooterProps): JSX.Element {
+  const { children, ...rest } = props;
+
+  return (
+    <Block as="footer" background="muted" borderTop {...rest} data-slot="footer">
+      {children}
+    </Block>
+  );
+}
+
+export function FooterContent(props: FooterContentProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-content", className),
+    "data-slot": "footer-content",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function FooterSection(props: FooterSectionProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-section", className),
+    "data-slot": "footer-section",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function FooterTitle(props: FooterTitleProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-title", className),
+    "data-slot": "footer-title",
+  });
+
+  return <h2 {...finalProps}>{children}</h2>;
+}
+
+export function FooterDescription(props: FooterDescriptionProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-description", className),
+    "data-slot": "footer-description",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function FooterLinks(props: FooterLinksProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-links", className),
+    "data-slot": "footer-links",
+  });
+
+  return <nav {...finalProps}>{children}</nav>;
+}
+
+export function FooterLink(props: FooterLinkProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("footer-link", className),
+    "data-slot": "footer-link",
+  });
+
+  return <a {...finalProps}>{children}</a>;
+}

package/src/components/footer/footer.types.ts

@@ -0,0 +1,40 @@
+import type { BlockElementProps } from "../block";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type FooterProps = Omit<BlockElementProps<"footer">, "as">;
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type HeadingProps = Omit<JSX.IntrinsicElements["h2"], "children" | "ref">;
+type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
+type NavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref">;
+type AnchorProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref">;
+
+export type FooterContentProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type FooterSectionProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type FooterTitleProps = HeadingProps & {
+  children?: unknown;
+  ref?: Ref<HTMLHeadingElement>;
+};
+
+export type FooterDescriptionProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+
+export type FooterLinksProps = NavProps & {
+  children?: unknown;
+  ref?: Ref<HTMLElement>;
+};
+
+export type FooterLinkProps = AnchorProps & {
+  children?: unknown;
+  ref?: Ref<HTMLAnchorElement>;
+};

package/src/components/footer/index.ts

@@ -0,0 +1,10 @@
+export {
+  Footer,
+  FooterContent,
+  FooterDescription,
+  FooterLink,
+  FooterLinks,
+  FooterSection,
+  FooterTitle,
+} from "./footer";
+export type * from "./footer.types";

package/src/components/grid/grid.tsx

@@ -0,0 +1,113 @@
+import { classes } from "../_internal/classes";
+import { mergeLayoutStyles } from "../_internal/block-layout";
+import { mergeProps } from "../_internal/merge-props";
+import { styleDeclarationsToClass } from "../_internal/style";
+import type { BlockSpace, LayoutBreakpoint, ResponsiveValue } from "../_internal/block-layout";
+import type { GridAlign, GridColumns, GridElement, GridProps } from "./grid.types";
+
+const DEFAULT_ELEMENT = "div";
+const BREAKPOINTS: readonly LayoutBreakpoint[] = ["base", "sm", "md", "lg", "xl"];
+
+const SPACE_TOKEN_MAP: Record<BlockSpace, string> = {
+  "0": "0",
+  xs: "var(--ak-space-xs)",
+  sm: "var(--ak-space-sm)",
+  md: "var(--ak-space-md)",
+  lg: "var(--ak-space-lg)",
+  xl: "var(--ak-space-xl)",
+  "2xl": "var(--ak-space-2xl)",
+  "3xl": "var(--ak-space-3xl)",
+  page: "var(--ak-layout-page-gutter)",
+};
+
+function isResponsiveValue<T>(
+  value: ResponsiveValue<T> | undefined,
+): value is Partial<Record<LayoutBreakpoint, T>> {
+  return Boolean(
+    value &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    BREAKPOINTS.some((breakpoint) => breakpoint in value),
+  );
+}
+
+function normalizeResponsiveValue<T>(
+  value: ResponsiveValue<T> | undefined,
+): Partial<Record<LayoutBreakpoint, T>> | undefined {
+  if (value === undefined) return undefined;
+  if (isResponsiveValue(value)) return value;
+  return { base: value };
+}
+
+function resolveColumns(value: GridColumns): string {
+  if (typeof value === "number") {
+    return `repeat(${value}, minmax(0, 1fr))`;
+  }
+
+  const trimmed = value.trim();
+  return trimmed || "minmax(0, 1fr)";
+}
+
+function resolveGap(value: BlockSpace): string {
+  return SPACE_TOKEN_MAP[value] ?? value;
+}
+
+function resolveAlign(value: GridAlign): string {
+  if (value === "start") return "start";
+  if (value === "end") return "end";
+  return value;
+}
+
+function setResponsiveVar<T>(
+  styles: Record<string, string | number>,
+  property: string,
+  value: ResponsiveValue<T> | undefined,
+  resolve: (value: T) => string | number | undefined,
+) {
+  const normalized = normalizeResponsiveValue(value);
+  if (!normalized) return;
+
+  for (const breakpoint of BREAKPOINTS) {
+    const breakpointValue = normalized[breakpoint];
+    if (breakpointValue === undefined) continue;
+    const resolved = resolve(breakpointValue);
+    if (resolved === undefined || resolved === "") continue;
+    styles[`--ak-grid-${property}-${breakpoint}`] = resolved;
+  }
+}
+
+export function Grid<TElement extends GridElement = "div">(
+  props: GridProps<TElement>,
+): JSX.Element {
+  const {
+    as,
+    columns,
+    gap,
+    align,
+    children,
+    class: classProp,
+    className,
+    ref,
+    style: userStyle,
+    ...rest
+  } = props as GridProps<GridElement> & {
+    class?: unknown;
+    className?: unknown;
+    style?: unknown;
+  };
+
+  const styles: Record<string, string | number> = {};
+  setResponsiveVar(styles, "columns", columns, resolveColumns);
+  setResponsiveVar(styles, "gap", gap, resolveGap);
+  setResponsiveVar(styles, "align", align, resolveAlign);
+
+  const generatedClass = styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("grid", classProp, className, generatedClass),
+    "data-slot": "grid",
+  });
+
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
+}

package/src/components/grid/grid.types.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+import type { BlockSpace, ResponsiveValue } from "../_internal/block-layout";
+
+export type GridElement = "div" | "section" | "ul";
+export type GridColumns = number | string;
+export type GridAlign = "start" | "center" | "end" | "stretch";
+
+type GridIntrinsicProps<TElement extends GridElement> = Omit<
+  JSX.IntrinsicElements[TElement],
+  "children" | "ref"
+>;
+
+export type GridProps<TElement extends GridElement = "div"> = GridIntrinsicProps<TElement> & {
+  as?: TElement;
+  columns?: ResponsiveValue<GridColumns>;
+  gap?: ResponsiveValue<BlockSpace>;
+  align?: ResponsiveValue<GridAlign>;
+  children?: unknown;
+  ref?: Ref<HTMLElement>;
+};

package/src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export { Grid } from "./grid";
+export type * from "./grid.types";

package/src/components/header/header.tsx

@@ -1,18 +1,21 @@
-import { classes } from "../_internal/classes";
+import { Block } from "../block";
 import type { HeaderProps } from "./header.types";
 
 export function Header(props: HeaderProps): JSX.Element {
-  const { children, position = "static", ref, class: className, ...rest } = props;
+  const { children, position, sticky = position === "sticky", ...rest } = props;
 
   return (
-    <header
+    <Block
+      as="header"
+      sticky={sticky}
+      top={sticky ? "0" : undefined}
+      zIndex={sticky ? "header" : undefined}
+      background="surface"
+      borderBottom
       {...rest}
-      ref={ref}
-      class={classes("header", className)}
       data-slot="header"
-      data-position={position}
     >
       {children}
-    </header>
+    </Block>
   );
 }

package/src/components/header/header.types.ts

@@ -1,6 +1,6 @@
-export type HeaderPosition = "static" | "relative" | "sticky" | "absolute" | "fixed";
+import type { BlockElementProps } from "../block";
 
-export type HeaderProps = Omit<JSX.IntrinsicElements["header"], "children"> & {
-  position?: HeaderPosition;
-  children?: unknown;
+export type HeaderProps = Omit<BlockElementProps<"header">, "as" | "sticky"> & {
+  position?: "sticky" | "static";
+  sticky?: boolean;
 };

package/src/components/header/index.ts

@@ -1,3 +1,2 @@
 export { Header } from "./header";
-export { HEADER_A11Y_CONTRACT, type HeaderA11yContract } from "./header.a11y";
-export type { HeaderProps, HeaderPosition } from "./header.types";
+export type { HeaderProps } from "./header.types";

package/src/components/main/index.ts

@@ -0,0 +1,2 @@
+export { Main } from "./main";
+export type { MainProps } from "./main.types";

package/src/components/main/main.tsx

@@ -0,0 +1,12 @@
+import { Block } from "../block";
+import type { MainProps } from "./main.types";
+
+export function Main(props: MainProps): JSX.Element {
+  const { children, ...rest } = props;
+
+  return (
+    <Block as="main" grow {...rest} data-slot="main">
+      {children}
+    </Block>
+  );
+}

package/src/components/main/main.types.ts

@@ -0,0 +1,3 @@
+import type { BlockElementProps } from "../block";
+
+export type MainProps = Omit<BlockElementProps<"main">, "as">;