atlas-react-kit 0.1.0 → 0.2.0

package/COMPONENTS.md

@@ -12,21 +12,27 @@ no root component barrel.
 | `calendar`                   | `Calendar`, `CalendarDayButton`; React Day Picker props and `buttonVariant`                                                        |
 | `card`                       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`           |
 | `checkbox`                   | `Checkbox`                                                                                                                         |
+| `combobox`                   | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text                  |
+| `date-picker`                | `DatePickerButton`, `toDate`, `formatLocalDate`; `value` is `Date` or `yyyy-MM-dd`                                                 |
 | `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton` |
 | `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                           |
+| `error-boundary`             | `ErrorBoundary`, `ErrorFallback`; optional `message`; retry resets, reload refreshes the page                                      |
 | `field`                      | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                    |
 | `input`, `textarea`, `label` | `Input`, `Textarea`, `Label`                                                                                                       |
 | `popover`                    | `Popover`, trigger, anchor, content, header, title, description                                                                    |
 | `select`                     | Select, trigger, value, content, group, label, item, separator, scroll buttons; trigger `size`                                     |
 | `separator`, `skeleton`      | `Separator`, `Skeleton`                                                                                                            |
+| `sortable-table-head`        | `SortableTableHead`; `sorted`, `direction` (`asc` \| `desc`), `onClick`; sets `aria-sort`                                          |
 | `sonner`                     | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                         |
 | `table`                      | Table, header, body, footer, row, head, cell, caption                                                                              |
 | `table-body-skeleton`        | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                        |
 | `tabs`                       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`; list `variant` is `default` or `line`             |
 | `toggle`                     | `Toggle`, `toggleVariants`; `variant`, `size`                                                                                      |
 | `toggle-group`               | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`                                                                                |
+| `theme-provider`             | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                    |
 | `form/text-field`            | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints                           |
 | `form/select-field`          | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder; select item children                        |
+| `form/date-picker-field`     | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder                                          |
 | `form/field-error`           | `FieldError`, `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`                                                  |
 | `form/feedback-field`        | `FormFeedbackField`; nullable `message`                                                                                            |
 | `next/tabs-nav-link`         | `TabsNavLink`; Next Link props and required `active` boolean; requires Next.js 16                                                  |
