@waveinno/ui 0.0.0-stage → 0.1.1

package/dist/components/ui/confirm-dialog.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/**
+ * Confirmation for actions that cannot be taken back — delete, suspend,
+ * void, revoke.
+ *
+ * Built to slow the hand down just enough: a clear icon in a halo of its
+ * tone, the consequence in one sentence, the actual things that will go
+ * (first few by name, then "+ n more"), and — for big or irreversible
+ * actions — a word to type before the button unlocks. The confirm button
+ * names the action and the count ("Delete 12 rows"), never just "OK".
+ * Focus starts on Cancel, so Enter alone never destroys anything.
+ */
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** What goes: names shown in a list (first `previewCount`, then "+ n more"). */
+    items?: string[];
+    previewCount?: number;
+    /** Require typing this word (e.g. "DELETE") before the button unlocks. */
+    confirmWord?: string;
+    confirmLabel: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    tone?: "danger" | "warning";
+    icon?: React.ReactNode;
+    /** Runs on confirm; the button spins until it settles, the dialog closes on success. */
+    onConfirm: () => void | Promise<void>;
+    labels?: {
+        typeToConfirm?: (word: string) => string;
+        more?: (n: number) => string;
+    };
+}
+export declare function ConfirmDialog({ open, onOpenChange, title, description, items, previewCount, confirmWord, confirmLabel, cancelLabel, tone, icon, onConfirm, labels, }: ConfirmDialogProps): React.JSX.Element;

package/dist/components/ui/confirm-dialog.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as i from"@radix-ui/react-dialog";import{CircleAlert as L,ShieldAlert as $,Trash2 as A}from"lucide-react";import*as s from"react";import{cn as n}from"../../lib/utils.js";import{Button as C}from"./button.js";import{DialogOverlay as F}from"./dialog.js";import{Input as O}from"./input.js";function q({open:d,onOpenChange:p,title:R,description:x,items:b,previewCount:D=3,confirmWord:l,confirmLabel:P,cancelLabel:k="Cancel",tone:T="danger",icon:z,onConfirm:B,labels:S}){const[c,f]=s.useState(""),[m,v]=s.useState(!1),[N,g]=s.useState(null),_=s.useRef(null);s.useEffect(()=>{d&&(f(""),g(null))},[d]);const y=!!l&&c.trim().toUpperCase()!==l.toUpperCase(),h={typeToConfirm:t=>`Type ${t} to confirm`,more:t=>`+ ${t} more`,...S},r=T==="danger",u=b?.slice(0,D)??[],w=(b?.length??0)-u.length;return e(i.Root,{open:d,onOpenChange:t=>!m&&p(t),children:a(i.Portal,{children:[e(F,{}),a(i.Content,{"data-dialog":"",onOpenAutoFocus:t=>{t.preventDefault(),_.current?.focus()},className:"fixed left-1/2 top-1/2 z-50 w-[calc(100vw-32px)] max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-[18px] border border-border bg-raised outline-none",children:[e("div",{"aria-hidden":!0,className:n("pointer-events-none absolute inset-x-0 top-0 h-28",r?"bg-[radial-gradient(70%_100%_at_50%_0%,var(--danger-subtle),transparent)]":"bg-[radial-gradient(70%_100%_at_50%_0%,var(--warning-subtle),transparent)]")}),a("div",{className:"relative px-6 pb-5 pt-7 text-center",children:[a("div",{className:"relative mx-auto mb-4 grid size-14 place-items-center",children:[e("span",{className:n("absolute inset-0 rounded-full",r?"bg-danger/10":"bg-warning/10")}),e("span",{className:n("absolute inset-[7px] rounded-full",r?"bg-danger/15":"bg-warning/15")}),e("span",{className:n("relative grid size-9 place-items-center rounded-full text-white shadow-[inset_0_1px_0_rgba(255,255,255,.3)]",r?"bg-[linear-gradient(180deg,#ef4444,#dc2626)] shadow-[0_6px_16px_-6px_rgba(220,38,38,.7)]":"bg-[linear-gradient(180deg,#f59e0b,#b45309)] shadow-[0_6px_16px_-6px_rgba(180,83,9,.7)]","[&_svg]:size-[18px]"),children:z??(r?e(A,{}):e($,{}))})]}),e(i.Title,{className:"disp text-[17px] font-semibold leading-6 text-text",children:R}),x?e(i.Description,{className:"mx-auto mt-1.5 max-w-[34ch] text-[13px] leading-5 text-muted",children:x}):null,u.length?a("ul",{className:"mt-4 space-y-1 rounded-[12px] border border-border bg-surface p-2 text-left",children:[u.map((t,o)=>a("li",{className:"flex items-center gap-2 rounded-[8px] px-2 py-1.5 text-[13px] text-body",children:[e("span",{className:n("size-1.5 shrink-0 rounded-full",r?"bg-danger":"bg-warning")}),e("span",{className:"truncate",children:t})]},`${t}-${o}`)),w>0?e("li",{className:"px-2 py-1 text-[12px] font-medium text-muted",children:h.more(w)}):null]}):null,l?a("div",{className:"mt-4 text-left",children:[e("label",{className:"mb-1.5 block text-[12px] font-medium text-muted",children:h.typeToConfirm(l).split(l).map((t,o,E)=>a(s.Fragment,{children:[t,o<E.length-1?e("b",{className:n("font-semibold",r?"text-danger":"text-warning"),children:l}):null]},o))}),e(O,{value:c,onChange:t=>f(t.target.value),autoComplete:"off",spellCheck:!1,className:"text-center font-medium tracking-[0.2em] uppercase",state:!y&&c?"success":"default"})]}):null,N?a("p",{role:"alert",className:"mt-3 flex items-center justify-center gap-1.5 text-[12.5px] text-danger",children:[e(L,{className:"size-3.5"})," ",N]}):null]}),a("div",{className:"relative grid grid-cols-2 gap-2 border-t border-border bg-surface/70 px-6 py-4",children:[e(C,{ref:_,disabled:m,onClick:()=>p(!1),children:k}),e(C,{variant:r?"danger":"primary",disabled:y,loading:m,className:n(r&&"shadow-[0_6px_16px_-8px_rgba(220,38,38,.8)]"),onClick:async()=>{v(!0),g(null);try{await B(),p(!1)}catch(t){g(t instanceof Error?t.message:String(t))}finally{v(!1)}},children:P})]})]})]})})}export{q as ConfirmDialog};

