@askrjs/themes 0.0.1

package/src/components/logos/create-logo.tsx

@@ -0,0 +1,103 @@
+import { jsx as createSvgNode, jsxs as createSvgNodes } from "@askrjs/askr/jsx-runtime";
+import type { IconSizeToken, LogoNode, LogoProps, LogoStyleObject } from "./types";
+
+const ICON_SIZE_TOKENS: readonly IconSizeToken[] = ["sm", "md", "lg", "xl"];
+
+function isIconSizeToken(value: unknown): value is IconSizeToken {
+  return typeof value === "string" && ICON_SIZE_TOKENS.includes(value as IconSizeToken);
+}
+
+function normalizeIconSizeValue(size: number | string): string {
+  if (typeof size === "number") return `${size}px`;
+  return size;
+}
+
+function resolveIconSizeVariable(size: number | string): string {
+  if (isIconSizeToken(size)) {
+    return `var(--ak-icon-size-${size}, var(--ak-icon-size-md, 1.25rem))`;
+  }
+
+  return normalizeIconSizeValue(size);
+}
+
+function camelToKebab(key: string): string {
+  return key.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function serializeLogoStyle(style: string | LogoStyleObject | undefined): string {
+  if (!style) return "";
+  if (typeof style === "string") return style.trim();
+
+  return Object.entries(style)
+    .filter(([, value]) => value !== undefined && value !== null)
+    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)
+    .join(";");
+}
+
+function joinLogoStyle(...styles: Array<string | undefined>): string | undefined {
+  const merged = styles.map((style) => style?.trim()).filter(Boolean);
+  return merged.length > 0 ? merged.join(";") : undefined;
+}
+
+function getLogoContractProps({
+  size = 20,
+  title,
+  style,
+  iconName,
+}: Pick<LogoProps, "iconName" | "size" | "style" | "title">) {
+  const sizeToken = isIconSizeToken(size) ? size : undefined;
+  const decorative = title ? undefined : "true";
+  const resolvedSize = resolveIconSizeVariable(size);
+  const logoStyle = joinLogoStyle(
+    `--ak-icon-size:${resolvedSize}`,
+    "display:inline-block",
+    "flex-shrink:0",
+    "width:var(--ak-icon-size)",
+    "height:var(--ak-icon-size)",
+    serializeLogoStyle(style),
+  );
+
+  return {
+    attrs: {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      role: "img",
+      "aria-hidden": title ? undefined : "true",
+      style: logoStyle,
+      "data-slot": "icon",
+      "data-icon": iconName,
+      "data-size": sizeToken,
+      "data-decorative": decorative,
+    },
+  };
+}
+
+export function createLogo(displayName: string, viewBox: string, logoNode: LogoNode) {
+  function Logo({ size = 20, title, class: className, style, ref, ...rest }: LogoProps) {
+    const { attrs } = getLogoContractProps({
+      size,
+      title,
+      style,
+      iconName: displayName,
+    });
+
+    const children = logoNode.map(([tag, nodeAttrs], index) =>
+      createSvgNode(tag, nodeAttrs as Record<string, unknown>, index),
+    );
+
+    return createSvgNodes("svg", {
+      ...rest,
+      ...attrs,
+      viewBox,
+      fill: "none",
+      stroke: "none",
+      class: className,
+      ref,
+      children: title ? [createSvgNode("title", { children: title }), ...children] : children,
+    });
+  }
+
+  Logo.displayName = displayName;
+  return Logo;
+}

package/src/components/logos/github-logo.tsx

@@ -0,0 +1,13 @@
+import { createLogo } from "./create-logo";
+
+const GITHUB_LOGO_NODE = [
+  [
+    "path",
+    {
+      fill: "#181717",
+      d: "M12 1C5.923 1 1 5.924 1 12.002c0 4.862 3.151 8.987 7.521 10.443.55.102.751-.239.751-.53 0-.262-.01-.956-.015-1.876-3.059.665-3.706-1.475-3.706-1.475-.5-1.271-1.22-1.609-1.22-1.609-.998-.682.076-.668.076-.668 1.104.078 1.685 1.134 1.685 1.134.981 1.682 2.575 1.196 3.203.915.1-.711.384-1.196.698-1.471-2.442-.278-5.01-1.221-5.01-5.436 0-1.201.429-2.184 1.133-2.954-.114-.278-.491-1.397.107-2.913 0 0 .924-.296 3.026 1.128A10.52 10.52 0 0 1 12 6.32c.935.004 1.876.127 2.755.373 2.1-1.424 3.023-1.128 3.023-1.128.6 1.516.223 2.635.109 2.913.706.77 1.131 1.753 1.131 2.954 0 4.225-2.572 5.155-5.02 5.427.395.34.746 1.011.746 2.038 0 1.472-.013 2.659-.013 3.021 0 .294.198.637.757.529C19.851 20.985 23 16.862 23 12.002 23 5.924 18.075 1 12 1Z",
+    },
+  ],
+] as const;
+
+export const GitHubLogo = createLogo("GitHubLogo", "0 0 24 24", GITHUB_LOGO_NODE);

