premium-ds 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tabsir Ahammed
+
+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,113 @@
+# premium-ds
+
+A premium React design system - modern CSS + a small, closed token vocabulary, applied
+consistently. Restraint, calm motion, no Tailwind, no CSS-in-JS, no UI libraries.
+
+**React 19 - TypeScript - ships compiled ESM + types.** Import the whole library or a single
+component; link one stylesheet.
+
+## Install
+
+```bash
+pnpm add premium-ds
+# peers (you likely already have them):
+pnpm add react react-dom motion
+```
+
+| Peer                  | Range | Used for                                                             |
+| --------------------- | ----- | -------------------------------------------------------------------- |
+| `react` / `react-dom` | `^19` | components; `createRoot`/`createPortal` for imperative toast/tooltip |
+| `motion`              | `^12` | enter/exit + layout animation (`motion/react`)                       |
+
+Icons are **bundled** (a small curated Phosphor set) - there is no icon peer to install.
+
+## Use it
+
+No bundler config and no `transpilePackages` - the package ships built ESM with the `'use client'`
+directives intact, so Next.js App Router boundaries just work.
+
+```tsx
+import { Button, toast } from 'premium-ds';
+import 'premium-ds/styles.css'; // link once, at the app root
+```
+
+Link `styles.css` exactly once - it's the full token + component manifest
+(fonts - primitives - semantics - components).
+
+### Import a single component
+
+Every component is also a subpath export, so you can pull just one:
+
+```tsx
+import { Button } from 'premium-ds/button';
+import { DateField } from 'premium-ds/date-field';
+```
+
+The barrel is side-effect-free and tree-shakes, so `import { Button } from 'premium-ds'` is
+equally lean in a bundler - subpaths help in non-bundled or explicit setups.
+
+## Components
+
+| Group               | Components                                                                                    |
+| ------------------- | --------------------------------------------------------------------------------------------- |
+| Primitives          | Button, Collapse, Badge, StatusBadge, CountBadge                                              |
+| Forms               | TextField, NumberField, OtpField, Textarea, Checkbox, Toggle, RadioGroup, Select, MultiSelect |
+| Data                | Avatar, AvatarGroup, Tag, ToggleTag, Table, Pagination                                        |
+| Date, time & tabs   | DateField, DateTimeField, DateRangeField, TimeField, Tabs                                     |
+| Overlays & feedback | Alert, Toast, Tooltip, Dialog, Overlay, Sheet                                                 |
+
+Each is a named export from the barrel and a subpath (`premium-ds/<kebab-name>`). Props are
+documented inline in the types; see [`llms.txt`](./llms.txt) for per-component examples.
+
+## For AI coding agents
+
+Once installed, an agent doesn't need to read the component source - the contract is the shipped
+types:
+
+- **`node_modules/premium-ds/dist/*.d.ts`** - every component's props carry inline TSDoc. This is
+  the machine-readable source of truth (e.g. `dist/button.d.ts` fully describes `ButtonProps`).
+- **`llms.txt`** (package root) - a compact, per-component index: purpose - import - a minimal
+  example. Cheaper to scan than every `.d.ts`.
+- This README.
+
+## Copy-paste instead
+
+The tarball also ships `src/`, so you can lift a component straight from
+`node_modules/premium-ds/src/components/<name>/` into your project. Components aren't fully
+self-contained - they share `src/tokens/`, the `motion-tokens` bridge, the internal `icon/`, and a
+few `*-core` helpers - so copy those alongside. (A shadcn-style registry/CLI could automate this
+later.)
+
+## Icons
+
+Components render their own glyphs from a small curated Phosphor set, **bundled in** - no icon peer
+to install. premium-ds does **not** export an `Icon` component, so where a prop takes an icon
+(`iconLeft`, `leadingIcon`, a `Tag`'s `icon`, ...) pass your own node - any `ReactNode` (e.g. an
+`@phosphor-icons/react` element, if you choose to use it).
+
+## What's inside
+
+```
+src/                source (also shipped, for copy-paste)
+-- index.ts         public barrel
+-- styles.css       @import manifest (link once)
+-- tokens/          CSS custom properties + motion-tokens.ts (JS and CSS motion bridge)
+-- components/      <domain>/Name.tsx + name.css
+dist/               compiled ESM + .d.ts - what you import
+```
+
+## Notes
+
+- **Fonts.** `src/tokens/fonts.css` pulls Geist + Geist Mono from Google Fonts via a remote
+  `@import`. Self-host the families to drop the render-blocking network hop.
+- **Styling is token-driven.** Re-skin by overriding the CSS custom properties in your own
+  stylesheet loaded after `premium-ds/styles.css` - never fork the source.
+
+## Develop
+
+```bash
+pnpm install
+pnpm build       # tsup - dist/ (ESM + .d.ts)
+pnpm typecheck   # tsc --noEmit
+pnpm format      # prettier --write
+```

