@askrjs/themes 0.0.3 → 0.0.6

package/dist/theme/theme.d.ts

@@ -1,44 +0,0 @@
-import { ButtonNativeProps, PressEvent } from "@askrjs/ui";
-
-//#region src/components/theme/theme.d.ts
-type ThemeName = "light" | "dark" | "system" | (string & {});
-type ThemeOption = {
-  value: ThemeName;
-  label: string;
-};
-type ThemeContextValue = {
-  theme: () => ThemeName;
-  setTheme: (theme: ThemeName) => void;
-  themes: readonly ThemeOption[];
-  storageKey: string;
-};
-type ThemeProviderProps = {
-  children?: unknown;
-  defaultTheme?: ThemeName;
-  themes?: readonly ThemeOption[];
-  storageKey?: string;
-};
-type ThemePickerProps = Omit<JSX.IntrinsicElements["select"], "children" | "value" | "defaultValue" | "onChange"> & {
-  themes?: readonly ThemeOption[];
-  label?: string;
-};
-type ThemeToggleRenderContext = {
-  theme: ThemeName;
-  nextTheme: ThemeName;
-};
-type ThemeToggleProps = Omit<ButtonNativeProps, "children" | "onPress"> & {
-  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);
-  lightIcon?: unknown;
-  darkIcon?: unknown;
-  systemIcon?: unknown;
-  toggleThemes?: readonly ThemeName[];
-  onPress?: (event: PressEvent) => void;
-};
-declare const DEFAULT_THEME_OPTIONS: readonly ThemeOption[];
-declare function useTheme(): ThemeContextValue;
-declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
-declare function ThemePicker(props: ThemePickerProps): JSX.Element;
-declare function ThemeToggle(props: ThemeToggleProps): JSX.Element;
-//#endregion
-export { DEFAULT_THEME_OPTIONS, ThemeContextValue, ThemeName, ThemeOption, ThemePicker, ThemePickerProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ThemeToggleProps, ThemeToggleRenderContext, useTheme };
-//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  toggleThemes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  const currentTheme = themeState();\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {\n  const { theme } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme);\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={theme.theme()}\n      onChange={(event: Event) => {\n        const target = event.currentTarget as HTMLSelectElement;\n        theme.setTheme(target.value as ThemeName);\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    toggleThemes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, toggleThemes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? themedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented) theme.setTheme(nextTheme);\n      }}\n    >\n      {content}\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction syncThemeRoot(themeChoice: ThemeName | null | undefined): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}

package/dist/topbar-layout/index.d.ts

@@ -1,2 +0,0 @@
-import { TopbarLayoutProps } from "./topbar-layout.types.js";
-import { TopbarLayout } from "./topbar-layout.js";

package/dist/topbar-layout/topbar-layout.d.ts

@@ -1,7 +0,0 @@
-import { TopbarLayoutProps } from "./topbar-layout.types.js";
-
-//#region src/components/topbar-layout/topbar-layout.d.ts
-declare function TopbarLayout(props: TopbarLayoutProps): JSX.Element;
-//#endregion
-export { TopbarLayout };
-//# sourceMappingURL=topbar-layout.d.ts.map

package/dist/topbar-layout/topbar-layout.js

@@ -1,37 +0,0 @@
-import { isCssLength, mergeLayoutStyles, serializeValueIf } from "../_internal/layout.js";
-import { jsx } from "@askrjs/askr/jsx-runtime";
-//#region src/components/topbar-layout/topbar-layout.tsx
-function isThemeGapToken(value) {
-	return typeof value === "string" && [
-		"sm",
-		"md",
-		"lg",
-		"xl"
-	].includes(value.trim());
-}
-function TopbarLayout(props) {
-	const { topbar, children, topbarHeight, gap, ref, style: userStyle, ...rest } = props;
-	const wrapperStyle = {};
-	if (isCssLength(gap)) wrapperStyle.gap = gap;
-	const navbarStyle = {};
-	if (isCssLength(topbarHeight)) navbarStyle.height = topbarHeight;
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		ref,
-		"data-slot": "topbar-layout",
-		"data-gap": serializeValueIf(gap, isThemeGapToken),
-		style: mergeLayoutStyles(wrapperStyle, userStyle),
-		children: [/* @__PURE__ */ jsx("header", {
-			"data-slot": "navbar",
-			style: mergeLayoutStyles(navbarStyle, void 0),
-			children: topbar
-		}, "topbar-layout-navbar"), /* @__PURE__ */ jsx("main", {
-			"data-slot": "main",
-			children
-		}, "topbar-layout-main")]
-	});
-}
-//#endregion
-export { TopbarLayout };
-
-//# sourceMappingURL=topbar-layout.js.map