package/src/components/logos/google-logo.tsx

@@ -0,0 +1,34 @@
+import { createLogo } from "./create-logo";
+
+const GOOGLE_LOGO_NODE = [
+  [
+    "path",
+    {
+      fill: "#4285F4",
+      d: "M23.49 12.276c0-.816-.073-1.6-.209-2.351H12v4.451h6.437a5.505 5.505 0 0 1-2.387 3.613v2.997h3.861c2.259-2.079 3.579-5.142 3.579-8.71Z",
+    },
+  ],
+  [
+    "path",
+    {
+      fill: "#34A853",
+      d: "M12 24c3.24 0 5.957-1.074 7.943-2.914l-3.861-2.997c-1.074.72-2.448 1.146-4.082 1.146-3.136 0-5.793-2.118-6.741-4.965H1.267v3.092A11.997 11.997 0 0 0 12 24Z",
+    },
+  ],
+  [
+    "path",
+    {
+      fill: "#FBBC05",
+      d: "M5.259 14.27A7.192 7.192 0 0 1 4.882 12c0-.788.135-1.553.377-2.27V6.638H1.267A11.997 11.997 0 0 0 0 12c0 1.937.464 3.771 1.267 5.362L5.259 14.27Z",
+    },
+  ],
+  [
+    "path",
+    {
+      fill: "#EA4335",
+      d: "M12 4.765c1.762 0 3.344.606 4.589 1.795l3.44-3.44C17.952 1.181 15.236 0 12 0 7.307 0 3.267 2.691 1.267 6.638L5.259 9.73c.948-2.847 3.605-4.965 6.741-4.965Z",
+    },
+  ],
+] as const;
+
+export const GoogleLogo = createLogo("GoogleLogo", "0 0 24 24", GOOGLE_LOGO_NODE);

package/src/components/logos/index.ts

@@ -0,0 +1,5 @@
+export { createLogo } from "./create-logo";
+export type { IconSizeToken, LogoNode, LogoProps } from "./types";
+export { GitHubLogo } from "./github-logo";
+export { GoogleLogo } from "./google-logo";
+export { MicrosoftLogo } from "./microsoft-logo";

package/src/components/logos/microsoft-logo.tsx

@@ -0,0 +1,10 @@
+import { createLogo } from "./create-logo";
+
+const MICROSOFT_LOGO_NODE = [
+  ["rect", { x: "2", y: "2", width: "9", height: "9", fill: "#F25022" }],
+  ["rect", { x: "13", y: "2", width: "9", height: "9", fill: "#7FBA00" }],
+  ["rect", { x: "2", y: "13", width: "9", height: "9", fill: "#00A4EF" }],
+  ["rect", { x: "13", y: "13", width: "9", height: "9", fill: "#FFB900" }],
+] as const;
+
+export const MicrosoftLogo = createLogo("MicrosoftLogo", "0 0 24 24", MICROSOFT_LOGO_NODE);

package/src/components/logos/types.ts

@@ -0,0 +1,24 @@
+export type IconSizeToken = "sm" | "md" | "lg" | "xl";
+
+export type LogoStyleObject = Record<string, unknown>;
+
+export type LogoOwnProps = {
+  size?: number | string;
+  title?: string;
+  class?: string;
+  style?: string | LogoStyleObject;
+  iconName?: string;
+};
+
+export type LogoProps = Omit<
+  JSX.IntrinsicElements["svg"],
+  "children" | "class" | "height" | "ref" | "role" | "stroke" | "style" | "title" | "width"
+> &
+  LogoOwnProps & {
+    children?: unknown;
+    ref?: unknown;
+  };
+
+export type LogoNode = ReadonlyArray<
+  readonly [tag: string, attrs: Readonly<Record<string, string>>]
+>;

package/src/components/navbar/index.ts

