@david-richard/notify-ds 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,454 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Button — shadcn-style primitive backed by the semantic tokens in tokens.css.
+ *
+ * Matrix:
+ *   variant: primary | secondary | tertiary | link
+ *   size:    xsm | sm | md | lg
+ *   state:   active (default) | inactive | disabled  — driven by `data-state` + `disabled`
+ *
+ * Use `<Button iconOnly />` (or `<IconButton />` below) to render the icon-only square form.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "link" | null | undefined;
+    size?: "xsm" | "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonState = "active" | "inactive";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    state?: ButtonState;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "iconOnly"> & React.RefAttributes<HTMLButtonElement>>;
+
+type InputState = "normal" | "active" | "filled" | "error" | "disabled" | "readonly";
+type InputType = "default" | "password" | "search";
+interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Visual input type — controls icons and keyboard on mobile */
+    type?: InputType;
+    /** Controlled state override — set automatically on focus/blur if uncontrolled */
+    state?: InputState;
+    label?: string;
+    /** Whether to show the red required asterisk */
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    /** Slot for a custom right-side icon/action */
+    rightSlot?: React.ReactNode;
+}
+declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Checkbox — Qu Notify form control.
+ *
+ * States: unchecked | checked | indeterminate | disabled
+ * - Unchecked:     transparent fill, 1.5px teal (#339FB8) stroke, 4px radius
+ * - Checked:       cyan (#40CCF2) fill, white checkmark, no stroke
+ * - Indeterminate: cyan fill, white dash, no stroke
+ * - Disabled:      opacity 0.5 on full component
+ *
+ * Usage:
+ *   <Checkbox label="Remember me" />
+ *   <Checkbox checked label="Agreed to terms" />
+ *   <Checkbox indeterminate label="Select all" />
+ *   <Checkbox disabled label="Unavailable option" />
+ */
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    indeterminate?: boolean;
+    helperText?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Radio — Qu Notify form control.
+ *
+ * States: unselected | selected | disabled
+ * - Unselected: transparent fill, 1.5px teal (#339FB8) stroke, full radius
+ * - Selected:   cyan (#40CCF2) fill, white center dot, no stroke
+ * - Disabled:   opacity 0.5 on full component
+ *
+ * Usage (uncontrolled, group via same `name`):
+ *   <Radio name="time" value="day"   label="Day" />
+ *   <Radio name="time" value="week"  label="Week" defaultChecked />
+ *   <Radio name="time" value="month" label="Month" />
+ *
+ * Usage (controlled):
+ *   <Radio name="x" value="a" checked={val === "a"} onChange={() => setVal("a")} label="Option A" />
+ */
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    helperText?: string;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * RadioGroup — convenience wrapper for a labelled set of Radio options.
+ *
+ * Usage:
+ *   <RadioGroup label="Time period" name="period" value={val} onChange={setVal}>
+ *     <Radio value="day"   label="Day" />
+ *     <Radio value="week"  label="Week" />
+ *     <Radio value="month" label="Month" />
+ *   </RadioGroup>
+ */
+interface RadioGroupProps {
+    label?: string;
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+}
+declare function RadioGroup({ label, name, value, onChange, children, className, orientation, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Toggle — iOS-style switch. Qu Notify form control.
+ *
+ * States: off | on | disabled-off | disabled-on
+ * - Off: gray-100 (#DEDEDE) track, white knob positioned left
+ * - On:  cyan (#40CCF2) track, white knob positioned right
+ * - Disabled: opacity 0.5 on full component
+ *
+ * Track: 44×24px, full-radius pill
+ * Knob:  20×20px white circle, 2px from edge, animates on toggle
+ *
+ * Usage:
+ *   <Toggle label="Enable notifications" />
+ *   <Toggle checked label="Push alerts" />
+ *   <Toggle disabled label="Feature unavailable" />
+ *
+ * Controlled:
+ *   <Toggle checked={enabled} onChange={(v) => setEnabled(v)} label="Face ID" />
+ */
+interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    /** Label position relative to the toggle */
+    labelPosition?: "right" | "left";
+    helperText?: string;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    id?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Selector — pill-shaped dropdown trigger. Qu Notify filter/store-picker control.
+ *
+ * Variants:
+ *   variant: primary | secondary
+ *   state:   active | inactive | disabled
+ *
+ * Primary Active:   cyan (#40CCF2) fill, black text
+ * Primary Inactive: gray-100 fill, primary text
+ * Secondary Active: teal outline, teal text
+ * Secondary Inactive: gray-200 outline, secondary text
+ *
+ * The component is a styled button — wire up a Popover/DropdownMenu to it externally.
+ * The `open` prop controls the chevron rotation only.
+ *
+ * Usage:
+ *   <Selector label="All Stores" />
+ *   <Selector label="This Week" variant="secondary" state="active" />
+ *   <Selector label="Location" open />
+ *   <Selector label="Date Range" state="disabled" />
+ */
+declare const selectorVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    state?: "active" | "inactive" | "disabled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SelectorProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof selectorVariants> {
+    label: string;
+    /** Controlled open state — rotates chevron 180° */
+    open?: boolean;
+    /** Icon to show before the label (optional) */
+    icon?: React.ReactNode;
+}
+declare const Selector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectorGroupProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function SelectorGroup({ children, className }: SelectorGroupProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TabBar — Qu Notify segmented tab selector.
+ *
+ * Visual spec:
+ *   Container: gray-100 (#DEDEDE) pill, 4px padding all sides, full-radius
+ *   Selected tab: black fill, white text, full-radius pill
+ *   Unselected tab: transparent, primary text
+ *   Font: Inter Medium 14px
+ *
+ * Usage (uncontrolled):
+ *   <TabBar tabs={["Sales", "Labor", "Store"]} defaultValue="Sales" />
+ *
+ * Usage (controlled):
+ *   <TabBar
+ *     tabs={["Sales", "Labor", "Store", "Product"]}
+ *     value={activeTab}
+ *     onValueChange={setActiveTab}
+ *   />
+ *
+ * Usage with content panels:
+ *   <TabBar tabs={tabs} value={active} onValueChange={setActive} />
+ *   {active === "Sales" && <SalesPanel />}
+ */
+interface TabBarProps {
+    tabs: string[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    /** Make all tabs equal width (fills container) */
+    stretch?: boolean;
+}
+declare function TabBar({ tabs, value, defaultValue, onValueChange, className, stretch, }: TabBarProps): react_jsx_runtime.JSX.Element;
+/**
+ * TabPanels — optional declarative panel companion for TabBar.
+ *
+ * Usage:
+ *   <TabBar tabs={["Sales","Labor"]} value={tab} onValueChange={setTab} />
+ *   <TabPanels value={tab}>
+ *     <TabPanel value="Sales"><SalesContent /></TabPanel>
+ *     <TabPanel value="Labor"><LaborContent /></TabPanel>
+ *   </TabPanels>
+ */
+interface TabPanelsProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TabPanels({ value, children, className }: TabPanelsProps): react_jsx_runtime.JSX.Element;
+interface TabPanelProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Switcher — Qu Notify segmented control (iOS-style).
+ *
+ * Visual spec:
+ *   Container: gray-100 (#DEDEDE) bg, 8px corner radius, 3px padding
+ *   Selected segment: black fill, white text, 6px corner radius
+ *   Unselected segment: transparent, secondary text (gray)
+ *   Font: Inter Medium 14px
+ *
+ * Differs from TabBar:
+ *   - TabBar: full-radius pill, used for primary page-level navigation
+ *   - Switcher: square-ish corners (8px), used for inline data filters
+ *     (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
+ *
+ * Usage (uncontrolled):
+ *   <Switcher segments={["Day", "Week", "Month"]} defaultValue="Week" />
+ *
+ * Usage (controlled):
+ *   <Switcher
+ *     segments={["Net", "Gross"]}
+ *     value={metric}
+ *     onValueChange={setMetric}
+ *   />
+ *
+ * Usage with icon segments:
+ *   <Switcher
+ *     segments={[
+ *       { value: "list",  label: "List",  icon: <ListIcon /> },
+ *       { value: "grid",  label: "Grid",  icon: <GridIcon /> },
+ *     ]}
+ *     value={view}
+ *     onValueChange={setView}
+ *   />
+ */
+type Segment = string | {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+};
+interface SwitcherProps {
+    segments: Segment[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    /** Stretch to fill container width */
+    stretch?: boolean;
+}
+declare function Switcher({ segments, value, defaultValue, onValueChange, className, stretch, }: SwitcherProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * BottomNav — Qu Notify floating bottom navigation bar.
+ *
+ * Visual spec:
+ *   Container: glass gradient pill (180deg, rgba(220,220,220,0.2) → rgba(118,118,118,0.2))
+ *              box-shadow: 0 4px 4px rgba(0,0,0,0.14)
+ *              border-radius: 60px
+ *              max-width: 360px, height: 72px
+ *   Selected item: black fill pill, white icon + label (Semi Bold)
+ *   Unselected item: transparent, gray icon + label (Regular)
+ *   Font: Inter — label 10px
+ *   Icon: 20×20px
+ *
+ * Usage (controlled — you manage routing):
+ *   const [active, setActive] = useState("dashboard")
+ *
+ *   <BottomNav
+ *     items={[
+ *       { value: "dashboard", label: "Dashboard", icon: <DashboardIcon /> },
+ *       { value: "inventory", label: "Inventory", icon: <BoxIcon /> },
+ *       { value: "menu",      label: "Menu",      icon: <MenuIcon /> },
+ *     ]}
+ *     value={active}
+ *     onValueChange={setActive}
+ *   />
+ *
+ * Usage with React Router / Next.js:
+ *   <BottomNav
+ *     items={navItems}
+ *     value={pathname}
+ *     onValueChange={(v) => router.push(v)}
+ *   />
+ *
+ * Positioning:
+ *   Wrap in a <div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-full max-w-sm px-4 z-50">
+ *   for the standard bottom-floating placement used in the app.
+ */
+interface NavItem {
+    value: string;
+    label: string;
+    icon: React.ReactNode;
+    /** Notification indicator */
+    badge?: boolean | number;
+}
+interface BottomNavProps {
+    items: NavItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}
+declare function BottomNav({ items, value, defaultValue, onValueChange, className, }: BottomNavProps): react_jsx_runtime.JSX.Element;
+declare function BottomNavContainer({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Badge — Qu Notify status/trend pill label.
+ *
+ * Variants:
+ *   variant: default | success | error | warning | alert | info | neutral
+ *   size:    sm | md
+ *
+ * Usage:
+ *   <Badge>Open</Badge>
+ *   <Badge variant="success">+11.8%</Badge>
+ *   <Badge variant="error">-5.6%</Badge>
+ *   <Badge variant="warning">Delayed</Badge>
+ *   <Badge icon={<TrendUpIcon />} variant="success">Net Sales</Badge>
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "alert" | "error" | "default" | "success" | "warning" | "info" | "neutral" | "brand" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    icon?: React.ReactNode;
+}
+declare function Badge({ variant, size, icon, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+/**
+ * TrendBadge — convenience wrapper that picks variant from sign of the value.
+ *
+ * Usage:
+ *   <TrendBadge value={11.8} />   → green "+11.8%"
+ *   <TrendBadge value={-5.6} />   → red "−5.6%"
+ *   <TrendBadge value={0} />      → neutral "0.0%"
+ */
+interface TrendBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    value: number;
+    /** Number of decimal places (default: 1) */
+    decimals?: number;
+    /** Show arrow icon (default: true) */
+    showArrow?: boolean;
+}
+declare function TrendBadge({ value, decimals, showArrow, ...props }: TrendBadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MetricTile — the core data display unit of the Qu Notify dashboard.
+ *
+ * Visual spec:
+ *   Container: white card, 16px border-radius, shadow: 0 4px 4px rgba(0,0,0,0.06)
+ *   Label:     Inter Regular 12px, gray (#6B7280)
+ *   Value:     Inter SemiBold 24px, black (#000)
+ *   Trend:     TrendBadge (green/red/neutral)
+ *   Sub-label: Inter Regular 12px, gray — secondary context (e.g. "vs last week")
+ *
+ * Variants:
+ *   size:    sm | md | lg
+ *   loading: skeleton state
+ *
+ * Usage (minimal):
+ *   <MetricTile label="Net Sales" value="$42,810" />
+ *
+ * Usage (with trend):
+ *   <MetricTile label="Average Check" value="$18.42" trend={11.8} trendLabel="vs last week" />
+ *
+ * Usage (with icon and custom value color):
+ *   <MetricTile
+ *     label="Labor %"
+ *     value="24.1%"
+ *     trend={-2.3}
+ *     icon={<UserIcon />}
+ *     valueColor="var(--color-success,#16A34A)"
+ *   />
+ *
+ * Usage (loading):
+ *   <MetricTile label="Net Sales" value="..." loading />
+ *
+ * Usage (grid):
+ *   <MetricTileGrid cols={2}>
+ *     <MetricTile label="Net Sales"    value="$42,810" trend={11.8} />
+ *     <MetricTile label="Avg Check"    value="$18.42"  trend={-1.2} />
+ *     <MetricTile label="Checks"       value="2,324"   />
+ *     <MetricTile label="Speed of Svc" value="3m 12s"  />
+ *   </MetricTileGrid>
+ */
+interface MetricTileProps {
+    label: string;
+    value: string | number;
+    /** Percentage change. Positive = green, negative = red. */
+    trend?: number;
+    trendLabel?: string;
+    icon?: React.ReactNode;
+    /** Override the value text color (e.g. for KPI goal states) */
+    valueColor?: string;
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    /** Click handler — makes the tile interactive */
+    onClick?: () => void;
+    className?: string;
+    /** Render as a specific element */
+    as?: "div" | "article";
+}
+declare function MetricTile({ label, value, trend, trendLabel, icon, valueColor, size, loading, onClick, className, as: Tag, }: MetricTileProps): react_jsx_runtime.JSX.Element;
+/**
+ * MetricTileGrid — responsive grid wrapper.
+ *
+ * Usage:
+ *   <MetricTileGrid cols={2}> ... </MetricTileGrid>
+ */
+interface MetricTileGridProps {
+    cols?: 1 | 2 | 3 | 4;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function MetricTileGrid({ cols, children, className }: MetricTileGridProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, BottomNav, BottomNavContainer, type BottomNavProps, Button, type ButtonProps, Checkbox, type CheckboxProps, IconButton, InputField, type InputFieldProps, MetricTile, MetricTileGrid, type MetricTileGridProps, type MetricTileProps, type NavItem, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Selector, SelectorGroup, type SelectorGroupProps, type SelectorProps, Switcher, type SwitcherProps, TabBar, type TabBarProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, Toggle, type ToggleProps, TrendBadge, type TrendBadgeProps, buttonVariants };