@askrjs/themes 0.0.3 → 0.0.6

package/src/components/badge/badge.tsx

@@ -1,12 +1,18 @@
 import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type { BadgeAsChildProps, BadgeProps } from "./badge.types";
 
+function normalizeBadgeVariant(variant: BadgeProps["variant"] | undefined) {
+  return variant && variant !== "default" ? `badge-${variant}` : undefined;
+}
+
 export function Badge(props: BadgeProps): JSX.Element;
 export function Badge(props: BadgeAsChildProps): JSX.Element;
 export function Badge(props: BadgeProps | BadgeAsChildProps) {
   const { asChild, children, variant, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
+    class: classes("badge", normalizeBadgeVariant(variant)),
     ref,
     "data-slot": "badge",
     "data-badge": "true",

package/src/components/badge/badge.types.ts

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type BadgeVariant =
   | "default"

package/src/components/block/block.a11y.ts

@@ -0,0 +1,17 @@
+export const BLOCK_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" 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,
+    size: "data-size" as const,
+  },
+  SLOT_VALUES: {
+    root: "block" as const,
+  },
+} as const;
+
+export type BlockA11yContract = typeof BLOCK_A11Y_CONTRACT;

package/src/components/block/block.tsx

@@ -0,0 +1,71 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import { serializeResponsiveValueIf } from "../_internal/layout";
+import type { BlockAsChildProps, BlockDivProps, BlockSpanProps } from "./block.types";
+
+const SPACE_TOKENS = new Set([
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+]);
+
+export function Block(props: BlockDivProps): JSX.Element;
+export function Block(props: BlockSpanProps): JSX.Element;
+export function Block(props: BlockAsChildProps): JSX.Element;
+export function Block(props: BlockDivProps | BlockSpanProps | BlockAsChildProps) {
+  const as = "as" in props ? props.as : "div";
+  const { asChild, children, gap, gapX, gapY, align, justify, size = "md", ref, ...rest } = props;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "block",
+    "data-ak-layout": "true",
+    "data-gap": serializeResponsiveValueIf(
+      gap,
+      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
+    ),
+    "data-gap-x": serializeResponsiveValueIf(
+      gapX,
+      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
+    ),
+    "data-gap-y": serializeResponsiveValueIf(
+      gapY,
+      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
+    ),
+    "data-align": serializeResponsiveValueIf(
+      align,
+      (value) =>
+        typeof value === "string" &&
+        ["start", "end", "center", "stretch", "baseline"].includes(value.trim()),
+    ),
+    "data-justify": serializeResponsiveValueIf(
+      justify,
+      (value) =>
+        typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim()),
+    ),
+    "data-size": `initial:${size}`,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  if (as === "span") {
+    return <span {...finalProps}>{children}</span>;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}

package/src/components/block/block.types.ts