package/dist/topbar-layout/topbar-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"topbar-layout.js","names":[],"sources":["../../src/components/topbar-layout/topbar-layout.tsx"],"sourcesContent":["import { isCssLength, mergeLayoutStyles, serializeValueIf } from \"../_internal/layout\";\nimport type { TopbarLayoutProps } from \"./topbar-layout.types\";\n\nfunction isThemeGapToken(value: unknown): value is string {\n  return typeof value === \"string\" && [\"sm\", \"md\", \"lg\", \"xl\"].includes(value.trim());\n}\n\nexport function TopbarLayout(props: TopbarLayoutProps): JSX.Element {\n  const { topbar, children, topbarHeight, gap, ref, style: userStyle, ...rest } = props;\n\n  const wrapperStyle: Record<string, string | number> = {};\n  if (isCssLength(gap)) wrapperStyle.gap = gap!;\n\n  const navbarStyle: Record<string, string | number> = {};\n  if (isCssLength(topbarHeight)) navbarStyle.height = topbarHeight!;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      data-slot=\"topbar-layout\"\n      data-gap={serializeValueIf(gap, isThemeGapToken)}\n      style={mergeLayoutStyles(wrapperStyle, userStyle)}\n    >\n      {[\n        <header\n          key=\"topbar-layout-navbar\"\n          data-slot=\"navbar\"\n          style={mergeLayoutStyles(navbarStyle, undefined)}\n        >\n          {topbar}\n        </header>,\n        <main key=\"topbar-layout-main\" data-slot=\"main\">\n          {children}\n        </main>,\n      ]}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,gBAAgB,OAAiC;AACxD,QAAO,OAAO,UAAU,YAAY;EAAC;EAAM;EAAM;EAAM;EAAK,CAAC,SAAS,MAAM,MAAM,CAAC;;AAGrF,SAAgB,aAAa,OAAuC;CAClE,MAAM,EAAE,QAAQ,UAAU,cAAc,KAAK,KAAK,OAAO,WAAW,GAAG,SAAS;CAEhF,MAAM,eAAgD,EAAE;AACxD,KAAI,YAAY,IAAI,CAAE,cAAa,MAAM;CAEzC,MAAM,cAA+C,EAAE;AACvD,KAAI,YAAY,aAAa,CAAE,aAAY,SAAS;AAEpD,QACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,YAAU,iBAAiB,KAAK,gBAAgB;EAChD,OAAO,kBAAkB,cAAc,UAAU;YAEhD,CACC,oBAAC,UAAD;GAEE,aAAU;GACV,OAAO,kBAAkB,aAAa,KAAA,EAAU;aAE/C;GACM,EALH,uBAKG,EACT,oBAAC,QAAD;GAA+B,aAAU;GACtC;GACI,EAFG,qBAEH,CACR;EACG,CAAA"}

package/dist/topbar-layout/topbar-layout.types.d.ts

@@ -1,13 +0,0 @@
-import { Ref } from "@askrjs/askr/foundations";
-
-//#region src/components/topbar-layout/topbar-layout.types.d.ts
-type TopbarLayoutProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & {
-  /** Content rendered into the topbar/navbar slot (header). */topbar?: unknown; /** Content rendered into the main slot. */
-  children?: unknown; /** CSS height for the topbar. Applied as inline style only when it is a real CSS length. */
-  topbarHeight?: string; /** CSS gap between topbar and main. Applied as inline style only when it is a real CSS length. */
-  gap?: string;
-  ref?: Ref<HTMLDivElement>;
-};
-//#endregion
-export { TopbarLayoutProps };
-//# sourceMappingURL=topbar-layout.types.d.ts.map

package/src/askr-compat.d.ts