@@ -0,0 +1,9 @@
+export { NavBrand, Navbar, NavGroup, NavItem } from "./navbar";
+export type {
+  NavBrandProps,
+  NavbarProps,
+  NavGroupProps,
+  NavItemAsChildProps,
+  NavItemProps,
+  NavItemVariant,
+} from "./navbar.types";

package/src/components/navbar/navbar.tsx

@@ -0,0 +1,59 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  NavBrandProps,
+  NavGroupProps,
+  NavItemAsChildProps,
+  NavItemProps,
+  NavbarProps,
+} from "./navbar.types";
+import { classes } from "../_internal/classes";
+
+export function Navbar(props: NavbarProps): JSX.Element {
+  const { children, ref, class: className, ...rest } = props;
+
+  return (
+    <nav {...rest} ref={ref} class={classes("navbar", className)} data-slot="navbar">
+      {children}
+    </nav>
+  );
+}
+
+export function NavBrand(props: NavBrandProps): JSX.Element {
+  const { children, ref, class: className, ...rest } = props;
+
+  return (
+    <div {...rest} ref={ref} class={classes("navbar-brand", className)} data-slot="navbar-brand">
+      {children}
+    </div>
+  );
+}
+
+export function NavGroup(props: NavGroupProps): JSX.Element {
+  const { children, ref, class: className, ...rest } = props;
+
+  return (
+    <div {...rest} ref={ref} class={classes("navbar-group", className)} data-slot="navbar-group">
+      {children}
+    </div>
+  );
+}
+
+export function NavItem(props: NavItemProps): JSX.Element;
+export function NavItem(props: NavItemAsChildProps): JSX.Element;
+export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {
+  const { asChild, children, ref, class: className, variant = "default", ...rest } = props;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("navbar-item", variant === "icon" && "navbar-item-icon", className),
+    "data-slot": "nav-item",
+    "data-variant": variant,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <a {...finalProps}>{children}</a>;
+}

package/src/components/navbar/navbar.types.ts

@@ -0,0 +1,33 @@
+export type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
+  children?: unknown;
+};
+
+export type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  children?: unknown;
+};
+
+export type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  children?: unknown;
+};
+
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+export type NavItemVariant = "default" | "icon";
+
+export type NavItemOwnProps = {
+  children?: unknown;
+  variant?: NavItemVariant;
+};
+
+export type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> &
+  NavItemOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLAnchorElement>;
+  };
+
+export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> &
+  NavItemOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+  };

package/src/components/section/index.ts

@@ -0,0 +1,8 @@
+export { Section } from "./section";
+export { SECTION_A11Y_CONTRACT, type SectionA11yContract } from "./section.a11y";
+export type {
+  SectionProps,
+  SectionOwnProps,
+  SectionElementProps,
+  SectionAsChildProps,
+} from "./section.types";

package/src/components/section/section.a11y.ts

@@ -0,0 +1,12 @@
+export const SECTION_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    size: "data-size" as const,
+  },
+  SLOT_VALUES: {
+    root: "section" as const,
+  },
+} as const;
+
+export type SectionA11yContract = typeof SECTION_A11Y_CONTRACT;

package/src/components/section/section.tsx

