@techzyapp/ui-library 1.0.0

package/dist/TimePicker-CfGrCH9T.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker-CfGrCH9T.cjs","sources":["../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { useFormContext } from '../../form/formContext'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport { TimeColumns } from '../DateTimePicker/TimeColumns'\nimport {\n  applyMask,\n  localWallToUtc,\n  maskFromFormat,\n  parseInput,\n  parseTime,\n  utcToLocalWall,\n  type Dayjs,\n} from '../DatePicker/dateUtils'\nimport styles from '../DatePicker/DatePicker.module.css'\nimport tp from './TimePicker.module.css'\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg'\n\nexport interface TimePickerProps {\n  /** Label rendered above the field. */\n  label?: ReactNode\n  /** Preset size — control height, font and popover density. */\n  size?: TimePickerSize\n  /** Marks the field invalid: red border/ring + the `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the field. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Stretches the field to fill its container width. Defaults to `true`. */\n  fullWidth?: boolean\n  /** Disables the field. */\n  disabled?: boolean\n  /** Controlled value — a time string in `valueFormat` (`''` = empty). */\n  value?: string\n  /** Initial value for uncontrolled use (in `valueFormat`). */\n  defaultValue?: string\n  /** Fires with the next time in `valueFormat` (`''` when cleared). */\n  onChange?: (value: string) => void\n  /**\n   * Display + typed-input format (dayjs tokens). Defaults to `'HH:mm:ss'` (or `hh:mm:ss A` when\n   * `hour12`; the `:ss` is dropped when `showSeconds` is `false`).\n   */\n  format?: string\n  /**\n   * Wire format of `value`/`defaultValue`/`onChange` (dayjs tokens), decoupled from the displayed\n   * `format`. Defaults to `'HH:mm:ss[Z]'` when `utc` (the `Z` marks UTC), or `'HH:mm:ss'` when\n   * `utc={false}`. Incoming values are parsed **leniently** (this format, then a numeric time — so a\n   * backend time like `'09:35:49.6134342'` is accepted, ms-capped — then any ISO-8601 datetime, whose\n   * time is used). Only the time-of-day is used; the date is ignored.\n   */\n  valueFormat?: string\n  /**\n   * Treat the value as **UTC** and display/edit in the viewer's **local** timezone (default `true`).\n   * Set `false` to disable timezone conversion — the field shows and emits the value's exact wall-clock.\n   */\n  utc?: boolean\n  /** 12-hour clock (1–12 + AM/PM) instead of 24-hour (0–23). Defaults to `false`. */\n  hour12?: boolean\n  /** Minute increment for the minutes column. Defaults to `1`. */\n  minuteStep?: number\n  /** Show the seconds column + `:ss` in the default format. Defaults to `true`; pass `false` to hide seconds. */\n  showSeconds?: boolean\n  /** Placeholder shown when empty. Defaults to the lowercased `format`. */\n  placeholder?: string\n  /** Shows a clear (×) button when a value is set. Defaults to `true`. */\n  clearable?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (value is the time string). */\n  name?: string\n  /** Id for the input (label association). */\n  id?: string\n  className?: string\n  style?: CSSProperties\n}\n\nfunction defaultFormatFor(hour12: boolean, showSeconds: boolean): string {\n  if (hour12) return showSeconds ? 'hh:mm:ss A' : 'hh:mm A'\n  return showSeconds ? 'HH:mm:ss' : 'HH:mm'\n}\n\n/** Compares two datetimes by **time of day** only (ignoring the date) at the given precision. */\nfunction sameTime(a: Dayjs, b: Dayjs, unit: 'minute' | 'second'): boolean {\n  if (a.hour() !== b.hour() || a.minute() !== b.minute()) return false\n  return unit === 'minute' ? true : a.second() === b.second()\n}\n\n/**\n * A time-of-day field with a typed, masked input **and** a popover of scrollable time columns\n * (hour / minute / optional second + AM/PM in 12-hour mode) — the time sibling of `DateTimePicker`,\n * with no calendar. The value is a string in `valueFormat` (UTC, with a `Z`, unless `utc={false}`) —\n * incoming values are parsed leniently (a richer backend time is accepted) and the chosen time emitted\n * in that format. Picking keeps the popover open until you click away, press Escape, or hit Done.\n * Supports `hour12`, `minuteStep`, `showSeconds`, and `clearable`. Controlled (`value` + `onChange`) or\n * uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name`. Requires `dayjs`.\n */\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    label,\n    size = 'md',\n    error,\n    helperText,\n    required = false,\n    fullWidth = true,\n    disabled = false,\n    value,\n    defaultValue,\n    onChange,\n    format: formatProp,\n    valueFormat: valueFormatProp,\n    utc = true,\n    hour12 = false,\n    minuteStep = 1,\n    showSeconds = true,\n    placeholder,\n    clearable = true,\n    name,\n    id: idProp,\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const helperId = `${id}-helper`\n  const format = formatProp ?? defaultFormatFor(hour12, showSeconds)\n  // UTC time-of-day carries a `Z` (\"09:35:00Z\"); `utc={false}` emits the bare wall-clock. Override via `valueFormat`.\n  const valueFormat = valueFormatProp ?? (utc ? 'HH:mm:ss[Z]' : 'HH:mm:ss')\n\n  // ── value (controlled / form-bound / uncontrolled) — a `valueFormat` time string ────────────────\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = isFormBound ? form!.field(name!) : undefined\n  const externalValue =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | undefined) ?? '')\n        : undefined\n  const isControlled = value !== undefined || isFormBound\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentValue = isControlled ? externalValue! : internal\n  // when `utc`, parse the UTC time and show it in the viewer's LOCAL time (value stays UTC, emit\n  // converts back); when `utc={false}`, show/emit the value's exact wall-clock (no tz conversion)\n  const selected = utc\n    ? utcToLocalWall(parseTime(currentValue, valueFormat))\n    : parseTime(currentValue, valueFormat)\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const mask = maskFromFormat(format)\n  const timeUnit = /s/.test(format) ? 'second' : 'minute'\n\n  const commit = (next: string) => {\n    if (next === currentValue) return // skip redundant onChange / setValue with an unchanged value\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  // emit a time in the wire `valueFormat`, or '' to clear. Re-picking the same time-of-day is a no-op\n  const commitTime = (d: Dayjs | null) => {\n    if (d && selected && sameTime(d, selected, 'second')) return\n    // local-wall → UTC for the wire value (or emit the wall-clock as-is when `utc={false}`)\n    commit(d ? (utc ? localWallToUtc(d) : d).format(valueFormat) : '')\n  }\n\n  // true when `d` differs from the current value at the input's precision — gates typed-input commits\n  const changed = (d: Dayjs) => !selected || !sameTime(d, selected, timeUnit)\n\n  const [inputText, setInputText] = useState<string>(() =>\n    selected ? selected.format(format) : '',\n  )\n  useEffect(() => {\n    setInputText(selected ? selected.format(format) : '')\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentValue, format, valueFormat])\n\n  // ── popover ────────────────────────────────────────────────────────────────────────────────────\n  const triggerRef = useRef<HTMLDivElement | null>(null)\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const [open, setOpen] = useState(false)\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLInputElement | null }).current = node\n    },\n    [ref],\n  )\n\n  const fieldBlurRef = useRef<(() => void) | undefined>(undefined)\n  fieldBlurRef.current = bound ? () => bound.onBlur({} as FocusEvent<HTMLInputElement>) : undefined\n\n  // the floating panel forwards its node here, for the focus-leaves-the-widget check on blur\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n\n  const closePopover = useCallback((refocus: boolean) => {\n    setOpen(false)\n    fieldBlurRef.current?.()\n    if (refocus) inputRef.current?.focus()\n  }, [])\n\n  const handleInputChange = (raw: string) => {\n    const masked = applyMask(raw, mask)\n    setInputText(masked)\n    if (masked === '') {\n      commit('')\n      return\n    }\n    const parsed = parseInput(masked, format)\n    if (parsed && changed(parsed)) commitTime(parsed)\n  }\n\n  const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n    const parsed = parseInput(inputText, format)\n    if (inputText === '') {\n      commit('')\n    } else if (parsed) {\n      if (changed(parsed)) commitTime(parsed)\n      setInputText(parsed.format(format))\n    } else {\n      setInputText(selected ? selected.format(format) : '')\n    }\n    const nextEl = event.relatedTarget as Node | null\n    if (nextEl && (popoverRef.current?.contains(nextEl) || triggerRef.current?.contains(nextEl)))\n      return\n    bound?.onBlur(event)\n  }\n\n  const handleTimeChange = (next: Dayjs) => commitTime(next)\n\n  const iconSize: 'sm' | 'md' = size === 'sm' ? 'sm' : 'md'\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        styles[size],\n        fullWidth && styles.fullWidth,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={style}\n    >\n      {label != null && (\n        <label htmlFor={id} className={styles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={styles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <div ref={triggerRef} className={clsx(styles.control, open && styles.open)}>\n        <input\n          ref={setInputRef}\n          id={id}\n          name={name}\n          className={styles.input}\n          value={inputText}\n          placeholder={placeholder ?? format.toLowerCase()}\n          disabled={disabled}\n          autoComplete=\"off\"\n          aria-invalid={resolvedError || undefined}\n          aria-describedby={resolvedHelperText != null ? helperId : undefined}\n          onChange={(e) => handleInputChange(e.target.value)}\n          onBlur={handleInputBlur}\n        />\n\n        {clearable && currentValue !== '' && !disabled && (\n          <button\n            type=\"button\"\n            className={styles.clear}\n            aria-label={t('timePicker.clear')}\n            tabIndex={-1}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => {\n              commit('')\n              setInputText('')\n              inputRef.current?.focus()\n            }}\n          >\n            <Icon name=\"CloseCircle\" size=\"sm\" />\n          </button>\n        )}\n\n        <IconButton\n          type=\"button\"\n          variant=\"text\"\n          color=\"primary\"\n          size={size}\n          disabled={disabled}\n          aria-label={t('timePicker.open')}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          className={styles.calendarButton}\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => setOpen((o) => !o)}\n        >\n          <Icon name=\"Clock\" size={iconSize} />\n        </IconButton>\n      </div>\n\n      <FloatingPanel\n        ref={popoverRef}\n        open={open}\n        triggerRef={triggerRef}\n        onClose={closePopover}\n        role=\"dialog\"\n        ariaLabel=\"Choose time\"\n        trapFocus\n        className={styles.popover}\n      >\n        <TimeColumns\n          value={selected}\n          onChange={handleTimeChange}\n          hour12={hour12}\n          minuteStep={minuteStep}\n          showSeconds={showSeconds}\n          autoFocus\n        />\n        <div className={tp.footer}>\n          <Button size=\"sm\" variant=\"filled\" color=\"primary\" onClick={() => closePopover(true)}>\n            {t('common.done')}\n          </Button>\n        </div>\n      </FloatingPanel>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={styles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["defaultFormatFor","hour12","showSeconds","sameTime","a","b","unit","TimePicker","forwardRef","label","size","error","helperText","required","fullWidth","disabled","value","defaultValue","onChange","formatProp","valueFormatProp","utc","minuteStep","placeholder","clearable","name","idProp","className","style","ref","t","useT","reactId","useId","id","helperId","format","valueFormat","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentValue","selected","utcToLocalWall","parseTime","resolvedError","resolvedHelperText","mask","maskFromFormat","timeUnit","commit","next","commitTime","d","localWallToUtc","changed","inputText","setInputText","useEffect","triggerRef","useRef","inputRef","open","setOpen","setInputRef","useCallback","node","fieldBlurRef","popoverRef","closePopover","refocus","_a","_b","handleInputChange","raw","masked","applyMask","parsed","parseInput","handleInputBlur","event","nextEl","handleTimeChange","iconSize","jsxs","clsx","styles","jsx","Typography","Icon","IconButton","o","FloatingPanel","TimeColumns","tp","Button"],"mappings":"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"}

package/dist/Timeline-CoxW0Ia_.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),a=require("react"),x=require("clsx"),p=require("./names-C2Yj1p3u.cjs"),y=require("./Icon-CXTl_QAP.cjs"),N=a.createContext(null);function T(){return a.useContext(N)}const f="_root_34zcl_2",v="_item_34zcl_12",C="_sm_34zcl_24",I="_md_34zcl_31",g="_lg_34zcl_38",q="_node_34zcl_47",S="_dotNode_34zcl_60",w="_dot_34zcl_60",E="_connector_34zcl_71",R="_body_34zcl_87",A="_label_34zcl_95",M="_time_34zcl_102",O="_content_34zcl_107",n={root:f,item:v,sm:C,md:I,lg:g,node:q,dotNode:S,dot:w,connector:E,body:R,label:A,time:M,content:O},P=new Set(p.ICON_NAMES),z=a.forwardRef(function({label:s,time:c,children:l,icon:t,color:d,className:i,style:_,...m},u){const e=T(),r=(e==null?void 0:e.size)??"md",b=d??(e==null?void 0:e.color)??"primary",h=typeof t=="string"&&P.has(t)?o.jsx(y.Icon,{name:t,size:r}):t;return o.jsxs("li",{ref:u,className:x.clsx(n.item,n[r],i),style:{"--tl-rgb":`var(--tz-color-${b}-rgb)`,..._},...m,children:[o.jsx("span",{className:x.clsx(n.node,t==null&&n.dotNode),"aria-hidden":"true",children:t!=null?h:o.jsx("span",{className:n.dot})}),o.jsx("span",{className:n.connector,"aria-hidden":"true"}),o.jsxs("div",{className:n.body,children:[s!=null&&o.jsx("span",{className:n.label,children:s}),c!=null&&o.jsx("span",{className:n.time,children:c}),l!=null&&o.jsx("div",{className:n.content,children:l})]})]})}),$=a.forwardRef(function({items:s,size:c="md",color:l="primary",children:t,className:d,style:i,..._},m){const u={size:c,color:l};return o.jsx("ol",{ref:m,className:x.clsx(n.root,d),style:i,..._,children:o.jsx(N.Provider,{value:u,children:s?s.map((e,r)=>o.jsx(z,{label:e.label,time:e.time,icon:e.icon,color:e.color,children:e.content},r)):t})})});exports.Timeline=$;exports.TimelineItem=z;
+//# sourceMappingURL=Timeline-CoxW0Ia_.cjs.map

