atlas-react-kit 0.1.0

package/COMPONENTS.md

@@ -0,0 +1,80 @@
+# Component guide
+
+Import each module from `atlas-react-kit/<subpath>`. Primitives preserve the
+underlying element or Radix props, including `className`, alongside their options.
+Form helpers and `TableBodySkeleton` accept only their documented props. There is
+no root component barrel.
+
+| Subpath                      | Main exports and options                                                                                                           |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `button`                     | `Button`, `buttonVariants`; `variant`, `size`, `asChild`                                                                           |
+| `badge`                      | `Badge`, `badgeVariants`; `variant`, `tone`, `asChild`                                                                             |
+| `calendar`                   | `Calendar`, `CalendarDayButton`; React Day Picker props and `buttonVariant`                                                        |
+| `card`                       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`           |
+| `checkbox`                   | `Checkbox`                                                                                                                         |
+| `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton` |
+| `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                           |
+| `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`                                                                                                            |
+| `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`                                                                                |
+| `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/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                                                  |
+| `utils`                      | `cn`, `onInputChange`                                                                                                              |
+| `theme.css`                  | Tailwind 4 theme; installation in [README](./README.md)                                                                            |
+
+## Forms
+
+`TextFieldApi` is a structural interface, with no form library dependency:
+
+```ts
+type TextFieldApi = {
+  name: string
+  state: {
+    value: string
+    meta: { errors: (string | { message?: string } | undefined)[] }
+  }
+  handleChange: (value: string) => void
+  handleBlur: () => void
+}
+```
+
+`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`.
+
+## URL navigation in Next.js
+
+```tsx
+import { TabsNav } from "atlas-react-kit/tabs"
+import { TabsNavLink } from "atlas-react-kit/next/tabs-nav-link"
+
+export function ViewSwitcher({ view }: { view: string }) {
+  return (
+    <TabsNav aria-label="Items view">
+      <TabsNavLink href="?view=list" active={view === "list"}>
+        List
+      </TabsNavLink>
+      <TabsNavLink href="?view=board" active={view === "board"}>
+        Board
+      </TabsNavLink>
+    </TabsNav>
+  )
+}
+```
+
+Outside Next, compose `TabsNav` with your own links and active-page semantics.
+Hook-driven controls and form handlers declare their client boundary; presentational
+modules such as `button`, `badge`, `card`, and `skeleton` can be composed from
+React Server Components. Pass interactive callbacks from client components.

package/DESIGN_RULES.md

@@ -0,0 +1,40 @@
+# Design rules
+
+Atlas owns these shared rules, its theme, and component implementations. Change
+them here and release a package version. Build application-specific UI by composing
+the shipped components.
+
+## Tokens
+
+Use semantic colors, radii, and fonts: `bg-primary`, `text-muted-foreground`,
+`border-border`, and `font-heading`. Avoid raw palette classes and separate
+light/dark color pairs; tokens already switch with the theme.
+
+Selected or active navigation, tabs, toggles, chips, rows, and labels use
+`bg-selected text-selected-foreground`. Hover stays neutral with `hover:bg-muted`
+or `hover:bg-accent`. The shipped controls apply this distinction.
+
+Use `success`, `warning`, and `destructive` for good, caution, and bad states.
+For tinted status chips, use `Badge variant="soft" tone="success"` or
+`tone="warning"`. The destructive tone has a known contrast limitation on its
+own light-mode tint; prefer plain `text-destructive` or a solid fill. Status
+tones have no paired foreground token; avoid placing text on solid status fills.
+Application-specific identity colors belong to the application.
+
+## Shape and composition
+
+Primitives have square corners. Reserve `rounded-full` for dots, avatars, and
+other circles. Card and dialog titles already use uppercase, tracked
+`font-heading` styling.
+
+Use `EmptyPanel` for empty states, `TableBodySkeleton` for loading table bodies,
+and `<Card flush>` for an edge-to-edge list or table. `Dialog` already scrolls
+inside the viewport on small screens; avoid additional height limits.
+
+Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labelled
+`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.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kerubi-5
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,24 @@
+Atlas includes component and custom CSS variant implementations derived from
+shadcn/ui, available at https://github.com/shadcn-ui/ui.
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# Atlas React Kit
+
+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
+```
+
+Import components by subpath:
+
+```tsx
+import { Button } from "atlas-react-kit/button"
+import { Card, CardContent } from "atlas-react-kit/card"
+
+export function Example() {
+  return (
+    <Card>
+      <CardContent>
+        <Button>Save</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+In your global stylesheet, import the theme after Tailwind and register the
+installed JavaScript directory. Paths in `@source` are relative to that stylesheet;
+this example assumes it is one directory below the project root.
+
+```css
+@import "tailwindcss";
+@import "atlas-react-kit/theme.css";
+@source "../node_modules/atlas-react-kit/dist";
+```
+
+The theme includes animations and shared light/dark tokens. 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.
+
+See [design rules](./DESIGN_RULES.md) for shared styling decisions and the
+[component guide](./COMPONENTS.md) for exports and composition examples. Both
+files ship in the npm package. Shared component changes belong in this repository;
+applications compose their feature UI around the package and upgrade deliberately.
+
+## Development and releases
+
+```sh
+npm ci
+npm run check
+npm test
+npm pack
+```
+
+`tsc` emits individual ESM files and TypeScript declarations. CSS is shipped
+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:
+
+```sh
+mkdir -p release-artifacts
+npm pack --pack-destination release-artifacts
+```
+
+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/badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "soft" | null | undefined;
+    tone?: "destructive" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, tone, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "./utils.js";
+const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "text-foreground [a]:hover:text-foreground/70",
+            secondary: "text-muted-foreground [a]:hover:text-foreground",
+            destructive: "text-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:text-destructive/70",
+            outline: "text-foreground [a]:hover:text-foreground/70",
+            ghost: "text-muted-foreground hover:text-foreground",
+            link: "text-foreground underline-offset-4 hover:underline",
+            /** Tinted chip; pick its color with `tone`. */
+            soft: "px-2 py-0.5 text-xs font-medium tracking-normal normal-case",
+        },
+        /** Only `soft` reads this. */
+        tone: {
+            neutral: "",
+            success: "",
+            warning: "",
+            destructive: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "soft",
+            tone: "neutral",
+            className: "border border-border/60 bg-muted/50 text-foreground",
+        },
+        {
+            variant: "soft",
+            tone: "success",
+            className: "bg-success/15 text-success",
+        },
+        {
+            variant: "soft",
+            tone: "warning",
+            className: "bg-warning/15 text-warning",
+        },
+        {
+            variant: "soft",
+            tone: "destructive",
+            className: "bg-destructive/15 text-destructive",
+        },
+    ],
+    defaultVariants: {
+        variant: "default",
+        tone: "neutral",
+    },
+});
+function Badge({ className, variant = "default", tone, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "span";
+    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant, tone }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/button.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "./utils.js";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            outline: "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+            xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+            lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+            icon: "size-10",
+            "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-9",
+            "icon-lg": "size-11",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/calendar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { DayPicker, type DayButton, type Locale } from "react-day-picker";
+import { Button } from "./button.js";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/calendar.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames, } from "react-day-picker";
+import { cn } from "./utils.js";
+import { Button, buttonVariants } from "./button.js";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, } from "lucide-react";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+            dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("font-medium select-none", captionLayout === "label"
+                ? "text-sm"
+                : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+            month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+            week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+            range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-selected after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-selected", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-selected after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-selected", defaultClassNames.range_end),
+            today: cn("rounded-(--cell-radius) bg-selected text-selected-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
+                }
+                return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
+            },
+            DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-selected data-[range-middle=true]:text-selected-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/card.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * Padding lives in `--card-p` (set here, read by the sections) so plain
+ * `py-*` / `px-*` classes on Card or its sections override it normally.
+ * `flush` drops all padding so a list or table runs edge to edge.
+ */
+declare function Card({ className, size, flush, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+    flush?: boolean;
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ as: Component, className, ...props }: React.ComponentProps<"div"> & {
+    as?: "div" | "h1";
+}): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/card.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+/**
+ * Padding lives in `--card-p` (set here, read by the sections) so plain
+ * `py-*` / `px-*` classes on Card or its sections override it normally.
+ * `flush` drops all padding so a list or table runs edge to edge.
+ */
+function Card({ className, size = "default", flush = false, ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col overflow-hidden bg-card py-(--card-p) text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none", size === "sm"
+            ? "gap-5 [--card-p:--spacing(5)]"
+            : "gap-8 [--card-p:--spacing(8)]", flush && "[--card-p:0px]", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-(--card-p) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-p)", className), ...props }));
+}
+function CardTitle({ as: Component = "div", className, ...props }) {
+    return (_jsx(Component, { "data-slot": "card-title", className: cn("font-heading text-base font-semibold tracking-wider uppercase", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm leading-relaxed text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-p)", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-(--card-p) [.border-t]:pt-(--card-p)", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/checkbox.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+import { CheckIcon } from "lucide-react";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+}
+export { Checkbox };

package/dist/dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/dialog.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+import { Button } from "./button.js";
+import { XIcon } from "lucide-react";
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/20 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-sm", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[90dvh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-md", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon-sm", className: "absolute top-4 right-4 text-muted-foreground hover:text-foreground", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+}
+function DialogFooter({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: children }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-heading text-lg leading-none font-semibold tracking-wider uppercase", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/empty-panel.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    children: React.ReactNode;
+    /** Tighter padding for compact widgets; default is standard form empty states. */
+    size?: "sm" | "md" | "lg";
+    muted?: boolean;
+    className?: string;
+};
+/** Dashed empty-state panel for lists, widgets, and form sections. */
+export declare function EmptyPanel({ children, size, muted, className, }: Props): import("react").JSX.Element;
+export {};

package/dist/empty-panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/** Dashed empty-state panel for lists, widgets, and form sections. */
+export function EmptyPanel({ children, size = "md", muted = true, className, }) {
+    return (_jsx("div", { className: cn("rounded-none border border-dashed text-center text-sm text-muted-foreground", muted && "bg-muted/30", size === "sm" && "px-3 py-4", size === "md" && "px-4 py-6", size === "lg" && "px-4 py-8", className), children: children }));
+}