@@ -0,0 +1,60 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type BlockSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type BlockSpace =
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl";
+
+export type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+
+export type BlockJustify = "start" | "end" | "center" | "between";
+
+export type BlockOwnProps = {
+  gap?: BlockSpace;
+  gapX?: BlockSpace;
+  gapY?: BlockSpace;
+  align?: BlockAlign;
+  justify?: BlockJustify;
+  size?: BlockSize;
+  as?: "div" | "span";
+  children?: unknown;
+};
+
+export type BlockNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  BlockOwnProps & {
+    as?: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type BlockSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
+  BlockOwnProps & {
+    as: "span";
+    asChild?: false;
+    ref?: Ref<HTMLSpanElement>;
+  };
+
+export type BlockAsChildProps = Omit<BlockOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type BlockDivProps = BlockNativeProps;
+export type BlockProps = BlockDivProps | BlockSpanProps | BlockAsChildProps;

package/src/components/block/index.ts

@@ -0,0 +1,11 @@
+export { Block } from "./block";
+export { BLOCK_A11Y_CONTRACT, type BlockA11yContract } from "./block.a11y";
+export type {
+  BlockAsChildProps,
+  BlockDivProps,
+  BlockNativeProps,
+  BlockOwnProps,
+  BlockProps,
+  BlockSize,
+  BlockSpanProps,
+} from "./block.types";

package/src/components/box/box.tsx

@@ -3,7 +3,7 @@ import { mergeProps } from "../_internal/merge-props";
 import {
   applyBoxLayoutStyles,
   splitBoxLayoutProps,
-  withBoxLayoutStyle,
+  withBoxLayoutClass,
 } from "../_internal/box-layout";
 import type { BoxAsChildProps, BoxDivProps, BoxSpanProps } from "./box.types";
 
@@ -17,12 +17,13 @@ export function Box(props: BoxDivProps | BoxSpanProps | BoxAsChildProps) {
   const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {};
   applyBoxLayoutStyles(layoutStyle, boxProps);
+  const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
 
   const finalProps = mergeProps(passthroughProps, {
     ref,
     "data-slot": "box",
     "data-ak-layout": "true",
-    style: withBoxLayoutStyle(layoutStyle, userStyle),
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
 
   if (asChild) {

package/src/components/box/box.types.ts

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { ResponsiveValue } from "../_internal/layout";
 
 export type LayoutResponsive<T> = ResponsiveValue<T>;

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

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type BreadcrumbOwnProps = {
   children?: unknown;

package/src/components/button-group/button-group.tsx

@@ -0,0 +1,32 @@
+import { classes } from "../_internal/classes";
+import { ButtonGroupProps } from "./button-group.types";
+
+export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
+  const {
+    attached = true,
+    children,
+    class: className,
+    orientation = "horizontal",
+    ref,
+    role,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      class={classes(
+        "btn-group",
+        orientation === "vertical" ? "btn-group-vertical" : undefined,
+        className,
+      )}
+      data-attached={attached ? "true" : "false"}
+      data-orientation={orientation}
+      data-slot="button-group"
+      role={role ?? "group"}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/button-group/button-group.types.ts

@@ -0,0 +1,12 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+
+export type ButtonGroupProps = DivProps & {
+  children?: unknown;
+  attached?: boolean;
+  orientation?: ButtonGroupOrientation;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/components/button-group/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from "./button-group";
+export type { ButtonGroupOrientation, ButtonGroupProps } from "./button-group.types";

package/src/components/card/card.tsx

@@ -1,4 +1,7 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
 import type {
+  CardActionsProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
@@ -18,62 +21,88 @@ function normalizeVariant(variant: CardVariant | 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>
-  );
+  const { children, class: className, variant, padding = "md", ref, ...rest } = props;
+  const normalizedVariant = normalizeVariant(variant);
+  const normalizedPadding = normalizePadding(padding);
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes(
+      "card",
+      normalizedVariant && `card-${normalizedVariant}`,
+      normalizedPadding && `card-${normalizedPadding}`,
+      className,
+    ),
+    "data-padding": normalizedPadding,
+    "data-slot": "card",
+    "data-variant": normalizedVariant,
+  });
+
+  return <div {...finalProps}>{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>
-  );
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-header", className),
+    "data-slot": "card-header",
+  });
+
+  return <div {...finalProps}>{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>
-  );
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-title", className),
+    "data-slot": "card-title",
+  });
+
+  return <h3 {...finalProps}>{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>
-  );
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-description", className),
+    "data-slot": "card-description",
+  });
+
+  return <p {...finalProps}>{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>
-  );
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-content", className),
+    "data-slot": "card-content",
+  });
+
+  return <div {...finalProps}>{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>
-  );
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-footer", className),
+    "data-slot": "card-footer",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function CardActions(props: CardActionsProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("card-actions", className),
+    "data-slot": "card-actions",
+  });
+
+  return <div {...finalProps}>{children}</div>;
 }

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

@@ -1,4 +1,4 @@
-import type { Ref } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type CardVariant = "default" | "raised";
 export type CardPadding = "sm" | "md" | "lg";
@@ -29,6 +29,11 @@ export type CardFooterProps = DivProps & {
   ref?: Ref<HTMLDivElement>;
 };
 
