@askrjs/themes 0.0.1

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,123 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  BreadcrumbAsChildProps,
+  BreadcrumbCurrentAsChildProps,
+  BreadcrumbCurrentProps,
+  BreadcrumbItemAsChildProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkAsChildProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListAsChildProps,
+  BreadcrumbListProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorAsChildProps,
+  BreadcrumbSeparatorProps,
+} from "./breadcrumb.types";
+
+export function Breadcrumb(props: BreadcrumbProps): JSX.Element;
+export function Breadcrumb(props: BreadcrumbAsChildProps): JSX.Element;
+export function Breadcrumb(props: BreadcrumbProps | BreadcrumbAsChildProps) {
+  const { asChild, children, ref, "aria-label": ariaLabel, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "aria-label": ariaLabel ?? "Breadcrumb",
+    "data-slot": "breadcrumb",
+    "data-breadcrumb": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <nav {...finalProps}>{children}</nav>;
+}
+
+export function BreadcrumbList(props: BreadcrumbListProps): JSX.Element;
+export function BreadcrumbList(props: BreadcrumbListAsChildProps): JSX.Element;
+export function BreadcrumbList(props: BreadcrumbListProps | BreadcrumbListAsChildProps) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "breadcrumb-list",
+    "data-breadcrumb-list": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <ol {...finalProps}>{children}</ol>;
+}
+
+export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;
+export function BreadcrumbItem(props: BreadcrumbItemAsChildProps): JSX.Element;
+export function BreadcrumbItem(props: BreadcrumbItemProps | BreadcrumbItemAsChildProps) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "breadcrumb-item",
+    "data-breadcrumb-item": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <li {...finalProps}>{children}</li>;
+}
+
+export function BreadcrumbLink(props: BreadcrumbLinkProps): JSX.Element;
+export function BreadcrumbLink(props: BreadcrumbLinkAsChildProps): JSX.Element;
+export function BreadcrumbLink(props: BreadcrumbLinkProps | BreadcrumbLinkAsChildProps) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "breadcrumb-link",
+    "data-breadcrumb-link": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <a {...finalProps}>{children}</a>;
+}
+
+export function BreadcrumbCurrent(props: BreadcrumbCurrentProps): JSX.Element;
+export function BreadcrumbCurrent(props: BreadcrumbCurrentAsChildProps): JSX.Element;
+export function BreadcrumbCurrent(props: BreadcrumbCurrentProps | BreadcrumbCurrentAsChildProps) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "aria-current": "page",
+    "data-slot": "breadcrumb-current",
+    "data-breadcrumb-current": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <span {...finalProps}>{children}</span>;
+}
+
+export function BreadcrumbSeparator(props: BreadcrumbSeparatorProps): JSX.Element;
+export function BreadcrumbSeparator(props: BreadcrumbSeparatorAsChildProps): JSX.Element;
+export function BreadcrumbSeparator(
+  props: BreadcrumbSeparatorProps | BreadcrumbSeparatorAsChildProps,
+) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "aria-hidden": "true",
+    "data-slot": "breadcrumb-separator",
+    "data-breadcrumb-separator": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children ?? "/"} />;
+  }
+
+  return <span {...finalProps}>{children ?? "/"}</span>;
+}

package/src/components/breadcrumb/breadcrumb.types.ts