package/dist/Timeline-CoxW0Ia_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-CoxW0Ia_.cjs","sources":["../src/components/Timeline/timelineContext.ts","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { TimelineSize } from './Timeline'\n\n/** Shared defaults a `<Timeline>` hands down to its `<TimelineItem>` children via context. */\nexport interface TimelineContextValue {\n  size: TimelineSize\n  color: ThemeColor\n}\n\nexport const TimelineContext = createContext<TimelineContextValue | null>(null)\n\n/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`. */\nexport function useTimelineContext(): TimelineContextValue | null {\n  return useContext(TimelineContext)\n}\n","import { forwardRef, type CSSProperties, type LiHTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { useTimelineContext } from './timelineContext'\nimport styles from './Timeline.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {\n  /** Title line. */\n  label?: ReactNode\n  /** Muted caption under the label — usually the date/time (e.g. `\"13th May 2021\"`). */\n  time?: ReactNode\n  /** Body content under the caption — any node (text, chips, buttons). */\n  children?: ReactNode\n  /**\n   * Node icon — a known `IconName` or any node, shown in a soft tinted circle. Omit for a small\n   * **dot** node instead (the compact activity-log look).\n   */\n  icon?: IconName | ReactNode\n  /** Theme palette token tinting this item's node. Inherits the timeline's `color` when omitted. */\n  color?: ThemeColor\n}\n\n/**\n * One entry on a `<Timeline>` — a node (a soft tinted icon circle, or a small dot when there's no\n * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body.\n * Inherits `size`/`color` from the surrounding `<Timeline>` (a per-item `color` wins — e.g. a green\n * `success` node for a delivered step). Renders an `<li>`; the connecting rail hides itself on the\n * last item via CSS.\n */\nexport const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(function TimelineItem(\n  { label, time, children, icon, color, className, style, ...props },\n  ref,\n) {\n  const timeline = useTimelineContext()\n  const resolvedSize = timeline?.size ?? 'md'\n  const resolvedColor = color ?? timeline?.color ?? 'primary'\n\n  const iconNode =\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={resolvedSize} />\n    ) : (\n      icon\n    )\n\n  return (\n    <li\n      ref={ref}\n      className={clsx(styles.item, styles[resolvedSize], className)}\n      style={{ '--tl-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* the node — an icon circle, or a small dot when there's no icon */}\n      <span className={clsx(styles.node, icon == null && styles.dotNode)} aria-hidden=\"true\">\n        {icon != null ? iconNode : <span className={styles.dot} />}\n      </span>\n      {/* the rail segment down to the next node — hidden on the last item via :last-child */}\n      <span className={styles.connector} aria-hidden=\"true\" />\n      <div className={styles.body}>\n        {label != null && <span className={styles.label}>{label}</span>}\n        {time != null && <span className={styles.time}>{time}</span>}\n        {children != null && <div className={styles.content}>{children}</div>}\n      </div>\n    </li>\n  )\n})\n","import { forwardRef, type CSSProperties, type OlHTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { TimelineItem } from './TimelineItem'\nimport { TimelineContext, type TimelineContextValue } from './timelineContext'\nimport styles from './Timeline.module.css'\n\nexport type TimelineSize = 'sm' | 'md' | 'lg'\n\n/** A single entry for the data-driven `items` prop. */\nexport interface TimelineEntry {\n  /** Title line. */\n  label?: ReactNode\n  /** Muted caption under the label — usually the date/time. */\n  time?: ReactNode\n  /** Body content under the caption — any node. */\n  content?: ReactNode\n  /** Node icon (soft tinted circle) — a known `IconName` or any node. Omit for a small dot node. */\n  icon?: IconName | ReactNode\n  /** Theme palette token tinting this entry's node (overrides the timeline's `color`). */\n  color?: ThemeColor\n}\n\nexport interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'color'> {\n  /** Data-driven entries — an alternative to passing `<TimelineItem>` children. */\n  items?: TimelineEntry[]\n  /** Preset size — node circle, dot and fonts. Defaults to `md`. */\n  size?: TimelineSize\n  /** Theme palette token tinting the nodes. Defaults to `primary` (a per-item `color` wins). */\n  color?: ThemeColor\n  /** `<TimelineItem>` children (used when `items` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A vertical timeline — events on a rail (order tracking, activity feeds, audit logs). Data-driven via\n * **`items`** (`{ label?, time?, content?, icon?, color? }[]`) or as `<TimelineItem>` children. An\n * entry **with** an `icon` gets a soft tinted circle node; one **without** gets a small dot — mix them\n * freely, and tint any node per item via its `color` (e.g. `success` for a completed event). `size`\n * (`sm`/`md`/`lg`) scales the nodes and type together. Renders a semantic `<ol>`/`<li>` list (name it\n * with `aria-label`); the rail is a hairline that hides itself after the last entry. Styling uses\n * `--tz-*` tokens.\n */\nexport const Timeline = forwardRef<HTMLOListElement, TimelineProps>(function Timeline(\n  { items, size = 'md', color = 'primary', children, className, style, ...props },\n  ref,\n) {\n  const ctx: TimelineContextValue = { size, color }\n\n  return (\n    <ol\n      ref={ref}\n      className={clsx(styles.root, className)}\n      style={style as CSSProperties}\n      {...props}\n    >\n      <TimelineContext.Provider value={ctx}>\n        {items\n          ? items.map((item, i) => (\n              <TimelineItem\n                key={i}\n                label={item.label}\n                time={item.time}\n                icon={item.icon}\n                color={item.color}\n              >\n                {item.content}\n              </TimelineItem>\n            ))\n          : children}\n      </TimelineContext.Provider>\n    </ol>\n  )\n})\n"],"names":["TimelineContext","createContext","useTimelineContext","useContext","ICON_NAME_SET","ICON_NAMES","TimelineItem","forwardRef","label","time","children","icon","color","className","style","props","ref","timeline","resolvedSize","resolvedColor","iconNode","jsx","Icon","jsxs","clsx","styles","Timeline","items","size","ctx","item","i"],"mappings":"0JAUaA,EAAkBC,EAAAA,cAA2C,IAAI,EAGvE,SAASC,GAAkD,CAChE,OAAOC,EAAAA,WAAWH,CAAe,CACnC,wWCPMI,EAAgB,IAAI,IAAYC,YAAU,EAyBnCC,EAAeC,EAAAA,WAA6C,SACvE,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3DC,EACA,CACA,MAAMC,EAAWf,EAAA,EACXgB,GAAeD,GAAA,YAAAA,EAAU,OAAQ,KACjCE,EAAgBP,IAASK,GAAA,YAAAA,EAAU,QAAS,UAE5CG,EACJ,OAAOT,GAAS,UAAYP,EAAc,IAAIO,CAAI,EAChDU,EAAAA,IAACC,EAAAA,KAAA,CAAK,KAAMX,EAAkB,KAAMO,EAAc,EAElDP,EAGJ,OACEY,EAAAA,KAAC,KAAA,CACC,IAAAP,EACA,UAAWQ,EAAAA,KAAKC,EAAO,KAAMA,EAAOP,CAAY,EAAGL,CAAS,EAC5D,MAAO,CAAE,WAAY,kBAAkBM,CAAa,QAAS,GAAGL,CAAA,EAC/D,GAAGC,EAGJ,SAAA,CAAAM,EAAAA,IAAC,OAAA,CAAK,UAAWG,OAAKC,EAAO,KAAMd,GAAQ,MAAQc,EAAO,OAAO,EAAG,cAAY,OAC7E,SAAAd,GAAQ,KAAOS,EAAWC,EAAAA,IAAC,QAAK,UAAWI,EAAO,IAAK,CAAA,CAC1D,QAEC,OAAA,CAAK,UAAWA,EAAO,UAAW,cAAY,OAAO,EACtDF,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KACpB,SAAA,CAAAjB,GAAS,MAAQa,EAAAA,IAAC,OAAA,CAAK,UAAWI,EAAO,MAAQ,SAAAjB,EAAM,EACvDC,GAAQ,MAAQY,EAAAA,IAAC,QAAK,UAAWI,EAAO,KAAO,SAAAhB,EAAK,EACpDC,GAAY,MAAQW,EAAAA,IAAC,OAAI,UAAWI,EAAO,QAAU,SAAAf,CAAA,CAAS,CAAA,CAAA,CACjE,CAAA,CAAA,CAAA,CAGN,CAAC,ECxBYgB,EAAWnB,EAAAA,WAA4C,SAClE,CAAE,MAAAoB,EAAO,KAAAC,EAAO,KAAM,MAAAhB,EAAQ,UAAW,SAAAF,EAAU,UAAAG,EAAW,MAAAC,EAAO,GAAGC,CAAA,EACxEC,EACA,CACA,MAAMa,EAA4B,CAAE,KAAAD,EAAM,MAAAhB,CAAA,EAE1C,OACES,EAAAA,IAAC,KAAA,CACC,IAAAL,EACA,UAAWQ,EAAAA,KAAKC,EAAO,KAAMZ,CAAS,EACtC,MAAAC,EACC,GAAGC,EAEJ,SAAAM,EAAAA,IAACrB,EAAgB,SAAhB,CAAyB,MAAO6B,EAC9B,SAAAF,EACGA,EAAM,IAAI,CAACG,EAAMC,IACfV,EAAAA,IAACf,EAAA,CAEC,MAAOwB,EAAK,MACZ,KAAMA,EAAK,KACX,KAAMA,EAAK,KACX,MAAOA,EAAK,MAEX,SAAAA,EAAK,OAAA,EANDC,CAAA,CAQR,EACDrB,CAAA,CACN,CAAA,CAAA,CAGN,CAAC"}