@@ -51,8 +57,28 @@ type TextFieldApi = {
 
 `FormTextField` accepts `field` and `label`; use `multiline` and `rows` for a
 textarea, `inputType` for a specific input, and `showError={false}` to suppress
-error text and invalid styling. `FormSelectField` accepts the same error meta
-shape. `FieldError` accepts either `message` or pre-resolved `text`.
+error text and invalid styling. `FormSelectField` and `FormDatePickerField`
+accept the same error meta shape. `FormDatePickerField` takes a `Date` or
+`yyyy-MM-dd` string and calls `onValueChange` with `Date | undefined`.
+`FieldError` accepts either `message` or pre-resolved `text`.
+
+## Theme
+
+```tsx
+import { ThemeProvider } from "atlas-react-kit/theme-provider"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider storageKey="app-theme" enableShortcut>
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+`ThemeProvider` is a client component and does not import Next.js. It stores the
+choice under `atlas-theme` unless `storageKey` is set. Pass `enableShortcut={false}`
+to disable the `d` dark/light toggle.
 
 ## URL navigation in Next.js
 

package/DESIGN_RULES.md

@@ -35,6 +35,9 @@ Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labell
 `TabsNav` with links and `aria-current="page"` on the active link. The optional
 Next adapter provides `TabsNavLink` with this behavior.
 
-Use `FormTextField`, `FormSelectField`, and `FormFeedbackField` for portable form
-controls, and `FieldError` for field messages. More specialized controls belong
-to the application.
+Use `FormTextField`, `FormSelectField`, `FormDatePickerField`, and
+`FormFeedbackField` for portable form controls, and `FieldError` for field
+messages. `Combobox`, `DatePickerButton`, `ThemeProvider`, `ErrorBoundary`, and
+`SortableTableHead` are first-class kit pieces. Domain data and application
+shells stay with the application: currency or timezone option lists, query-library
+error views, markdown editors, kanban boards, and dashboard widgets.

package/README.md

@@ -4,7 +4,7 @@ Shared React components and a Tailwind theme with square corners, semantic
 colors, and distinct selected states. React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.1.0
+npm install --save-exact atlas-react-kit@0.2.0
 ```
 
 Import components by subpath:
@@ -34,7 +34,8 @@ this example assumes it is one directory below the project root.
 @source "../node_modules/atlas-react-kit/dist";
 ```
 
-The theme includes animations and shared light/dark tokens. Set the `dark` class
+The theme includes animations and shared light/dark tokens. Wrap the tree with
+`ThemeProvider` from `atlas-react-kit/theme-provider`, or set the `dark` class
 on an ancestor to activate dark colors. Supply your own font configuration;
 `font-heading` uses the configured sans font. Application-specific tokens stay
 with the application.
@@ -58,26 +59,19 @@ without compilation and processed by the consuming application's Tailwind build.
 The optional Next.js 16 adapter requires Next only when imported. The package
 does not bundle React.
 
-For the first release, create and validate a packed artifact:
+0.1.0 is already on npm. Later releases use explicit `v<version>` tags matching
+`package.json`; CI runs checks before publishing through npm OIDC. Pushing to
+`main` runs validation only.
+
+If trusted publishing is not yet configured, pack and publish a validated
+artifact with the package owner's npm login:
 
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
+npm publish ./release-artifacts/atlas-react-kit-0.2.0.tgz --access public
 ```
 
-Install that tarball in consumer fixtures and complete their checks. The package
-owner then publishes that exact validated artifact, without rebuilding it:
-
-```sh
-npm publish ./release-artifacts/atlas-react-kit-0.1.0.tgz --access public
-```
-
-The owner then configures npm trusted publishing for this repository's
-`release.yml` workflow on a GitHub-hosted runner.
-Later releases use explicit `v<version>` tags matching `package.json`; CI runs
-checks before publishing through npm OIDC. Pushing to `main` runs validation only.
-Do not push a release tag for the initial manual publication.
-
 Pin an exact package version in consuming applications. Roll back an upgrade by
 restoring the previous version and lockfile. License: MIT; upstream notices are
 preserved in [NOTICE](./NOTICE).

package/dist/combobox.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type ComboboxOption = {
+    value: string;
+    label: string;
+};
+type ComboboxProps = {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    "aria-invalid"?: boolean;
+};
+/**
+ * Searchable single-select built from Button, Popover, and Input.
+ * Options are a plain `{ value, label }` list; domain data stays in the app.
+ */
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, "aria-invalid": ariaInvalid, }: ComboboxProps): React.JSX.Element;
+export {};

package/dist/combobox.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { cn, onInputChange } from "./utils.js";
+/**
+ * Searchable single-select built from Button, Popover, and Input.
+ * Options are a plain `{ value, label }` list; domain data stays in the app.
+ */
+export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText = "No results", disabled, id, className, "aria-invalid": ariaInvalid, }) {
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+    const [highlight, setHighlight] = React.useState(0);
+    const inputRef = React.useRef(null);
+    const listId = React.useId();
+    const selected = options.find((option) => option.value === value);
+    const filtered = React.useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle)
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(needle));
+    }, [options, query]);
+    // Highlight and search reset when the popover opens or closes; options/value
+    // are read for the initial highlight rather than subscribed as deps.
+    React.useEffect(() => {
+        if (!open) {
+            setQuery("");
+            return;
+        }
+        const selectedIndex = options.findIndex((option) => option.value === value);
+        setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
+        const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
+        return () => window.cancelAnimationFrame(frame);
+    }, [open]);
+    const onQueryChange = onInputChange((next) => {
+        setQuery(next);
+        setHighlight(0);
+    });
+    const selectValue = (next) => {
+        onValueChange(next);
+        setOpen(false);
+    };
+    const activeOption = filtered[highlight];
+    const onSearchKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0 ? 0 : Math.min(index + 1, filtered.length - 1));
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - 1, 0));
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            const option = filtered[highlight];
+            if (option)
+                selectValue(option.value);
+        }
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, disabled: disabled, className: cn("h-10 w-full justify-between font-normal tracking-normal normal-case", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption
+                                ? `${listId}-option-${activeOption.value}`
+                                : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((option, index) => {
+                            const isSelected = option.value === value;
+                            const isActive = index === highlight;
+                            return (_jsx("li", { role: "none", children: _jsxs("button", { id: `${listId}-option-${option.value}`, type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && "bg-selected text-selected-foreground", isActive && "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, option.value));
+                        })) })] })] }));
+}