package/dist/components/ui/date-picker.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { type Weekday } from "./calendar";
+/**
+ * Date controls — DatePicker, DateTimePicker and DateRangePicker, all on the
+ * same Calendar so they look and behave as one family.
+ *
+ * Values are plain strings, exactly what an API takes, so forms never deal with
+ * time zones: "2026-10-10" for a day, "2026-10-10T14:30" for a local date and
+ * time (like <input type="datetime-local">), { from, to } of days for a range.
+ * "" means empty.
+ */
+interface Shared {
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    className?: string;
+    /** Month and weekday names and digits, e.g. "bn-BD". */
+    locale?: string;
+    /** 0 = Sunday … 6 = Saturday. */
+    weekStartsOn?: Weekday;
+}
+export declare function DatePicker({ value, onChange, id, placeholder, min, max, disabled, clearable, className, locale, weekStartsOn, labels, }: Shared & {
+    /** "2026-10-10" or "". */
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    labels?: {
+        today?: string;
+        clear?: string;
+    };
+}): React.JSX.Element;
+export declare function DateTimePicker({ value, onChange, id, placeholder, min, max, step, hourCycle, defaultTime, disabled, clearable, className, locale, weekStartsOn, labels, }: Shared & {
+    /** "2026-10-10T14:30" (local wall time) or "". */
+    value: string;
+    onChange: (value: string) => void;
+    /** Earliest / latest, "YYYY-MM-DDTHH:mm". */
+    min?: string;
+    max?: string;
+    step?: number;
+    hourCycle?: 12 | 24;
+    /** Time used when a day is picked before any time. */
+    defaultTime?: string;
+    labels?: {
+        now?: string;
+        done?: string;
+        clear?: string;
+        time?: string;
+    };
+}): React.JSX.Element;
+export interface DateRangeValue {
+    /** "2026-10-01" or "". */
+    from: string;
+    /** "2026-10-07" or "". */
+    to: string;
+}
+export interface DateRangePreset {
+    label: string;
+    range: () => {
+        from: Date;
+        to: Date;
+    };
+}
+/** The presets reports reach for most. Pass your own (translated) list to replace them. */
+export declare const DEFAULT_RANGE_PRESETS: DateRangePreset[];
+export declare function DateRangePicker({ value, onChange, id, placeholder, min, max, presets, numberOfMonths, disabled, clearable, className, locale, weekStartsOn, labels, }: Shared & {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    min?: string;
+    max?: string;
+    /** Quick ranges on the left; [] hides the list. */
+    presets?: DateRangePreset[];
+    numberOfMonths?: 1 | 2;
+    labels?: {
+        clear?: string;
+        pickEnd?: string;
+    };
+}): React.JSX.Element;
+export {};