package/dist/Timeline-WkV4k_we.js

@@ -0,0 +1,71 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { createContext as x, useContext as y, forwardRef as z } from "react";
+import { clsx as N } from "clsx";
+import { a as T } from "./names-D8ABK2Wk.js";
+import { I as v } from "./Icon-CophpkHo.js";
+const p = x(null);
+function C() {
+  return y(p);
+}
+const g = "_root_34zcl_2", I = "_item_34zcl_12", S = "_sm_34zcl_24", E = "_md_34zcl_31", j = "_lg_34zcl_38", w = "_node_34zcl_47", A = "_dotNode_34zcl_60", M = "_dot_34zcl_60", O = "_connector_34zcl_71", P = "_body_34zcl_87", R = "_label_34zcl_95", $ = "_time_34zcl_102", k = "_content_34zcl_107", e = {
+  root: g,
+  item: I,
+  sm: S,
+  md: E,
+  lg: j,
+  node: w,
+  dotNode: A,
+  dot: M,
+  connector: O,
+  body: P,
+  label: R,
+  time: $,
+  content: k
+}, q = new Set(T), B = z(function({ label: c, time: l, children: s, icon: t, color: a, className: d, style: _, ...m }, i) {
+  const o = C(), r = (o == null ? void 0 : o.size) ?? "md", f = a ?? (o == null ? void 0 : o.color) ?? "primary", h = typeof t == "string" && q.has(t) ? /* @__PURE__ */ n(v, { name: t, size: r }) : t;
+  return /* @__PURE__ */ u(
+    "li",
+    {
+      ref: i,
+      className: N(e.item, e[r], d),
+      style: { "--tl-rgb": `var(--tz-color-${f}-rgb)`, ..._ },
+      ...m,
+      children: [
+        /* @__PURE__ */ n("span", { className: N(e.node, t == null && e.dotNode), "aria-hidden": "true", children: t != null ? h : /* @__PURE__ */ n("span", { className: e.dot }) }),
+        /* @__PURE__ */ n("span", { className: e.connector, "aria-hidden": "true" }),
+        /* @__PURE__ */ u("div", { className: e.body, children: [
+          c != null && /* @__PURE__ */ n("span", { className: e.label, children: c }),
+          l != null && /* @__PURE__ */ n("span", { className: e.time, children: l }),
+          s != null && /* @__PURE__ */ n("div", { className: e.content, children: s })
+        ] })
+      ]
+    }
+  );
+}), K = z(function({ items: c, size: l = "md", color: s = "primary", children: t, className: a, style: d, ..._ }, m) {
+  const i = { size: l, color: s };
+  return /* @__PURE__ */ n(
+    "ol",
+    {
+      ref: m,
+      className: N(e.root, a),
+      style: d,
+      ..._,
+      children: /* @__PURE__ */ n(p.Provider, { value: i, children: c ? c.map((o, r) => /* @__PURE__ */ n(
+        B,
+        {
+          label: o.label,
+          time: o.time,
+          icon: o.icon,
+          color: o.color,
+          children: o.content
+        },
+        r
+      )) : t })
+    }
+  );
+});
+export {
+  K as T,
+  B as a
+};
+//# sourceMappingURL=Timeline-WkV4k_we.js.map