package/dist/date-picker.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type DateLike = Date | string | number | null | undefined;
+/**
+ * Coerce a date-like value to a local `Date`.
+ * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
+ * shift when the runtime timezone is behind UTC.
+ */
+export declare function toDate(value: DateLike): Date | undefined;
+/** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
+export declare function formatLocalDate(date: Date): string;
+type DatePickerButtonProps = {
+    id?: string;
+    value?: DateLike;
+    onChange: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    "aria-invalid"?: boolean;
+};
+/**
+ * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
+ * `Date | undefined`. Square corners follow the shared shape rules.
+ */
+export declare function DatePickerButton({ id, value, onChange, placeholder, disabled, className, "aria-invalid": ariaInvalid, }: DatePickerButtonProps): React.JSX.Element;
+export {};

package/dist/date-picker.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { format, parseISO } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { cn } from "./utils.js";
+/**
+ * Coerce a date-like value to a local `Date`.
+ * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
+ * shift when the runtime timezone is behind UTC.
+ */
+export function toDate(value) {
+    if (value == null || value === "")
+        return undefined;
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? undefined : value;
+    }
+    if (typeof value === "number") {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    const trimmed = value.trim();
+    const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    if (ymd) {
+        const year = Number(ymd[1]);
+        const month = Number(ymd[2]);
+        const day = Number(ymd[3]);
+        const date = new Date(year, month - 1, day);
+        if (date.getFullYear() !== year ||
+            date.getMonth() !== month - 1 ||
+            date.getDate() !== day) {
+            return undefined;
+        }
+        return date;
+    }
+    const parsed = parseISO(trimmed);
+    return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+}
+/** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
+export function formatLocalDate(date) {
+    return format(date, "yyyy-MM-dd");
+}
+/**
+ * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
+ * `Date | undefined`. Square corners follow the shared shape rules.
+ */
+export function DatePickerButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, }) {
+    const [open, setOpen] = React.useState(false);
+    const date = toDate(value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "data-empty": !date, className: cn("h-10 w-full justify-start font-normal tracking-normal normal-case data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), date ? format(date, "PPP") : placeholder] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-none p-0", children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: date, onSelect: (next) => {
+                        onChange(next);
+                        setOpen(false);
+                    } }) })] }));
+}

package/dist/error-boundary.d.ts