+export type CardActionsProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
 export type CardTitleProps = HeadingProps & {
   children?: unknown;
   ref?: Ref<HTMLHeadingElement>;

package/src/components/card/index.ts

@@ -1,6 +1,15 @@
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+export {
+  Card,
+  CardActions,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
 
 export type {
+  CardActionsProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,

package/src/components/close/close.tsx

@@ -0,0 +1,19 @@
+import { Button, type ButtonNativeProps } from "@askrjs/ui";
+import { classes } from "../_internal/classes";
+import type { CloseNativeProps } from "./close.types";
+
+export function Close(props: CloseNativeProps): JSX.Element;
+export function Close(props: CloseNativeProps): JSX.Element {
+  const { children, class: className, label = "Close", size, variant, ...rest } = props;
+  return (
+    <Button
+      {...(rest as ButtonNativeProps)}
+      class={classes("btn-close", className)}
+      aria-label={label}
+      size={size ?? "icon"}
+      variant={variant ?? "ghost"}
+    >
+      {children ?? <span aria-hidden="true">×</span>}
+    </Button>
+  );
+}

package/src/components/close/close.types.ts

@@ -0,0 +1,7 @@
+import type { ButtonNativeProps } from "@askrjs/ui";
+
+export type CloseOwnProps = {
+  label?: string;
+};
+
+export type CloseNativeProps = ButtonNativeProps & CloseOwnProps;

package/src/components/close/index.ts

@@ -0,0 +1,2 @@
+export { Close } from "./close";
+export type { CloseNativeProps, CloseOwnProps } from "./close.types";

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

@@ -3,7 +3,6 @@ export const CONTAINER_A11Y_CONTRACT = {
     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,

package/src/components/container/container.tsx

@@ -3,7 +3,7 @@ import { mergeProps } from "../_internal/merge-props";
 import {
   applyBoxLayoutStyles,
   splitBoxLayoutProps,
-  withBoxLayoutStyle,
+  withBoxLayoutClass,
 } from "../_internal/box-layout";
 import {
   isResponsiveValue,
@@ -15,7 +15,7 @@ import {
 } from "../_internal/layout";
 import type { ContainerAsChildProps, ContainerNativeProps } from "./container.types";
 
-const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl"]);
+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());
@@ -45,7 +45,6 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     asChild,
     children,
     variant,
-    fluid = false,
     maxWidth,
     padding,
     size,
@@ -56,11 +55,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   } = props;
 
   const responsiveVariant =
-    fluid || (size === undefined && maxWidth === undefined)
-      ? fluid
-        ? "fluid"
-        : (variant ?? "default")
-      : undefined;
+    size === undefined && maxWidth === undefined ? (variant ?? "default") : undefined;
 
   const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {
@@ -69,7 +64,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   };
   applyBoxLayoutStyles(layoutStyle, boxProps);
 
-  const widthValue = fluid ? undefined : (maxWidth ?? size);
+  const widthValue = maxWidth ?? size;
   const usesInlineMaxWidth =
     boxProps.maxWidth === undefined &&
     widthValue !== undefined &&
@@ -104,9 +99,9 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     applyAlign("marginRight", align);
   }
 
-  const mergedStyle =
+  const layoutClass =
     Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)
-      ? withBoxLayoutStyle(layoutStyle, userStyle)
+      ? withBoxLayoutClass(layoutStyle, userStyle)
       : undefined;
 
   const finalProps = mergeProps(passthroughProps, {
@@ -114,21 +109,16 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     "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-size": 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,
+    "data-max-width": isStaticValue(maxWidth)
+      ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
+      : undefined,
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
 
   if (asChild) {

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

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
 
 export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "fluid";
@@ -6,10 +7,8 @@ export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "
 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">;
+  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. */

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

@@ -1,3 +1,5 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
 export type EmptyStateHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 export type EmptyStateProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
@@ -7,4 +9,5 @@ export type EmptyStateProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
   description?: unknown;
   actions?: unknown;
   children?: unknown;
+  ref?: Ref<HTMLDivElement>;
 };

package/src/components/field/field.tsx

@@ -0,0 +1,36 @@
+import { classes } from "../_internal/classes";
+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 finalProps = mergeProps(rest, {
+    class: classes("field", className),
+    ref,
+    "data-slot": "field",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function FieldHint(props: FieldHintProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes("field-hint", className),
+    ref,
+    "data-slot": "field-hint",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function FieldError(props: FieldErrorProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes("field-error", className),
+    ref,
+    "data-slot": "field-error",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}