@glyphui/ui 0.2.0 → 0.4.0

package/dist/react-router.d.ts

@@ -0,0 +1,18 @@
+import { a as LinkComponentProps, n as GlyphRouter, r as IsActiveOptions } from "./glyph-context-DxGJrdvr.js";
+//#region src/integrations/react-router.d.ts
+/**
+ * React Router's `Link`, taking Glyph's `href` prop. Hash links, external URLs and `mailto:`
+ * stay plain anchors, so in-page anchors scroll and external links leave the app.
+ */
+export declare function RouterLink({ href, ...props }: LinkComponentProps): import("react").JSX.Element;
+/** Whether an in-app `href` matches a pathname, with React Router's `NavLink` semantics. */
+export declare function matchPath(href: string, pathname: string, { end }?: IsActiveOptions): boolean;
+/** Marks a link active when the current location matches it, like React Router's `NavLink`. */
+export declare function useRouterIsActive(href: string, options?: IsActiveOptions): boolean;
+/**
+ * Connects Glyph's navigation to React Router (v7 or later):
+ * `<GlyphProvider router={reactRouter}>`. Links render client-side, and Sidebar, Navbar
+ * and NavigationMenu items mark the current page automatically. Must render inside a router.
+ */
+export declare const reactRouter: GlyphRouter;
+//#endregion

package/dist/react-router.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Link, useLocation } from "react-router";
+//#region src/integrations/react-router.tsx
+const isOutsideApp = (href) => href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/i.test(href);
+/**
+* React Router's `Link`, taking Glyph's `href` prop. Hash links, external URLs and `mailto:`
+* stay plain anchors, so in-page anchors scroll and external links leave the app.
+*/
+function RouterLink({ href, ...props }) {
+	if (isOutsideApp(href)) return /* @__PURE__ */ jsx("a", {
+		href,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		to: href,
+		...props
+	});
+}
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+/** Whether an in-app `href` matches a pathname, with React Router's `NavLink` semantics. */
+function matchPath(href, pathname, { end = false } = {}) {
+	if (!href || isOutsideApp(href)) return false;
+	const target = trimSlash(new URL(href, "http://glyph.local").pathname);
+	const current = trimSlash(pathname);
+	if (end || target === "/") return current === target;
+	return current === target || current.startsWith(`${target}/`);
+}
+/** Marks a link active when the current location matches it, like React Router's `NavLink`. */
+function useRouterIsActive(href, options) {
+	const { pathname } = useLocation();
+	return matchPath(href, pathname, options);
+}
+/**
+* Connects Glyph's navigation to React Router (v7 or later):
+* `<GlyphProvider router={reactRouter}>`. Links render client-side, and Sidebar, Navbar
+* and NavigationMenu items mark the current page automatically. Must render inside a router.
+*/
+const reactRouter = {
+	Link: RouterLink,
+	useIsActive: useRouterIsActive
+};
+//#endregion
+export { RouterLink, matchPath, reactRouter, useRouterIsActive };

package/dist/{states-Rp8wZ_jH.js → states-IvhjBgna.js}

@@ -1,5 +1,6 @@
 "use client";
-import { O as useComponentConfig, S as InboxIcon, _ as CheckIcon, c as tv, f as themedBorder, m as AlertIcon, n as useFieldControl, o as Spinner, p as transition, r as Button, u as focusRing, w as MinusIcon } from "./field-context-B6WOcK5m.js";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
+import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-7I-cWvvS.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx

package/dist/tv-DLbT66dC.js