@@ -1,110 +0,0 @@
-// Temporary local type shim for sibling `file:` dependencies.
-// Remove this once `../askr` and `../askr-ui` reliably emit the dist .d.ts
-// files referenced by this package's tsconfig path mappings.
-
-declare module "@askrjs/askr/foundations" {
-  export type Ref<T> = { current: T | null } | ((value: T | null) => void) | null | undefined;
-
-  export type Props = Record<string, unknown> & {
-    children?: unknown;
-    ref?: unknown;
-  };
-
-  export interface JSXElement {
-    $$typeof: symbol;
-    type: string | ((props: Props) => unknown) | symbol;
-    props: Props;
-    key?: string | number | null;
-  }
-
-  export interface SlotProps extends Props {
-    asChild?: boolean;
-  }
-
-  export function Slot(props: SlotProps): JSXElement;
-
-  export function mergeProps<
-    TProps extends Record<string, unknown>,
-    TOverrides extends Record<string, unknown>,
-  >(props: TProps, overrides: TOverrides): TProps & TOverrides;
-
-  export interface PresenceProps extends Props {
-    present?: boolean;
-  }
-
-  export function Presence(props: PresenceProps): JSXElement | null;
-
-  export function composeRefs<T>(...refs: Array<Ref<T>>): Ref<T>;
-}
-
-declare module "@askrjs/askr" {
-  import type { JSXElement } from "@askrjs/askr/foundations";
-
-  export interface State<T> {
-    (): T;
-    set(value: T): void;
-    set(updater: (prev: T) => T): void;
-    [Symbol.iterator](): Iterator<State<T> | State<T>["set"]>;
-  }
-
-  export interface Context<T> {
-    readonly key: symbol;
-    readonly defaultValue: T;
-    readonly Scope: (props: { value: unknown; children?: unknown }) => JSXElement;
-  }
-
-  type ForEachSource<T> = T[] | (() => T[]);
-
-  type ForBaseProps<T> = {
-    each: ForEachSource<T>;
-    fallback?: unknown;
-    children: (item: T, index: () => number) => unknown;
-  };
-
-  type KeyedForProps<T, K extends string | number> = ForBaseProps<T> & {
-    by: (item: T, index: number) => K;
-    byIndex?: never;
-  };
-
-  type IndexedForProps<T> = ForBaseProps<T> & {
-    by?: never;
-    byIndex: true;
-  };
-
-  export type ForProps<T, K extends string | number = string | number> =
-    | KeyedForProps<T, K>
-    | IndexedForProps<T>;
-
-  export function state<T>(initialValue: T): State<T>;
-  export function defineContext<T>(defaultValue: T): Context<T>;
-  export function readContext<T>(context: Context<T>): T;
-  export const For: <T, K extends string | number = string | number>(
-    props: ForProps<T, K>,
-  ) => JSXElement;
-}
-
-declare module "@askrjs/askr/jsx-runtime" {
-  import type { JSXElement } from "@askrjs/askr/foundations";
-
-  export const Fragment: symbol;
-  export function jsx(
-    type: unknown,
-    props: Record<string, unknown>,
-    key?: string | number,
-  ): JSXElement;
-  export const jsxs: typeof jsx;
-}
-
-declare module "@askrjs/askr/jsx-dev-runtime" {
-  import type { JSXElement } from "@askrjs/askr/foundations";
-
-  export const Fragment: symbol;
-  export function jsxDEV(
-    type: unknown,
-    props: Record<string, unknown>,
-    key?: string | number,
-    isStaticChildren?: boolean,
-    source?: unknown,
-    self?: unknown,
-  ): JSXElement;
-}

package/src/askr-router.d.ts

@@ -1,16 +0,0 @@
-declare module "@askrjs/askr/router" {
-  export type LinkProps = Omit<
-    JSX.IntrinsicElements["a"],
-    "children" | "href" | "class" | "rel" | "target" | "aria-current" | "aria-label"
-  > & {
-    href: string;
-    class?: string;
-    children?: unknown;
-    rel?: string;
-    target?: string;
-    "aria-current"?: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    "aria-label"?: string;
-  };
-
-  export function Link(props: LinkProps): JSX.Element;
-}

package/src/components/accessible-icon/accessible-icon.tsx