package/dist/Timeline-WkV4k_we.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-WkV4k_we.js","sources":["../src/components/Timeline/timelineContext.ts","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { TimelineSize } from './Timeline'\n\n/** Shared defaults a `<Timeline>` hands down to its `<TimelineItem>` children via context. */\nexport interface TimelineContextValue {\n  size: TimelineSize\n  color: ThemeColor\n}\n\nexport const TimelineContext = createContext<TimelineContextValue | null>(null)\n\n/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`. */\nexport function useTimelineContext(): TimelineContextValue | null {\n  return useContext(TimelineContext)\n}\n","import { forwardRef, type CSSProperties, type LiHTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { useTimelineContext } from './timelineContext'\nimport styles from './Timeline.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {\n  /** Title line. */\n  label?: ReactNode\n  /** Muted caption under the label — usually the date/time (e.g. `\"13th May 2021\"`). */\n  time?: ReactNode\n  /** Body content under the caption — any node (text, chips, buttons). */\n  children?: ReactNode\n  /**\n   * Node icon — a known `IconName` or any node, shown in a soft tinted circle. Omit for a small\n   * **dot** node instead (the compact activity-log look).\n   */\n  icon?: IconName | ReactNode\n  /** Theme palette token tinting this item's node. Inherits the timeline's `color` when omitted. */\n  color?: ThemeColor\n}\n\n/**\n * One entry on a `<Timeline>` — a node (a soft tinted icon circle, or a small dot when there's no\n * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body.\n * Inherits `size`/`color` from the surrounding `<Timeline>` (a per-item `color` wins — e.g. a green\n * `success` node for a delivered step). Renders an `<li>`; the connecting rail hides itself on the\n * last item via CSS.\n */\nexport const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(function TimelineItem(\n  { label, time, children, icon, color, className, style, ...props },\n  ref,\n) {\n  const timeline = useTimelineContext()\n  const resolvedSize = timeline?.size ?? 'md'\n  const resolvedColor = color ?? timeline?.color ?? 'primary'\n\n  const iconNode =\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={resolvedSize} />\n    ) : (\n      icon\n    )\n\n  return (\n    <li\n      ref={ref}\n      className={clsx(styles.item, styles[resolvedSize], className)}\n      style={{ '--tl-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* the node — an icon circle, or a small dot when there's no icon */}\n      <span className={clsx(styles.node, icon == null && styles.dotNode)} aria-hidden=\"true\">\n        {icon != null ? iconNode : <span className={styles.dot} />}\n      </span>\n      {/* the rail segment down to the next node — hidden on the last item via :last-child */}\n      <span className={styles.connector} aria-hidden=\"true\" />\n      <div className={styles.body}>\n        {label != null && <span className={styles.label}>{label}</span>}\n        {time != null && <span className={styles.time}>{time}</span>}\n        {children != null && <div className={styles.content}>{children}</div>}\n      </div>\n    </li>\n  )\n})\n","import { forwardRef, type CSSProperties, type OlHTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { TimelineItem } from './TimelineItem'\nimport { TimelineContext, type TimelineContextValue } from './timelineContext'\nimport styles from './Timeline.module.css'\n\nexport type TimelineSize = 'sm' | 'md' | 'lg'\n\n/** A single entry for the data-driven `items` prop. */\nexport interface TimelineEntry {\n  /** Title line. */\n  label?: ReactNode\n  /** Muted caption under the label — usually the date/time. */\n  time?: ReactNode\n  /** Body content under the caption — any node. */\n  content?: ReactNode\n  /** Node icon (soft tinted circle) — a known `IconName` or any node. Omit for a small dot node. */\n  icon?: IconName | ReactNode\n  /** Theme palette token tinting this entry's node (overrides the timeline's `color`). */\n  color?: ThemeColor\n}\n\nexport interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'color'> {\n  /** Data-driven entries — an alternative to passing `<TimelineItem>` children. */\n  items?: TimelineEntry[]\n  /** Preset size — node circle, dot and fonts. Defaults to `md`. */\n  size?: TimelineSize\n  /** Theme palette token tinting the nodes. Defaults to `primary` (a per-item `color` wins). */\n  color?: ThemeColor\n  /** `<TimelineItem>` children (used when `items` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A vertical timeline — events on a rail (order tracking, activity feeds, audit logs). Data-driven via\n * **`items`** (`{ label?, time?, content?, icon?, color? }[]`) or as `<TimelineItem>` children. An\n * entry **with** an `icon` gets a soft tinted circle node; one **without** gets a small dot — mix them\n * freely, and tint any node per item via its `color` (e.g. `success` for a completed event). `size`\n * (`sm`/`md`/`lg`) scales the nodes and type together. Renders a semantic `<ol>`/`<li>` list (name it\n * with `aria-label`); the rail is a hairline that hides itself after the last entry. Styling uses\n * `--tz-*` tokens.\n */\nexport const Timeline = forwardRef<HTMLOListElement, TimelineProps>(function Timeline(\n  { items, size = 'md', color = 'primary', children, className, style, ...props },\n  ref,\n) {\n  const ctx: TimelineContextValue = { size, color }\n\n  return (\n    <ol\n      ref={ref}\n      className={clsx(styles.root, className)}\n      style={style as CSSProperties}\n      {...props}\n    >\n      <TimelineContext.Provider value={ctx}>\n        {items\n          ? items.map((item, i) => (\n              <TimelineItem\n                key={i}\n                label={item.label}\n                time={item.time}\n                icon={item.icon}\n                color={item.color}\n              >\n                {item.content}\n              </TimelineItem>\n            ))\n          : children}\n      </TimelineContext.Provider>\n    </ol>\n  )\n})\n"],"names":["TimelineContext","createContext","useTimelineContext","useContext","ICON_NAME_SET","ICON_NAMES","TimelineItem","forwardRef","label","time","children","icon","color","className","style","props","ref","timeline","resolvedSize","resolvedColor","iconNode","jsx","Icon","jsxs","clsx","styles","Timeline","items","size","ctx","item","i"],"mappings":";;;;;AAUO,MAAMA,IAAkBC,EAA2C,IAAI;AAGvE,SAASC,IAAkD;AAChE,SAAOC,EAAWH,CAAe;AACnC;;;;;;;;;;;;;;;GCPMI,IAAgB,IAAI,IAAYC,CAAU,GAyBnCC,IAAeC,EAA6C,SACvE,EAAE,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAC3DC,GACA;AACA,QAAMC,IAAWf,EAAA,GACXgB,KAAeD,KAAA,gBAAAA,EAAU,SAAQ,MACjCE,IAAgBP,MAASK,KAAA,gBAAAA,EAAU,UAAS,WAE5CG,IACJ,OAAOT,KAAS,YAAYP,EAAc,IAAIO,CAAI,IAChD,gBAAAU,EAACC,GAAA,EAAK,MAAMX,GAAkB,MAAMO,GAAc,IAElDP;AAGJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,WAAWQ,EAAKC,EAAO,MAAMA,EAAOP,CAAY,GAAGL,CAAS;AAAA,MAC5D,OAAO,EAAE,YAAY,kBAAkBM,CAAa,SAAS,GAAGL,EAAA;AAAA,MAC/D,GAAGC;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWG,EAAKC,EAAO,MAAMd,KAAQ,QAAQc,EAAO,OAAO,GAAG,eAAY,QAC7E,UAAAd,KAAQ,OAAOS,IAAW,gBAAAC,EAAC,UAAK,WAAWI,EAAO,KAAK,EAAA,CAC1D;AAAA,0BAEC,QAAA,EAAK,WAAWA,EAAO,WAAW,eAAY,QAAO;AAAA,QACtD,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,MACpB,UAAA;AAAA,UAAAjB,KAAS,QAAQ,gBAAAa,EAAC,QAAA,EAAK,WAAWI,EAAO,OAAQ,UAAAjB,GAAM;AAAA,UACvDC,KAAQ,QAAQ,gBAAAY,EAAC,UAAK,WAAWI,EAAO,MAAO,UAAAhB,GAAK;AAAA,UACpDC,KAAY,QAAQ,gBAAAW,EAAC,SAAI,WAAWI,EAAO,SAAU,UAAAf,EAAA,CAAS;AAAA,QAAA,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GCxBYgB,IAAWnB,EAA4C,SAClE,EAAE,OAAAoB,GAAO,MAAAC,IAAO,MAAM,OAAAhB,IAAQ,WAAW,UAAAF,GAAU,WAAAG,GAAW,OAAAC,GAAO,GAAGC,EAAA,GACxEC,GACA;AACA,QAAMa,IAA4B,EAAE,MAAAD,GAAM,OAAAhB,EAAA;AAE1C,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWQ,EAAKC,EAAO,MAAMZ,CAAS;AAAA,MACtC,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA,gBAAAM,EAACrB,EAAgB,UAAhB,EAAyB,OAAO6B,GAC9B,UAAAF,IACGA,EAAM,IAAI,CAACG,GAAMC,MACf,gBAAAV;AAAA,QAACf;AAAA,QAAA;AAAA,UAEC,OAAOwB,EAAK;AAAA,UACZ,MAAMA,EAAK;AAAA,UACX,MAAMA,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UAEX,UAAAA,EAAK;AAAA,QAAA;AAAA,QANDC;AAAA,MAAA,CAQR,IACDrB,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/Toaster-Bk5GtPjX.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),t=require("react"),w=require("react-dom"),r=require("./toastStore-B4Tk2Xk7.cjs"),_=require("./Alert-DKIjM-9x.cjs"),x="_viewport_zx7eo_3",b="_item_zx7eo_40",q="_alert_zx7eo_63",d={viewport:x,item:b,alert:q},E=300;function g({toast:e,duration:c,position:u}){const[o,f]=t.useState(!1),a=e.duration??c,n=t.useRef(void 0),i=t.useRef(a),T=t.useRef(0);t.useEffect(()=>{const m=requestAnimationFrame(()=>f(!0));return()=>cancelAnimationFrame(m)},[]),t.useEffect(()=>{if(e.open)return;f(!1);const m=window.setTimeout(()=>r.removeToast(e.id),E);return()=>window.clearTimeout(m)},[e.open,e.id]);const l=()=>{n.current!=null&&(window.clearTimeout(n.current),n.current=void 0)},p=()=>{!e.open||i.current===1/0||(l(),T.current=Date.now(),n.current=window.setTimeout(()=>r.closeToast(e.id),i.current))},v=()=>{n.current!=null&&(l(),i.current-=Date.now()-T.current)};return t.useEffect(()=>(i.current=a,p(),l),[e.open,a]),s.jsx("div",{className:d.item,"data-open":o?"true":"false","data-position":u,onMouseEnter:v,onMouseLeave:p,children:s.jsx(_.Alert,{color:e.color,variant:e.variant??"contained",icon:e.icon,action:e.action,onClose:()=>r.closeToast(e.id),role:"status",className:d.alert,children:e.message})})}function j({position:e="bottom-right",duration:c=4e3}){const u=t.useSyncExternalStore(r.subscribeToasts,r.getToasts,r.getToasts);return typeof document>"u"?null:w.createPortal(s.jsx("div",{className:d.viewport,"data-position":e,"aria-live":"polite",children:u.map(o=>s.jsx(g,{toast:o,duration:c,position:e},o.id))}),document.body)}exports.Toaster=j;
+//# sourceMappingURL=Toaster-Bk5GtPjX.cjs.map