@@ -0,0 +1,70 @@
+"use client";
+import { textTokens } from "@glyphui/tokens";
+import { createContext, useContext } from "react";
+import { createTV } from "tailwind-variants";
+//#region src/provider/glyph-context.ts
+const GlyphContext = createContext(null);
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+function useGlyph() {
+	const value = useContext(GlyphContext);
+	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
+	return value;
+}
+/** The router-aware link component configured on `GlyphProvider`. */
+function useLinkComponent() {
+	return useContext(GlyphContext)?.linkComponent ?? "a";
+}
+const neverActive = () => false;
+/**
+* Whether `href` is the current page, using the router passed to `GlyphProvider`.
+* Returns `explicit` when it is set, so an `active` prop always wins.
+*/
+function useIsActive(href, options) {
+	const isActive = useContext(GlyphContext)?.useIsActive ?? neverActive;
+	const { explicit, ...matchOptions } = options ?? {};
+	const matched = isActive(href ?? "", matchOptions);
+	if (explicit !== void 0) return explicit;
+	return href ? matched : false;
+}
+//#endregion
+//#region src/hooks/use-component-config.ts
+/**
+* Applies the theme's per-component settings (`theme.components[name]`):
+* fills unset variant props from `defaultVariants` and returns the extra slot classes.
+* Every styled component calls this first.
+*/
+function useComponentConfig(name, props) {
+	const override = (useContext(GlyphContext)?.theme)?.components[name];
+	if (!override) return [props, {}];
+	let merged = props;
+	const defaults = override.defaultVariants;
+	if (defaults) {
+		merged = { ...props };
+		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
+	}
+	return [merged, override.className ?? {}];
+}
+//#endregion
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
+//#endregion
+//#region src/utils/tw-merge-config.ts
+/**
+* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+* keeps only the last size instead of treating `text-h1` as a color.
+*/
+const twMergeConfig = { extend: { theme: {
+	text: [...textTokens],
+	radius: ["pill"]
+} } };
+//#endregion
+//#region src/utils/tv.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+const tv = createTV({ twMergeConfig });
+//#endregion
+export { themedBorder as a, GlyphContext as c, useIsActive as d, useLinkComponent as f, popover as i, neverActive as l, twMergeConfig as n, transition as o, focusRing as r, useComponentConfig as s, tv as t, useGlyph as u };

package/dist/vite.d.ts

@@ -0,0 +1,27 @@
+import { t as ColorModeOptions } from "./color-mode-script-KdwItKN2.js";
+//#region src/integrations/vite.d.ts
+/** The subset of Vite's `Plugin` this plugin uses, so `vite` stays an optional peer. */
+export interface GlyphVitePlugin {
+  name: string;
+  transformIndexHtml: {
+    order: 'pre';
+    handler: () => {
+      tag: 'script';
+      children: string;
+      injectTo: 'head-prepend';
+    }[];
+  };
+}
+/**
+ * Injects Glyph's color-mode script into `index.html` so dark-mode visitors never see a
+ * light flash. Pass the same `defaultMode` and `storageKey` as `GlyphProvider`.
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { glyphColorMode } from '@glyphui/ui/vite'
+ * export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+ * ```
+ */
+export declare function glyphColorMode(options?: ColorModeOptions): GlyphVitePlugin;
+//#endregion
+export type { ColorModeOptions };

package/dist/vite.js

@@ -0,0 +1,29 @@
+"use client";
+import { r as getColorModeScript } from "./color-mode-script-Bf7LYkOj.js";
+//#region src/integrations/vite.ts
+/**
+* Injects Glyph's color-mode script into `index.html` so dark-mode visitors never see a
+* light flash. Pass the same `defaultMode` and `storageKey` as `GlyphProvider`.
+*
+* ```ts
+* // vite.config.ts
+* import { glyphColorMode } from '@glyphui/ui/vite'
+* export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+* ```
+*/
+function glyphColorMode(options = {}) {
+	const script = getColorModeScript(options);
+	return {
+		name: "glyph:color-mode",
+		transformIndexHtml: {
+			order: "pre",
+			handler: () => [{
+				tag: "script",
+				children: script,
+				injectTo: "head-prepend"
+			}]
+		}
+	};
+}
+//#endregion
+export { glyphColorMode };

package/fonts.css