@@ -0,0 +1,34 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+type ErrorFallbackProps = {
+    /** User-facing recovery copy. */
+    message?: string;
+    onRetry?: () => void;
+    onReload?: () => void;
+};
+/**
+ * Presentational recovery UI used by `ErrorBoundary`. Exported so the markup
+ * can be tested without throwing during render.
+ */
+export declare function ErrorFallback({ message, onRetry, onReload, }: ErrorFallbackProps): import("react").JSX.Element;
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    /** Overrides the default recovery message. */
+    message?: string;
+    onError?: (error: Error, info: ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    error: Error | null;
+};
+/**
+ * Generic React error boundary with retry (reset) and full-page reload.
+ * Not tied to any data library.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    retry: () => void;
+    reload: () => void;
+    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+export {};

package/dist/error-boundary.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { Button } from "./button.js";
+/**
+ * Presentational recovery UI used by `ErrorBoundary`. Exported so the markup
+ * can be tested without throwing during render.
+ */
+export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, }) {
+    return (_jsxs("div", { role: "alert", "data-slot": "error-boundary", className: "flex flex-col items-center gap-4 rounded-none border border-dashed bg-muted/30 px-4 py-8 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: message }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [onRetry ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: "Try again" })) : null, onReload ? (_jsx(Button, { type: "button", size: "sm", onClick: onReload, children: "Reload" })) : null] })] }));
+}
+/**
+ * Generic React error boundary with retry (reset) and full-page reload.
+ * Not tied to any data library.
+ */
+export class ErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        this.props.onError?.(error, info);
+    }
+    retry = () => {
+        this.setState({ error: null });
+    };
+    reload = () => {
+        window.location.reload();
+    };
+    render() {
+        if (!this.state.error)
+            return this.props.children;
+        return (_jsx(ErrorFallback, { message: this.props.message, onRetry: this.retry, onReload: this.reload }));
+    }
+}

package/dist/form/date-picker-field.d.ts

@@ -0,0 +1,13 @@
+import { type DateLike } from "../date-picker.js";
+import { type FieldMetaState } from "./field-error.js";
+type Props = {
+    value: DateLike;
+    onValueChange: (date: Date | undefined) => void;
+    label: string;
+    meta?: FieldMetaState;
+    placeholder?: string;
+    disabled?: boolean;
+};
+/** Date picker with built-in field error text and invalid styling. */
+export declare function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, }: Props): import("react").JSX.Element;
+export {};

package/dist/form/date-picker-field.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { DatePickerButton } from "../date-picker.js";
+import { Label } from "../label.js";
+import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+/** Date picker with built-in field error text and invalid styling. */
+export function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, }) {
+    const errorText = meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
+    const id = useId();
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(DatePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, "aria-invalid": errorText ? true : undefined }), _jsx(FieldError, { text: errorText })] }));
+}

package/dist/sortable-table-head.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { TableHead } from "./table.js";
+export type SortDirection = "asc" | "desc";
+type SortableTableHeadProps = ComponentProps<typeof TableHead> & {
+    /** Whether this column is the active sort key. */
+    sorted?: boolean;
+    direction?: SortDirection;
+    onClick?: () => void;
+};
+/**
+ * Table header cell with `aria-sort` and a button affordance.
+ * Column keys and comparators stay in the application.
+ */
+export declare function SortableTableHead({ children, sorted, direction, onClick, className, ...props }: SortableTableHeadProps): import("react").JSX.Element;
+export {};

package/dist/sortable-table-head.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon, } from "lucide-react";
+import { TableHead } from "./table.js";
+/**
+ * Table header cell with `aria-sort` and a button affordance.
+ * Column keys and comparators stay in the application.
+ */
+export function SortableTableHead({ children, sorted = false, direction = "asc", onClick, className, ...props }) {
+    const ariaSort = sorted
+        ? direction === "asc"
+            ? "ascending"
+            : "descending"
+        : "none";
+    return (_jsx(TableHead, { "aria-sort": ariaSort, className: className, ...props, children: _jsxs("button", { type: "button", onClick: onClick, className: "inline-flex items-center gap-1 rounded-none hover:text-foreground", children: [children, sorted ? (direction === "asc" ? (_jsx(ChevronUpIcon, { className: "size-3.5", "aria-hidden": "true" })) : (_jsx(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }))) : (_jsx(ChevronsUpDownIcon, { className: "size-3.5 opacity-40", "aria-hidden": "true" }))] }) }));
+}

package/dist/theme-provider.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { useTheme, type ThemeProviderProps as NextThemesProviderProps } from "next-themes";
+export type ThemeProviderProps = NextThemesProviderProps & {
+    /**
+     * When true, pressing `d` toggles dark/light unless focus is in an editable
+     * field. Defaults to true.
+     */
+    enableShortcut?: boolean;
+};
+/**
+ * Class-based theme wrapper around `next-themes`. Does not require Next.js;
+ * pass `storageKey` from the application (`atlas-theme` is the kit default).
+ */
+declare function ThemeProvider({ children, storageKey, attribute, defaultTheme, enableSystem, disableTransitionOnChange, enableShortcut, ...props }: ThemeProviderProps): React.JSX.Element;
+export { ThemeProvider, useTheme };