@@ -0,0 +1,37 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import {
+  applyBoxLayoutStyles,
+  splitBoxLayoutProps,
+  withBoxLayoutStyle,
+} from "../_internal/box-layout";
+import { serializeResponsiveValueIf } from "../_internal/layout";
+import type { SectionAsChildProps, SectionElementProps } from "./section.types";
+
+function isSectionSizeToken(value: unknown): value is string {
+  return typeof value === "string" && ["1", "2", "3", "4"].includes(value.trim());
+}
+
+export function Section(props: SectionElementProps): JSX.Element;
+export function Section(props: SectionAsChildProps): JSX.Element;
+export function Section(props: SectionElementProps | SectionAsChildProps) {
+  const { asChild, children, size = "3", ref, style: userStyle, ...rest } = props;
+
+  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+  const layoutStyle: Record<string, string | number> = {};
+  applyBoxLayoutStyles(layoutStyle, boxProps);
+
+  const finalProps = mergeProps(passthroughProps, {
+    ref,
+    "data-slot": "section",
+    "data-ak-layout": "true",
+    "data-size": serializeResponsiveValueIf(size, isSectionSizeToken),
+    style: withBoxLayoutStyle(layoutStyle, userStyle),
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <section {...finalProps}>{children}</section>;
+}

package/src/components/section/section.types.ts

@@ -0,0 +1,22 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+
+export type SectionOwnProps = BoxLayoutOwnProps & {
+  size?: LayoutResponsive<"1" | "2" | "3" | "4">;
+  children?: unknown;
+};
+
+export type SectionElementProps = Omit<JSX.IntrinsicElements["section"], "children" | "ref"> &
+  SectionOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type SectionAsChildProps = SectionOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["section"]["style"];
+};
+
+export type SectionProps = SectionElementProps | SectionAsChildProps;

package/src/components/separator/index.ts

@@ -0,0 +1,12 @@
+export { Separator, Separator as Divider } from "./separator";
+export { SEPARATOR_A11Y_CONTRACT, type SeparatorA11yContract } from "./separator.a11y";
+export type {
+  SeparatorProps,
+  SeparatorProps as DividerProps,
+  SeparatorOwnProps,
+  SeparatorOwnProps as DividerOwnProps,
+  SeparatorNativeProps,
+  SeparatorNativeProps as DividerNativeProps,
+  SeparatorAsChildProps,
+  SeparatorAsChildProps as DividerAsChildProps,
+} from "./separator.types";

package/src/components/separator/separator.a11y.ts

@@ -0,0 +1,15 @@
+/**
+ * WAI-ARIA Separator Pattern.
+ */
+
+export const SEPARATOR_A11Y_CONTRACT = {
+  ROLE: "separator" as const,
+  DECORATIVE_ROLE: "presentation" as const,
+  ORIENTATION_ATTRIBUTE: "aria-orientation" as const,
+  DATA_ATTRIBUTES: {
+    orientation: "data-orientation" as const,
+  },
+  DEFAULT_ORIENTATION: "horizontal" as const,
+} as const;
+
+export type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;

package/src/components/separator/separator.tsx

@@ -0,0 +1,23 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import type { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types";
+
+export function Separator(props: SeparatorNativeProps): JSX.Element;
+export function Separator(props: SeparatorAsChildProps): JSX.Element;
+export function Separator(props: SeparatorNativeProps | SeparatorAsChildProps) {
+  const { asChild, children, decorative = false, orientation = "horizontal", ref, ...rest } = props;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "separator",
+    "data-orientation": orientation,
+    role: decorative ? "presentation" : "separator",
+    "aria-orientation": decorative ? undefined : orientation,
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}

package/src/components/separator/separator.types.ts

@@ -0,0 +1,21 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+export type SeparatorOwnProps = {
+  decorative?: boolean;
+  orientation?: "horizontal" | "vertical";
+  children?: unknown;
+};
+
+export type SeparatorNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  SeparatorOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type SeparatorAsChildProps = SeparatorOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type SeparatorProps = SeparatorNativeProps | SeparatorAsChildProps;

package/src/components/sidebar-layout/index.ts

@@ -0,0 +1,6 @@
+export { SidebarLayout } from "./sidebar-layout";
+export {
+  SIDEBAR_LAYOUT_A11Y_CONTRACT,
+  type SidebarLayoutA11yContract,
+} from "./sidebar-layout.a11y";
+export type { SidebarLayoutProps, SidebarPosition } from "./sidebar-layout.types";

package/src/components/sidebar-layout/sidebar-layout.a11y.ts

@@ -0,0 +1,16 @@
+export const SIDEBAR_LAYOUT_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    sidebarPosition: "data-sidebar-position" as const,
+    sidebarWidth: "data-sidebar-width" as const,
+    gap: "data-gap" as const,
+    collapseBelow: "data-collapse-below" as const,
+  },
+  SLOT_VALUES: {
+    root: "sidebar-layout" as const,
+    sidebar: "sidebar" as const,
+    main: "main" as const,
+  },
+} as const;
+
+export type SidebarLayoutA11yContract = typeof SIDEBAR_LAYOUT_A11Y_CONTRACT;

package/src/components/sidebar-layout/sidebar-layout.tsx