@@ -0,0 +1,73 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+export type BreadcrumbOwnProps = {
+  children?: unknown;
+  "aria-label"?: string;
+};
+
+export type BreadcrumbProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  BreadcrumbOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type BreadcrumbAsChildProps = BreadcrumbOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BreadcrumbListProps = Omit<JSX.IntrinsicElements["ol"], "children" | "ref"> & {
+  asChild?: false;
+  ref?: Ref<HTMLOListElement>;
+};
+
+export type BreadcrumbListAsChildProps = {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BreadcrumbItemProps = Omit<JSX.IntrinsicElements["li"], "children" | "ref"> & {
+  asChild?: false;
+  ref?: Ref<HTMLLIElement>;
+};
+
+export type BreadcrumbItemAsChildProps = {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BreadcrumbLinkProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & {
+  asChild?: false;
+  ref?: Ref<HTMLAnchorElement>;
+};
+
+export type BreadcrumbLinkAsChildProps = {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BreadcrumbCurrentProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
+};
+
+export type BreadcrumbCurrentAsChildProps = {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BreadcrumbSeparatorProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
+};
+
+export type BreadcrumbSeparatorAsChildProps = {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,24 @@
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbCurrent,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+export { BREADCRUMB_A11Y_CONTRACT, type BreadcrumbA11yContract } from "./breadcrumb.a11y";
+export type {
+  BreadcrumbOwnProps,
+  BreadcrumbProps,
+  BreadcrumbAsChildProps,
+  BreadcrumbListProps,
+  BreadcrumbListAsChildProps,
+  BreadcrumbItemProps,
+  BreadcrumbItemAsChildProps,
+  BreadcrumbLinkProps,
+  BreadcrumbLinkAsChildProps,
+  BreadcrumbCurrentProps,
+  BreadcrumbCurrentAsChildProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbSeparatorAsChildProps,
+} from "./breadcrumb.types";

package/src/components/card/card.tsx

@@ -0,0 +1,79 @@
+import type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardPadding,
+  CardProps,
+  CardTitleProps,
+  CardVariant,
+} from "./card.types";
+
+function normalizePadding(padding: CardPadding | undefined) {
+  return padding && padding !== "md" ? padding : undefined;
+}
+
+function normalizeVariant(variant: CardVariant | undefined) {
+  return variant && variant !== "default" ? variant : undefined;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  const { children, variant, padding = "md", ref, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      data-slot="card"
+      data-variant={normalizeVariant(variant)}
+      data-padding={normalizePadding(padding)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader(props: CardHeaderProps): JSX.Element {
+  const { children, ref, ...rest } = props;
+  return (
+    <div {...rest} ref={ref} data-slot="card-header">
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle(props: CardTitleProps): JSX.Element {
+  const { children, ref, ...rest } = props;
+  return (
+    <h3 {...rest} ref={ref} data-slot="card-title">
+      {children}
+    </h3>
+  );
+}
+
+export function CardDescription(props: CardDescriptionProps): JSX.Element {
+  const { children, ref, ...rest } = props;
+  return (
+    <p {...rest} ref={ref} data-slot="card-description">
+      {children}
+    </p>
+  );
+}
+
+export function CardContent(props: CardContentProps): JSX.Element {
+  const { children, ref, ...rest } = props;
+  return (
+    <div {...rest} ref={ref} data-slot="card-content">
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter(props: CardFooterProps): JSX.Element {
+  const { children, ref, ...rest } = props;
+  return (
+    <div {...rest} ref={ref} data-slot="card-footer">
+      {children}
+    </div>
+  );
+}

package/src/components/card/card.types.ts

@@ -0,0 +1,40 @@
+import type { Ref } from "@askrjs/askr/foundations";
+
+export type CardVariant = "default" | "raised";
+export type CardPadding = "sm" | "md" | "lg";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type HeadingProps = Omit<JSX.IntrinsicElements["h3"], "children" | "ref">;
+type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
+
+export type CardProps = DivProps & {
+  children?: unknown;
+  variant?: CardVariant;
+  padding?: CardPadding;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type CardHeaderProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type CardContentProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type CardFooterProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type CardTitleProps = HeadingProps & {
+  children?: unknown;
+  ref?: Ref<HTMLHeadingElement>;
+};
+
+export type CardDescriptionProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};

package/src/components/card/index.ts

@@ -0,0 +1,12 @@
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+export type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardPadding,
+  CardProps,
+  CardTitleProps,
+  CardVariant,
+} from "./card.types";

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

@@ -0,0 +1,17 @@
+export const CONTAINER_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    variant: "data-variant" as const,
+    fluid: "data-fluid" 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,
+  },
+} as const;
+
+export type ContainerA11yContract = typeof CONTAINER_A11Y_CONTRACT;

package/src/components/container/container.tsx

@@ -0,0 +1,139 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import {
+  applyBoxLayoutStyles,
+  splitBoxLayoutProps,
+  withBoxLayoutStyle,
+} 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"]);
+
+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,
+    fluid = false,
+    maxWidth,
+    padding,
+    size,
+    align = "center",
+    ref,
+    style: userStyle,
+    ...rest
+  } = props;
+
+  const responsiveVariant =
+    fluid || (size === undefined && maxWidth === undefined)
+      ? fluid
+        ? "fluid"
+        : (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 = fluid ? undefined : (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 mergedStyle =
+    Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)
+      ? withBoxLayoutStyle(layoutStyle, userStyle)
+      : undefined;
+
+  const finalProps = mergeProps(passthroughProps, {
+    ref,
+    "data-slot": "container",
+    "data-ak-layout": "true",
+    "data-variant": responsiveVariant,
+    "data-fluid": fluid ? "true" : undefined,
+    "data-size": fluid
+      ? undefined
+      : isStaticValue(size)
+        ? serializeResponsiveValueIf(size, isContainerWidthToken)
+        : undefined,
+    "data-align": isStaticValue(align)
+      ? serializeResponsiveValueIf(align, isContainerAlignToken)
+      : undefined,
+    "data-max-width": fluid
+      ? undefined
+      : isStaticValue(maxWidth)
+        ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
+        : undefined,
+    style: mergedStyle,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}

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

@@ -0,0 +1,35 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+
+export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "fluid";
+
+export type ContainerOwnProps = BoxLayoutOwnProps & {
+  /** Bootstrap-like responsive container variant. */
+  variant?: ContainerVariant;
+  /** Makes the container span the full available width while preserving gutters. */
+  fluid?: boolean;
+  /** Radix-style container size token. */
+  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl">;
+  /** 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 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

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

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

@@ -0,0 +1,42 @@
+import { classes } from "../_internal/classes";
+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;
+
+  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>
+  );
+}

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

@@ -0,0 +1,10 @@
+export type EmptyStateHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export type EmptyStateProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  icon?: unknown;
+  title?: unknown;
+  titleAs?: EmptyStateHeadingTag;
+  description?: unknown;
+  actions?: unknown;
+  children?: unknown;
+};

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

@@ -0,0 +1,2 @@
+export { EmptyState } from "./empty-state";
+export type { EmptyStateHeadingTag, EmptyStateProps } from "./empty-state.types";

package/src/components/flex/flex.a11y.ts

@@ -0,0 +1,19 @@
+export const FLEX_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    direction: "data-direction" as const,
+    gap: "data-gap" as const,
+    gapX: "data-gap-x" as const,
+    gapY: "data-gap-y" as const,
+    align: "data-align" as const,
+    justify: "data-justify" as const,
+    wrap: "data-wrap" as const,
+    collapseBelow: "data-collapse-below" as const,
+  },
+  SLOT_VALUES: {
+    root: "flex" as const,
+  },
+} as const;
+
+export type FlexA11yContract = typeof FLEX_A11Y_CONTRACT;