package/dist/components/ui/date-picker.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as g from"@radix-ui/react-popover";import{CalendarClock as j,CalendarDays as W,CalendarRange as _,X as H}from"lucide-react";import*as A from"react";import{cn as v}from"../../lib/utils.js";import{addDays as E,addMonths as G,Calendar as I,parseIsoDay as x,toIsoDay as r}from"./calendar.js";import{inputClass as U}from"./input.js";import{formatTime as X,parseTime as q,TimeColumns as J,toTime as Y}from"./time-picker.js";const S="cursor-pointer rounded-ctl px-2 py-1 text-[12.5px] transition-colors disabled:cursor-not-allowed disabled:opacity-40",z="z-[60] rounded-dlg border border-border bg-raised p-3 shadow-elev3 outline-none";function B({id:t,icon:a,text:u,placeholder:N,open:P,disabled:h,onClear:l,clearLabel:p,className:C}){return s("div",{className:v("relative",C),children:[e(g.Trigger,{asChild:!0,disabled:h,children:s("button",{id:t,type:"button",className:v(U,"flex cursor-pointer items-center gap-2 text-left",P&&"border-primary ring-2 ring-primary/20",l&&u&&"pr-9"),children:[e(a,{className:"size-4 shrink-0 text-muted"}),e("span",{className:v("num min-w-0 flex-1 truncate",!u&&"text-placeholder"),children:u??N})]})}),l&&u&&!h?e("button",{type:"button","aria-label":p,onClick:l,className:"absolute right-2 top-1/2 grid size-6 -translate-y-1/2 cursor-pointer place-items-center rounded-full text-muted transition-colors hover:bg-hover hover:text-text",children:e(H,{className:"size-3.5"})}):null]})}const V=t=>new Intl.DateTimeFormat(t,{weekday:"short",day:"numeric",month:"short",year:"numeric"});function ne({value:t,onChange:a,id:u,placeholder:N="Pick a date",min:P,max:h,disabled:l,clearable:p=!0,className:C,locale:T="en-GB",weekStartsOn:F=1,labels:R}){const[y,O]=A.useState(!1),D=x(t),b=x(P),n=x(h),o=new Date,c=(!b||r(o)>=r(b))&&(!n||r(o)<=r(n)),w={today:"Today",clear:"Clear",...R},f=m=>{a(r(m)),O(!1)};return s(g.Root,{open:y,onOpenChange:O,children:[e(B,{id:u,icon:W,text:D?V(T).format(D):null,placeholder:N,open:y,disabled:l,onClear:p?()=>a(""):void 0,clearLabel:w.clear,className:C}),e(g.Portal,{children:s(g.Content,{"data-pop":"",align:"start",sideOffset:6,collisionPadding:12,onOpenAutoFocus:m=>m.preventDefault(),className:z,children:[e(I,{selected:D,onDayClick:f,min:b,max:n,locale:T,weekStartsOn:F,autoFocus:!0}),s("div",{className:"mt-2 flex items-center justify-between border-t border-border pt-2",children:[e("button",{type:"button",disabled:!c,onClick:()=>f(o),className:v(S,"font-medium text-primary hover:bg-primary-subtle"),children:w.today}),p&&D?e("button",{type:"button",onClick:()=>{a(""),O(!1)},className:v(S,"text-muted hover:bg-hover hover:text-text"),children:w.clear}):null]})]})})]})}function re({value:t,onChange:a,id:u,placeholder:N="Pick a date and time",min:P,max:h,step:l=5,hourCycle:p=24,defaultTime:C="09:00",disabled:T,clearable:F=!0,className:R,locale:y="en-GB",weekStartsOn:O=1,labels:D}){const[b,n]=A.useState(!1),o=x(t),c=q(t.split("T")[1]),w=x(P),f=x(h),m={now:"Now",done:"Done",clear:"Clear",time:"Time",...D},L=(d,M)=>a(`${r(d)}T${M}`),$=o&&w&&r(o)===r(w)?P.split("T")[1]:void 0,i=o&&f&&r(o)===r(f)?h.split("T")[1]:void 0,k=o&&c?`${V(y).format(o)} \xB7 ${X(Y(c),{locale:y,hourCycle:p})}`:null;return s(g.Root,{open:b,onOpenChange:n,children:[e(B,{id:u,icon:j,text:k,placeholder:N,open:b,disabled:T,onClear:F?()=>a(""):void 0,clearLabel:m.clear,className:R}),e(g.Portal,{children:s(g.Content,{"data-pop":"",align:"start",sideOffset:6,collisionPadding:12,onOpenAutoFocus:d=>d.preventDefault(),className:z,children:[s("div",{className:"flex flex-col gap-4 sm:flex-row",children:[e(I,{selected:o,onDayClick:d=>L(d,c?Y(c):C),min:w,max:f,locale:y,weekStartsOn:O,autoFocus:!0}),s("div",{className:"border-border sm:border-l sm:pl-4",children:[e("p",{className:"disp mb-2 hidden h-8 items-center text-[13.5px] font-semibold text-text sm:flex",children:m.time}),e(J,{value:c,onChange:d=>L(o??new Date,Y(d)),step:l,hourCycle:p,min:$,max:i,locale:y})]})]}),s("div",{className:"mt-3 flex items-center justify-between border-t border-border pt-2",children:[e("button",{type:"button",onClick:()=>{const d=new Date,M=Math.round(d.getMinutes()/l)*l;L(d,Y({h:(d.getHours()+Math.floor(M/60))%24,m:M%60}))},className:v(S,"font-medium text-primary hover:bg-primary-subtle"),children:m.now}),s("div",{className:"flex items-center gap-1",children:[F&&k?e("button",{type:"button",onClick:()=>a(""),className:v(S,"text-muted hover:bg-hover hover:text-text"),children:m.clear}):null,e("button",{type:"button",onClick:()=>n(!1),className:v(S,"bg-primary px-3 font-medium text-white hover:bg-primary-hover"),children:m.done})]})]})]})})]})}const K=[{label:"Today",range:()=>({from:new Date,to:new Date})},{label:"Yesterday",range:()=>({from:E(new Date,-1),to:E(new Date,-1)})},{label:"Last 7 days",range:()=>({from:E(new Date,-6),to:new Date})},{label:"Last 30 days",range:()=>({from:E(new Date,-29),to:new Date})},{label:"This month",range:()=>{const t=new Date;return{from:new Date(t.getFullYear(),t.getMonth(),1),to:t}}},{label:"Last month",range:()=>{const t=G(new Date(new Date().getFullYear(),new Date().getMonth(),1),-1);return{from:t,to:new Date(t.getFullYear(),t.getMonth()+1,0)}}}];function ae({value:t,onChange:a,id:u,placeholder:N="Pick a date range",min:P,max:h,presets:l=K,numberOfMonths:p=2,disabled:C,clearable:T=!0,className:F,locale:R="en-GB",weekStartsOn:y=1,labels:O}){const[D,b]=A.useState(!1),n=x(t.from),o=x(t.to),c={clear:"Clear",pickEnd:"Now pick the last day",...O},w=new Intl.DateTimeFormat(R,{day:"numeric",month:"short"}),f=new Intl.DateTimeFormat(R,{day:"numeric",month:"short",year:"numeric"}),m=n&&o?r(n)===r(o)?f.format(n):`${(n.getFullYear()===o.getFullYear()?w:f).format(n)} \u2013 ${f.format(o)}`:null,L=i=>{if(!n||o||i<n)return a({from:r(i),to:""});a({from:t.from,to:r(i)}),b(!1)},$=i=>{const k=i.range();return t.from===r(k.from)&&t.to===r(k.to)};return s(g.Root,{open:D,onOpenChange:b,children:[e(B,{id:u,icon:_,text:m,placeholder:N,open:D,disabled:C,onClear:T?()=>a({from:"",to:""}):void 0,clearLabel:c.clear,className:F}),e(g.Portal,{children:e(g.Content,{"data-pop":"",align:"start",sideOffset:6,collisionPadding:12,onOpenAutoFocus:i=>i.preventDefault(),className:z,children:s("div",{className:"flex flex-col gap-3 sm:flex-row",children:[l.length?e("ul",{className:"flex shrink-0 gap-1 overflow-x-auto border-border pb-2 sm:w-36 sm:flex-col sm:overflow-visible sm:border-r sm:pb-0 sm:pr-3",children:l.map(i=>e("li",{children:e("button",{type:"button",onClick:()=>{const k=i.range();a({from:r(k.from),to:r(k.to)}),b(!1)},className:v("w-full cursor-pointer whitespace-nowrap rounded-ctl px-2.5 py-1.5 text-left text-[13px] transition-colors",$(i)?"bg-primary-subtle font-medium text-primary":"text-body hover:bg-hover hover:text-text"),children:i.label})},i.label))}):null,s("div",{children:[e(I,{range:{from:n,to:o},onDayClick:L,min:x(P),max:x(h),locale:R,weekStartsOn:y,numberOfMonths:p,defaultMonth:n??(p===2?G(new Date,-1):void 0),autoFocus:!0}),s("div",{className:"mt-2 flex min-h-8 items-center justify-between border-t border-border pt-2",children:[e("p",{className:"num text-[12px] text-muted",children:n&&!o?c.pickEnd:m}),T&&(n||o)?e("button",{type:"button",onClick:()=>a({from:"",to:""}),className:v(S,"text-muted hover:bg-hover hover:text-text"),children:c.clear}):null]})]})]})})})]})}export{K as DEFAULT_RANGE_PRESETS,ne as DatePicker,ae as DateRangePicker,re as DateTimePicker};

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,54 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+/**
+ * Dialog — two shapes, one API.
+ *
+ * `drawer` (default): forms and confirmations slide in from the right, full
+ * height, like the record drawer. The page behind stays in view, nothing jumps
+ * to the middle of the screen, and a long form scrolls inside the panel while
+ * its actions stay put at the bottom.
+ *
+ * `center`: launchers that belong in the middle of the screen — the command
+ * palette and the app switcher.
+ *
+ * On a laptop the drawer floats: 8px off the screen edges, rounded, on the
+ * deepest shadow, so it reads as an object over the page rather than a strip
+ * bolted to it. On a phone it is full screen. The header can carry an icon tile
+ * and an eyebrow over a faint brand wash; the footer is frosted so a long form
+ * scrolls under it without losing its actions.
+ *
+ * Beside Esc the drawer has two size buttons: widen (one step wider, for a form
+ * that needs a second column) and full width (the whole screen, for a long
+ * record or a table). Each toggles back. `resizable={false}` hides them.
+ */
+declare const SIZES: {
+    readonly sm: "max-w-[420px]";
+    readonly md: "max-w-[520px]";
+    readonly lg: "max-w-[680px]";
+    readonly xl: "max-w-[880px]";
+};
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Maximum width, e.g. "max-w-[560px]". The drawer is full width on phones. */
+    width?: string;
+    /** Width preset; `width` wins when both are given. */
+    size?: keyof typeof SIZES;
+    /** Drawer only: show the widen / full-width buttons. On by default. */
+    resizable?: boolean;
+    hideClose?: boolean;
+    variant?: "drawer" | "center";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogHeader: ({ className, icon, eyebrow, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    /** A lucide icon (or any node) in a tinted tile beside the title. */
+    icon?: React.ReactNode;
+    /** One short line above the title: the object or step, e.g. "Rate plan" or "Step 2 of 3". */
+    eyebrow?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const DialogBody: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const DialogFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/dist/components/ui/dialog.js

@@ -0,0 +1 @@
+"use client";import{Fragment as T,jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";import{Maximize2 as y,Minimize2 as w,PanelRightClose as D,PanelRightOpen as R,X as N}from"lucide-react";import*as n from"react";import{cn as a}from"../../lib/utils.js";const C={sm:"max-w-[420px]",md:"max-w-[520px]",lg:"max-w-[680px]",xl:"max-w-[880px]"},E=l.Root,H=l.Trigger,W=l.Close,f=n.forwardRef(({className:r,...t},i)=>e(l.Overlay,{ref:i,"data-scrim":"",className:a("fixed inset-0 z-50 bg-[rgba(5,8,22,.42)] backdrop-blur-[3px]",r),...t}));f.displayName="DialogOverlay";const z=n.forwardRef(({className:r,children:t,width:i,size:p="md",hideClose:m,variant:d="drawer",resizable:g=!0,...u},v)=>{const[o,b]=n.useState("base"),c=d==="drawer",h=!c||o==="base"?i??C[p]:o==="wide"?"max-w-[min(1040px,calc(100vw-16px))]":"max-w-none sm:left-2",x="hidden size-8 cursor-pointer place-items-center rounded-full border border-border bg-raised/80 text-muted backdrop-blur transition-[background-color,color,transform] hover:bg-hover hover:text-text active:scale-95 sm:grid";return s(l.Portal,{children:[e(f,{}),s(l.Content,{ref:v,...d==="drawer"?{"data-sheet":"right"}:{"data-dialog":""},className:a("z-50 flex flex-col overflow-hidden bg-raised outline-none",d==="drawer"?"fixed inset-y-0 right-0 h-dvh w-full border-border max-sm:border-l sm:inset-y-2 sm:right-2 sm:h-[calc(100dvh-16px)] sm:rounded-[16px] sm:border":"fixed left-1/2 top-1/2 w-[calc(100vw-32px)] -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-48px)] rounded-[16px] border border-border",h,c&&"transition-[max-width,left] duration-300 ease-[cubic-bezier(.3,.7,.2,1)]",r),...u,children:[t,m?null:s("div",{className:a("absolute z-10 flex items-center gap-1.5",d==="drawer"?"right-4 top-4":"right-3 top-3"),children:[c&&g?s(T,{children:[e("button",{type:"button","aria-label":o==="wide"?"Back to normal width":"Widen",title:o==="wide"?"Back to normal width":"Widen",onClick:()=>b(o==="wide"?"base":"wide"),className:a(x,o==="wide"&&"border-primary/40 bg-primary-subtle text-primary"),children:o==="wide"?e(D,{className:"size-4"}):e(R,{className:"size-4"})}),e("button",{type:"button","aria-label":o==="full"?"Exit full width":"Full width",title:o==="full"?"Exit full width":"Full width",onClick:()=>b(o==="full"?"base":"full"),className:a(x,o==="full"&&"border-primary/40 bg-primary-subtle text-primary"),children:o==="full"?e(w,{className:"size-3.5"}):e(y,{className:"size-3.5"})})]}):null,e("kbd",{className:"hidden rounded-[5px] border border-border bg-surface px-1.5 py-0.5 font-sans text-[10.5px] text-muted sm:block",children:"esc"}),s(l.Close,{className:"grid size-8 cursor-pointer place-items-center rounded-full border border-border bg-raised/80 text-muted backdrop-blur transition-[background-color,color,transform] hover:bg-hover hover:text-text active:scale-95",children:[e(N,{className:"size-4"}),e("span",{className:"sr-only",children:"Close"})]})]})]})]})});z.displayName="DialogContent";const L=({className:r,icon:t,eyebrow:i,children:p,...m})=>s("div",{className:a("relative isolate flex shrink-0 items-start gap-3.5 border-b border-border px-6 pb-4 pt-5 pr-28 sm:pr-48","before:absolute before:inset-0 before:-z-10 before:bg-[radial-gradient(120%_100%_at_0%_0%,var(--primary-subtle),transparent_60%)] before:opacity-70",r),...m,children:[t?e("span",{className:"grid size-10 shrink-0 place-items-center rounded-[11px] border border-primary/15 bg-raised text-primary shadow-[0_1px_2px_rgba(5,8,22,.14)] [&>svg]:size-5",children:t}):null,s("div",{className:"min-w-0 flex-1",children:[i?e("p",{className:"mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-primary",children:i}):null,p]})]}),O=({className:r,...t})=>e("div",{className:a("min-h-0 flex-1 overflow-y-auto px-6 py-5",r),...t}),S=({className:r,...t})=>e("div",{className:a("mt-auto flex shrink-0 items-center justify-end gap-2 border-t border-border bg-raised/85 px-6 py-4 backdrop-blur-md",r),...t}),P=n.forwardRef(({className:r,...t},i)=>e(l.Title,{ref:i,className:a("disp text-[16px] font-semibold leading-6 text-text",r),...t}));P.displayName="DialogTitle";const k=n.forwardRef(({className:r,...t},i)=>e(l.Description,{ref:i,className:a("mt-1 text-[13px] leading-5 text-muted",r),...t}));k.displayName="DialogDescription";export{E as Dialog,O as DialogBody,W as DialogClose,z as DialogContent,k as DialogDescription,S as DialogFooter,L as DialogHeader,f as DialogOverlay,P as DialogTitle,H as DialogTrigger};

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,44 @@
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+export declare const DropdownMenu: React.FC<Primitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: React.FC<Primitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Menu surfaces: `default` (raised), `glass` (frosted, over maps and media),
+ * `dark` (ink, a command-style menu that stands apart from the page). Items
+ * take an `icon`, a second-line `description`, a `shortcut` and a `badge`, so a
+ * menu can explain itself instead of listing bare verbs.
+ */
+export type MenuVariant = "default" | "glass" | "dark";
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: MenuVariant;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    danger?: boolean;
+    /** Icon in a soft tile on the left. */
+    icon?: React.ReactNode;
+    /** Second line, muted: what the item does. */
+    description?: React.ReactNode;
+    shortcut?: string;
+    badge?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Primitive.Label>) => React.JSX.Element;
+export declare const DropdownMenuSeparator: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Primitive.Separator>) => React.JSX.Element;
+export declare const DropdownMenuShortcut: ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => React.JSX.Element;
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<Primitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Identity at the top of an account menu: who is signed in, and where. Not an
+ * item (it does nothing), so it is plain content above the first separator.
+ */
+export declare function DropdownMenuHeader({ title, subtitle, media, className, }: {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    /** An Avatar or mark. */
+    media?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1 @@
+"use client";import{Fragment as I,jsx as t,jsxs as d}from"react/jsx-runtime";import*as a from"@radix-ui/react-dropdown-menu";import{Check as l,ChevronRight as v}from"lucide-react";import*as s from"react";import{cn as i}from"../../lib/utils.js";const S=a.Root,T=a.Trigger,W=a.Group,_=a.Sub,z=a.RadioGroup,f="z-50 min-w-48 overflow-hidden rounded-dlg border border-border bg-raised p-1 shadow-elev3",b=s.createContext("default"),x={default:"",glass:"border-white/40 bg-raised/70 backdrop-blur-xl backdrop-saturate-150 dark:border-white/10",dark:"dark border-white/10 bg-[#140d33] text-white [--hover:rgba(255,255,255,.08)] [--text:#f5f6fa] [--body:#d6d8e6] [--muted:#9aa1bd] [--border:rgba(255,255,255,.1)]"},w=s.forwardRef(({className:o,sideOffset:e=6,variant:n="default",...r},p)=>t(b.Provider,{value:n,children:t(a.Portal,{children:t(a.Content,{ref:p,"data-pop":"",sideOffset:e,className:i(f,x[n],o),...r})})}));w.displayName="DropdownMenuContent";const m="relative flex cursor-pointer select-none items-center gap-2.5 rounded-ctl px-2.5 py-2 text-[13px] text-body outline-none transition-colors data-[highlighted]:bg-hover data-[highlighted]:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted",C=s.forwardRef(({className:o,danger:e,icon:n,description:r,shortcut:p,badge:c,children:u,...g},R)=>{const h=n!==void 0||r!==void 0||p!==void 0||c!==void 0;return t(a.Item,{ref:R,className:i(m,r&&"items-start py-2",e&&"text-danger data-[highlighted]:bg-danger-subtle data-[highlighted]:text-danger [&_svg]:text-danger",o),...g,children:h?d(I,{children:[n?t("span",{className:i("grid shrink-0 place-items-center rounded-[8px] border border-border bg-surface",r?"size-8":"size-6",e&&"border-danger/20 bg-danger-subtle"),children:n}):null,d("span",{className:"min-w-0 flex-1",children:[d("span",{className:"flex items-center gap-2",children:[t("span",{className:"truncate",children:u}),c]}),r?t("span",{className:"mt-0.5 block text-[11.5px] leading-4 text-muted",children:r}):null]}),p?t("kbd",{className:"ml-auto self-center rounded-[5px] border border-border bg-surface px-1.5 py-px font-sans text-[10.5px] text-muted",children:p}):null]}):u})});C.displayName="DropdownMenuItem";const N=s.forwardRef(({className:o,children:e,...n},r)=>d(a.CheckboxItem,{ref:r,className:i(m,"pr-8",o),...n,children:[e,t(a.ItemIndicator,{className:"absolute right-2.5",children:t(l,{className:"size-3.5 !text-primary",strokeWidth:3})})]}));N.displayName="DropdownMenuCheckboxItem";const P=s.forwardRef(({className:o,children:e,...n},r)=>d(a.RadioItem,{ref:r,className:i(m,"pr-8",o),...n,children:[e,t(a.ItemIndicator,{className:"absolute right-2.5",children:t(l,{className:"size-3.5 !text-primary",strokeWidth:3})})]}));P.displayName="DropdownMenuRadioItem";const V=({className:o,...e})=>t(a.Label,{className:i("ov px-2.5 pb-1 pt-2",o),...e}),L=({className:o,...e})=>t(a.Separator,{className:i("-mx-1 my-1 h-px bg-border",o),...e}),G=({className:o,...e})=>t("span",{className:i("ml-auto text-[11px] tracking-wide text-muted",o),...e}),y=s.forwardRef(({className:o,children:e,...n},r)=>d(a.SubTrigger,{ref:r,className:i(m,"data-[state=open]:bg-hover",o),...n,children:[e,t(v,{className:"ml-auto size-3.5"})]}));y.displayName="DropdownMenuSubTrigger";const M=s.forwardRef(({className:o,...e},n)=>{const r=s.useContext(b);return t(a.Portal,{children:t(a.SubContent,{ref:n,"data-pop":"",className:i(f,x[r],o),...e})})});M.displayName="DropdownMenuSubContent";function H({title:o,subtitle:e,media:n,className:r}){return d("div",{className:i("flex items-center gap-3 rounded-[10px] bg-[radial-gradient(120%_120%_at_0%_0%,var(--primary-subtle),transparent_60%)] px-2.5 py-2.5",r),children:[n,d("div",{className:"min-w-0",children:[t("p",{className:"truncate text-[13px] font-semibold text-text",children:o}),e?t("p",{className:"truncate text-[11.5px] text-muted",children:e}):null]})]})}export{S as DropdownMenu,N as DropdownMenuCheckboxItem,w as DropdownMenuContent,W as DropdownMenuGroup,H as DropdownMenuHeader,C as DropdownMenuItem,V as DropdownMenuLabel,z as DropdownMenuRadioGroup,P as DropdownMenuRadioItem,L as DropdownMenuSeparator,G as DropdownMenuShortcut,_ as DropdownMenuSub,M as DropdownMenuSubContent,y as DropdownMenuSubTrigger,T as DropdownMenuTrigger};

package/dist/components/ui/form-field.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * A labelled field with its help and its verdict: label (with required star),
+ * the control, then one line under it — the error if there is one, else the
+ * warning, else the success, else the hint. One line, so the form never jumps
+ * by two lines when a message appears. The message is tied to the control with
+ * aria-describedby, and an error is announced as it appears.
+ *
+ * Give the control the same state: <Input state={error ? "error" : "default"} />.
+ */
+export declare function FormField({ label, htmlFor, required, hint, error, warning, success, count, className, children, }: {
+    label?: React.ReactNode;
+    /** The control's id, so clicking the label focuses it. */
+    htmlFor?: string;
+    required?: boolean;
+    hint?: React.ReactNode;
+    error?: React.ReactNode;
+    warning?: React.ReactNode;
+    success?: React.ReactNode;
+    /** Character counter, e.g. { value: note.length, max: 240 }. */
+    count?: {
+        value: number;
+        max: number;
+    };
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/ui/form-field.js

@@ -0,0 +1 @@
+import{jsx as s,jsxs as r}from"react/jsx-runtime";import{CircleAlert as v,CircleCheck as h,TriangleAlert as w}from"lucide-react";import*as l from"react";import{cn as i}from"../../lib/utils.js";import{Label as k}from"./label.js";function F({label:c,htmlFor:m,required:g,hint:R,error:d,warning:o,success:p,count:a,className:N,children:n}){const f=l.useId(),u=`${m??f}-msg`,t=d??o??p??R,e=d?"error":o?"warning":p?"success":"hint",x=e==="error"?v:e==="warning"?w:e==="success"?h:null,b=l.isValidElement(n)?l.cloneElement(n,{"aria-describedby":t?u:void 0}):n;return r("div",{className:i("space-y-1.5",N),children:[c?s(k,{htmlFor:m,required:g,children:c}):null,b,t||a?r("div",{className:"flex items-start gap-3",children:[t?r("p",{id:u,role:e==="error"?"alert":void 0,className:i("flex min-w-0 flex-1 items-start gap-1.5 text-[12px] leading-[18px]",e==="error"?"text-danger":e==="warning"?"text-warning":e==="success"?"text-success":"text-muted"),children:[x?s(x,{className:"mt-px size-3.5 shrink-0"}):null,s("span",{children:t})]}):s("span",{className:"flex-1"}),a?r("span",{className:i("num shrink-0 text-[11.5px] leading-[18px]",a.value>a.max?"font-medium text-danger":"text-muted"),children:[a.value,"/",a.max]}):null]}):null]})}export{F as FormField};

package/dist/components/ui/index.d.ts

@@ -0,0 +1,26 @@
+/** Primitives: small, unopinionated building blocks (Radix underneath where it helps). */
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
+export * from "./checkbox";
+export * from "./combobox";
+export * from "./confirm-dialog";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./form-field";
+export * from "./input";
+export * from "./label";
+export * from "./popover";
+export * from "./date-picker";
+export * from "./progress";
+export * from "./segmented";
+export * from "./select";
+export * from "./separator";
+export * from "./sheet";
+export * from "./skeleton";
+export * from "./switch";
+export * from "./tabs";
+export * from "./time-picker";
+export * from "./tooltip";

package/dist/components/ui/index.js

@@ -0,0 +1 @@
+export*from"./avatar.js";export*from"./badge.js";export*from"./button.js";export*from"./calendar.js";export*from"./card.js";export*from"./checkbox.js";export*from"./combobox.js";export*from"./confirm-dialog.js";export*from"./dialog.js";export*from"./dropdown-menu.js";export*from"./form-field.js";export*from"./input.js";export*from"./label.js";export*from"./popover.js";export*from"./date-picker.js";export*from"./progress.js";export*from"./segmented.js";export*from"./select.js";export*from"./separator.js";export*from"./sheet.js";export*from"./skeleton.js";export*from"./switch.js";export*from"./tabs.js";export*from"./time-picker.js";export*from"./tooltip.js";

package/dist/components/ui/input.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export declare const inputClass: string;
+/**
+ * Field states. `error` also sets aria-invalid (screen readers announce it)
+ * and gives one short shake when it appears — the eye goes to the field that
+ * needs fixing. Colour is never the only signal: pair a state with a message
+ * (FormField does that).
+ */
+export type InputState = "default" | "error" | "warning" | "success";
+interface Extra {
+    state?: InputState;
+    /** Icon or text inside the box, before the value (a search icon, "৳", "+880"). */
+    leading?: React.ReactNode;
+    /** After the value: a unit, a clear button, a status icon. */
+    trailing?: React.ReactNode;
+}
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & Extra & React.RefAttributes<HTMLInputElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    state?: InputState;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/ui/input.js

@@ -0,0 +1 @@
+"use client";import{jsx as a,jsxs as g}from"react/jsx-runtime";import*as i from"react";import{cn as d}from"../../lib/utils.js";const l="h-ctl w-full rounded-ctl border border-border2 bg-raised px-3 text-[13px] text-text placeholder:text-placeholder outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-hover disabled:text-muted aria-[invalid=true]:border-danger aria-[invalid=true]:ring-danger/20",u={default:"",error:"border-danger bg-danger-subtle/30 focus:border-danger focus:ring-danger/20 wm-shake",warning:"border-warning focus:border-warning focus:ring-warning/20",success:"border-success focus:border-success focus:ring-success/20"};function p({leading:r,trailing:e,children:t}){return!r&&!e?t:g("div",{className:"relative w-full",children:[r?a("span",{className:"pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:r}):null,t,e?a("span",{className:"absolute right-2.5 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:e}):null]})}const f=i.forwardRef(({className:r,type:e="text",state:t="default",leading:n,trailing:s,...o},c)=>a(p,{leading:n,trailing:s,children:a("input",{ref:c,type:e,"aria-invalid":t==="error"?!0:o["aria-invalid"],className:d(l,u[t],n?"pl-9":null,s?"pr-10":null,r),...o})}));f.displayName="Input";const x=i.forwardRef(({className:r,state:e="default",...t},n)=>a("textarea",{ref:n,"aria-invalid":e==="error"?!0:t["aria-invalid"],className:d(l,"h-auto min-h-20 resize-y py-2 leading-5",u[e],r),...t}));x.displayName="Textarea";export{f as Input,x as Textarea,l as inputClass};

package/dist/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    required?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/ui/label.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as p}from"react/jsx-runtime";import*as r from"@radix-ui/react-label";import*as m from"react";import{cn as n}from"../../lib/utils.js";const l=m.forwardRef(({className:e,required:t,children:o,...a},i)=>p(r.Root,{ref:i,className:n("flex items-center gap-1 text-xs font-medium text-text select-none",e),...a,children:[o,t?s("span",{className:"text-danger","aria-hidden":!0,children:"*"}):null]}));l.displayName="Label";export{l as Label};

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,22 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover surfaces: `default`, `glass` (frosted), `dark` (ink — tips that must
+ * stand out from the page), `brand` (the gradient — onboarding, "what's new").
+ * `arrow` points at the trigger, for tips attached to one control.
+ */
+export type PopoverVariant = "default" | "glass" | "dark" | "brand";
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: PopoverVariant;
+    arrow?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Title and one line under it, the top of a popover that explains something. */
+export declare function PopoverHeader({ title, description, icon, className }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/ui/popover.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,jsxs as d}from"react/jsx-runtime";import*as e from"@radix-ui/react-popover";import*as v from"react";import{cn as p}from"../../lib/utils.js";const g=e.Root,x=e.Trigger,P=e.Anchor,s={default:{box:"border-border bg-raised",arrow:"fill-[var(--raised)]"},glass:{box:"border-white/40 bg-raised/70 backdrop-blur-xl backdrop-saturate-150 dark:border-white/10",arrow:"fill-[var(--raised)] opacity-80"},dark:{box:"border-white/10 bg-[#140d33] text-[#d6d8e6] [--text:#f5f6fa] [--body:#d6d8e6] [--muted:#9aa1bd] [--border:rgba(255,255,255,.1)] [--hover:rgba(255,255,255,.08)]",arrow:"fill-[#140d33]"},brand:{box:"border-transparent bg-[linear-gradient(135deg,#1437d3,#7560fd)] text-white/90 [--text:#ffffff] [--body:rgba(255,255,255,.9)] [--muted:rgba(255,255,255,.72)] [--border:rgba(255,255,255,.2)] [--hover:rgba(255,255,255,.12)]",arrow:"fill-[#4a4ce8]"}},f=v.forwardRef(({className:i,align:t="start",sideOffset:r=6,variant:a="default",arrow:n=!1,children:l,...b},c)=>o(e.Portal,{children:d(e.Content,{ref:c,"data-pop":"",align:t,sideOffset:n?r+2:r,className:p("z-50 w-72 rounded-dlg border p-3 shadow-elev3 outline-none",s[a].box,i),...b,children:[l,n?o(e.Arrow,{width:14,height:7,className:s[a].arrow}):null]})}));f.displayName="PopoverContent";function u({title:i,description:t,icon:r,className:a}){return d("div",{className:p("mb-2.5 flex items-start gap-2.5",a),children:[r?o("span",{className:"mt-px grid size-7 shrink-0 place-items-center rounded-[8px] bg-[var(--hover)] text-[var(--text)] [&_svg]:size-4",children:r}):null,d("div",{className:"min-w-0",children:[o("p",{className:"text-[13.5px] font-semibold text-text",children:i}),t?o("p",{className:"mt-0.5 text-[12.5px] leading-[18px] text-muted",children:t}):null]})]})}export{g as Popover,P as PopoverAnchor,f as PopoverContent,u as PopoverHeader,x as PopoverTrigger};

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { Tone } from "../../types";
+declare const heights: {
+    readonly sm: "h-1.5";
+    readonly md: "h-2.5";
+    readonly lg: "h-3.5";
+};
+/**
+ * Capacity / utilisation bar. Always paired with a numeric label — a bar alone
+ * is a shape, not a measurement (`showValue` prints it beside the bar).
+ *
+ * Variants: `bar` (default), `gradient` (the brand gradient with a slow sheen:
+ * onboarding, profile completion), `striped` (moving stripes: work in progress,
+ * uploads), `segmented` (n steps: a wizard, a checklist). Leave `value` out for
+ * an indeterminate bar — something is happening, nobody knows how long.
+ */
+export declare function Progress({ value, tone, className, label, variant, size, segments, showValue, }: {
+    /** 0–100; undefined = indeterminate. */
+    value?: number;
+    tone?: Tone;
+    className?: string;
+    label?: string;
+    variant?: "bar" | "gradient" | "striped" | "segmented";
+    size?: keyof typeof heights;
+    segments?: number;
+    showValue?: boolean;
+}): React.JSX.Element;
+/**
+ * Progress as a ring, with the number in the middle — a profile that is 64%
+ * complete, a quota, a timer. Pass `children` to replace the number.
+ */
+export declare function ProgressRing({ value, size, thickness, tone, gradient, label, children, className, }: {
+    value: number;
+    size?: number;
+    thickness?: number;
+    tone?: Tone;
+    /** Draw the arc in the brand gradient instead of the tone. */
+    gradient?: boolean;
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export {};

package/dist/components/ui/progress.js

@@ -0,0 +1 @@
+"use client";import{jsx as a,jsxs as l}from"react/jsx-runtime";import*as w from"react";import{cn as s}from"../../lib/utils.js";const v={neutral:"bg-muted",info:"bg-primary",success:"bg-success",warning:"bg-warning",danger:"bg-danger",accent:"bg-accent"},x={neutral:"var(--muted)",info:"var(--primary)",success:"var(--success)",warning:"var(--warning)",danger:"var(--danger)",accent:"var(--accent)"},p={sm:"h-1.5",md:"h-2.5",lg:"h-3.5"};function N({value:i,tone:e="info",className:o,label:m,variant:n="bar",size:d="sm",segments:c=5,showValue:g=!1}){const t=typeof i=="number",r=t?Math.max(0,Math.min(100,i)):0,u=n==="segmented"?a("div",{className:s("flex w-full gap-1",p[d]),children:Array.from({length:c},(f,h)=>{const b=Math.max(0,Math.min(1,r/100*c-h));return a("div",{className:"h-full flex-1 overflow-hidden rounded-full bg-hover",children:a("div",{className:s("h-full rounded-full transition-[width] duration-500 ease-wave",v[e]),style:{width:`${b*100}%`}})},h)})}):a("div",{className:s("relative w-full overflow-hidden rounded-full bg-hover",p[d]),children:a("div",{className:s("relative h-full overflow-hidden rounded-full transition-[width] duration-500 ease-wave",!t&&"wm-indeterminate absolute w-2/5",n==="gradient"?"bg-[linear-gradient(90deg,#1437d3,#7560fd)]":v[e],n==="striped"&&"wm-stripes"),style:t?{width:`${r}%`}:void 0,children:n==="gradient"?a("span",{className:"wm-sheen absolute inset-y-0 w-1/3 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)]"}):null})});return l("div",{role:"progressbar","aria-valuenow":t?r:void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-label":m,className:s("flex w-full items-center gap-3",o),children:[u,g&&t?l("span",{className:"num w-10 shrink-0 text-right text-[12px] font-medium text-text",children:[Math.round(r),"%"]}):null]})}function k({value:i,size:e=64,thickness:o=6,tone:m="info",gradient:n=!1,label:d,children:c,className:g}){const t=Math.max(0,Math.min(100,i)),r=(e-o)/2,u=2*Math.PI*r,f=w.useId().replace(/:/g,"");return l("div",{role:"progressbar","aria-valuenow":t,"aria-valuemin":0,"aria-valuemax":100,"aria-label":d,className:s("relative inline-grid shrink-0 place-items-center",g),style:{width:e,height:e},children:[l("svg",{width:e,height:e,className:"-rotate-90",children:[n?a("defs",{children:l("linearGradient",{id:`${f}-g`,x1:"0",y1:"0",x2:"1",y2:"1",children:[a("stop",{offset:"0",stopColor:"#1437d3"}),a("stop",{offset:"1",stopColor:"#7560fd"})]})}):null,a("circle",{cx:e/2,cy:e/2,r,fill:"none",stroke:"var(--hover)",strokeWidth:o}),a("circle",{cx:e/2,cy:e/2,r,fill:"none",stroke:n?`url(#${f}-g)`:x[m],strokeWidth:o,strokeLinecap:"round",strokeDasharray:u,strokeDashoffset:u*(1-t/100),style:{transition:"stroke-dashoffset 600ms var(--ease)"}})]}),a("span",{className:"num absolute text-[13px] font-semibold text-text",style:{fontSize:Math.max(11,e*.22)},children:c??`${Math.round(t)}%`})]})}export{N as Progress,k as ProgressRing};

package/dist/components/ui/segmented.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: React.ReactNode;
+    title?: string;
+}
+/**
+ * Pill segmented control — the prototype's `.tog`.
+ *
+ * Used for theme and density in the topbar and for any 2–3 way view switch.
+ * Beyond three options this becomes a Select: a segmented control that wraps
+ * is worse than a dropdown that does not.
+ */
+declare const SIZES: {
+    readonly sm: "px-2.5 py-1 text-[11px]";
+    readonly md: "h-8 px-3.5 text-[12.5px]";
+    readonly lg: "h-10 px-5 text-[13.5px]";
+};
+declare const TRACK: {
+    readonly pill: "rounded-full border border-border bg-hover";
+    readonly solid: "rounded-full border border-border bg-hover";
+    readonly outline: "rounded-[10px] border border-border2 bg-raised";
+    readonly glass: "rounded-full bg-[rgba(10,7,32,.22)] ring-1 ring-inset ring-white/15 shadow-[inset_0_1px_3px_rgba(5,8,22,.35)] backdrop-blur-md";
+};
+/**
+ * Variants: `pill` (default, the topbar look), `solid` (the chosen option in
+ * the brand gradient: view switches that matter), `outline` (squared, for
+ * forms), `glass` (on photos and gradients). The thumb slides to the chosen
+ * option instead of jumping, so the change is seen, not just noticed.
+ */
+export declare function Segmented<T extends string>({ value, onChange, options, className, ariaLabel, variant, size, fullWidth, }: {
+    value: T;
+    onChange: (v: T) => void;
+    options: SegmentedOption<T>[];
+    className?: string;
+    ariaLabel?: string;
+    variant?: keyof typeof TRACK;
+    size?: keyof typeof SIZES;
+    /** Stretch to the container, options sharing the width equally. */
+    fullWidth?: boolean;
+}): React.JSX.Element;
+export {};

package/dist/components/ui/segmented.js

@@ -0,0 +1 @@
+"use client";import{jsx as b,jsxs as y}from"react/jsx-runtime";import*as i from"react";import{cn as o}from"../../lib/utils.js";const m={sm:"px-2.5 py-1 text-[11px]",md:"h-8 px-3.5 text-[12.5px]",lg:"h-10 px-5 text-[13.5px]"},v={pill:"rounded-full border border-border bg-hover",solid:"rounded-full border border-border bg-hover",outline:"rounded-[10px] border border-border2 bg-raised",glass:"rounded-full bg-[rgba(10,7,32,.22)] ring-1 ring-inset ring-white/15 shadow-[inset_0_1px_3px_rgba(5,8,22,.35)] backdrop-blur-md"},g={pill:"rounded-full bg-raised shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.08),0_2px_8px_-2px_rgba(5,8,22,.16)]",solid:"rounded-full bg-[linear-gradient(135deg,#1f45ea,#5b4af5)] shadow-[inset_0_1px_0_rgba(255,255,255,.25),0_4px_12px_-4px_rgba(20,55,211,.6)]",outline:"rounded-[7px] bg-primary-subtle ring-1 ring-inset ring-primary/30",glass:"rounded-full bg-[linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16))] ring-1 ring-inset ring-white/45 shadow-[inset_0_1px_0_rgba(255,255,255,.55),0_6px_14px_-6px_rgba(5,8,22,.45)] backdrop-blur-md"},w={pill:"text-text",solid:"text-white",outline:"text-primary",glass:"text-white [text-shadow:0_1px_1px_rgba(5,8,22,.25)]"},T={pill:"text-muted hover:text-text",solid:"text-muted hover:text-text",outline:"text-muted hover:text-text",glass:"text-white/65 hover:text-white"};function k({value:s,onChange:c,options:a,className:f,ariaLabel:_,variant:r="pill",size:d="sm",fullWidth:u=!1}){const p=i.useRef(null),[n,h]=i.useState(null);return i.useLayoutEffect(()=>{const e=p.current;if(!e)return;const t=()=>{const l=e.querySelector('[aria-checked="true"]');h(l?{left:l.offsetLeft,width:l.offsetWidth}:null)};t();const x=new ResizeObserver(t);return x.observe(e),()=>x.disconnect()},[s,a.length,d]),y("div",{ref:p,role:"radiogroup","aria-label":_,className:o("relative isolate items-center gap-0.5 p-[3px]",u?"flex w-full":"inline-flex",v[r],f),children:[n?b("span",{"aria-hidden":!0,className:o("absolute inset-y-[3px] -z-10 transition-[left,width] duration-300 ease-[cubic-bezier(.3,.7,.2,1)]",g[r]),style:{left:n.left,width:n.width}}):null,a.map(e=>{const t=e.value===s;return b("button",{type:"button",role:"radio","aria-checked":t,title:e.title,onClick:()=>c(e.value),className:o("inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium leading-none transition-colors duration-200 [&_svg]:size-3.5",m[d],u&&"flex-1",t?w[r]:T[r],t&&!n&&g[r]),children:e.label},e.value)})]})}export{k as Segmented};

package/dist/components/ui/select.d.ts

@@ -0,0 +1,10 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+export declare const Select: React.FC<SelectPrimitive.SelectProps>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>) => React.JSX.Element;
+export declare const SelectSeparator: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>) => React.JSX.Element;

package/dist/components/ui/select.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import*as e from"@radix-ui/react-select";import{Check as s,ChevronDown as m}from"lucide-react";import*as l from"react";import{cn as c}from"../../lib/utils.js";const g=e.Root,b=e.Group,u=e.Value,d=l.forwardRef(({className:o,children:r,...i},a)=>n(e.Trigger,{ref:a,className:c("flex h-ctl w-full cursor-pointer items-center justify-between gap-2 rounded-ctl border border-border2 bg-raised px-3 text-[13px] text-text outline-none transition-[border-color,box-shadow] data-[placeholder]:text-placeholder focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-hover disabled:text-muted",o),...i,children:[r,t(e.Icon,{asChild:!0,children:t(m,{className:"size-4 shrink-0 text-muted"})})]}));d.displayName="SelectTrigger";const f=l.forwardRef(({className:o,children:r,position:i="popper",...a},p)=>t(e.Portal,{children:t(e.Content,{ref:p,"data-pop":"",position:i,sideOffset:6,className:c("z-50 max-h-72 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-dlg border border-border bg-raised p-1 shadow-elev3",o),...a,children:t(e.Viewport,{children:r})})}));f.displayName="SelectContent";const x=l.forwardRef(({className:o,children:r,...i},a)=>n(e.Item,{ref:a,className:c("relative flex cursor-pointer select-none items-center rounded-ctl py-2 pl-2.5 pr-8 text-[13px] text-body outline-none data-[highlighted]:bg-hover data-[highlighted]:text-text data-[state=checked]:text-primary data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",o),...i,children:[t(e.ItemText,{children:r}),t(e.ItemIndicator,{className:"absolute right-2.5",children:t(s,{className:"size-3.5",strokeWidth:3})})]}));x.displayName="SelectItem";const v=({className:o,...r})=>t(e.Label,{className:c("ov px-2.5 pb-1 pt-2",o),...r}),P=({className:o,...r})=>t(e.Separator,{className:c("-mx-1 my-1 h-px bg-border",o),...r});export{g as Select,f as SelectContent,b as SelectGroup,x as SelectItem,v as SelectLabel,P as SelectSeparator,d as SelectTrigger,u as SelectValue};

package/dist/components/ui/separator.d.ts

@@ -0,0 +1,3 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/separator.js

@@ -0,0 +1 @@
+"use client";import{jsx as l}from"react/jsx-runtime";import*as i from"@radix-ui/react-separator";import*as p from"react";import{cn as f}from"../../lib/utils.js";const m=p.forwardRef(({className:r,orientation:o="horizontal",decorative:t=!0,...e},a)=>l(i.Root,{ref:a,decorative:t,orientation:o,className:f("shrink-0 bg-border",o==="horizontal"?"h-px w-full":"h-full w-px",r),...e}));m.displayName="Separator";export{m as Separator};

package/dist/components/ui/sheet.d.ts

@@ -0,0 +1,19 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+/**
+ * Right-side sheet — the physical basis of the record drawer (§2.2).
+ *
+ * Modal by default: the page behind is blurred and inert until the sheet is
+ * closed (Escape, the close button or a click on the blurred page).
+ */
+export declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
+export declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SheetContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    side?: "right" | "left";
+    width?: string;
+    scrim?: boolean;
+    hideClose?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SheetTitle: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/ui/sheet.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"@radix-ui/react-dialog";import{X as c}from"lucide-react";import*as p from"react";import{cn as g}from"../../lib/utils.js";const x=e.Root,u=e.Trigger,C=e.Close,b=p.forwardRef(({className:i,children:s,side:r="right",width:l="w-full sm:w-drawer",scrim:a=!0,hideClose:n,...m},d)=>o(e.Portal,{children:[a?t(e.Overlay,{"data-scrim":"",className:"fixed inset-0 z-50 bg-[rgba(5,8,22,.42)] backdrop-blur-[3px]"}):null,o(e.Content,{ref:d,"data-sheet":r,className:g("fixed inset-y-0 z-50 flex max-w-full flex-col border-border bg-raised shadow-elev3 outline-none",r==="right"?"right-0 max-sm:border-l sm:inset-y-2 sm:right-2 sm:rounded-[16px] sm:border":"left-0 max-sm:border-r sm:inset-y-2 sm:left-2 sm:rounded-[16px] sm:border",l,i),...m,children:[s,n?null:o(e.Close,{className:"absolute right-4 top-4 z-10 grid size-8 cursor-pointer place-items-center rounded-full border border-border bg-raised/80 text-muted backdrop-blur transition-[background-color,color,transform] hover:bg-hover hover:text-text active:scale-95",children:[t(c,{className:"size-4"}),t("span",{className:"sr-only",children:"Close"})]})]})]}));b.displayName="SheetContent";const v=e.Title,P=e.Description;export{x as Sheet,C as SheetClose,b as SheetContent,P as SheetDescription,v as SheetTitle,u as SheetTrigger};

package/dist/components/ui/skeleton.d.ts

@@ -0,0 +1,10 @@
+/** Sweeps rather than pulses — a pulse reads as an error state to most users. */
+export declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** Table placeholder that keeps the real row height, so nothing jumps on load. */
+export declare function SkeletonTable({ rows, cols }: {
+    rows?: number;
+    cols?: number;
+}): import("react").JSX.Element;
+export declare function SkeletonKpis({ count }: {
+    count?: number;
+}): import("react").JSX.Element;

package/dist/components/ui/skeleton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{cn as m}from"../../lib/utils.js";function o({className:r,...a}){return e("div",{className:m("shimmer rounded-ctl",r),...a})}function i({rows:r=8,cols:a=6}){return s("div",{className:"overflow-hidden rounded-card border border-border bg-surface",children:[e("div",{className:"flex gap-4 border-b border-border px-cellx py-2",children:Array.from({length:a}).map((l,d)=>e(o,{className:"h-3 flex-1"},d))}),Array.from({length:r}).map((l,d)=>e("div",{className:"flex items-center gap-4 border-b border-border px-cellx last:border-0",style:{height:"var(--row-h)"},children:Array.from({length:a}).map((c,t)=>e(o,{className:"h-3 flex-1",style:{opacity:1-d*.07}},t))},d))]})}function b({count:r=5}){return e("div",{className:"grid grid-cols-2 gap-3 xl:grid-cols-5",children:Array.from({length:r}).map((a,l)=>s("div",{className:"rounded-card border border-border bg-surface p-[17px]",children:[e(o,{className:"h-3 w-20"}),e(o,{className:"mt-3 h-7 w-28"}),e(o,{className:"mt-2 h-3 w-24"})]},l))})}export{o as Skeleton,b as SkeletonKpis,i as SkeletonTable};

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,3 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React from "react";
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/switch.js

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import*as t from"@radix-ui/react-switch";import*as n from"react";import{cn as e}from"../../lib/utils.js";const s=n.forwardRef(({className:r,...i},a)=>o(t.Root,{ref:a,className:e("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-border2 transition-colors duration-150 data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50",r),...i,children:o(t.Thumb,{className:e("pointer-events-none block size-4 rounded-full bg-white shadow-sm ring-0 transition-transform duration-150 ease-wave translate-x-0.5 data-[state=checked]:translate-x-[18px]")})}));s.displayName="Switch";export{s as Switch};