package/dist/alert.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+interface AlertAction {
+    /** Sentence-case label, e.g. "Update billing". */
+    label: string;
+    onClick?: () => void;
+}
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */
+    tone?: AlertTone;
+    /** The message - sentence case, ideally one line. */
+    title: React.ReactNode;
+    /** Optional description; stays neutral - tone marks the message, not the prose. */
+    children?: React.ReactNode;
+    /** One action max, rendered as the system secondary small button. */
+    action?: AlertAction;
+    /** Renders the always-visible close button. Uncontrolled unless `open` is given. */
+    dismissible?: boolean;
+    /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */
+    onDismiss?: () => void;
+    /** Controlled visibility; omit for uncontrolled. Exit eases shut (height collapse). */
+    open?: boolean;
+    /** App-level strip: square corners, hairline below only. Paint modifier. */
+    banner?: boolean;
+    /** Override the tone glyph; pass null to render no glyph. */
+    icon?: React.ReactNode | null;
+}
+declare function Alert({ tone, title, children, action, dismissible, onDismiss, open, banner, icon, className, ...rest }: AlertProps): React.JSX.Element;
+
+export { Alert, type AlertAction, type AlertProps, type AlertTone };

package/dist/alert.js

@@ -0,0 +1,6 @@
+'use client';export { Alert } from './chunk-H6KWJNOE.js';
+import './chunk-VVPGEAC6.js';
+import './chunk-KBWNUUWM.js';
+import './chunk-37O2ZXD6.js';
+//# sourceMappingURL=alert.js.map
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"alert.js"}

package/dist/avatar-group.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AvatarSize } from './avatar.js';
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    /** Max visible avatars before "+N" overflow chip. Default 5. */
+    max?: number;
+    /** Uniform size applied to all children. Default 'md'. */
+    size?: AvatarSize;
+}
+declare function AvatarGroup({ children, max, size, className, ...rest }: AvatarGroupProps): React.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/avatar-group.js

@@ -0,0 +1,3 @@
+'use client';export { AvatarGroup } from './chunk-7OPMOET7.js';
+//# sourceMappingURL=avatar-group.js.map
+//# sourceMappingURL=avatar-group.js.map

package/dist/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"avatar-group.js"}

package/dist/avatar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */
+    src?: string | null;
+    /** Display name - drives initials generation, palette hash, and aria-label. */
+    name?: string | null;
+    /** Content override - any React node (e.g. <Icon name="globe" />). */
+    icon?: React.ReactNode | null;
+    /** 'circle' for people; 'square' for channels / brand pages. Default 'circle'. */
+    shape?: AvatarShape;
+    /** Size step. Default 'md' (32 px). */
+    size?: AvatarSize;
+    /** Presence indicator dot at bottom-right. Default null (hidden). */
+    status?: AvatarStatus | null;
+    /** Override identity slot 1-6 (blue - violet - plum - rose - clay - moss); auto from name hash when null, neutral when anonymous. */
+    paletteIndex?: AvatarPaletteIndex | null;
+}
+declare function Avatar({ src, name, icon, shape, size, status, paletteIndex, className, style, ...rest }: AvatarProps): React.JSX.Element;
+
+export { Avatar, type AvatarPaletteIndex, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus };

package/dist/avatar.js

@@ -0,0 +1,3 @@
+'use client';export { Avatar } from './chunk-I3BCB4Z5.js';
+//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"avatar.js"}

package/dist/badge.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Status hue. @default 'neutral' */
+    tone?: BadgeTone;
+    /** Surface. @default 'glass' */
+    variant?: 'glass' | 'outline';
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /** Leading status dot. */
+    dot?: boolean;
+    /** Dot pulses (implies dot) - for in-progress status. */
+    live?: boolean;
+    /** Fully-rounded shape. */
+    pill?: boolean;
+    /** Optional leading <Icon> (overrides dot if both set). */
+    icon?: ReactNode;
+}
+declare function Badge({ tone, variant, size, dot, live, pill, icon, className, children, ...rest }: BadgeProps): React.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeTone };

package/dist/badge.js

@@ -0,0 +1,3 @@
+'use client';export { Badge } from './chunk-2OWHZ4JT.js';
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"badge.js"}