@@ -0,0 +1,10 @@
+/*
+ * Geist and Geist Mono, the fonts the default `glyph` theme uses. Import once, before the
+ * Glyph stylesheet:
+ *
+ *   @import "@glyphui/ui/fonts.css";
+ *   @import "tailwindcss";
+ *   @import "@glyphui/ui/styles.css";
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist-mono";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
   "license": "MIT",
   "author": "Mohak Gupta (https://github.com/khalmohak)",
@@ -24,7 +24,8 @@
     "theme",
     "dark-mode",
     "forms",
-    "data-table"
+    "data-table",
+    "react-router"
   ],
   "type": "module",
   "sideEffects": [
@@ -46,23 +47,47 @@
       "types": "./dist/data-table.d.ts",
       "default": "./dist/data-table.js"
     },
+    "./chart": {
+      "@glyphui/source": "./src/patterns/chart/index.ts",
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
+    "./react-router": {
+      "@glyphui/source": "./src/integrations/react-router.tsx",
+      "types": "./dist/react-router.d.ts",
+      "default": "./dist/react-router.js"
+    },
+    "./vite": {
+      "@glyphui/source": "./src/integrations/vite.ts",
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
     "./styles.css": "./styles.css",
+    "./fonts.css": "./fonts.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "src",
     "styles.css",
+    "fonts.css",
     "!src/**/*.test.tsx",
     "!src/**/*.test-d.tsx",
     "!src/test"
   ],
   "dependencies": {
-    "@glyphui/tokens": "^0.2.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@glyphui/tokens": "^0.4.0",
     "@standard-schema/spec": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
     "radix-ui": "^1.6.7",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
@@ -73,7 +98,10 @@
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": "^7.55.0",
-    "tailwindcss": ">=4.1"
+    "react-router": ">=7",
+    "recharts": "^3.0.0",
+    "tailwindcss": ">=4.1",
+    "vite": ">=5"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
@@ -84,6 +112,15 @@
     },
     "react-hook-form": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -96,12 +133,16 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "@vitest/coverage-v8": "3.2.7",
     "jsdom": "^27.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.89.0",
+    "react-router": "^7.18.4",
+    "recharts": "^3.10.1",
     "tsdown": "^0.23.0",
     "typescript": "~5.9.3",
+    "vite": "^7.3.6",
     "vitest": "^3.2.7",
     "zod": "^4.6.5"
   },
@@ -113,6 +154,7 @@
     "build": "tsdown",
     "typecheck": "tsc",
     "test": "vitest run",
-    "check:exports": "attw --pack . --profile esm-only --exclude-entrypoints ./styles.css"
+    "test:coverage": "vitest run --coverage",
+    "check:exports": "attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./fonts.css"
   }
 }

package/src/components/accordion/accordion.styles.ts

