@askrjs/themes 0.0.9 → 0.0.11

package/src/components/spinner/spinner.tsx

@@ -1,9 +1,10 @@
-import { ProgressCircle } from "@askrjs/ui";
+import { ProgressCircle, ProgressCircleIndicator } from "@askrjs/ui";
 import type { SpinnerProps } from "./spinner.types";
 
 export function Spinner(props: SpinnerProps): JSX.Element {
   const {
     label,
+    size,
     "aria-label": ariaLabel,
     ...rest
   } = props as SpinnerProps & {
@@ -14,8 +15,12 @@ export function Spinner(props: SpinnerProps): JSX.Element {
     <ProgressCircle
       {...rest}
       aria-label={ariaLabel ?? label ?? "Loading"}
+      data-spinner="true"
+      data-size={size && size !== "md" ? size : undefined}
       value={null}
       getValueLabel={() => label ?? "Loading"}
-    />
+    >
+      <ProgressCircleIndicator />
+    </ProgressCircle>
   );
 }

package/src/components/spinner/spinner.types.ts

@@ -1,7 +1,10 @@
 import type { ProgressCircleProps } from "@askrjs/ui";
 
+export type SpinnerSize = "sm" | "md" | "lg";
+
 export type SpinnerOwnProps = Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
   label?: string;
+  size?: SpinnerSize;
 };
 
 export type SpinnerProps = SpinnerOwnProps;

package/src/components/stat/index.ts

@@ -0,0 +1,2 @@
+export { Stat, StatDescription, StatLabel, StatValue } from "./stat";
+export type * from "./stat.types";

package/src/components/stat/stat.tsx

@@ -0,0 +1,47 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types";
+
+export function Stat(props: StatProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat", className),
+    "data-slot": "stat",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function StatLabel(props: StatLabelProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-label", className),
+    "data-slot": "stat-label",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function StatValue(props: StatValueProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-value", className),
+    "data-slot": "stat-value",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function StatDescription(props: StatDescriptionProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-description", className),
+    "data-slot": "stat-description",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}

package/src/components/stat/stat.types.ts

@@ -0,0 +1,24 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
+
+export type StatProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type StatLabelProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+
+export type StatValueProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+
+export type StatDescriptionProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};

package/src/components/text/index.ts

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

package/src/components/text/text.tsx

@@ -0,0 +1,39 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type { TextElement, TextProps } from "./text.types";
+
+const DEFAULT_ELEMENT = "p";
+
+export function Text<TElement extends TextElement = "p">(props: TextProps<TElement>): JSX.Element {
+  const {
+    as,
+    size = "md",
+    tone = "default",
+    weight,
+    font,
+    numeric,
+    wrap,
+    truncate,
+    children,
+    class: classProp,
+    className,
+    ref,
+    ...rest
+  } = props as TextProps<TextElement> & { class?: unknown; className?: unknown };
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("text", classProp, className),
+    "data-slot": "text",
+    "data-size": size,
+    "data-tone": tone,
+    "data-weight": weight,
+    "data-font": font && font !== "body" ? font : undefined,
+    "data-numeric": numeric && numeric !== "normal" ? numeric : undefined,
+    "data-wrap": wrap,
+    "data-truncate": truncate ? "true" : undefined,
+  });
+
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
+}

package/src/components/text/text.types.ts

@@ -0,0 +1,35 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type TextElement = "p" | "span" | "div" | "strong";
+export type TextSize = "sm" | "md" | "lg";
+export type TextTone =
+  | "default"
+  | "muted"
+  | "subtle"
+  | "inverse"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextFont = "body" | "mono";
+export type TextNumeric = "normal" | "tabular";
+export type TextWrap = "normal" | "nowrap" | "anywhere";
+
+type TextIntrinsicProps<TElement extends TextElement> = Omit<
+  JSX.IntrinsicElements[TElement],
+  "children" | "ref"
+>;
+
+export type TextProps<TElement extends TextElement = "p"> = TextIntrinsicProps<TElement> & {
+  as?: TElement;
+  size?: TextSize;
+  tone?: TextTone;
+  weight?: TextWeight;
+  font?: TextFont;
+  numeric?: TextNumeric;
+  wrap?: TextWrap;
+  truncate?: boolean;
+  children?: unknown;
+  ref?: Ref<HTMLElement>;
+};