package/dist/theme-provider.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider, useTheme, } from "next-themes";
+const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return Boolean(target.closest(EDITABLE_SELECTOR));
+}
+/** Listens for the optional `d` shortcut inside an existing theme context. */
+function ThemeShortcut() {
+    const { resolvedTheme, setTheme } = useTheme();
+    React.useEffect(() => {
+        function onKeyDown(event) {
+            if (event.metaKey || event.ctrlKey || event.altKey)
+                return;
+            if (event.key !== "d" && event.key !== "D")
+                return;
+            if (isEditableTarget(event.target))
+                return;
+            event.preventDefault();
+            setTheme(resolvedTheme === "dark" ? "light" : "dark");
+        }
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [resolvedTheme, setTheme]);
+    return null;
+}
+/**
+ * Class-based theme wrapper around `next-themes`. Does not require Next.js;
+ * pass `storageKey` from the application (`atlas-theme` is the kit default).
+ */
+function ThemeProvider({ children, storageKey = "atlas-theme", attribute = "class", defaultTheme = "system", enableSystem = true, disableTransitionOnChange = true, enableShortcut = true, ...props }) {
+    return (_jsxs(NextThemesProvider, { storageKey: storageKey, attribute: attribute, defaultTheme: defaultTheme, enableSystem: enableSystem, disableTransitionOnChange: disableTransitionOnChange, ...props, children: [enableShortcut ? _jsx(ThemeShortcut, {}) : null, children] }));
+}
+export { ThemeProvider, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -39,6 +39,14 @@
       "types": "./dist/checkbox.d.ts",
       "default": "./dist/checkbox.js"
     },
+    "./combobox": {
+      "types": "./dist/combobox.d.ts",
+      "default": "./dist/combobox.js"
+    },
+    "./date-picker": {
+      "types": "./dist/date-picker.d.ts",
+      "default": "./dist/date-picker.js"
+    },
     "./dialog": {
       "types": "./dist/dialog.d.ts",
       "default": "./dist/dialog.js"
@@ -47,6 +55,10 @@
       "types": "./dist/empty-panel.d.ts",
       "default": "./dist/empty-panel.js"
     },
+    "./error-boundary": {
+      "types": "./dist/error-boundary.d.ts",
+      "default": "./dist/error-boundary.js"
+    },
     "./field": {
       "types": "./dist/field.d.ts",
       "default": "./dist/field.js"
@@ -75,6 +87,10 @@
       "types": "./dist/skeleton.d.ts",
       "default": "./dist/skeleton.js"
     },
+    "./sortable-table-head": {
+      "types": "./dist/sortable-table-head.d.ts",
+      "default": "./dist/sortable-table-head.js"
+    },
     "./sonner": {
       "types": "./dist/sonner.d.ts",
       "default": "./dist/sonner.js"
@@ -95,6 +111,10 @@
       "types": "./dist/textarea.d.ts",
       "default": "./dist/textarea.js"
     },
+    "./theme-provider": {
+      "types": "./dist/theme-provider.d.ts",
+      "default": "./dist/theme-provider.js"
+    },
     "./toggle": {
       "types": "./dist/toggle.d.ts",
       "default": "./dist/toggle.js"
@@ -103,6 +123,10 @@
       "types": "./dist/toggle-group.d.ts",
       "default": "./dist/toggle-group.js"
     },
+    "./form/date-picker-field": {
+      "types": "./dist/form/date-picker-field.d.ts",
+      "default": "./dist/form/date-picker-field.js"
+    },
     "./form/field-error": {
       "types": "./dist/form/field-error.d.ts",
       "default": "./dist/form/field-error.js"
@@ -158,6 +182,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "lucide-react": "^1.16.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",