package/dist/Toaster-Bk5GtPjX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster-Bk5GtPjX.cjs","sources":["../src/components/Toast/ToastItem.tsx","../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Alert } from '../Alert'\nimport { closeToast, removeToast, type ToastPosition, type ToastRecord } from './toastStore'\nimport styles from './Toaster.module.css'\n\n/** Exit-animation duration (matches `--tz-duration`) — how long to keep a closing toast mounted. */\nconst EXIT_MS = 300\n\nexport interface ToastItemProps {\n  toast: ToastRecord\n  /** Fallback auto-dismiss delay when the toast doesn't set its own. */\n  duration: number\n  position: ToastPosition\n}\n\n/**\n * One rendered toast — an `Alert` wrapped with the enter/exit animation, the auto-dismiss timer\n * (paused while hovered), and the close wiring. Internal to `Toaster`.\n */\nexport function ToastItem({ toast, duration, position }: ToastItemProps) {\n  const [visible, setVisible] = useState(false)\n  const ttl = toast.duration ?? duration\n  const timer = useRef<number | undefined>(undefined)\n  const remaining = useRef(ttl)\n  const startedAt = useRef(0)\n\n  // enter — flip `visible` on the next frame so the transition runs\n  useEffect(() => {\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [])\n\n  // exit — when the store marks this toast closing, animate out then remove it\n  useEffect(() => {\n    if (toast.open) return\n    setVisible(false)\n    const t = window.setTimeout(() => removeToast(toast.id), EXIT_MS)\n    return () => window.clearTimeout(t)\n  }, [toast.open, toast.id])\n\n  // auto-dismiss timer, paused on hover (tracks the remaining time across pauses)\n  const clearTimer = () => {\n    if (timer.current != null) {\n      window.clearTimeout(timer.current)\n      timer.current = undefined\n    }\n  }\n  const resume = () => {\n    if (!toast.open || remaining.current === Infinity) return\n    clearTimer()\n    startedAt.current = Date.now()\n    timer.current = window.setTimeout(() => closeToast(toast.id), remaining.current)\n  }\n  const pause = () => {\n    if (timer.current == null) return\n    clearTimer()\n    remaining.current -= Date.now() - startedAt.current\n  }\n  useEffect(() => {\n    // (re)start from the full duration on open, and whenever an update-by-id changes `duration`\n    // (otherwise the original countdown keeps running against the stale ttl)\n    remaining.current = ttl\n    resume()\n    return clearTimer\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [toast.open, ttl])\n\n  return (\n    <div\n      className={styles.item}\n      data-open={visible ? 'true' : 'false'}\n      data-position={position}\n      onMouseEnter={pause}\n      onMouseLeave={resume}\n    >\n      <Alert\n        color={toast.color}\n        variant={toast.variant ?? 'contained'}\n        icon={toast.icon}\n        action={toast.action}\n        onClose={() => closeToast(toast.id)}\n        role=\"status\"\n        className={styles.alert}\n      >\n        {toast.message}\n      </Alert>\n    </div>\n  )\n}\n","import { useSyncExternalStore } from 'react'\nimport { createPortal } from 'react-dom'\nimport { getToasts, subscribeToasts, type ToastPosition } from './toastStore'\nimport { ToastItem } from './ToastItem'\nimport styles from './Toaster.module.css'\n\nexport interface ToasterProps {\n  /** Corner the toasts stack in. Defaults to `bottom-right`. */\n  position?: ToastPosition\n  /** Default auto-dismiss delay in ms; a per-toast `duration` overrides it. Defaults to `4000`. */\n  duration?: number\n}\n\n/**\n * The toast viewport — mount it **once** near the app root. It portals to `<body>` at `--tz-z-toast`,\n * subscribes to the imperative `toast` store, and renders each toast as an animated, auto-dismissing\n * `Alert`. Drive it from anywhere with `toast.success('Saved')` / `toast.error(...)` / `toast.dismiss(id)`.\n *\n * @example\n * <Toaster position=\"bottom-right\" />\n * // …elsewhere:\n * toast.success('Saved')\n */\nexport function Toaster({ position = 'bottom-right', duration = 4000 }: ToasterProps) {\n  const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className={styles.viewport} data-position={position} aria-live=\"polite\">\n      {toasts.map((t) => (\n        <ToastItem key={t.id} toast={t} duration={duration} position={position} />\n      ))}\n    </div>,\n    document.body,\n  )\n}\n"],"names":["EXIT_MS","ToastItem","toast","duration","position","visible","setVisible","useState","ttl","timer","useRef","remaining","startedAt","useEffect","raf","t","removeToast","clearTimer","resume","closeToast","pause","jsx","styles","Alert","Toaster","toasts","useSyncExternalStore","subscribeToasts","getToasts","createPortal"],"mappings":"gQAMMA,EAAU,IAaT,SAASC,EAAU,CAAE,MAAAC,EAAO,SAAAC,EAAU,SAAAC,GAA4B,CACvE,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAMN,EAAM,UAAYC,EACxBM,EAAQC,EAAAA,OAA2B,MAAS,EAC5CC,EAAYD,EAAAA,OAAOF,CAAG,EACtBI,EAAYF,EAAAA,OAAO,CAAC,EAG1BG,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAM,sBAAsB,IAAMR,EAAW,EAAI,CAAC,EACxD,MAAO,IAAM,qBAAqBQ,CAAG,CACvC,EAAG,CAAA,CAAE,EAGLD,EAAAA,UAAU,IAAM,CACd,GAAIX,EAAM,KAAM,OAChBI,EAAW,EAAK,EAChB,MAAMS,EAAI,OAAO,WAAW,IAAMC,EAAAA,YAAYd,EAAM,EAAE,EAAGF,CAAO,EAChE,MAAO,IAAM,OAAO,aAAae,CAAC,CACpC,EAAG,CAACb,EAAM,KAAMA,EAAM,EAAE,CAAC,EAGzB,MAAMe,EAAa,IAAM,CACnBR,EAAM,SAAW,OACnB,OAAO,aAAaA,EAAM,OAAO,EACjCA,EAAM,QAAU,OAEpB,EACMS,EAAS,IAAM,CACf,CAAChB,EAAM,MAAQS,EAAU,UAAY,MACzCM,EAAA,EACAL,EAAU,QAAU,KAAK,IAAA,EACzBH,EAAM,QAAU,OAAO,WAAW,IAAMU,aAAWjB,EAAM,EAAE,EAAGS,EAAU,OAAO,EACjF,EACMS,EAAQ,IAAM,CACdX,EAAM,SAAW,OACrBQ,EAAA,EACAN,EAAU,SAAW,KAAK,IAAA,EAAQC,EAAU,QAC9C,EACAC,OAAAA,EAAAA,UAAU,KAGRF,EAAU,QAAUH,EACpBU,EAAA,EACOD,GAEN,CAACf,EAAM,KAAMM,CAAG,CAAC,EAGlBa,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,KAClB,YAAWjB,EAAU,OAAS,QAC9B,gBAAeD,EACf,aAAcgB,EACd,aAAcF,EAEd,SAAAG,EAAAA,IAACE,EAAAA,MAAA,CACC,MAAOrB,EAAM,MACb,QAASA,EAAM,SAAW,YAC1B,KAAMA,EAAM,KACZ,OAAQA,EAAM,OACd,QAAS,IAAMiB,EAAAA,WAAWjB,EAAM,EAAE,EAClC,KAAK,SACL,UAAWoB,EAAO,MAEjB,SAAApB,EAAM,OAAA,CAAA,CACT,CAAA,CAGN,CCjEO,SAASsB,EAAQ,CAAE,SAAApB,EAAW,eAAgB,SAAAD,EAAW,KAAsB,CACpF,MAAMsB,EAASC,EAAAA,qBAAqBC,kBAAiBC,EAAAA,UAAWA,EAAAA,SAAS,EAEzE,OAAI,OAAO,SAAa,IAAoB,KAErCC,EAAAA,aACLR,EAAAA,IAAC,OAAI,UAAWC,EAAO,SAAU,gBAAelB,EAAU,YAAU,SACjE,SAAAqB,EAAO,IAAKV,GACXM,EAAAA,IAACpB,GAAqB,MAAOc,EAAG,SAAAZ,EAAoB,SAAAC,GAApCW,EAAE,EAAsD,CACzE,CAAA,CACH,EACA,SAAS,IAAA,CAEb"}

package/dist/Toaster-D-eG1xv7.js

@@ -0,0 +1,63 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as b, useRef as l, useEffect as m, useSyncExternalStore as x } from "react";
+import { createPortal as g } from "react-dom";
+import { r as y, c as w, s as A, g as T } from "./toastStore-Cx_JOKwS.js";
+import { A as h } from "./Alert-BQpA48PY.js";
+const E = "_viewport_zx7eo_3", S = "_item_zx7eo_40", z = "_alert_zx7eo_63", d = {
+  viewport: E,
+  item: S,
+  alert: z
+}, I = 300;
+function M({ toast: e, duration: i, position: s }) {
+  const [t, f] = b(!1), c = e.duration ?? i, r = l(void 0), n = l(c), p = l(0);
+  m(() => {
+    const u = requestAnimationFrame(() => f(!0));
+    return () => cancelAnimationFrame(u);
+  }, []), m(() => {
+    if (e.open) return;
+    f(!1);
+    const u = window.setTimeout(() => y(e.id), I);
+    return () => window.clearTimeout(u);
+  }, [e.open, e.id]);
+  const a = () => {
+    r.current != null && (window.clearTimeout(r.current), r.current = void 0);
+  }, v = () => {
+    !e.open || n.current === 1 / 0 || (a(), p.current = Date.now(), r.current = window.setTimeout(() => w(e.id), n.current));
+  }, _ = () => {
+    r.current != null && (a(), n.current -= Date.now() - p.current);
+  };
+  return m(() => (n.current = c, v(), a), [e.open, c]), /* @__PURE__ */ o(
+    "div",
+    {
+      className: d.item,
+      "data-open": t ? "true" : "false",
+      "data-position": s,
+      onMouseEnter: _,
+      onMouseLeave: v,
+      children: /* @__PURE__ */ o(
+        h,
+        {
+          color: e.color,
+          variant: e.variant ?? "contained",
+          icon: e.icon,
+          action: e.action,
+          onClose: () => w(e.id),
+          role: "status",
+          className: d.alert,
+          children: e.message
+        }
+      )
+    }
+  );
+}
+function C({ position: e = "bottom-right", duration: i = 4e3 }) {
+  const s = x(A, T, T);
+  return typeof document > "u" ? null : g(
+    /* @__PURE__ */ o("div", { className: d.viewport, "data-position": e, "aria-live": "polite", children: s.map((t) => /* @__PURE__ */ o(M, { toast: t, duration: i, position: e }, t.id)) }),
+    document.body
+  );
+}
+export {
+  C as T
+};
+//# sourceMappingURL=Toaster-D-eG1xv7.js.map