@@ -1,18 +0,0 @@
-import type { AccessibleIconProps } from "./accessible-icon.types";
-
-export function AccessibleIcon(props: AccessibleIconProps): JSX.Element {
-  const { children, label, decorative = label ? false : true } = props;
-
-  return (
-    <span
-      data-slot="accessible-icon"
-      data-decorative={decorative ? "true" : undefined}
-      role={decorative ? undefined : "img"}
-      aria-hidden={decorative ? "true" : undefined}
-      aria-label={decorative ? undefined : label}
-    >
-      {children}
-      {!decorative && label ? <span class="sr-only">{label}</span> : null}
-    </span>
-  );
-}

package/src/components/accessible-icon/accessible-icon.types.ts

@@ -1,5 +0,0 @@
-export type AccessibleIconProps = {
-  children?: unknown;
-  label?: string;
-  decorative?: boolean;
-};

package/src/components/accessible-icon/index.ts

@@ -1,2 +0,0 @@
-export { AccessibleIcon } from "./accessible-icon";
-export type { AccessibleIconProps } from "./accessible-icon.types";

package/src/components/grid/grid.a11y.ts

@@ -1,22 +0,0 @@
-export const GRID_A11Y_CONTRACT = {
-  DATA_ATTRIBUTES: {
-    slot: "data-slot" as const,
-    layout: "data-ak-layout" as const,
-    areas: "data-areas" as const,
-    columns: "data-columns" as const,
-    rows: "data-rows" as const,
-    flow: "data-flow" as const,
-    minItemWidth: "data-min-item-width" as const,
-    gap: "data-gap" as const,
-    gapX: "data-gap-x" as const,
-    gapY: "data-gap-y" as const,
-    autoFit: "data-auto-fit" as const,
-    align: "data-align" as const,
-    justify: "data-justify" as const,
-  },
-  SLOT_VALUES: {
-    root: "grid" as const,
-  },
-} as const;
-
-export type GridA11yContract = typeof GRID_A11Y_CONTRACT;

package/src/components/grid/grid.tsx