@@ -0,0 +1,59 @@
+import { isCssLength, mergeLayoutStyles, serializeValueIf } from "../_internal/layout";
+import type { SidebarLayoutProps } from "./sidebar-layout.types";
+
+function isThemeGapToken(value: unknown): value is string {
+  return typeof value === "string" && ["sm", "md", "lg", "xl"].includes(value.trim());
+}
+
+function isThemeSidebarWidthToken(value: unknown): value is string {
+  return typeof value === "string" && ["sm", "md", "lg", "xl"].includes(value.trim());
+}
+
+export function SidebarLayout(props: SidebarLayoutProps): JSX.Element {
+  const {
+    sidebar,
+    children,
+    sidebarPosition = "start",
+    sidebarWidth,
+    gap,
+    collapseBelow,
+    ref,
+    style: userStyle,
+    ...rest
+  } = props;
+
+  const wrapperStyle: Record<string, string | number> = {};
+  if (isCssLength(gap)) wrapperStyle.gap = gap!;
+
+  const sidebarStyle: Record<string, string | number> = {};
+  if (isCssLength(sidebarWidth)) {
+    sidebarStyle.width = sidebarWidth!;
+    sidebarStyle.flexBasis = sidebarWidth!;
+  }
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      data-slot="sidebar-layout"
+      data-sidebar-position={sidebarPosition}
+      data-sidebar-width={serializeValueIf(sidebarWidth, isThemeSidebarWidthToken)}
+      data-gap={serializeValueIf(gap, isThemeGapToken)}
+      data-collapse-below={collapseBelow}
+      style={mergeLayoutStyles(wrapperStyle, userStyle)}
+    >
+      {[
+        <aside
+          key="sidebar-layout-sidebar"
+          data-slot="sidebar"
+          style={mergeLayoutStyles(sidebarStyle, undefined)}
+        >
+          {sidebar}
+        </aside>,
+        <main key="sidebar-layout-main" data-slot="main">
+          {children}
+        </main>,
+      ]}
+    </div>
+  );
+}

package/src/components/sidebar-layout/sidebar-layout.types.ts

@@ -0,0 +1,22 @@
+import type { Ref } from "@askrjs/askr/foundations";
+
+export type SidebarPosition = "start" | "end";
+
+export type SidebarLayoutProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & {
+  /** Content rendered into the sidebar slot (aside). */
+  sidebar?: unknown;
+  /** Content rendered into the main slot. */
+  children?: unknown;
+  /** Which side the sidebar appears on. Defaults to 'start'. */
+  sidebarPosition?: SidebarPosition;
+  /** CSS width for the sidebar. Applied as inline style only when it is a real CSS length. */
+  sidebarWidth?: string;
+  /** CSS gap between sidebar and main. Applied as inline style only when it is a real CSS length. */
+  gap?: string;
+  /**
+   * Named breakpoint below which the layout collapses to a single column.
+   * Official themes recognize `sm`, `md`, `lg`, and `xl`.
+   */
+  collapseBelow?: string;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export { Skeleton } from "./skeleton";
+export { SKELETON_A11Y_CONTRACT, type SkeletonA11yContract } from "./skeleton.a11y";
+export type { SkeletonOwnProps, SkeletonProps, SkeletonAsChildProps } from "./skeleton.types";

package/src/components/skeleton/skeleton.a11y.ts

@@ -0,0 +1,14 @@
+/**
+ * Accessibility contract for Skeleton.
+ */
+
+export const SKELETON_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+  },
+  MARKER: "data-skeleton" as const,
+  DECORATIVE_ATTRIBUTE: "aria-hidden" as const,
+  DECORATIVE_VALUE: "true" as const,
+} as const;
+
+export type SkeletonA11yContract = typeof SKELETON_A11Y_CONTRACT;

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,21 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import type { SkeletonAsChildProps, SkeletonProps } from "./skeleton.types";
+
+export function Skeleton(props: SkeletonProps): JSX.Element;
+export function Skeleton(props: SkeletonAsChildProps): JSX.Element;
+export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
+  const { asChild, children, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "skeleton",
+    "data-skeleton": "true",
+    "aria-hidden": "true",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}

package/src/components/skeleton/skeleton.types.ts

@@ -0,0 +1,17 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+export type SkeletonOwnProps = {
+  children?: unknown;
+};
+
+export type SkeletonProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  SkeletonOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type SkeletonAsChildProps = SkeletonOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};

package/src/components/spacer/index.ts

@@ -0,0 +1,9 @@
+export { Spacer } from "./spacer";
+export { SPACER_A11Y_CONTRACT, type SpacerA11yContract } from "./spacer.a11y";
+export type {
+  SpacerProps,
+  SpacerOwnProps,
+  SpacerAxis,
+  SpacerNativeProps,
+  SpacerAsChildProps,
+} from "./spacer.types";

package/src/components/spacer/spacer.a11y.ts

@@ -0,0 +1,14 @@
+export const SPACER_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    axis: "data-axis" as const,
+    grow: "data-grow" as const,
+    shrink: "data-shrink" as const,
+    basis: "data-basis" as const,
+  },
+  SLOT_VALUES: {
+    root: "spacer" as const,
+  },
+} as const;
+
+export type SpacerA11yContract = typeof SPACER_A11Y_CONTRACT;