@gratiaos/ui 1.0.0

package/dist/primitives/pill.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+/**
+ * Garden UI — Pill primitive (headless)
+ * -------------------------------------
+ * Whisper: "labels should sit light, but speak clearly." 🌬️
+ *
+ * Purpose
+ *  • A tiny, versatile label/chip primitive for counts, states, or tags.
+ *  • Headless by design — emits data-attributes only; visuals live in styles/pill.css.
+ *
+ * Data API
+ *  • [data-ui="pill"]                — root
+ *  • [data-variant="soft|solid|outline|subtle"]
+ *  • [data-tone="accent|positive|warning|danger|subtle(default)"]
+ *  • [data-density="cozy|snug"]      — vertical rhythm/size
+ *
+ * A11y
+ *  • Content is the accessible label. Leading/trailing adornments are
+ *    `aria-hidden` so screen readers read the text once.
+ *  • When rendered as <button>, we default `type="button"` to avoid accidental
+ *    form submission — mirrors the Button primitive behaviour.
+ *
+ * Theming
+ *  • Colors, radius and borders are driven by tokens in styles/pill.css.
+ *  • No hard-coded hex here; skin chooses the palette via data-attrs.
+ *
+ * When to use
+ *  • For small, inline status or metadata (e.g., "Beta", counters, light tags).
+ *  • For interactive chips, render as `as="button"`/`as="a"` and style hover
+ *    states in the skin.
+ */
+/** Visual tone (mapped by the skin). */
+type Tone = 'accent' | 'positive' | 'warning' | 'danger' | 'subtle' | (string & {});
+/** Visual weight (see styles for exact rendering). */
+type Variant = 'soft' | 'solid' | 'outline' | 'subtle' | (string & {});
+/** Vertical density (compact vs roomy). */
+type Density = 'cozy' | 'snug' | (string & {});
+/** Element to render as (defaults to span). */
+type AsElement = 'span' | 'button' | 'a';
+type PillOwnProps = {
+    /** Render as a different element (span | button | a). Defaults to span. */
+    as?: AsElement;
+    /** Visual weight. Defaults to "soft". */
+    variant?: Variant;
+    /** Color tone. Defaults to "subtle". */
+    tone?: Tone;
+    /** Vertical density. Defaults to "cozy". */
+    density?: Density;
+    /** Optional leading adornment (icon, dot, avatar). */
+    leading?: React.ReactNode;
+    /** Optional trailing adornment (icon, counter, close). */
+    trailing?: React.ReactNode;
+};
+export type PillProps<TAs extends AsElement = 'span'> = PillOwnProps & Omit<React.ComponentPropsWithoutRef<TAs>, 'color'>;
+export declare const Pill: <TAs extends AsElement = "span">(props: PillProps<TAs> & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.ReactElement | null;
+export default Pill;
+//# sourceMappingURL=pill.d.ts.map

package/dist/primitives/pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../src/primitives/pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,wCAAwC;AACxC,KAAK,IAAI,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACpF,sDAAsD;AACtD,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACvE,2CAA2C;AAC3C,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE/C,+CAA+C;AAC/C,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,GAAG,CAAC;AAEzC,KAAK,YAAY,GAAG;IAClB,2EAA2E;IAC3E,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,SAAS,GAAG,MAAM,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;AAiD1H,eAAO,MAAM,IAAI,EAAY,CAAC,GAAG,SAAS,SAAS,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAErJ,eAAe,IAAI,CAAC"}

package/dist/primitives/pill.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+/** Simple class join helper (no runtime deps). */
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+// Base utility classes — the skin (CSS) handles colors/borders via data-attrs.
+/**
+ * Headless Pill
+ * - Emits `data-ui`, `data-variant`, `data-tone`, `data-density`.
+ * - No fixed colors here; styles/pill.css is the single source of truth.
+ */
+const PillInner = (props, ref) => {
+    const { as, variant = 'soft', tone = 'subtle', density = 'cozy', leading, trailing, className, children, ...rest } = props;
+    const Comp = as ?? 'span';
+    // If rendered as a button, default to type=button to avoid form submission.
+    const buttonDefaults = Comp === 'button' && !rest.type ? { type: 'button' } : null;
+    return (_jsxs(Comp, { ref: ref, "data-ui": "pill", "data-variant": variant, "data-tone": tone, "data-density": density, className: cx(className) || undefined, ...buttonDefaults, ...rest, children: [leading && (
+            // Presentational — hidden from AT since the text already conveys the label
+            _jsx("span", { "aria-hidden": "true", "data-slot": "icon leading", children: leading })), children, trailing && (_jsx("span", { "aria-hidden": "true", "data-slot": "icon trailing", children: trailing }))] }));
+};
+const _Pill = React.forwardRef(PillInner);
+_Pill.displayName = 'Pill';
+export const Pill = _Pill;
+export default Pill;
+//# sourceMappingURL=pill.js.map

package/dist/primitives/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../src/primitives/pill.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4D/B,kDAAkD;AAClD,SAAS,EAAE,CAAC,GAAG,KAA+C;IAC5D,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,+EAA+E;AAC/E;;;;GAIG;AACH,MAAM,SAAS,GAAG,CAAiC,KAAqB,EAAE,GAAoC,EAAE,EAAE;IAChH,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE3H,MAAM,IAAI,GAAQ,EAAE,IAAI,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,MAAM,cAAc,GAAG,IAAI,KAAK,QAAQ,IAAI,CAAE,IAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1G,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAU,aACP,MAAM,kBACA,OAAO,eACV,IAAI,kBACD,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,SAAS,KACjC,cAAc,KACb,IAAgC,aACpC,OAAO,IAAI;YACV,2EAA2E;YAC3E,8BAAkB,MAAM,eAAW,cAAc,YAC9C,OAAO,GACH,CACR,EACA,QAAQ,EACR,QAAQ,IAAI,CACX,8BAAkB,MAAM,eAAW,eAAe,YAC/C,QAAQ,GACJ,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;AAC1C,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,IAAI,GAAG,KAAgI,CAAC;AAErJ,eAAe,IAAI,CAAC"}

package/dist/primitives/slot.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** A minimal Slot primitive to forward props to child (like Radix Slot) */
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=slot.d.ts.map

package/dist/primitives/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/primitives/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,2EAA2E;AAC3E,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD,eAAO,MAAM,IAAI,+EAQf,CAAC"}

package/dist/primitives/slot.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export const Slot = React.forwardRef(function Slot({ children, ...rest }, ref) {
+    if (React.isValidElement(children)) {
+        return React.cloneElement(children, { ref, ...rest });
+    }
+    return _jsx("span", { ref: ref, ...rest, children: children });
+});
+//# sourceMappingURL=slot.js.map

package/dist/primitives/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../src/primitives/slot.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,SAAS,IAAI,CACxE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACrB,GAAG;IAEH,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,YAAY,CAAC,QAAe,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IAC/D,CAAC;IACD,OAAO,eAAM,GAAG,EAAE,GAAU,KAAM,IAAI,YAAG,QAAQ,GAAQ,CAAC;AAC5D,CAAC,CAAC,CAAC"}

package/dist/primitives/toast.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Garden UI — Toast primitive (headless)
+ * --------------------------------------
+ * Rendering is data-attribute driven; visuals live in styles/toast.css.
+ * Emit with `showToast(...)` (CustomEvent), render with `<Toaster/>`.
+ *
+ * A11y
+ *  • Each item is `role="status"` with `aria-atomic="true"` so screen readers
+ *    announce the toast as a single unit.
+ *  • Items are focusable by default (tabIndex=0). Focus/hover pauses auto‑dismiss;
+ *    blur/mouseleave resumes. Keyboard: Enter/Space dismiss (when dismissOnClick),
+ *    Escape always dismisses.
+ *
+ * Theming
+ *  • Duration prefers `--dur-toast`; otherwise derives from `--dur-pulse` with a
+ *    generous hold. Colors/shape come from tokens: `--elev`, `--text`, `--border`,
+ *    and `--color-*` accents.
+ *
+ *
+ * UI data‑states (handled by the primitive)
+ *  • Each toast mounts with `data-state="entering"` and clears it on next frame
+ *    so CSS can ease in.
+ *  • On dismiss, we set `data-state="leaving"` and remove the node after the
+ *    tokenized transition (see styles/toast.css).
+ *
+ * Event API (headless, global)
+ *  • showToast("Saved ✓", { variant: "positive" })
+ *  • showToast({ key: "sync", title: "Syncing…", variant: "neutral" }) // keyed upsert
+ *  • clearToast()                     // remove all
+ *  • clearToast("sync")               // remove item(s) with key
+ */
+import React from 'react';
+export type ToastVariant = 'neutral' | 'positive' | 'warning' | 'danger';
+export type ToastOptions = {
+    /** Visual style (maps to data-variant for the skin). */
+    variant?: ToastVariant;
+    /** Override auto-dismiss duration in ms. Falls back to CSS tokens. */
+    durationMs?: number;
+    /** Optional stable key: upserts (replace/resets) an existing toast with the same key. */
+    key?: string;
+    /** Optional title to render on the first line (see styles/toast.css). */
+    title?: string;
+    /** Optional description to render on the second line. */
+    desc?: string;
+    /** Optional plain message (single-line). If title/desc are present, message is ignored in UI. */
+    message?: string;
+    /** Optional simple icon glyph (emoji / short text). For richer icons, use Toaster's renderIcon(). */
+    icon?: string;
+    /** Optional hook called when the toast is dismissed (timeout/click/Escape/clear). */
+    onDismiss?: () => void;
+    /** Optional click handler — runs before dismiss (if enabled). */
+    onClick?: () => void;
+};
+/**
+ * Dev helper — `useToasterTest()`
+ * --------------------------------
+ * Whisper: "debug should feel playful, not noisy." 🌬️
+ *
+ * Purpose
+ *  • Tiny opt‑in hook to exercise the toast stack during development.
+ *  • Provides a keyboard hotkey (Alt+T) that cycles demo toasts and Alt+Y to clear.
+ *  • Exposes helpers to fire, clear, and run an interval-based "auto" demo.
+ *
+ * Usage
+ *  import { Toaster, useToasterTest } from '@gratiaos/ui';
+ *  ...
+ *  function DevRoot() {
+ *    useToasterTest(); // Alt+T to push a demo toast, Alt+Y to clear
+ *    return <Toaster />;
+ *  }
+ */
+export declare function useToasterTest(opts?: {
+    enabled?: boolean;
+    intervalMs?: number;
+}): {
+    fireDemo: () => void;
+    clearDemo: () => void;
+    startAuto: () => void;
+    stopAuto: () => void;
+    readonly running: boolean;
+};
+/**
+ * Headless event API — emit a toast from anywhere in the app.
+ * Overloads:
+ *   showToast('Saved ✓', { variant: 'positive' })
+ *   showToast({ title: 'Saved', desc: 'Your note is now in the timeline.', variant: 'positive' })
+ */
+export declare function showToast(message: string, opts?: ToastOptions): void;
+export declare function showToast(opts: ToastOptions): void;
+/** Clear by key or all. */
+export declare function clearToast(key?: string): void;
+export type ToastItemLike = {
+    id: number;
+    variant: ToastVariant;
+    durationMs: number;
+    key?: string;
+    title?: string;
+    desc?: string;
+    message?: string;
+    icon?: string;
+    onDismiss?: () => void;
+    onClick?: () => void;
+    uiState?: 'entering' | 'leaving';
+};
+export type ToastRenderIcon = (item: Omit<ToastItemLike, 'id' | 'durationMs'>) => React.ReactNode;
+export type ToasterProps = {
+    /** Where to pin the stack. Defaults to bottom-center. */
+    position?: 'bottom-center' | 'top-right' | 'top-center' | 'bottom-right';
+    /** Max visible toasts at once. Older ones drop first. Default: 3 */
+    max?: number;
+    /** Click to dismiss. Default: true */
+    dismissOnClick?: boolean;
+    /** Optional className; styles live in CSS under [data-ui="toast"]. */
+    className?: string;
+    /** Optional render function for a richer leading icon. */
+    renderIcon?: ToastRenderIcon;
+    /** Whether toast items can receive focus for keyboard users. Default: true */
+    focusable?: boolean;
+};
+/**
+ * Toaster — headless renderer using data attributes only.
+ * Visuals are provided by styles/toast.css.
+ */
+export declare const Toaster: React.FC<ToasterProps>;
+//# sourceMappingURL=toast.d.ts.map

package/dist/primitives/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/primitives/toast.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,YAAY,GAAG;IACzB,wDAAwD;IACxD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAUF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;;;;;EAmFA;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;AACtE,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;AAcpD,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAO7C;AAGD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC,CAAC;AA4CF,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,YAAY,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AAElG,MAAM,MAAM,YAAY,GAAG;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;IACzE,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmT1C,CAAC"}