@@ -15,10 +15,10 @@ export const accordionStyles = tv({
     ],
     chevron:
       'size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180',
-    content: 'overflow-hidden text-small text-muted-foreground',
-    // Opening fades and slides in (via @starting-style); closing is instant.
-    contentInner:
-      'pb-4 transition-[opacity,translate] duration-(--glyph-duration-base) ease-standard starting:-translate-y-1 starting:opacity-0',
+    content:
+      'overflow-hidden text-small text-muted-foreground data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up',
+    // Height animates open and closed using Radix's measured content height.
+    contentInner: 'pb-4',
   },
   variants: {
     variant: {

package/src/components/badge/badge.styles.ts

@@ -1,7 +1,7 @@
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-// Tinted text is mixed toward the foreground so it stays readable on light and dark surfaces.
+// Tinted text uses the theme's status text colors, which stay readable on tinted backgrounds.
 const tones = {
   neutral: {
     soft: 'bg-muted text-muted-foreground',
@@ -9,34 +9,29 @@ const tones = {
     outline: 'border-border-strong text-foreground',
   },
   primary: {
-    soft: 'bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+    soft: 'bg-primary/14 text-primary-text',
     solid: 'bg-primary text-primary-foreground',
-    outline:
-      'border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+    outline: 'border-primary/50 text-primary-text',
   },
   success: {
-    soft: 'bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+    soft: 'bg-success/14 text-success-text',
     solid: 'bg-success text-success-foreground',
-    outline:
-      'border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+    outline: 'border-success/50 text-success-text',
   },
   warning: {
-    soft: 'bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+    soft: 'bg-warning/14 text-warning-text',
     solid: 'bg-warning text-warning-foreground',
-    outline:
-      'border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+    outline: 'border-warning/50 text-warning-text',
   },
   danger: {
-    soft: 'bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+    soft: 'bg-danger/14 text-danger-text',
     solid: 'bg-danger text-danger-foreground',
-    outline:
-      'border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+    outline: 'border-danger/50 text-danger-text',
   },
   info: {
-    soft: 'bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+    soft: 'bg-info/14 text-info-text',
     solid: 'bg-info text-info-foreground',
-    outline:
-      'border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+    outline: 'border-info/50 text-info-text',
   },
 } as const
 

package/src/components/banner/banner.styles.ts

@@ -15,16 +15,16 @@ export const bannerStyles = tv({
       neutral: { root: 'border-border bg-subtle text-foreground', icon: 'text-muted-foreground' },
       primary: { root: 'border-primary bg-primary text-primary-foreground' },
       info: {
-        root: 'border-info/25 bg-info/10 text-[color-mix(in_oklab,var(--color-info)_55%,var(--color-foreground))]',
+        root: 'border-info/25 bg-info/10 text-info-text',
       },
       success: {
-        root: 'border-success/25 bg-success/10 text-[color-mix(in_oklab,var(--color-success)_55%,var(--color-foreground))]',
+        root: 'border-success/25 bg-success/10 text-success-text',
       },
       warning: {
-        root: 'border-warning/30 bg-warning/14 text-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-foreground))]',
+        root: 'border-warning/30 bg-warning/14 text-warning-text',
       },
       danger: {
-        root: 'border-danger/25 bg-danger/10 text-[color-mix(in_oklab,var(--color-danger)_55%,var(--color-foreground))]',
+        root: 'border-danger/25 bg-danger/10 text-danger-text',
       },
     },
   },

package/src/components/button/button.styles.ts

@@ -22,7 +22,9 @@ export const buttonStyles = tv({
       },
       ghost: { base: 'text-muted-foreground hover:bg-muted hover:text-foreground' },
       danger: { base: 'bg-danger text-danger-foreground shadow-sm hover:bg-danger/88' },
-      link: { base: 'h-auto px-0 text-primary underline-offset-4 shadow-none hover:underline' },
+      link: {
+        base: 'h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline',
+      },
     },
     size: {
       sm: { base: 'h-(--glyph-control-sm) px-3 text-small', icon: 'size-3.5' },

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,51 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const calendarStyles = tv({
+  slots: {
+    root: 'relative w-fit p-3 text-small text-foreground',
+    months: 'relative flex flex-col gap-6 sm:flex-row',
+    month: 'grid content-start gap-3',
+    monthCaption: 'flex h-8 items-center justify-center px-9',
+    captionLabel: 'font-medium text-foreground',
+    nav: 'pointer-events-none absolute inset-x-3 top-3 z-10 flex items-center justify-between',
+    navButton: [
+      'pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground',
+      'hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40',
+      transition,
+      focusRing,
+    ],
+    chevron: 'size-4',
+    monthGrid: 'border-collapse',
+    weekdays: '',
+    weekday: 'size-9 p-0 text-caption font-normal text-faint-foreground',
+    weeks: '',
+    week: '',
+    day: 'size-9 p-0 text-center align-middle',
+    dayButton: [
+      'inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-small tabular-nums text-foreground',
+      'hover:bg-muted',
+      transition,
+      focusRing,
+    ],
+    // Selected days keep primary-foreground on primary, whatever else applies to them.
+    today: '[&>button]:font-semibold [&:not([data-selected])>button]:text-primary-text',
+    selected:
+      '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90',
+    outside: '[&:not([data-selected])>button]:text-faint-foreground',
+    disabled: '[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through',
+    rangeStart: 'rounded-l-md bg-primary/14',
+    rangeMiddle:
+      'bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!',
+    rangeEnd: 'rounded-r-md bg-primary/14',
+    hidden: 'invisible',
+    footer: 'pt-2 text-small text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Calendar: StylesEntry<typeof calendarStyles>
+  }
+}

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,84 @@
+import { DayPicker, type DayPickerProps } from 'react-day-picker'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { calendarStyles } from './calendar.styles'
+
+export type CalendarProps = DayPickerProps
+
+function ChevronIcon({
+  className,
+  orientation = 'left',
+}: {
+  className?: string
+  orientation?: 'up' | 'down' | 'left' | 'right'
+}) {
+  const d = {
+    left: 'm15 18-6-6 6-6',
+    right: 'm9 18 6-6-6-6',
+    up: 'm18 15-6-6-6 6',
+    down: 'm6 9 6 6 6-6',
+  }[orientation]
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d={d} />
+    </svg>
+  )
+}
+
+/**
+ * A month grid for picking dates, built on react-day-picker and styled by the theme.
+ * Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+ */
+export function Calendar(inProps: CalendarProps) {
+  const [props, slots] = useComponentConfig('Calendar', inProps)
+  const { className, classNames, components, showOutsideDays = true, ...rest } = props
+  const s = calendarStyles()
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={s.root({ class: [slots.root, className] })}
+      classNames={{
+        months: s.months({ class: slots.months }),
+        month: s.month({ class: slots.month }),
+        month_caption: s.monthCaption({ class: slots.monthCaption }),
+        caption_label: s.captionLabel({ class: slots.captionLabel }),
+        nav: s.nav({ class: slots.nav }),
+        button_previous: s.navButton({ class: slots.navButton }),
+        button_next: s.navButton({ class: slots.navButton }),
+        chevron: s.chevron({ class: slots.chevron }),
+        month_grid: s.monthGrid({ class: slots.monthGrid }),
+        weekdays: s.weekdays({ class: slots.weekdays }),
+        weekday: s.weekday({ class: slots.weekday }),
+        weeks: s.weeks({ class: slots.weeks }),
+        week: s.week({ class: slots.week }),
+        day: s.day({ class: slots.day }),
+        day_button: s.dayButton({ class: slots.dayButton }),
+        today: s.today({ class: slots.today }),
+        selected: s.selected({ class: slots.selected }),
+        outside: s.outside({ class: slots.outside }),
+        disabled: s.disabled({ class: slots.disabled }),
+        range_start: s.rangeStart({ class: slots.rangeStart }),
+        range_middle: s.rangeMiddle({ class: slots.rangeMiddle }),
+        range_end: s.rangeEnd({ class: slots.rangeEnd }),
+        hidden: s.hidden({ class: slots.hidden }),
+        footer: s.footer({ class: slots.footer }),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: chevronClass, orientation }) => (
+          <ChevronIcon className={chevronClass} orientation={orientation} />
+        ),
+        ...components,
+      }}
+      {...(rest as DayPickerProps)}
+    />
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,3 @@
+export type { DateRange, Matcher } from 'react-day-picker'
+export { Calendar, type CalendarProps } from './calendar'
+export { calendarStyles } from './calendar.styles'

package/src/components/carousel/carousel.styles.ts

@@ -0,0 +1,43 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const carouselStyles = tv({
+  slots: {
+    root: 'relative',
+    viewport: 'overflow-hidden rounded-lg',
+    container: 'flex',
+    item: 'min-w-0 shrink-0 grow-0 basis-full',
+    control: 'absolute z-10 border-border bg-surface/85 shadow-sm backdrop-blur disabled:opacity-0',
+    dots: 'mt-3 flex items-center justify-center gap-1.5',
+    dot: [
+      'h-2 w-2 cursor-pointer rounded-pill bg-border-strong',
+      transition,
+      focusRing,
+      'hover:bg-muted-foreground aria-[current=true]:w-5 aria-[current=true]:bg-primary',
+    ],
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: '-ml-4',
+        item: 'pl-4',
+        control: 'top-1/2 -translate-y-1/2',
+      },
+      vertical: {
+        container: '-mt-4 h-full flex-col',
+        item: 'pt-4',
+        control: 'left-1/2 -translate-x-1/2 [&_svg]:rotate-90',
+      },
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+})
+
+export type CarouselVariants = VariantProps<typeof carouselStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Carousel: StylesEntry<typeof carouselStyles>
+  }
+}