package/dist/Toaster-D-eG1xv7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster-D-eG1xv7.js","sources":["../src/components/Toast/ToastItem.tsx","../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Alert } from '../Alert'\nimport { closeToast, removeToast, type ToastPosition, type ToastRecord } from './toastStore'\nimport styles from './Toaster.module.css'\n\n/** Exit-animation duration (matches `--tz-duration`) — how long to keep a closing toast mounted. */\nconst EXIT_MS = 300\n\nexport interface ToastItemProps {\n  toast: ToastRecord\n  /** Fallback auto-dismiss delay when the toast doesn't set its own. */\n  duration: number\n  position: ToastPosition\n}\n\n/**\n * One rendered toast — an `Alert` wrapped with the enter/exit animation, the auto-dismiss timer\n * (paused while hovered), and the close wiring. Internal to `Toaster`.\n */\nexport function ToastItem({ toast, duration, position }: ToastItemProps) {\n  const [visible, setVisible] = useState(false)\n  const ttl = toast.duration ?? duration\n  const timer = useRef<number | undefined>(undefined)\n  const remaining = useRef(ttl)\n  const startedAt = useRef(0)\n\n  // enter — flip `visible` on the next frame so the transition runs\n  useEffect(() => {\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [])\n\n  // exit — when the store marks this toast closing, animate out then remove it\n  useEffect(() => {\n    if (toast.open) return\n    setVisible(false)\n    const t = window.setTimeout(() => removeToast(toast.id), EXIT_MS)\n    return () => window.clearTimeout(t)\n  }, [toast.open, toast.id])\n\n  // auto-dismiss timer, paused on hover (tracks the remaining time across pauses)\n  const clearTimer = () => {\n    if (timer.current != null) {\n      window.clearTimeout(timer.current)\n      timer.current = undefined\n    }\n  }\n  const resume = () => {\n    if (!toast.open || remaining.current === Infinity) return\n    clearTimer()\n    startedAt.current = Date.now()\n    timer.current = window.setTimeout(() => closeToast(toast.id), remaining.current)\n  }\n  const pause = () => {\n    if (timer.current == null) return\n    clearTimer()\n    remaining.current -= Date.now() - startedAt.current\n  }\n  useEffect(() => {\n    // (re)start from the full duration on open, and whenever an update-by-id changes `duration`\n    // (otherwise the original countdown keeps running against the stale ttl)\n    remaining.current = ttl\n    resume()\n    return clearTimer\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [toast.open, ttl])\n\n  return (\n    <div\n      className={styles.item}\n      data-open={visible ? 'true' : 'false'}\n      data-position={position}\n      onMouseEnter={pause}\n      onMouseLeave={resume}\n    >\n      <Alert\n        color={toast.color}\n        variant={toast.variant ?? 'contained'}\n        icon={toast.icon}\n        action={toast.action}\n        onClose={() => closeToast(toast.id)}\n        role=\"status\"\n        className={styles.alert}\n      >\n        {toast.message}\n      </Alert>\n    </div>\n  )\n}\n","import { useSyncExternalStore } from 'react'\nimport { createPortal } from 'react-dom'\nimport { getToasts, subscribeToasts, type ToastPosition } from './toastStore'\nimport { ToastItem } from './ToastItem'\nimport styles from './Toaster.module.css'\n\nexport interface ToasterProps {\n  /** Corner the toasts stack in. Defaults to `bottom-right`. */\n  position?: ToastPosition\n  /** Default auto-dismiss delay in ms; a per-toast `duration` overrides it. Defaults to `4000`. */\n  duration?: number\n}\n\n/**\n * The toast viewport — mount it **once** near the app root. It portals to `<body>` at `--tz-z-toast`,\n * subscribes to the imperative `toast` store, and renders each toast as an animated, auto-dismissing\n * `Alert`. Drive it from anywhere with `toast.success('Saved')` / `toast.error(...)` / `toast.dismiss(id)`.\n *\n * @example\n * <Toaster position=\"bottom-right\" />\n * // …elsewhere:\n * toast.success('Saved')\n */\nexport function Toaster({ position = 'bottom-right', duration = 4000 }: ToasterProps) {\n  const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className={styles.viewport} data-position={position} aria-live=\"polite\">\n      {toasts.map((t) => (\n        <ToastItem key={t.id} toast={t} duration={duration} position={position} />\n      ))}\n    </div>,\n    document.body,\n  )\n}\n"],"names":["EXIT_MS","ToastItem","toast","duration","position","visible","setVisible","useState","ttl","timer","useRef","remaining","startedAt","useEffect","raf","t","removeToast","clearTimer","resume","closeToast","pause","jsx","styles","Alert","Toaster","toasts","useSyncExternalStore","subscribeToasts","getToasts","createPortal"],"mappings":";;;;;;;;;GAMMA,IAAU;AAaT,SAASC,EAAU,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,KAA4B;AACvE,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAMN,EAAM,YAAYC,GACxBM,IAAQC,EAA2B,MAAS,GAC5CC,IAAYD,EAAOF,CAAG,GACtBI,IAAYF,EAAO,CAAC;AAG1B,EAAAG,EAAU,MAAM;AACd,UAAMC,IAAM,sBAAsB,MAAMR,EAAW,EAAI,CAAC;AACxD,WAAO,MAAM,qBAAqBQ,CAAG;AAAA,EACvC,GAAG,CAAA,CAAE,GAGLD,EAAU,MAAM;AACd,QAAIX,EAAM,KAAM;AAChB,IAAAI,EAAW,EAAK;AAChB,UAAMS,IAAI,OAAO,WAAW,MAAMC,EAAYd,EAAM,EAAE,GAAGF,CAAO;AAChE,WAAO,MAAM,OAAO,aAAae,CAAC;AAAA,EACpC,GAAG,CAACb,EAAM,MAAMA,EAAM,EAAE,CAAC;AAGzB,QAAMe,IAAa,MAAM;AACvB,IAAIR,EAAM,WAAW,SACnB,OAAO,aAAaA,EAAM,OAAO,GACjCA,EAAM,UAAU;AAAA,EAEpB,GACMS,IAAS,MAAM;AACnB,IAAI,CAAChB,EAAM,QAAQS,EAAU,YAAY,UACzCM,EAAA,GACAL,EAAU,UAAU,KAAK,IAAA,GACzBH,EAAM,UAAU,OAAO,WAAW,MAAMU,EAAWjB,EAAM,EAAE,GAAGS,EAAU,OAAO;AAAA,EACjF,GACMS,IAAQ,MAAM;AAClB,IAAIX,EAAM,WAAW,SACrBQ,EAAA,GACAN,EAAU,WAAW,KAAK,IAAA,IAAQC,EAAU;AAAA,EAC9C;AACA,SAAAC,EAAU,OAGRF,EAAU,UAAUH,GACpBU,EAAA,GACOD,IAEN,CAACf,EAAM,MAAMM,CAAG,CAAC,GAGlB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,aAAWjB,IAAU,SAAS;AAAA,MAC9B,iBAAeD;AAAA,MACf,cAAcgB;AAAA,MACd,cAAcF;AAAA,MAEd,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOrB,EAAM;AAAA,UACb,SAASA,EAAM,WAAW;AAAA,UAC1B,MAAMA,EAAM;AAAA,UACZ,QAAQA,EAAM;AAAA,UACd,SAAS,MAAMiB,EAAWjB,EAAM,EAAE;AAAA,UAClC,MAAK;AAAA,UACL,WAAWoB,EAAO;AAAA,UAEjB,UAAApB,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;ACjEO,SAASsB,EAAQ,EAAE,UAAApB,IAAW,gBAAgB,UAAAD,IAAW,OAAsB;AACpF,QAAMsB,IAASC,EAAqBC,GAAiBC,GAAWA,CAAS;AAEzE,SAAI,OAAO,WAAa,MAAoB,OAErCC;AAAA,IACL,gBAAAR,EAAC,SAAI,WAAWC,EAAO,UAAU,iBAAelB,GAAU,aAAU,UACjE,UAAAqB,EAAO,IAAI,CAAC,MACX,gBAAAJ,EAACpB,KAAqB,OAAO,GAAG,UAAAE,GAAoB,UAAAC,KAApC,EAAE,EAAsD,CACzE,EAAA,CACH;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}

package/dist/ToggleButtonGroup-BWd7MOcc.js

@@ -0,0 +1,123 @@
+import { jsx as _, jsxs as h } from "react/jsx-runtime";
+import { useContext as E, createContext as w, forwardRef as A, useState as M } from "react";
+import { clsx as N } from "clsx";
+import { a as O } from "./names-D8ABK2Wk.js";
+import { I as D } from "./Icon-CophpkHo.js";
+const W = w(null);
+function F() {
+  return E(W);
+}
+const L = "_toggleButton_gj6n3_4", P = "_selected_gj6n3_29", R = "_fullWidth_gj6n3_45", $ = "_sm_gj6n3_50", q = "_md_gj6n3_56", H = "_lg_gj6n3_62", J = "_group_gj6n3_70", K = "_vertical_gj6n3_73", s = {
+  toggleButton: L,
+  selected: P,
+  fullWidth: R,
+  sm: $,
+  md: q,
+  lg: H,
+  group: J,
+  vertical: K
+}, Q = A(function({
+  value: r,
+  selected: i,
+  onChange: o,
+  color: c,
+  size: d,
+  fullWidth: f,
+  disabled: m,
+  className: b,
+  style: B,
+  children: j,
+  onClick: n,
+  ...y
+}, S) {
+  const e = F(), a = e ? e.isSelected(r) : i ?? !1, u = c ?? (e == null ? void 0 : e.color) ?? "primary", v = d ?? (e == null ? void 0 : e.size) ?? "md", x = !!(m || e != null && e.disabled), l = !e && (f ?? !1);
+  return /* @__PURE__ */ _(
+    "button",
+    {
+      ref: S,
+      type: "button",
+      className: N(
+        s.toggleButton,
+        s[v],
+        a && s.selected,
+        l && s.fullWidth,
+        b
+      ),
+      style: { "--tz-btn-rgb": `var(--tz-color-${u}-rgb)`, ...B },
+      "aria-pressed": a,
+      disabled: x,
+      onClick: (p) => {
+        n == null || n(p), e ? e.toggle(r) : o == null || o(!a, r);
+      },
+      ...y,
+      children: j
+    }
+  );
+}), U = new Set(O), tt = A(
+  function({
+    exclusive: r = !1,
+    value: i,
+    defaultValue: o,
+    onChange: c,
+    options: d,
+    orientation: f = "horizontal",
+    size: m = "md",
+    color: b = "primary",
+    disabled: B = !1,
+    fullWidth: j = !1,
+    children: n,
+    className: y,
+    style: S,
+    ...e
+  }, a) {
+    const u = i !== void 0, [v, x] = M(o), l = u ? i : v, I = {
+      isSelected: (t) => r ? l === t : Array.isArray(l) && l.includes(t),
+      toggle: (t) => {
+        let g;
+        if (r)
+          g = l === t ? null : t;
+        else {
+          const T = Array.isArray(l) ? l : [];
+          g = T.includes(t) ? T.filter((G) => G !== t) : [...T, t];
+        }
+        u || x(g), c == null || c(g);
+      },
+      size: m,
+      color: b,
+      disabled: B
+    };
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        ref: a,
+        role: "group",
+        className: N(
+          s.group,
+          f === "vertical" && s.vertical,
+          j && s.fullWidth,
+          y
+        ),
+        style: S,
+        ...e,
+        children: /* @__PURE__ */ _(W.Provider, { value: I, children: d ? d.map((t) => /* @__PURE__ */ h(
+          Q,
+          {
+            value: t.value,
+            disabled: t.disabled,
+            "aria-label": t.ariaLabel,
+            children: [
+              t.icon != null && (typeof t.icon == "string" && U.has(t.icon) ? /* @__PURE__ */ _(D, { name: t.icon }) : t.icon),
+              t.label
+            ]
+          },
+          t.value
+        )) : n })
+      }
+    );
+  }
+);
+export {
+  Q as T,
+  tt as a
+};
+//# sourceMappingURL=ToggleButtonGroup-BWd7MOcc.js.map