@@ -1,172 +0,0 @@
-import { For } from "@askrjs/askr";
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import {
-  applyBoxLayoutStyles,
-  splitBoxLayoutProps,
-  withBoxLayoutStyle,
-} from "../_internal/box-layout";
-import { isJsxElement, toChildArray } from "../_internal/jsx";
-import {
-  isResponsiveValue,
-  resolveAlignValue,
-  resolveGridTrackValue,
-  resolveJustifyValue,
-  resolveSpaceValue,
-  serializeResponsiveValueIf,
-  serializeValueIf,
-  setResponsiveStyleVar,
-} from "../_internal/layout";
-import type { GridAsChildProps, GridDivProps, GridSpanProps } from "./grid.types";
-
-const SPACE_TOKENS = new Set([
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl",
-]);
-
-function isResponsiveObject(value: unknown): boolean {
-  return value !== null && typeof value === "object" && !Array.isArray(value);
-}
-
-function isCssCoveredSpaceValue(value: unknown): value is string {
-  return typeof value === "string" && SPACE_TOKENS.has(value.trim());
-}
-
-function isCssCoveredAlignValue(value: unknown): value is string {
-  return (
-    typeof value === "string" &&
-    ["start", "end", "center", "stretch", "baseline"].includes(value.trim())
-  );
-}
-
-function isCssCoveredJustifyValue(value: unknown): value is string {
-  return typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim());
-}
-
-function isCssCoveredGridColumnValue(value: unknown): boolean {
-  return typeof value === "number" || (typeof value === "string" && /^\d+$/.test(value.trim()));
-}
-
-function isCssCoveredAutoFitValue(value: unknown): value is boolean {
-  return typeof value === "boolean";
-}
-
-function serializeStaticThemeValue<T>(
-  value: T | Partial<Record<"initial" | "sm" | "md" | "lg" | "xl", T>> | undefined,
-  predicate: (value: T) => boolean,
-): string | undefined {
-  if (isResponsiveValue(value)) return undefined;
-  return serializeResponsiveValueIf(value, predicate);
-}
-
-function resolveCompatibilityGridTemplate(
-  minItemWidth: string | undefined,
-  autoFit: boolean | undefined,
-): string | undefined {
-  if (!minItemWidth) return undefined;
-  const fitKeyword = autoFit === false ? "auto-fill" : "auto-fit";
-  return `repeat(${fitKeyword}, minmax(${minItemWidth}, 1fr))`;
-}
-
-export function Grid(props: GridDivProps): JSX.Element;
-export function Grid(props: GridSpanProps): JSX.Element;
-export function Grid(props: GridAsChildProps): JSX.Element;
-export function Grid(props: GridDivProps | GridSpanProps | GridAsChildProps) {
-  const as = "as" in props ? props.as : "div";
-  const {
-    asChild,
-    children,
-    areas,
-    columns,
-    rows,
-    flow,
-    gap,
-    gapX,
-    gapY,
-    align,
-    justify,
-    minItemWidth,
-    autoFit,
-    ref,
-    style: userStyle,
-    ...rest
-  } = props;
-
-  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
-  const layoutStyle: Record<string, string | number> = {};
-  applyBoxLayoutStyles(layoutStyle, boxProps);
-
-  if (boxProps.display !== undefined) {
-    setResponsiveStyleVar(layoutStyle, "display", boxProps.display, (value) => value);
-  }
-  setResponsiveStyleVar(layoutStyle, "grid-template-areas", areas, (value) => value);
-  setResponsiveStyleVar(
-    layoutStyle,
-    "grid-template-columns",
-    columns ?? resolveCompatibilityGridTemplate(minItemWidth, autoFit),
-    resolveGridTrackValue,
-  );
-  setResponsiveStyleVar(layoutStyle, "grid-template-rows", rows, resolveGridTrackValue);
-  setResponsiveStyleVar(layoutStyle, "grid-auto-flow", flow, (value) => value);
-  if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) {
-    setResponsiveStyleVar(layoutStyle, "gap", gap, resolveSpaceValue);
-  }
-  if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) {
-    setResponsiveStyleVar(layoutStyle, "column-gap", gapX, resolveSpaceValue);
-  }
-  if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) {
-    setResponsiveStyleVar(layoutStyle, "row-gap", gapY, resolveSpaceValue);
-  }
-  if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) {
-    setResponsiveStyleVar(layoutStyle, "align-items", align, resolveAlignValue);
-  }
-  if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) {
-    setResponsiveStyleVar(layoutStyle, "justify-content", justify, resolveJustifyValue);
-  }
-
-  const finalProps = mergeProps(passthroughProps, {
-    ref,
-    "data-slot": "grid",
-    "data-ak-layout": "true",
-    "data-columns": serializeStaticThemeValue(columns, isCssCoveredGridColumnValue),
-    "data-gap": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),
-    "data-gap-x": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),
-    "data-gap-y": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),
-    "data-align": serializeStaticThemeValue(align, isCssCoveredAlignValue),
-    "data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
-    "data-auto-fit": serializeValueIf(autoFit, isCssCoveredAutoFitValue),
-    style: withBoxLayoutStyle(layoutStyle, userStyle),
-  });
-  const keyedChildren = (
-    <For
-      each={() => toChildArray(children)}
-      by={(child, index) => (isJsxElement(child) && child.key != null ? child.key : index)}
-    >
-      {(child) => child as never}
-    </For>
-  );
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
-  }
-
-  if (as === "span") {
-    return <span {...finalProps}>{keyedChildren}</span>;
-  }
-
-  return <div {...finalProps}>{keyedChildren}</div>;
-}

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

@@ -1,45 +0,0 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
-
-export type GridOwnProps = BoxLayoutOwnProps & {
-  areas?: LayoutResponsive<string>;
-  columns?: LayoutResponsive<number | string>;
-  rows?: LayoutResponsive<number | string>;
-  flow?: LayoutResponsive<string>;
-  gap?: LayoutResponsive<string | number>;
-  gapX?: LayoutResponsive<string | number>;
-  gapY?: LayoutResponsive<string | number>;
-  align?: LayoutResponsive<string>;
-  justify?: LayoutResponsive<string>;
-  /** Compatibility helper for auto-fit grids. */
-  minItemWidth?: string;
-  /** Compatibility helper for auto-fit grids. */
-  autoFit?: boolean;
-  as?: "div" | "span";
-  children?: unknown;
-};
-
-export type GridNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  GridOwnProps & {
-    as?: "div";
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type GridSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
-  GridOwnProps & {
-    as: "span";
-    asChild?: false;
-    ref?: Ref<HTMLSpanElement>;
-  };
-
-export type GridAsChildProps = Omit<GridOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["div"]["style"];
-};
-
-export type GridDivProps = GridNativeProps;
-
-export type GridProps = GridDivProps | GridSpanProps | GridAsChildProps;