package/dist/button.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual weight / intent. @default 'primary' */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+    /** Control height. sm 28px - md 36px (default) - lg 40px. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Loading - swaps content for a spinner and makes the button inert. */
+    loading?: boolean;
+    /** Leading icon node (e.g. a 16px <Icon>). Sized & aligned by the component. */
+    iconLeft?: ReactNode;
+    /** Trailing icon node. */
+    iconRight?: ReactNode;
+    /** Stretch to fill the container width. */
+    fullWidth?: boolean;
+}
+declare function Button({ variant, size, type, disabled, loading, iconLeft, iconRight, fullWidth, className, children, ...rest }: ButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,3 @@
+'use client';export { Button } from './chunk-HGILYGY3.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}

package/dist/checkbox.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
+    checked?: boolean;
+    /** Uncontrolled initial state. */
+    defaultChecked?: boolean;
+    /** Indeterminate - the "some, not all" select-all state; visually wins over `checked`. @default false */
+    indeterminate?: boolean;
+    /** Single error state for consent gates ("you must agree"); also sets `aria-invalid`. @default false */
+    invalid?: boolean;
+    /** Disabled - inert and de-emphasized (distinct fill when checked). */
+    disabled?: boolean;
+    /** Box size: `md` 18px - `sm` 16px for dense table rows. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Label text beside the box. */
+    label?: React.ReactNode;
+    /** Optional secondary line under the label (settings rows). */
+    description?: React.ReactNode;
+    /** Fires on toggle - read `e.target.checked`. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+declare function Checkbox({ checked, defaultChecked, indeterminate, invalid, disabled, size, label, description, className, onChange, ...rest }: CheckboxProps): React.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox.js

@@ -0,0 +1,3 @@
+'use client';export { Checkbox } from './chunk-XA3T5KWA.js';
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.js"}

package/dist/chunk-2OWHZ4JT.js

@@ -0,0 +1,36 @@
+'use client';import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/badge/Badge.tsx
+function Badge({
+  tone = "neutral",
+  variant = "glass",
+  size = "md",
+  dot = false,
+  live = false,
+  pill = false,
+  icon = null,
+  className = "",
+  children,
+  ...rest
+}) {
+  const isGlass = variant !== "outline";
+  const classes = [
+    isGlass ? "glass glass--interactive" : "",
+    "badge",
+    `badge--${tone}`,
+    variant === "outline" ? "badge--outline" : "",
+    size !== "md" ? `badge--${size}` : "",
+    pill ? "badge--pill" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const showDot = (dot || live) && !icon;
+  return /* @__PURE__ */ jsxs("span", { className: classes, ...rest, children: [
+    showDot ? /* @__PURE__ */ jsx("span", { className: `badge__dot${live ? " badge__dot--live" : ""}`, "aria-hidden": "true" }) : null,
+    icon ? /* @__PURE__ */ jsx("span", { className: "badge__icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "badge__label", children })
+  ] });
+}
+
+export { Badge };
+//# sourceMappingURL=chunk-2OWHZ4JT.js.map
+//# sourceMappingURL=chunk-2OWHZ4JT.js.map

package/dist/chunk-2OWHZ4JT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge/Badge.tsx"],"names":[],"mappings":";;;AAyBO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,UAAU,OAAA,KAAY,SAAA;AAC5B,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,UAAU,0BAAA,GAA6B,EAAA;AAAA,IACvC,OAAA;AAAA,IACA,UAAU,IAAI,CAAA,CAAA;AAAA,IACd,OAAA,KAAY,YAAY,gBAAA,GAAmB,EAAA;AAAA,IAC3C,IAAA,KAAS,IAAA,GAAO,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA,GAAK,EAAA;AAAA,IACnC,OAAO,aAAA,GAAgB,EAAA;AAAA,IACvB;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,MAAM,OAAA,GAAA,CAAW,GAAA,IAAO,IAAA,KAAS,CAAC,IAAA;AAElC,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,EAAU,GAAG,IAAA,EAC3B,QAAA,EAAA;AAAA,IAAA,OAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,UAAA,EAAa,IAAA,GAAO,sBAAsB,EAAE,CAAA,CAAA,EAAI,aAAA,EAAY,MAAA,EAAO,CAAA,GAClF,IAAA;AAAA,IACH,IAAA,uBACE,MAAA,EAAA,EAAK,SAAA,EAAU,eAAc,aAAA,EAAY,MAAA,EACvC,gBACH,CAAA,GACE,IAAA;AAAA,oBACJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EAAgB,QAAA,EAAS;AAAA,GAAA,EAC3C,CAAA;AAEJ","file":"chunk-2OWHZ4JT.js","sourcesContent":["'use client';\n\n// Base badge chip - glass surface by default; the outline variant is flat (no glass classes).\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Status hue. @default 'neutral' */\n  tone?: BadgeTone;\n  /** Surface. @default 'glass' */\n  variant?: 'glass' | 'outline';\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n  /** Leading status dot. */\n  dot?: boolean;\n  /** Dot pulses (implies dot) - for in-progress status. */\n  live?: boolean;\n  /** Fully-rounded shape. */\n  pill?: boolean;\n  /** Optional leading <Icon> (overrides dot if both set). */\n  icon?: ReactNode;\n}\n\nexport function Badge({\n  tone = 'neutral',\n  variant = 'glass',\n  size = 'md',\n  dot = false,\n  live = false,\n  pill = false,\n  icon = null,\n  className = '',\n  children,\n  ...rest\n}: BadgeProps) {\n  const isGlass = variant !== 'outline';\n  const classes = [\n    isGlass ? 'glass glass--interactive' : '',\n    'badge',\n    `badge--${tone}`,\n    variant === 'outline' ? 'badge--outline' : '',\n    size !== 'md' ? `badge--${size}` : '',\n    pill ? 'badge--pill' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showDot = (dot || live) && !icon;\n\n  return (\n    <span className={classes} {...rest}>\n      {showDot ? (\n        <span className={`badge__dot${live ? ' badge__dot--live' : ''}`} aria-hidden=\"true\" />\n      ) : null}\n      {icon ? (\n        <span className=\"badge__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"badge__label\">{children}</span>\n    </span>\n  );\n}\n"]}

package/dist/chunk-34SIXSYL.js

@@ -0,0 +1,64 @@
+'use client';import { TimeSegments } from './chunk-5DDOOT33.js';
+import { useControllable, FieldShell } from './chunk-QNC6O3PG.js';
+import { jsx } from 'react/jsx-runtime';
+
+function TimeField({
+  value,
+  // controlled: 'HH:mm' | null
+  defaultValue = null,
+  onChange,
+  label,
+  format = "24h",
+  minuteStep = 5,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = ""
+}) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+  function onBoxPointerDown(e) {
+    if (disabled || e.target.closest(".tsg__seg")) return;
+    e.preventDefault();
+    const seg = e.currentTarget.querySelector(".tsg__seg");
+    if (seg) seg.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      variant: "tfd",
+      label,
+      required,
+      invalid,
+      message,
+      icon: "clock",
+      className,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fld__input tfd__box" + (disabled ? " is-disabled" : ""),
+          onPointerDown: onBoxPointerDown,
+          children: /* @__PURE__ */ jsx(
+            TimeSegments,
+            {
+              value: val,
+              onCommit: commit,
+              format,
+              minuteStep,
+              min,
+              max,
+              disabled,
+              ariaLabel: label || "Time"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+export { TimeField };
+//# sourceMappingURL=chunk-34SIXSYL.js.map
+//# sourceMappingURL=chunk-34SIXSYL.js.map

package/dist/chunk-34SIXSYL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/date-picker/TimeField.tsx"],"names":[],"mappings":";;;;AA+CO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,CAAA;AAAA,EACb,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,IAAI,eAAA,CAAgB,KAAA,EAAO,cAAc,QAAQ,CAAA;AAGnE,EAAA,SAAS,iBAAiB,CAAA,EAAiC;AACzD,IAAA,IAAI,QAAA,IAAa,CAAA,CAAE,MAAA,CAAuB,OAAA,CAAQ,WAAW,CAAA,EAAG;AAChE,IAAA,CAAA,CAAE,cAAA,EAAe;AACjB,IAAA,MAAM,GAAA,GAAM,CAAA,CAAE,aAAA,CAAc,aAAA,CAAc,WAAW,CAAA;AACrD,IAAA,IAAI,GAAA,MAAS,KAAA,EAAM;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,KAAA;AAAA,MACR,KAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,SAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,qBAAA,IAAyB,QAAA,GAAW,cAAA,GAAiB,EAAA,CAAA;AAAA,UAChE,aAAA,EAAe,gBAAA;AAAA,UAEf,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,GAAA;AAAA,cACP,QAAA,EAAU,MAAA;AAAA,cACV,MAAA;AAAA,cACA,UAAA;AAAA,cACA,GAAA;AAAA,cACA,GAAA;AAAA,cACA,QAAA;AAAA,cACA,WAAW,KAAA,IAAS;AAAA;AAAA;AACtB;AAAA;AACF;AAAA,GACF;AAEJ","file":"chunk-34SIXSYL.js","sourcesContent":["'use client';\n\n/* TimeField.tsx - standalone time field.\n   -------------------------------------------------------------------------\n   The segmented HH:MM machine (time-core.tsx) wearing the Input vocabulary -\n   usable anywhere a bare time is needed, without the calendar.\n\n     <TimeField\n       label=\"Send at\"\n       value=\"09:30\"             // canonical 'HH:mm' (24h) | null\n       onChange={(t) => ...}       // live - the instant both segments exist\n       format=\"12h\"              // display only; storage stays 24h\n       minuteStep={15}           // ↑/↓ granularity (typing is exact)\n       min=\"09:00\" max=\"17:30\"   // saturation bounds - clamp, never error\n     />\n\n   Primitives consumed (A8): the .fld Input vocabulary (label/message/error\n   chrome), TimeSegments (the machine), Icon. The box is a div wearing\n   .fld__input - clicking its empty area seats focus in the hours segment.\n   Buildless global was window.TimeField; a bundled app imports it. */\n\nimport type { PointerEvent } from 'react';\nimport { FieldShell, useControllable } from './field-shell';\nimport { TimeSegments } from './time-core';\n\nexport interface TimeFieldProps {\n  /** Controlled value, canonical 'HH:mm' (24h). */\n  value?: string | null;\n  defaultValue?: string | null;\n  /** Fires live - the instant both segments exist. */\n  onChange?: (value: string) => void;\n  label?: string;\n  /** Display only; storage stays 24h. Default '24h'. */\n  format?: '24h' | '12h';\n  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */\n  minuteStep?: number;\n  /** Lower bound 'HH:mm' - saturates, never errors. */\n  min?: string;\n  /** Upper bound 'HH:mm' - saturates, never errors. */\n  max?: string;\n  required?: boolean;\n  invalid?: boolean;\n  message?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function TimeField({\n  value, // controlled: 'HH:mm' | null\n  defaultValue = null,\n  onChange,\n  label,\n  format = '24h',\n  minuteStep = 5,\n  min,\n  max,\n  required = false,\n  invalid = false,\n  message,\n  disabled = false,\n  className = '',\n}: TimeFieldProps) {\n  const [val, commit] = useControllable(value, defaultValue, onChange);\n\n  /* clicking the box (not a segment) seats focus where typing starts */\n  function onBoxPointerDown(e: PointerEvent<HTMLDivElement>) {\n    if (disabled || (e.target as HTMLElement).closest('.tsg__seg')) return;\n    e.preventDefault();\n    const seg = e.currentTarget.querySelector('.tsg__seg') as HTMLElement | null;\n    if (seg) seg.focus();\n  }\n\n  return (\n    <FieldShell\n      variant=\"tfd\"\n      label={label}\n      required={required}\n      invalid={invalid}\n      message={message}\n      icon=\"clock\"\n      className={className}\n    >\n      <div\n        className={'fld__input tfd__box' + (disabled ? ' is-disabled' : '')}\n        onPointerDown={onBoxPointerDown}\n      >\n        <TimeSegments\n          value={val}\n          onCommit={commit}\n          format={format}\n          minuteStep={minuteStep}\n          min={min}\n          max={max}\n          disabled={disabled}\n          ariaLabel={label || 'Time'}\n        />\n      </div>\n    </FieldShell>\n  );\n}\n"]}

package/dist/chunk-37O2ZXD6.js

@@ -0,0 +1,55 @@
+// src/tokens/motion-tokens.ts
+var DEFAULT_DUR = { fast: 0.12, base: 0.18, slow: 0.26 };
+var DEFAULT_EASE = {
+  standard: [0.2, 0, 0, 1],
+  entrance: [0.16, 1, 0.3, 1],
+  exit: [0.4, 0, 1, 1],
+  spring: [0.34, 1.4, 0.5, 1],
+  glide: [0.55, 0, 0.15, 1]
+};
+function build(dur, ease) {
+  const reduced = dur.base <= 5e-3;
+  return {
+    dur,
+    ease,
+    reduced,
+    t: {
+      enter: { duration: dur.base, ease: ease.entrance },
+      exit: { duration: dur.fast, ease: ease.exit },
+      layout: { duration: dur.slow, ease: ease.entrance },
+      settle: reduced ? { duration: 0 } : { type: "spring", visualDuration: dur.base, bounce: 0.22 }
+    }
+  };
+}
+function readFromDom() {
+  const cs = getComputedStyle(document.documentElement);
+  const seconds = (name, fallback) => {
+    const v = cs.getPropertyValue(name).trim();
+    const n = v.slice(-2) === "ms" ? parseFloat(v) / 1e3 : parseFloat(v);
+    return isNaN(n) ? fallback : n;
+  };
+  const bezier = (name, fallback) => {
+    const m = cs.getPropertyValue(name).match(/-?[\d.]+/g);
+    return m && m.length === 4 ? m.map(Number) : fallback;
+  };
+  return build(
+    {
+      fast: seconds("--duration-fast", DEFAULT_DUR.fast),
+      base: seconds("--duration-base", DEFAULT_DUR.base),
+      slow: seconds("--duration-slow", DEFAULT_DUR.slow)
+    },
+    {
+      standard: bezier("--ease-standard", DEFAULT_EASE.standard),
+      entrance: bezier("--ease-entrance", DEFAULT_EASE.entrance),
+      exit: bezier("--ease-exit", DEFAULT_EASE.exit),
+      spring: bezier("--ease-spring", DEFAULT_EASE.spring),
+      glide: bezier("--ease-glide", DEFAULT_EASE.glide)
+    }
+  );
+}
+var UIMotion = typeof document !== "undefined" ? readFromDom() : build(DEFAULT_DUR, DEFAULT_EASE);
+var motion_tokens_default = UIMotion;
+
+export { UIMotion, motion_tokens_default };
+//# sourceMappingURL=chunk-37O2ZXD6.js.map
+//# sourceMappingURL=chunk-37O2ZXD6.js.map

package/dist/chunk-37O2ZXD6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/motion-tokens.ts"],"names":[],"mappings":"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","file":"chunk-37O2ZXD6.js","sourcesContent":["/* motion-tokens.ts - the JSandCSS motion bridge; Motion code reads these token values, never hardcodes them. */\n\nimport type { Transition } from 'motion/react';\n\nexport type Bezier = [number, number, number, number];\n\nexport interface MotionTokens {\n  /** seconds - fast 0.12 - base 0.18 - slow 0.26 */\n  dur: { fast: number; base: number; slow: number };\n  ease: { standard: Bezier; entrance: Bezier; exit: Bezier; spring: Bezier; glide: Bezier };\n  /** ready-made Motion transitions */\n  t: { enter: Transition; exit: Transition; layout: Transition; settle: Transition };\n  reduced: boolean;\n}\n\nconst DEFAULT_DUR: MotionTokens['dur'] = { fast: 0.12, base: 0.18, slow: 0.26 };\nconst DEFAULT_EASE: MotionTokens['ease'] = {\n  standard: [0.2, 0, 0, 1],\n  entrance: [0.16, 1, 0.3, 1],\n  exit: [0.4, 0, 1, 1],\n  spring: [0.34, 1.4, 0.5, 1],\n  glide: [0.55, 0, 0.15, 1],\n};\n\nfunction build(dur: MotionTokens['dur'], ease: MotionTokens['ease']): MotionTokens {\n  const reduced = dur.base <= 0.005; // reduced motion collapses durations to ~1ms\n  return {\n    dur,\n    ease,\n    reduced,\n    t: {\n      enter: { duration: dur.base, ease: ease.entrance },\n      exit: { duration: dur.fast, ease: ease.exit },\n      layout: { duration: dur.slow, ease: ease.entrance },\n      settle: reduced\n        ? { duration: 0 }\n        : { type: 'spring', visualDuration: dur.base, bounce: 0.22 },\n    },\n  };\n}\n\nfunction readFromDom(): MotionTokens {\n  const cs = getComputedStyle(document.documentElement);\n  const seconds = (name: string, fallback: number): number => {\n    const v = cs.getPropertyValue(name).trim();\n    const n = v.slice(-2) === 'ms' ? parseFloat(v) / 1000 : parseFloat(v);\n    return isNaN(n) ? fallback : n;\n  };\n  const bezier = (name: string, fallback: Bezier): Bezier => {\n    const m = cs.getPropertyValue(name).match(/-?[\\d.]+/g);\n    return m && m.length === 4 ? (m.map(Number) as Bezier) : fallback;\n  };\n  return build(\n    {\n      fast: seconds('--duration-fast', DEFAULT_DUR.fast),\n      base: seconds('--duration-base', DEFAULT_DUR.base),\n      slow: seconds('--duration-slow', DEFAULT_DUR.slow),\n    },\n    {\n      standard: bezier('--ease-standard', DEFAULT_EASE.standard),\n      entrance: bezier('--ease-entrance', DEFAULT_EASE.entrance),\n      exit: bezier('--ease-exit', DEFAULT_EASE.exit),\n      spring: bezier('--ease-spring', DEFAULT_EASE.spring),\n      glide: bezier('--ease-glide', DEFAULT_EASE.glide),\n    },\n  );\n}\n\nexport const UIMotion: MotionTokens =\n  typeof document !== 'undefined' ? readFromDom() : build(DEFAULT_DUR, DEFAULT_EASE);\n\nexport default UIMotion;\n"]}

package/dist/chunk-4AZL76UJ.js

@@ -0,0 +1,89 @@
+'use client';import { IconSlot } from './chunk-VVPGEAC6.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TOGGLE_TAG_OWN_PROPS = {
+  children: 1,
+  selected: 1,
+  defaultSelected: 1,
+  onChange: 1,
+  icon: 1,
+  count: 1,
+  size: 1,
+  disabled: 1,
+  className: 1
+};
+function toggleTagRestProps(props, own) {
+  const rest = {};
+  for (const k in props) {
+    if (!own[k]) rest[k] = props[k];
+  }
+  return rest;
+}
+function ToggleTagTick({ selected }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "tag__check collapse",
+      "data-axis": "width",
+      "data-open": selected ? "true" : "false",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("span", { className: "collapse__inner", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2.5 6.5 L5 9 L9.5 3.5",
+          pathLength: "1",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) })
+    }
+  );
+}
+function ToggleTag(props) {
+  const {
+    children,
+    selected: controlledSelected,
+    defaultSelected = false,
+    onChange,
+    icon = null,
+    count = null,
+    size = "md",
+    disabled = false,
+    className = ""
+  } = props;
+  const rest = toggleTagRestProps(
+    props,
+    TOGGLE_TAG_OWN_PROPS
+  );
+  const [uncontrolled, setUncontrolled] = React.useState(defaultSelected);
+  const isControlled = controlledSelected !== void 0;
+  const selected = isControlled ? controlledSelected : uncontrolled;
+  function toggle() {
+    const next = !selected;
+    if (!isControlled) setUncontrolled(next);
+    if (onChange) onChange(next);
+  }
+  const classes = ["tag", "tag--toggle", size === "sm" ? "tag--sm" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      "aria-pressed": selected,
+      disabled,
+      onClick: toggle,
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "tag__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "sm", children: icon }) }) : /* @__PURE__ */ jsx(ToggleTagTick, { selected }),
+        /* @__PURE__ */ jsx("span", { className: "tag__label", children }),
+        count != null && /* @__PURE__ */ jsx("span", { className: "tag__count", children: count })
+      ]
+    }
+  );
+}
+
+export { ToggleTag };
+//# sourceMappingURL=chunk-4AZL76UJ.js.map
+//# sourceMappingURL=chunk-4AZL76UJ.js.map

package/dist/chunk-4AZL76UJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tag/ToggleTag.tsx"],"names":[],"mappings":";;;;AA+BA,IAAM,oBAAA,GAA+C;AAAA,EACnD,QAAA,EAAU,CAAA;AAAA,EACV,QAAA,EAAU,CAAA;AAAA,EACV,eAAA,EAAiB,CAAA;AAAA,EACjB,QAAA,EAAU,CAAA;AAAA,EACV,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,CAAA;AAAA,EACN,QAAA,EAAU,CAAA;AAAA,EACV,SAAA,EAAW;AACb,CAAA;AACA,SAAS,kBAAA,CAAmB,OAAgC,GAAA,EAA6B;AACvF,EAAA,MAAM,OAAgC,EAAC;AACvC,EAAA,KAAA,MAAW,KAAK,KAAA,EAAO;AACrB,IAAA,IAAI,CAAC,IAAI,CAAC,CAAA,OAAQ,CAAC,CAAA,GAAI,MAAM,CAAC,CAAA;AAAA,EAChC;AACA,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAA0B;AAE1D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,qBAAA;AAAA,MACV,WAAA,EAAU,OAAA;AAAA,MACV,WAAA,EAAW,WAAW,MAAA,GAAS,OAAA;AAAA,MAC/B,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAU,iBAAA,EACd,8BAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAC5B,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAE,wBAAA;AAAA,UACF,UAAA,EAAW,GAAA;AAAA,UACX,WAAA,EAAY,KAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe;AAAA;AAAA,SAEnB,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;AAEO,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,QAAA,EAAU,kBAAA;AAAA,IACV,eAAA,GAAkB,KAAA;AAAA,IAClB,QAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,KAAA,GAAQ,IAAA;AAAA,IACR,IAAA,GAAO,IAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,SAAA,GAAY;AAAA,GACd,GAAI,KAAA;AACJ,EAAA,MAAM,IAAA,GAAO,kBAAA;AAAA,IACX,KAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,eAAe,CAAA;AACtE,EAAA,MAAM,eAAe,kBAAA,KAAuB,MAAA;AAC5C,EAAA,MAAM,QAAA,GAAW,eAAe,kBAAA,GAAqB,YAAA;AAErD,EAAA,SAAS,MAAA,GAAS;AAChB,IAAA,MAAM,OAAO,CAAC,QAAA;AACd,IAAA,IAAI,CAAC,YAAA,EAAc,eAAA,CAAgB,IAAI,CAAA;AACvC,IAAA,IAAI,QAAA,WAAmB,IAAI,CAAA;AAAA,EAC7B;AAEA,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,EAAO,aAAA,EAAe,SAAS,IAAA,GAAO,SAAA,GAAY,EAAA,EAAI,SAAS,CAAA,CAC7E,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,cAAA,EAAc,QAAA;AAAA,MACd,QAAA;AAAA,MACA,OAAA,EAAS,MAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,EAC5B,CAAA,mBAEA,GAAA,CAAC,iBAAc,QAAA,EAAoB,CAAA;AAAA,wBAErC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAc,QAAA,EAAS,CAAA;AAAA,QACtC,SAAS,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAc,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACxD;AAEJ","file":"chunk-4AZL76UJ.js","sourcesContent":["'use client';\n\n/* ToggleTag - on/off filter chip (<button aria-pressed>); owns its selection state. */\n\nimport * as React from 'react';\nimport { IconSlot } from '../icon/IconSlot';\n\n/** ToggleTag - the on/off filter chip (<button aria-pressed>). */\nexport interface ToggleTagProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'children'\n> {\n  /** The label. */\n  children: React.ReactNode;\n  /** Controlled selected value. Omit for uncontrolled. */\n  selected?: boolean;\n  /** Uncontrolled initial value. */\n  defaultSelected?: boolean;\n  /** Fires with the next value on every toggle. */\n  onChange?: (selected: boolean) => void;\n  /** Your own icon node; replaces the tick. Selected state reads from the wash. */\n  icon?: React.ReactNode | null;\n  /** Optional result count - rendered mono/tabular. */\n  count?: React.ReactNode;\n  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */\n  size?: 'md' | 'sm';\n  disabled?: boolean;\n  className?: string;\n}\n\n/* GOTCHA: split props manually instead of object-rest. */\nconst TOGGLE_TAG_OWN_PROPS: Record<string, number> = {\n  children: 1,\n  selected: 1,\n  defaultSelected: 1,\n  onChange: 1,\n  icon: 1,\n  count: 1,\n  size: 1,\n  disabled: 1,\n  className: 1,\n};\nfunction toggleTagRestProps(props: Record<string, unknown>, own: Record<string, number>) {\n  const rest: Record<string, unknown> = {};\n  for (const k in props) {\n    if (!own[k]) rest[k] = props[k];\n  }\n  return rest;\n}\n\nfunction ToggleTagTick({ selected }: { selected: boolean }) {\n  /* collapse.css mechanism on spans - width 0fr and 1fr, content clipped */\n  return (\n    <span\n      className=\"tag__check collapse\"\n      data-axis=\"width\"\n      data-open={selected ? 'true' : 'false'}\n      aria-hidden=\"true\"\n    >\n      <span className=\"collapse__inner\">\n        <svg viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M2.5 6.5 L5 9 L9.5 3.5\"\n            pathLength=\"1\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </span>\n    </span>\n  );\n}\n\nexport function ToggleTag(props: ToggleTagProps) {\n  const {\n    children,\n    selected: controlledSelected,\n    defaultSelected = false,\n    onChange,\n    icon = null,\n    count = null,\n    size = 'md',\n    disabled = false,\n    className = '',\n  } = props;\n  const rest = toggleTagRestProps(\n    props as unknown as Record<string, unknown>,\n    TOGGLE_TAG_OWN_PROPS,\n  );\n  const [uncontrolled, setUncontrolled] = React.useState(defaultSelected);\n  const isControlled = controlledSelected !== undefined;\n  const selected = isControlled ? controlledSelected : uncontrolled;\n\n  function toggle() {\n    const next = !selected;\n    if (!isControlled) setUncontrolled(next);\n    if (onChange) onChange(next);\n  }\n\n  const classes = ['tag', 'tag--toggle', size === 'sm' ? 'tag--sm' : '', className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      aria-pressed={selected}\n      disabled={disabled}\n      onClick={toggle}\n      {...rest}\n    >\n      {icon ? (\n        <span className=\"tag__icon\">\n          <IconSlot size=\"sm\">{icon}</IconSlot>\n        </span>\n      ) : (\n        <ToggleTagTick selected={selected} />\n      )}\n      <span className=\"tag__label\">{children}</span>\n      {count != null && <span className=\"tag__count\">{count}</span>}\n    </button>\n  );\n}\n"]}