package/dist/ToggleButtonGroup-BWd7MOcc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup-BWd7MOcc.js","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"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"}

package/dist/ToggleButtonGroup-DYRLwKKh.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react/jsx-runtime"),d=require("react"),W=require("clsx"),w=require("./names-C2Yj1p3u.cjs"),E=require("./Icon-CXTl_QAP.cjs"),q=d.createContext(null);function R(){return d.useContext(q)}const M="_toggleButton_gj6n3_4",O="_selected_gj6n3_29",p="_fullWidth_gj6n3_45",D="_sm_gj6n3_50",F="_md_gj6n3_56",L="_lg_gj6n3_62",P="_group_gj6n3_70",$="_vertical_gj6n3_73",s={toggleButton:M,selected:O,fullWidth:p,sm:D,md:F,lg:L,group:P,vertical:$},z=d.forwardRef(function({value:r,selected:a,onChange:o,color:c,size:g,fullWidth:m,disabled:j,className:b,style:x,children:B,onClick:n,...y},S){const t=R(),u=t?t.isSelected(r):a??!1,_=c??(t==null?void 0:t.color)??"primary",T=g??(t==null?void 0:t.size)??"md",v=!!(j||t!=null&&t.disabled),l=!t&&(m??!1);return i.jsx("button",{ref:S,type:"button",className:W.clsx(s.toggleButton,s[T],u&&s.selected,l&&s.fullWidth,b),style:{"--tz-btn-rgb":`var(--tz-color-${_}-rgb)`,...x},"aria-pressed":u,disabled:v,onClick:N=>{n==null||n(N),t?t.toggle(r):o==null||o(!u,r)},...y,children:B})}),H=new Set(w.ICON_NAMES),J=d.forwardRef(function({exclusive:r=!1,value:a,defaultValue:o,onChange:c,options:g,orientation:m="horizontal",size:j="md",color:b="primary",disabled:x=!1,fullWidth:B=!1,children:n,className:y,style:S,...t},u){const _=a!==void 0,[T,v]=d.useState(o),l=_?a:T,I={isSelected:e=>r?l===e:Array.isArray(l)&&l.includes(e),toggle:e=>{let f;if(r)f=l===e?null:e;else{const A=Array.isArray(l)?l:[];f=A.includes(e)?A.filter(h=>h!==e):[...A,e]}_||v(f),c==null||c(f)},size:j,color:b,disabled:x};return i.jsx("div",{ref:u,role:"group",className:W.clsx(s.group,m==="vertical"&&s.vertical,B&&s.fullWidth,y),style:S,...t,children:i.jsx(q.Provider,{value:I,children:g?g.map(e=>i.jsxs(z,{value:e.value,disabled:e.disabled,"aria-label":e.ariaLabel,children:[e.icon!=null&&(typeof e.icon=="string"&&H.has(e.icon)?i.jsx(E.Icon,{name:e.icon}):e.icon),e.label]},e.value)):n})})});exports.ToggleButton=z;exports.ToggleButtonGroup=J;
+//# sourceMappingURL=ToggleButtonGroup-DYRLwKKh.cjs.map

package/dist/ToggleButtonGroup-DYRLwKKh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup-DYRLwKKh.cjs","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"0JAiBaA,EAA2BC,EAAAA,cAAoD,IAAI,EAGzF,SAASC,GAA6D,CAC3E,OAAOC,EAAAA,WAAWH,CAAwB,CAC5C,0PCYaI,EAAeC,EAAAA,WAAiD,SAC3E,CACE,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAQjB,EAAA,EACRkB,EAAaD,EAAQA,EAAM,WAAWb,CAAK,EAAKC,GAAY,GAC5Dc,EAAgBZ,IAASU,GAAA,YAAAA,EAAO,QAAS,UACzCG,EAAeZ,IAAQS,GAAA,YAAAA,EAAO,OAAQ,KACtCI,EAAmB,GAAQX,GAAYO,GAAA,MAAAA,EAAO,UAE9CK,EAAoB,CAACL,IAAUR,GAAa,IAElD,OACEc,EAAAA,IAAC,SAAA,CACC,IAAAP,EACA,KAAK,SACL,UAAWQ,EAAAA,KACTC,EAAO,aACPA,EAAOL,CAAY,EACnBF,GAAcO,EAAO,SACrBH,GAAqBG,EAAO,UAC5Bd,CAAA,EAEF,MAAO,CAAE,eAAgB,kBAAkBQ,CAAa,QAAS,GAAGP,CAAA,EACpE,eAAcM,EACd,SAAUG,EACV,QAAUK,GAAU,CAClBZ,GAAA,MAAAA,EAAUY,GACNT,EAAOA,EAAM,OAAOb,CAAK,EACxBE,GAAA,MAAAA,EAAW,CAACY,EAAYd,EAC/B,EACC,GAAGW,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,ECjEKc,EAAgB,IAAI,IAAYC,YAAU,EAuDnCC,EAAoB1B,EAAAA,WAC/B,SACE,CACE,UAAA2B,EAAY,GACZ,MAAA1B,EACA,aAAA2B,EACA,SAAAzB,EACA,QAAA0B,EACA,YAAAC,EAAc,aACd,KAAAzB,EAAO,KACP,MAAAD,EAAQ,UACR,SAAAG,EAAW,GACX,UAAAD,EAAY,GACZ,SAAAI,EACA,UAAAF,EACA,MAAAC,EACA,GAAGG,CAAA,EAELC,EACA,CACA,MAAMkB,EAAe9B,IAAU,OACzB,CAAC+B,EAAUC,CAAW,EAAIC,EAAAA,SAA+CN,CAAY,EACrFO,EAAUJ,EAAe9B,EAAQ+B,EAiBjCI,EAAqC,CACzC,WAhBkBC,GAClBV,EAAYQ,IAAYE,EAAI,MAAM,QAAQF,CAAO,GAAKA,EAAQ,SAASE,CAAC,EAgBxE,OAdcA,GAAc,CAC5B,IAAIC,EACJ,GAAIX,EACFW,EAAOH,IAAYE,EAAI,KAAOA,MACzB,CACL,MAAME,EAAM,MAAM,QAAQJ,CAAO,EAAIA,EAAU,CAAA,EAC/CG,EAAOC,EAAI,SAASF,CAAC,EAAIE,EAAI,OAAQC,GAAMA,IAAMH,CAAC,EAAI,CAAC,GAAGE,EAAKF,CAAC,CAClE,CACKN,GAAcE,EAAYK,CAAI,EACnCnC,GAAA,MAAAA,EAAWmC,EACb,EAKE,KAAAjC,EACA,MAAAD,EACA,SAAAG,CAAA,EAGF,OACEa,EAAAA,IAAC,MAAA,CACC,IAAAP,EACA,KAAK,QACL,UAAWQ,EAAAA,KACTC,EAAO,MACPQ,IAAgB,YAAcR,EAAO,SACrChB,GAAagB,EAAO,UACpBd,CAAA,EAEF,MAAAC,EACC,GAAGG,EAEJ,SAAAQ,EAAAA,IAACzB,EAAyB,SAAzB,CAAkC,MAAOyC,EACvC,SAAAP,EACGA,EAAQ,IAAKY,GACXC,EAAAA,KAAC3C,EAAA,CAEC,MAAO0C,EAAO,MACd,SAAUA,EAAO,SACjB,aAAYA,EAAO,UAElB,SAAA,CAAAA,EAAO,MAAQ,OACb,OAAOA,EAAO,MAAS,UAAYjB,EAAc,IAAIiB,EAAO,IAAI,EAC/DrB,EAAAA,IAACuB,EAAAA,KAAA,CAAK,KAAMF,EAAO,IAAA,CAAkB,EAErCA,EAAO,MAEVA,EAAO,KAAA,CAAA,EAXHA,EAAO,KAAA,CAaf,EACD/B,CAAA,CACN,CAAA,CAAA,CAGN,CACF"}

package/dist/Tooltip-Ao7az09p.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),a=require("react"),_=require("clsx"),x="_root_1h36l_4",g="_tooltip_1h36l_10",j="_arrow_1h36l_37",z="_top_1h36l_45",q="_bottom_1h36l_57",v="_left_1h36l_69",y="_right_1h36l_81",s={root:x,tooltip:g,arrow:j,top:z,bottom:q,left:v,right:y};function E({content:o,placement:u="top",color:n="primary",children:r,className:f,style:h,onKeyDown:e,...d}){const c=`${a.useId()}-tooltip`,[i,t]=a.useState(!1),b=o!=null&&o!=="",m=p=>{p.key==="Escape"&&t(!1),e==null||e(p)};return b?l.jsxs("span",{className:_.clsx(s.root,f),style:{"--tz-btn-rgb":`var(--tz-color-${n}-rgb)`,"--tz-btn-on":`var(--tz-color-${n}-contrast, #fff)`,...h},onMouseEnter:()=>t(!0),onMouseLeave:()=>t(!1),onFocus:()=>t(!0),onBlur:()=>t(!1),onKeyDown:m,...d,children:[i?a.cloneElement(r,{"aria-describedby":c}):r,l.jsxs("span",{role:"tooltip",id:c,className:_.clsx(s.tooltip,s[u]),"data-open":i?"true":"false",children:[o,l.jsx("span",{className:s.arrow,"aria-hidden":"true"})]})]}):r}exports.Tooltip=E;
+//# sourceMappingURL=Tooltip-Ao7az09p.cjs.map