package/src/components/grid/index.ts

@@ -1,10 +0,0 @@
-export { Grid } from "./grid";
-export { GRID_A11Y_CONTRACT, type GridA11yContract } from "./grid.a11y";
-export type {
-  GridProps,
-  GridOwnProps,
-  GridNativeProps,
-  GridDivProps,
-  GridSpanProps,
-  GridAsChildProps,
-} from "./grid.types";

package/src/components/index.ts

@@ -1,108 +0,0 @@
-import "../themes/default/index.css";
-
-// Theme controls
-export { Button } from "@askrjs/ui";
-export type {
-  ButtonAsChildProps,
-  ButtonNativeProps,
-  ButtonOwnProps,
-  ButtonProps,
-} from "@askrjs/ui";
-export { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "./theme";
-export type {
-  ThemeContextValue,
-  ThemeName,
-  ThemeOption,
-  ThemePickerProps,
-  ThemeProviderProps,
-  ThemeToggleProps,
-  ThemeToggleRenderContext,
-} from "./theme";
-
-// Visual primitives
-export { Badge } from "./badge";
-export type { BadgeProps } from "./badge";
-export { AccessibleIcon } from "./accessible-icon";
-export type { AccessibleIconProps } from "./accessible-icon";
-export { AspectRatio } from "./aspect-ratio";
-export type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio";
-export { Box } from "./box";
-export type { BoxProps } from "./box";
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
-export type {
-  CardContentProps,
-  CardDescriptionProps,
-  CardFooterProps,
-  CardHeaderProps,
-  CardProps,
-  CardTitleProps,
-} from "./card";
-export { Container } from "./container";
-export type { ContainerProps, ContainerVariant } from "./container";
-export { Flex } from "./flex";
-export type { FlexProps } from "./flex";
-export { Grid } from "./grid";
-export type { GridProps } from "./grid";
-export { Inline } from "./inline";
-export type { InlineProps } from "./inline";
-export { GitHubLogo, GoogleLogo, MicrosoftLogo } from "./logos";
-export type { LogoProps } from "./logos";
-export { Section } from "./section";
-export type { SectionProps } from "./section";
-export { Divider, Separator } from "./separator";
-export type { DividerProps, SeparatorProps } from "./separator";
-export { Skeleton } from "./skeleton";
-export type { SkeletonProps } from "./skeleton";
-export { Spacer } from "./spacer";
-export type { SpacerProps } from "./spacer";
-export { Stack } from "./stack";
-export type { StackProps } from "./stack";
-
-// Theme-owned wrappers
-export {
-  Breadcrumb,
-  BreadcrumbCurrent,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "./breadcrumb";
-export type {
-  BreadcrumbAsChildProps,
-  BreadcrumbCurrentAsChildProps,
-  BreadcrumbCurrentProps,
-  BreadcrumbItemAsChildProps,
-  BreadcrumbItemProps,
-  BreadcrumbLinkAsChildProps,
-  BreadcrumbLinkProps,
-  BreadcrumbListAsChildProps,
-  BreadcrumbListProps,
-  BreadcrumbOwnProps,
-  BreadcrumbProps,
-  BreadcrumbSeparatorAsChildProps,
-  BreadcrumbSeparatorProps,
-} from "./breadcrumb";
-export { Spinner } from "./spinner";
-export type { SpinnerOwnProps, SpinnerProps } from "./spinner";
-
-// Empty state
-export { EmptyState } from "./empty-state";
-export type { EmptyStateHeadingTag, EmptyStateProps } from "./empty-state";
-
-// Shell / chrome
-export { Header } from "./header";
-export type { HeaderPosition, HeaderProps } from "./header";
-export { NavBrand, Navbar, NavGroup, NavItem, NavLink } from "./navbar";
-export type {
-  NavBrandProps,
-  NavbarProps,
-  NavGroupProps,
-  NavItemAsChildProps,
-  NavItemProps,
-  NavItemVariant,
-  NavLinkProps,
-} from "./navbar";
-export { SidebarLayout } from "./sidebar-layout";
-export type { SidebarLayoutProps, SidebarPosition } from "./sidebar-layout";
-export { TopbarLayout } from "./topbar-layout";
-export type { TopbarLayoutProps } from "./topbar-layout";