package/src/components/theme/theme.tsx

@@ -65,6 +65,8 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 ];
 
 const DEFAULT_STORAGE_KEY = "askr-theme";
+const STATIC_CHILDREN = Symbol.for("askr.static-children");
+const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
 // Passive mount sync should not overwrite a newer user/provider-initiated change.
 let rootThemeRevision = 0;
 let explicitRootThemeOwner: symbol | undefined;
@@ -224,7 +226,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   } = props;
 
   const currentTheme = theme.theme();
-  const nextTheme = getNextTheme(currentTheme, themes);
+  const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
@@ -232,9 +234,15 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     darkIcon,
     systemIcon,
   });
-  const renderedIcon = cloneThemeToggleIcon(themedIcon);
+  const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);
+  const renderedIconSlots =
+    renderThemeToggleIconSlots(currentTheme, {
+      lightIcon,
+      darkIcon,
+      systemIcon,
+    }) ?? renderedIcon;
   const content =
-    typeof children === "function" ? children(renderContext) : (children ?? renderedIcon);
+    typeof children === "function" ? children(renderContext) : (children ?? renderedIconSlots);
 
   return (
     <Button
@@ -255,12 +263,29 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   );
 }
 
-function getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {
+function getNextTheme(
+  currentTheme: ThemeName,
+  themes: readonly ThemeName[],
+  resolvedSystemTheme: "light" | "dark" = "light",
+): ThemeName {
   if (themes.length === 0) return currentTheme;
   const index = themes.indexOf(currentTheme);
+  if (index < 0 && currentTheme === "system") {
+    if (themes.includes("light") && themes.includes("dark")) {
+      return resolvedSystemTheme === "dark" ? "light" : "dark";
+    }
+  }
   return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;
 }
 
+function getResolvedSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
 function getThemeIcon(
   theme: ThemeName,
   icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,
@@ -279,6 +304,37 @@ export function resolveThemeToggleIcon(
   return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
 
+function renderThemeToggleIconSlots(
+  theme: ThemeName,
+  icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,
+): unknown {
+  if (getThemeIcon(theme, icons) === undefined) {
+    return undefined;
+  }
+
+  const slots = [
+    ["light", icons.lightIcon],
+    ["dark", icons.darkIcon],
+    ["system", icons.systemIcon],
+  ] as const;
+  const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);
+
+  if (availableSlots.length <= 1) {
+    return undefined;
+  }
+
+  return availableSlots.map(([slotTheme, icon]) => (
+    <span
+      key={slotTheme}
+      data-slot="theme-toggle-icon"
+      data-theme-toggle-icon={slotTheme}
+      hidden={slotTheme === theme ? undefined : true}
+    >
+      {cloneThemeToggleIcon(icon, slotTheme)}
+    </span>
+  ));
+}
+
 function isJSXElement(value: unknown): value is JSXElement {
   return (
     typeof value === "object" &&
@@ -289,18 +345,36 @@ function isJSXElement(value: unknown): value is JSXElement {
   );
 }
 
-function cloneThemeToggleIcon(icon: unknown): unknown {
+function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
+  if (Array.isArray(icon)) {
+    const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));
+    if ((icon as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {
+      Object.defineProperty(clonedChildren, STATIC_CHILDREN, {
+        value: true,
+        configurable: true,
+      });
+    }
+    return clonedChildren;
+  }
+
   if (!isJSXElement(icon)) return icon;
 
   const props = icon.props as Record<string, unknown> | undefined;
-  if (!props || Object.keys(props).length === 0) {
-    return icon;
+  const clonedProps = props ? { ...props } : {};
+
+  if ("children" in clonedProps) {
+    clonedProps.children = cloneThemeToggleIcon(clonedProps.children);
   }
 
-  return {
+  const iconKey = (icon.key ?? key ?? null) as string | number | null;
+  const clonedIcon = {
     ...icon,
-    props: { ...props },
+    key: iconKey,
+    props: clonedProps,
   };
+
+  delete (clonedIcon as Record<symbol, unknown>)[STATIC_CHILD_SLOTS_CACHE];
+  return clonedIcon;
 }
 
 function syncThemeRoot(

package/src/components/toolbar/index.ts

@@ -0,0 +1,2 @@
+export { Toolbar } from "./toolbar";
+export type { ToolbarProps } from "./toolbar.types";

package/src/components/toolbar/toolbar.tsx

@@ -0,0 +1,24 @@
+import { Block } from "../block";
+import type { ToolbarProps } from "./toolbar.types";
+
+export function Toolbar(props: ToolbarProps): JSX.Element {
+  const { title, actions, ...rest } = props;
+
+  return (
+    <Block
+      rowFrom="md"
+      align={{ base: "start", md: "center" }}
+      justify="between"
+      gap="md"
+      {...rest}
+      data-slot="toolbar"
+    >
+      <h2 data-slot="toolbar-title">{title}</h2>
+      {actions !== undefined ? (
+        <Block direction="row" gap="sm" data-slot="toolbar-actions">
+          {actions}
+        </Block>
+      ) : null}
+    </Block>
+  );
+}

package/src/components/toolbar/toolbar.types.ts

@@ -0,0 +1,6 @@
+import type { BlockDivProps } from "../block";
+
+export type ToolbarProps = BlockDivProps & {
+  title: unknown;
+  actions?: unknown;
+};

package/src/components.ts

@@ -0,0 +1,289 @@
+import "./themes/default/index.css";
+
+export {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  type ButtonAsChildElement,
+  type ButtonAsChildProps,
+  type ButtonNativeProps,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type ButtonWidth,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DebouncedInput,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Dropdown as ContextMenu,
+  DropdownGroup as ContextMenuGroup,
+  DropdownItem as ContextMenuItem,
+  DropdownLabel as ContextMenuLabel,
+  DropdownPortal as ContextMenuPortal,
+  DropdownSeparator as ContextMenuSeparator,
+  DropdownTrigger as ContextMenuTrigger,
+  Dialog as Drawer,
+  DialogClose as DrawerClose,
+  DialogContent as DrawerContent,
+  DialogDescription as DrawerDescription,
+  DialogOverlay as DrawerOverlay,
+  DialogPortal as DrawerPortal,
+  DialogTitle as DrawerTitle,
+  DialogTrigger as DrawerTrigger,
+  Dropdown,
+  Dropdown as DropdownMenu,
+  DropdownGroup,
+  DropdownGroup as DropdownMenuGroup,
+  DropdownItem,
+  type DropdownItemVariant,
+  DropdownItem as DropdownMenuItem,
+  DropdownLabel,
+  DropdownLabel as DropdownMenuLabel,
+  DropdownPortal,
+  DropdownPortal as DropdownMenuPortal,
+  DropdownSeparator,
+  DropdownSeparator as DropdownMenuSeparator,
+  DropdownTrigger,
+  type DropdownTriggerSize,
+  type DropdownTriggerVariant,
+  DropdownTrigger as DropdownMenuTrigger,
+  Form,
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardTrigger,
+  Input,
+  Label,
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  type PopoverContentWidth,
+  PopoverPortal,
+  PopoverTrigger,
+  Progress,
+  ProgressCircle,
+  ProgressCircleIndicator,
+  ProgressIndicator,
+  RadioGroup,
+  RadioGroupItem,
+  ScrollArea,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemText,
+  SelectLabel,
+  SelectPortal,
+  SelectSeparator,
+  SelectTrigger,
+  type SelectTriggerSize,
+  SelectValue,
+  Dialog as Sheet,
+  DialogClose as SheetClose,
+  DialogOverlay as SheetOverlay,
+  DialogPortal as SheetPortal,
+  DialogTrigger as SheetTrigger,
+  Slider,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFoot,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Textarea,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+  VirtualList,
+  type VirtualListApi,
+  type VirtualListAsChildProps,
+  type VirtualListProps,
+  type VirtualListRowComponent,
+  type VirtualListRowElement,
+  type VirtualListRowComponentProps,
+  type VirtualListState,
+  type VirtualListViewport,
+  VirtualTable,
+  type VirtualTableApi,
+  type VirtualTableAsChildProps,
+  type VirtualTableCellComponent,
+  type VirtualTableCellElement,
+  type VirtualTableCellComponentProps,
+  type VirtualTableColumn,
+  type VirtualTableProps,
+  type VirtualTableState,
+  type VirtualTableViewport,
+  type VirtualTableWidth,
+  VisuallyHidden,
+} from "@askrjs/ui";
+
+export { Alert } from "./components/alert";
+export { AspectRatio } from "./components/aspect-ratio";
+export { Badge } from "./components/badge";
+export { Block } from "./components/block";
+export { Brand, BrandLabel, BrandMark } from "./components/brand";
+export { ButtonGroup } from "./components/button-group";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/card";
+export { Close } from "./components/close";
+export { Container } from "./components/container";
+export { EmptyState } from "./components/empty-state";
+export { Field, FieldError, FieldHint } from "./components/field";
+export {
+  Footer,
+  FooterContent,
+  FooterDescription,
+  FooterLink,
+  FooterLinks,
+  FooterSection,
+  FooterTitle,
+} from "./components/footer";
+export { Grid } from "./components/grid";
+export { Header } from "./components/header";
+export { InputGroup, InputGroupText } from "./components/input-group";
+export { Main } from "./components/main";
+export { Aside } from "./components/aside";
+export {
+  DropdownContent,
+  DropdownContent as ContextMenuContent,
+  DropdownContent as DropdownMenuContent,
+} from "./components/overlays/dropdown-content";
+export {
+  Navbar,
+  Navbar as Nav,
+  NavBrand,
+  NavDropdown,
+  NavGroup,
+  NavItem,
+  NavLink,
+} from "./components/navbar";
+export { Page } from "./components/page";
+export { PageHeader } from "./components/page-header";
+export { Pill, Pills, Tab, Tabs } from "./components/nav";
+export { Section } from "./components/section";
+export { Separator } from "./components/separator";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "./components/sidebar";
+export { Skeleton } from "./components/skeleton";
+export { Spinner } from "./components/spinner";
+export { Stat, StatDescription, StatLabel, StatValue } from "./components/stat";
+export { Text } from "./components/text";
+export { Toolbar } from "./components/toolbar";
+export {
+  CAT_THEME_NAMES,
+  CAT_THEME_OPTIONS,
+  DEFAULT_THEME_OPTIONS,
+  ThemePicker,
+  ThemeProvider,
+  ThemeToggle,
+  useTheme,
+} from "./components/theme";
+export * from "./components/catalog";
+
+export type * from "./components/alert";
+export type * from "./components/aspect-ratio";
+export type * from "./components/badge";
+export type * from "./components/block";
+export type * from "./components/button-group";
+export type * from "./components/card";
+export type * from "./components/close";
+export type * from "./components/container";
+export type * from "./components/empty-state";
+export type * from "./components/field";
+export type * from "./components/footer";
+export type * from "./components/header";
+export type * from "./components/input-group";
+export type * from "./components/main";
+export type * from "./components/aside";
+export type * from "./components/navbar";
+export type * from "./components/page";
+export type * from "./components/page-header";
+export type * from "./components/nav";
+export type * from "./components/section";
+export type * from "./components/separator";
+export type * from "./components/sidebar";
+export type * from "./components/skeleton";
+export type * from "./components/spinner";
+export type * from "./components/toolbar";
+export type * from "./components/theme";
+export type * from "./components/catalog";