package/dist/Tooltip-Ao7az09p.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-Ao7az09p.cjs","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {\n  /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */\n  content: ReactNode\n  /** Which side of the trigger the tooltip appears on. Defaults to `top`. */\n  placement?: TooltipPlacement\n  /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */\n  color?: ThemeColor\n  /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */\n  children: ReactElement\n}\n\n/**\n * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at\n * the trigger. Wrap a single element: `<Tooltip content=\"Save\"><IconButton…/></Tooltip>`. Opens on\n * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`\n * while open (the label has `role=\"tooltip\"`). Token-only styling via the shared `--tz-btn-rgb`\n * pattern — `color` (default `primary`) sets the fill and its contrast label, flipping with the theme.\n */\nexport function Tooltip({\n  content,\n  placement = 'top',\n  color = 'primary',\n  children,\n  className,\n  style,\n  onKeyDown,\n  ...props\n}: TooltipProps) {\n  const tooltipId = `${useId()}-tooltip`\n  const [open, setOpen] = useState(false)\n  const hasContent = content !== null && content !== undefined && content !== ''\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Escape') setOpen(false)\n    onKeyDown?.(event)\n  }\n\n  if (!hasContent) return children\n\n  return (\n    <span\n      className={clsx(styles.root, className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      onMouseEnter={() => setOpen(true)}\n      onMouseLeave={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onBlur={() => setOpen(false)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {open\n        ? cloneElement(children as ReactElement<{ 'aria-describedby'?: string }>, {\n            'aria-describedby': tooltipId,\n          })\n        : children}\n      <span\n        role=\"tooltip\"\n        id={tooltipId}\n        className={clsx(styles.tooltip, styles[placement])}\n        data-open={open ? 'true' : 'false'}\n      >\n        {content}\n        <span className={styles.arrow} aria-hidden=\"true\" />\n      </span>\n    </span>\n  )\n}\n"],"names":["Tooltip","content","placement","color","children","className","style","onKeyDown","props","tooltipId","useId","open","setOpen","useState","hasContent","handleKeyDown","event","jsxs","clsx","styles","cloneElement"],"mappings":"4RAkCO,SAASA,EAAQ,CACtB,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,UACR,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAY,GAAGC,EAAAA,MAAA,CAAO,WACtB,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAChCC,EAAab,GAAY,MAAiCA,IAAY,GAEtEc,EAAiBC,GAA0C,CAC3DA,EAAM,MAAQ,UAAUJ,EAAQ,EAAK,EACzCL,GAAA,MAAAA,EAAYS,EACd,EAEA,OAAKF,EAGHG,EAAAA,KAAC,OAAA,CACC,UAAWC,EAAAA,KAAKC,EAAO,KAAMd,CAAS,EACtC,MACE,CACE,eAAgB,kBAAkBF,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGG,CAAA,EAGP,aAAc,IAAMM,EAAQ,EAAI,EAChC,aAAc,IAAMA,EAAQ,EAAK,EACjC,QAAS,IAAMA,EAAQ,EAAI,EAC3B,OAAQ,IAAMA,EAAQ,EAAK,EAC3B,UAAWG,EACV,GAAGP,EAEH,SAAA,CAAAG,EACGS,EAAAA,aAAahB,EAA2D,CACtE,mBAAoBK,CAAA,CACrB,EACDL,EACJa,EAAAA,KAAC,OAAA,CACC,KAAK,UACL,GAAIR,EACJ,UAAWS,EAAAA,KAAKC,EAAO,QAASA,EAAOjB,CAAS,CAAC,EACjD,YAAWS,EAAO,OAAS,QAE1B,SAAA,CAAAV,QACA,OAAA,CAAK,UAAWkB,EAAO,MAAO,cAAY,MAAA,CAAO,CAAA,CAAA,CAAA,CACpD,CAAA,CAAA,EAhCoBf,CAmC1B"}

package/dist/Tooltip-Cb_FKxT9.js

@@ -0,0 +1,65 @@
+import { jsxs as p, jsx as b } from "react/jsx-runtime";
+import { useId as g, useState as x, cloneElement as z } from "react";
+import { clsx as _ } from "clsx";
+const v = "_root_1h36l_4", y = "_tooltip_1h36l_10", E = "_arrow_1h36l_37", N = "_top_1h36l_45", $ = "_bottom_1h36l_57", j = "_left_1h36l_69", w = "_right_1h36l_81", r = {
+  root: v,
+  tooltip: y,
+  arrow: E,
+  top: N,
+  bottom: $,
+  left: j,
+  right: w
+};
+function k({
+  content: o,
+  placement: c = "top",
+  color: e = "primary",
+  children: s,
+  className: f,
+  style: m,
+  onKeyDown: l,
+  ...u
+}) {
+  const a = `${g()}-tooltip`, [n, t] = x(!1), h = o != null && o !== "", d = (i) => {
+    i.key === "Escape" && t(!1), l == null || l(i);
+  };
+  return h ? /* @__PURE__ */ p(
+    "span",
+    {
+      className: _(r.root, f),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${e}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${e}-contrast, #fff)`,
+        ...m
+      },
+      onMouseEnter: () => t(!0),
+      onMouseLeave: () => t(!1),
+      onFocus: () => t(!0),
+      onBlur: () => t(!1),
+      onKeyDown: d,
+      ...u,
+      children: [
+        n ? z(s, {
+          "aria-describedby": a
+        }) : s,
+        /* @__PURE__ */ p(
+          "span",
+          {
+            role: "tooltip",
+            id: a,
+            className: _(r.tooltip, r[c]),
+            "data-open": n ? "true" : "false",
+            children: [
+              o,
+              /* @__PURE__ */ b("span", { className: r.arrow, "aria-hidden": "true" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : s;
+}
+export {
+  k as T
+};
+//# sourceMappingURL=Tooltip-Cb_FKxT9.js.map

package/dist/Tooltip-Cb_FKxT9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-Cb_FKxT9.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {\n  /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */\n  content: ReactNode\n  /** Which side of the trigger the tooltip appears on. Defaults to `top`. */\n  placement?: TooltipPlacement\n  /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */\n  color?: ThemeColor\n  /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */\n  children: ReactElement\n}\n\n/**\n * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at\n * the trigger. Wrap a single element: `<Tooltip content=\"Save\"><IconButton…/></Tooltip>`. Opens on\n * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`\n * while open (the label has `role=\"tooltip\"`). Token-only styling via the shared `--tz-btn-rgb`\n * pattern — `color` (default `primary`) sets the fill and its contrast label, flipping with the theme.\n */\nexport function Tooltip({\n  content,\n  placement = 'top',\n  color = 'primary',\n  children,\n  className,\n  style,\n  onKeyDown,\n  ...props\n}: TooltipProps) {\n  const tooltipId = `${useId()}-tooltip`\n  const [open, setOpen] = useState(false)\n  const hasContent = content !== null && content !== undefined && content !== ''\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Escape') setOpen(false)\n    onKeyDown?.(event)\n  }\n\n  if (!hasContent) return children\n\n  return (\n    <span\n      className={clsx(styles.root, className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      onMouseEnter={() => setOpen(true)}\n      onMouseLeave={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onBlur={() => setOpen(false)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {open\n        ? cloneElement(children as ReactElement<{ 'aria-describedby'?: string }>, {\n            'aria-describedby': tooltipId,\n          })\n        : children}\n      <span\n        role=\"tooltip\"\n        id={tooltipId}\n        className={clsx(styles.tooltip, styles[placement])}\n        data-open={open ? 'true' : 'false'}\n      >\n        {content}\n        <span className={styles.arrow} aria-hidden=\"true\" />\n      </span>\n    </span>\n  )\n}\n"],"names":["Tooltip","content","placement","color","children","className","style","onKeyDown","props","tooltipId","useId","open","setOpen","useState","hasContent","handleKeyDown","event","jsxs","clsx","styles","cloneElement"],"mappings":";;;;;;;;;;;;AAkCO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAY,GAAGC,EAAA,CAAO,YACtB,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAab,KAAY,QAAiCA,MAAY,IAEtEc,IAAgB,CAACC,MAA0C;AAC/D,IAAIA,EAAM,QAAQ,YAAUJ,EAAQ,EAAK,GACzCL,KAAA,QAAAA,EAAYS;AAAA,EACd;AAEA,SAAKF,IAGH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,MAAMd,CAAS;AAAA,MACtC,OACE;AAAA,QACE,gBAAgB,kBAAkBF,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGG;AAAA,MAAA;AAAA,MAGP,cAAc,MAAMM,EAAQ,EAAI;AAAA,MAChC,cAAc,MAAMA,EAAQ,EAAK;AAAA,MACjC,SAAS,MAAMA,EAAQ,EAAI;AAAA,MAC3B,QAAQ,MAAMA,EAAQ,EAAK;AAAA,MAC3B,WAAWG;AAAA,MACV,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAG,IACGS,EAAahB,GAA2D;AAAA,UACtE,oBAAoBK;AAAA,QAAA,CACrB,IACDL;AAAA,QACJ,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAIR;AAAA,YACJ,WAAWS,EAAKC,EAAO,SAASA,EAAOjB,CAAS,CAAC;AAAA,YACjD,aAAWS,IAAO,SAAS;AAAA,YAE1B,UAAA;AAAA,cAAAV;AAAA,gCACA,QAAA,EAAK,WAAWkB,EAAO,OAAO,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACpD;AAAA,IAAA;AAAA,EAAA,IAhCoBf;AAmC1B;"}