@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Time/index.js

@@ -0,0 +1,98 @@
+import { Popover as e } from "../Popover/index.js";
+import { forwardRef as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Time/index.tsx
+function l(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var u = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], d = 6e4, f = 60 * d, p = 24 * f, m = 7 * p;
+function h(e) {
+	return String(e).padStart(2, "0");
+}
+function g(e, t = {}) {
+	let { hasYear: n = !0 } = t, r = `${e.getDate()} ${u[e.getMonth()]}`;
+	return n ? `${r} ${e.getFullYear()}` : r;
+}
+function _(e, t = {}) {
+	let { hasTimeZone: n = !0 } = t, r = `${g(e)}, ${h(e.getHours())}:${h(e.getMinutes())}`;
+	if (!n) return r;
+	let i = new Intl.DateTimeFormat(void 0, { timeZoneName: "short" }).formatToParts(e).find((e) => e.type === "timeZoneName")?.value;
+	return i ? `${r} ${i}` : r;
+}
+function v(e, t = /* @__PURE__ */ new Date()) {
+	let n = t.getTime() - e.getTime();
+	if (n < 0) return g(e, { hasYear: e.getFullYear() !== t.getFullYear() });
+	if (n < d) return "Just now";
+	if (n < f) return `${Math.floor(n / d)}m ago`;
+	if (n < p) return `${Math.floor(n / f)}h ago`;
+	if (n < m) {
+		let e = Math.floor(n / p);
+		return `${e} ${e === 1 ? "day" : "days"} ago`;
+	}
+	return g(e, { hasYear: e.getFullYear() !== t.getFullYear() });
+}
+var y = t(function({ value: t, format: u = "auto", hasTooltip: d = !0, hasTimeZone: f = !0, now: p, refreshInterval: m = 3e4, className: h, tabIndex: y, title: b, onMouseEnter: x, onMouseLeave: S, onFocus: C, onBlur: w, onKeyDown: T, "aria-describedby": E, ...D }, O) {
+	let k = t instanceof Date ? t : new Date(t), A = i(null), [j, M] = a(!1), N = r(), [, P] = a(0);
+	if (n(() => {
+		if (u === "absolute" || p) return;
+		let e = window.setInterval(() => P((e) => e + 1), m);
+		return () => window.clearInterval(e);
+	}, [
+		u,
+		p,
+		m
+	]), Number.isNaN(k.getTime())) return null;
+	let F = u === "absolute" ? g(k) : v(k, p ?? /* @__PURE__ */ new Date()), I = _(k, { hasTimeZone: f }), L = d && F !== I;
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("time", {
+		ref: (e) => {
+			A.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+		},
+		dateTime: k.toISOString(),
+		suppressHydrationWarning: !0,
+		className: l("ds-time", !L && "ds-time--plain", h),
+		tabIndex: y ?? (L ? 0 : void 0),
+		"aria-describedby": [E, L && j && N].filter(Boolean).join(" ") || void 0,
+		title: b ?? (L ? void 0 : I),
+		onMouseEnter: (e) => {
+			x?.(e), L && !e.defaultPrevented && M(!0);
+		},
+		onMouseLeave: (e) => {
+			S?.(e), L && !e.defaultPrevented && M(!1);
+		},
+		onFocus: (e) => {
+			C?.(e), L && !e.defaultPrevented && M(!0);
+		},
+		onBlur: (e) => {
+			w?.(e), L && !e.defaultPrevented && M(!1);
+		},
+		onKeyDown: (e) => {
+			T?.(e), L && !e.defaultPrevented && e.key === "Escape" && M(!1);
+		},
+		...D,
+		children: F
+	}), L && /* @__PURE__ */ s(e, {
+		anchorRef: A,
+		isOpen: j,
+		id: N,
+		role: "tooltip",
+		className: "ds-surface-raised ds-time-tooltip",
+		children: I
+	})] });
+});
+//#endregion
+export { y as Time, g as formatAbsoluteDate, _ as formatAbsoluteTime, v as formatRelativeTime };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","cx","parts","MONTHS","MINUTE","HOUR","DAY","WEEK","pad","value","formatAbsoluteDate","options","stem","date","hasYear","formatAbsoluteTime","stamp","hasTimeZone","zone","part","formatRelativeTime","delta","now","days","Time","forwardRef","describedBy","rest","anchorRef","useRef","isOpen","setIsOpen","useState","tooltipId","useId","setTick","useEffect","format","id","t","refreshInterval","label","isTipped","hasTooltip","Fragment","node","ref","className","tabIndex","title","onMouseEnter","event","onMouseLeave","onFocus","onBlur","onKeyDown","Popover"],"sources":["../../../src/components/Time/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Popover } from \"../Popover\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst MONTHS = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n];\n\nconst MINUTE = 60_000;\nconst HOUR = 60 * MINUTE;\nconst DAY = 24 * HOUR;\nconst WEEK = 7 * DAY;\n\nfunction pad(value: number) {\n  return String(value).padStart(2, \"0\");\n}\n\n/** Day before month, one order everywhere: `12 Jun 2026`. */\nexport function formatAbsoluteDate(date: Date, options: { hasYear?: boolean } = {}) {\n  const { hasYear = true } = options;\n  const stem = `${date.getDate()} ${MONTHS[date.getMonth()]}`;\n  return hasYear ? `${stem} ${date.getFullYear()}` : stem;\n}\n\n/** The tooltip form: `6 Aug 2026, 11:05`, with the reader's zone appended. */\nexport function formatAbsoluteTime(date: Date, options: { hasTimeZone?: boolean } = {}) {\n  const { hasTimeZone = true } = options;\n  const stamp = `${formatAbsoluteDate(date)}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;\n  if (!hasTimeZone) return stamp;\n  const zone = new Intl.DateTimeFormat(undefined, { timeZoneName: \"short\" })\n    .formatToParts(date)\n    .find((part) => part.type === \"timeZoneName\")?.value;\n  return zone ? `${stamp} ${zone}` : stamp;\n}\n\n/**\n * Relative up to a week, absolute after. Future dates are always absolute — a\n * scheduled publish reads `12 Jun`, never `in 3 days`.\n */\nexport function formatRelativeTime(date: Date, now: Date = new Date()) {\n  const delta = now.getTime() - date.getTime();\n  if (delta < 0) {\n    return formatAbsoluteDate(date, { hasYear: date.getFullYear() !== now.getFullYear() });\n  }\n  if (delta < MINUTE) return \"Just now\";\n  if (delta < HOUR) return `${Math.floor(delta / MINUTE)}m ago`;\n  if (delta < DAY) return `${Math.floor(delta / HOUR)}h ago`;\n  if (delta < WEEK) {\n    const days = Math.floor(delta / DAY);\n    return `${days} ${days === 1 ? \"day\" : \"days\"} ago`;\n  }\n  return formatAbsoluteDate(date, { hasYear: date.getFullYear() !== now.getFullYear() });\n}\n\nexport type TimeFormat = \"auto\" | \"relative\" | \"absolute\";\n\nexport interface TimeProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  /** The instant to print — Date, epoch ms, or an ISO string. */\n  value: Date | string | number;\n  /** `auto` ages the value; `absolute` always prints the date. */\n  format?: TimeFormat;\n  /** Show the absolute stamp on hover and focus. */\n  hasTooltip?: boolean;\n  /** Append the reader's time zone to the tooltip. */\n  hasTimeZone?: boolean;\n  /** Pin \"now\" — useful for tests and stories. */\n  now?: Date;\n  /** Re-render interval in ms while the value is still relative. */\n  refreshInterval?: number;\n}\n\n/**\n * A machine-readable `<time>` that ages itself. One form per cell: relative or\n * absolute, never both side by side.\n */\nexport const Time = forwardRef<HTMLTimeElement, TimeProps>(function Time(\n  {\n    value,\n    format = \"auto\",\n    hasTooltip = true,\n    hasTimeZone = true,\n    now,\n    refreshInterval = 30_000,\n    className,\n    tabIndex,\n    title,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    \"aria-describedby\": describedBy,\n    ...rest\n  },\n  ref,\n) {\n  const date = value instanceof Date ? value : new Date(value);\n  const anchorRef = useRef<HTMLTimeElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const tooltipId = useId();\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (format === \"absolute\" || now) return;\n    const id = window.setInterval(() => setTick((t) => t + 1), refreshInterval);\n    return () => window.clearInterval(id);\n  }, [format, now, refreshInterval]);\n\n  if (Number.isNaN(date.getTime())) return null;\n\n  const reference = now ?? new Date();\n  const label =\n    format === \"absolute\"\n      ? formatAbsoluteDate(date)\n      : formatRelativeTime(date, reference);\n  const stamp = formatAbsoluteTime(date, { hasTimeZone });\n  const isTipped = hasTooltip && label !== stamp;\n\n  return (\n    <>\n      <time\n        ref={(node) => {\n          anchorRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        dateTime={date.toISOString()}\n        suppressHydrationWarning\n        className={cx(\"ds-time\", !isTipped && \"ds-time--plain\", className)}\n        tabIndex={tabIndex ?? (isTipped ? 0 : undefined)}\n        aria-describedby={[describedBy, isTipped && isOpen && tooltipId].filter(Boolean).join(\" \") || undefined}\n        title={title ?? (isTipped ? undefined : stamp)}\n        onMouseEnter={(event) => {\n          onMouseEnter?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(true);\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(false);\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(true);\n        }}\n        onBlur={(event) => {\n          onBlur?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(false);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (isTipped && !event.defaultPrevented && event.key === \"Escape\") setIsOpen(false);\n        }}\n        {...rest}\n      >\n        {label}\n      </time>\n      {isTipped && (\n        <Popover\n          anchorRef={anchorRef}\n          isOpen={isOpen}\n          id={tooltipId}\n          role=\"tooltip\"\n          className=\"ds-surface-raised ds-time-tooltip\"\n        >\n          {stamp}\n        </Popover>\n      )}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Time/style.css

@@ -0,0 +1,30 @@
+@layer components {
+  /* The dotted underline is the only affordance — no icon, no colour change. */
+  .ds-time {
+    font-variant-numeric: tabular-nums;
+    text-decoration: underline dotted
+      color-mix(in srgb, var(--color-text) 45%, transparent);
+    text-underline-offset: 3px;
+    cursor: help;
+  }
+
+  .ds-time:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+  }
+
+  .ds-time--plain {
+    text-decoration: none;
+    cursor: auto;
+  }
+
+  .ds-time-tooltip {
+    padding: var(--space-2) var(--space-3);
+    color: var(--color-text);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+}

package/dist/components/Toast/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i={neutral:`info`,info:`info`,success:`check`,warning:`alert-triangle`,danger:`alert-triangle`},a=(0,n.forwardRef)(function({tone:n=`neutral`,title:a,description:o,onDismiss:s,className:c,...l},u){return(0,r.jsxs)(`div`,{ref:u,role:`status`,"data-tone":n===`neutral`?void 0:n,className:[`ds-toast`,c].filter(Boolean).join(` `),...l,children:[(0,r.jsx)(e.t,{name:i[n],size:20,className:`ds-toast__icon`}),(0,r.jsxs)(`div`,{className:`ds-toast__body`,children:[(0,r.jsx)(`span`,{className:`ds-toast__title`,children:a}),o&&(0,r.jsx)(`span`,{className:`ds-toast__description`,children:o})]}),s&&(0,r.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Dismiss notification`,onClick:s})]})}),o=(0,n.createContext)(null);function s({children:e}){let[t,i]=(0,n.useState)([]),a=(0,n.useRef)(0),s=(0,n.useCallback)(e=>{i(t=>t.filter(t=>t.id!==e))},[]),l=(0,n.useCallback)(e=>{i(t=>[...t,{...e,id:a.current++}])},[]),u=(0,n.useMemo)(()=>({toast:l,dismiss:s}),[l,s]);return(0,r.jsxs)(o.Provider,{value:u,children:[e,(0,r.jsx)(c,{items:t,onDismiss:s})]})}function c({items:e,onDismiss:t}){return e.length===0?null:(0,r.jsx)(`div`,{className:`ds-toast-region`,role:`region`,"aria-label":`Notifications`,children:e.map(e=>(0,r.jsx)(l,{item:e,onDismiss:t},e.id))})}function l({item:e,onDismiss:t}){return(0,n.useEffect)(()=>{let n=window.setTimeout(()=>t(e.id),e.duration??5e3);return()=>window.clearTimeout(n)},[e,t]),(0,r.jsx)(a,{tone:e.tone,title:e.title,description:e.description,onDismiss:()=>t(e.id)})}function u(){let e=(0,n.useContext)(o);if(!e)throw Error(`useToast must be used inside a <ToastProvider>.`);return e}exports.Toast=a,exports.ToastProvider=s,exports.useToast=u;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Toast/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","Button","createContext","useState","useRef","useCallback","useMemo","useContext","require_Icon","require_components_Button_index","react","react_jsx_runtime","TONE_ICON","Toast","rest","tone","className","title","description","onDismiss","ToastContext","ToastProvider","items","setItems","nextId","dismiss","current","item","id","toast","options","value","children","ToastRegion","TimedToast","timer","useToast","context"],"sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst TONE_ICON: Record<ToastTone, IconName> = {\n  neutral: \"info\",\n  info: \"info\",\n  success: \"check\",\n  warning: \"alert-triangle\",\n  danger: \"alert-triangle\",\n};\n\nexport interface ToastProps extends HTMLAttributes<HTMLDivElement> {\n  tone?: ToastTone;\n  title: string;\n  description?: string;\n  /** Renders a dismiss button. Omit for a toast that only times out. */\n  onDismiss?: () => void;\n}\n\n/** One fact about something that already happened. Never a question. */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { tone = \"neutral\", title, description, onDismiss, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      data-tone={tone === \"neutral\" ? undefined : tone}\n      className={[\"ds-toast\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <Icon name={TONE_ICON[tone]} size={20} className=\"ds-toast__icon\" />\n      <div className=\"ds-toast__body\">\n        <span className=\"ds-toast__title\">{title}</span>\n        {description && <span className=\"ds-toast__description\">{description}</span>}\n      </div>\n      {onDismiss && (\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"x\"\n          aria-label=\"Dismiss notification\"\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n});\n\nexport interface ToastOptions {\n  tone?: ToastTone;\n  title: string;\n  description?: string;\n  /** Milliseconds before it dismisses itself. Defaults to `--toast-duration`. */\n  duration?: number;\n}\n\ninterface ToastRecord extends ToastOptions {\n  id: number;\n}\n\ninterface ToastContextValue {\n  toast: (options: ToastOptions) => void;\n  dismiss: (id: number) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n}\n\n/** Mount once, near the root. Everything below it can call `useToast()`. */\nexport function ToastProvider({ children }: ToastProviderProps) {\n  const [items, setItems] = useState<ToastRecord[]>([]);\n  const nextId = useRef(0);\n\n  const dismiss = useCallback((id: number) => {\n    setItems((current) => current.filter((item) => item.id !== id));\n  }, []);\n\n  const toast = useCallback((options: ToastOptions) => {\n    setItems((current) => [...current, { ...options, id: nextId.current++ }]);\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <ToastRegion items={items} onDismiss={dismiss} />\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastRegion({\n  items,\n  onDismiss,\n}: {\n  items: ToastRecord[];\n  onDismiss: (id: number) => void;\n}) {\n  if (items.length === 0) return null;\n  return (\n    <div className=\"ds-toast-region\" role=\"region\" aria-label=\"Notifications\">\n      {items.map((item) => (\n        <TimedToast key={item.id} item={item} onDismiss={onDismiss} />\n      ))}\n    </div>\n  );\n}\n\nfunction TimedToast({\n  item,\n  onDismiss,\n}: {\n  item: ToastRecord;\n  onDismiss: (id: number) => void;\n}) {\n  useEffect(() => {\n    const timer = window.setTimeout(() => onDismiss(item.id), item.duration ?? 5000);\n    return () => window.clearTimeout(timer);\n  }, [item, onDismiss]);\n\n  return (\n    <Toast\n      tone={item.tone}\n      title={item.title}\n      description={item.description}\n      onDismiss={() => onDismiss(item.id)}\n    />\n  );\n}\n\nexport function useToast(): ToastContextValue {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error(\"useToast must be used inside a <ToastProvider>.\");\n  return context;\n}\n"],"mappings":"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"}

package/dist/components/Toast/index.d.cts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: ToastTone;
+    title: string;
+    description?: string;
+    /** Renders a dismiss button. Omit for a toast that only times out. */
+    onDismiss?: () => void;
+}
+/** One fact about something that already happened. Never a question. */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ToastOptions {
+    tone?: ToastTone;
+    title: string;
+    description?: string;
+    /** Milliseconds before it dismisses itself. Defaults to `--toast-duration`. */
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => void;
+    dismiss: (id: number) => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+/** Mount once, near the root. Everything below it can call `useToast()`. */
+export declare function ToastProvider({ children }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Toast/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAU9E,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wEAAwE;AACxE,eAAO,MAAM,KAAK,uGA6BhB,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAoB7D;AAyCD,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: ToastTone;
+    title: string;
+    description?: string;
+    /** Renders a dismiss button. Omit for a toast that only times out. */
+    onDismiss?: () => void;
+}
+/** One fact about something that already happened. Never a question. */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ToastOptions {
+    tone?: ToastTone;
+    title: string;
+    description?: string;
+    /** Milliseconds before it dismisses itself. Defaults to `--toast-duration`. */
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => void;
+    dismiss: (id: number) => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+/** Mount once, near the root. Everything below it can call `useToast()`. */
+export declare function ToastProvider({ children }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAU9E,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wEAAwE;AACxE,eAAO,MAAM,KAAK,uGA6BhB,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAoB7D;AAyCD,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}

package/dist/components/Toast/index.js

@@ -0,0 +1,96 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as t } from "../Button/index.js";
+import { createContext as n, forwardRef as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/Toast/index.tsx
+var f = {
+	neutral: "info",
+	info: "info",
+	success: "check",
+	warning: "alert-triangle",
+	danger: "alert-triangle"
+}, p = r(function({ tone: n = "neutral", title: r, description: i, onDismiss: a, className: o, ...s }, c) {
+	return /* @__PURE__ */ d("div", {
+		ref: c,
+		role: "status",
+		"data-tone": n === "neutral" ? void 0 : n,
+		className: ["ds-toast", o].filter(Boolean).join(" "),
+		...s,
+		children: [
+			/* @__PURE__ */ u(e, {
+				name: f[n],
+				size: 20,
+				className: "ds-toast__icon"
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "ds-toast__body",
+				children: [/* @__PURE__ */ u("span", {
+					className: "ds-toast__title",
+					children: r
+				}), i && /* @__PURE__ */ u("span", {
+					className: "ds-toast__description",
+					children: i
+				})]
+			}),
+			a && /* @__PURE__ */ u(t, {
+				variant: "simple",
+				size: "sm",
+				isIconOnly: !0,
+				iconStart: "x",
+				"aria-label": "Dismiss notification",
+				onClick: a
+			})
+		]
+	});
+}), m = n(null);
+function h({ children: e }) {
+	let [t, n] = l([]), r = c(0), a = i((e) => {
+		n((t) => t.filter((t) => t.id !== e));
+	}, []), o = i((e) => {
+		n((t) => [...t, {
+			...e,
+			id: r.current++
+		}]);
+	}, []), f = s(() => ({
+		toast: o,
+		dismiss: a
+	}), [o, a]);
+	return /* @__PURE__ */ d(m.Provider, {
+		value: f,
+		children: [e, /* @__PURE__ */ u(g, {
+			items: t,
+			onDismiss: a
+		})]
+	});
+}
+function g({ items: e, onDismiss: t }) {
+	return e.length === 0 ? null : /* @__PURE__ */ u("div", {
+		className: "ds-toast-region",
+		role: "region",
+		"aria-label": "Notifications",
+		children: e.map((e) => /* @__PURE__ */ u(_, {
+			item: e,
+			onDismiss: t
+		}, e.id))
+	});
+}
+function _({ item: e, onDismiss: t }) {
+	return o(() => {
+		let n = window.setTimeout(() => t(e.id), e.duration ?? 5e3);
+		return () => window.clearTimeout(n);
+	}, [e, t]), /* @__PURE__ */ u(p, {
+		tone: e.tone,
+		title: e.title,
+		description: e.description,
+		onDismiss: () => t(e.id)
+	});
+}
+function v() {
+	let e = a(m);
+	if (!e) throw Error("useToast must be used inside a <ToastProvider>.");
+	return e;
+}
+//#endregion
+export { p as Toast, h as ToastProvider, v as useToast };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","TONE_ICON","Toast","forwardRef","rest","tone","className","title","description","onDismiss","Button","ToastContext","createContext","ToastProvider","items","setItems","useState","nextId","useRef","dismiss","useCallback","current","item","id","toast","options","value","useMemo","children","ToastRegion","TimedToast","useEffect","timer","useToast","context","useContext"],"sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst TONE_ICON: Record<ToastTone, IconName> = {\n  neutral: \"info\",\n  info: \"info\",\n  success: \"check\",\n  warning: \"alert-triangle\",\n  danger: \"alert-triangle\",\n};\n\nexport interface ToastProps extends HTMLAttributes<HTMLDivElement> {\n  tone?: ToastTone;\n  title: string;\n  description?: string;\n  /** Renders a dismiss button. Omit for a toast that only times out. */\n  onDismiss?: () => void;\n}\n\n/** One fact about something that already happened. Never a question. */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { tone = \"neutral\", title, description, onDismiss, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      data-tone={tone === \"neutral\" ? undefined : tone}\n      className={[\"ds-toast\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <Icon name={TONE_ICON[tone]} size={20} className=\"ds-toast__icon\" />\n      <div className=\"ds-toast__body\">\n        <span className=\"ds-toast__title\">{title}</span>\n        {description && <span className=\"ds-toast__description\">{description}</span>}\n      </div>\n      {onDismiss && (\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"x\"\n          aria-label=\"Dismiss notification\"\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n});\n\nexport interface ToastOptions {\n  tone?: ToastTone;\n  title: string;\n  description?: string;\n  /** Milliseconds before it dismisses itself. Defaults to `--toast-duration`. */\n  duration?: number;\n}\n\ninterface ToastRecord extends ToastOptions {\n  id: number;\n}\n\ninterface ToastContextValue {\n  toast: (options: ToastOptions) => void;\n  dismiss: (id: number) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n}\n\n/** Mount once, near the root. Everything below it can call `useToast()`. */\nexport function ToastProvider({ children }: ToastProviderProps) {\n  const [items, setItems] = useState<ToastRecord[]>([]);\n  const nextId = useRef(0);\n\n  const dismiss = useCallback((id: number) => {\n    setItems((current) => current.filter((item) => item.id !== id));\n  }, []);\n\n  const toast = useCallback((options: ToastOptions) => {\n    setItems((current) => [...current, { ...options, id: nextId.current++ }]);\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <ToastRegion items={items} onDismiss={dismiss} />\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastRegion({\n  items,\n  onDismiss,\n}: {\n  items: ToastRecord[];\n  onDismiss: (id: number) => void;\n}) {\n  if (items.length === 0) return null;\n  return (\n    <div className=\"ds-toast-region\" role=\"region\" aria-label=\"Notifications\">\n      {items.map((item) => (\n        <TimedToast key={item.id} item={item} onDismiss={onDismiss} />\n      ))}\n    </div>\n  );\n}\n\nfunction TimedToast({\n  item,\n  onDismiss,\n}: {\n  item: ToastRecord;\n  onDismiss: (id: number) => void;\n}) {\n  useEffect(() => {\n    const timer = window.setTimeout(() => onDismiss(item.id), item.duration ?? 5000);\n    return () => window.clearTimeout(timer);\n  }, [item, onDismiss]);\n\n  return (\n    <Toast\n      tone={item.tone}\n      title={item.title}\n      description={item.description}\n      onDismiss={() => onDismiss(item.id)}\n    />\n  );\n}\n\nexport function useToast(): ToastContextValue {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error(\"useToast must be used inside a <ToastProvider>.\");\n  return context;\n}\n"],"mappings":";;;;;AAmBA,IAAMC,IAAyC;CAC7C,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV,GAWaC,IAAQC,EAAuC,SAC1D,EAAE,UAAO,WAAW,UAAO,gBAAa,cAAW,cAAW,GAAGC,KACjE,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,aAAWC,MAAS,YAAY,KAAA,IAAYA;EAC5C,WAAW,CAAC,YAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D,GAAIF;EALN,UAAA;GAOE,kBAACJ,GAAD;IAAM,MAAMC,EAAUI;IAAO,MAAM;IAAI,WAAU;GAAkB,CAAA;GACnE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAAmB,UAAAE;IAAY,CAAA,GAC9CC,KAAe,kBAAC,QAAD;KAAM,WAAU;KAAyB,UAAAA;IAAkB,CAAA,CACxE;;GACJC,KACC,kBAACC,GAAD;IACE,SAAQ;IACR,MAAK;IACL,YAAA;IACA,WAAU;IACV,cAAW;IACX,SAASD;GACV,CAAA;EAEA;;AAET,CAAC,GAmBKE,IAAeC,EAAwC,IAAI;AAOjE,SAAgBC,EAAc,EAAE,eAAgC;CAC9D,IAAM,CAACC,GAAOC,KAAYC,EAAwB,CAAC,CAAC,GAC9CC,IAASC,EAAO,CAAC,GAEjBC,IAAUC,GAAa,MAAe;EAC1C,GAAU,MAAYC,EAAQ,QAAQ,MAASC,EAAK,OAAOC,CAAE,CAAC;CAChE,GAAG,CAAC,CAAC,GAECC,IAAQJ,GAAa,MAA0B;EACnD,GAAU,MAAY,CAAC,GAAGC,GAAS;GAAE,GAAGI;GAAS,IAAI,EAAO;EAAU,CAAC,CAAC;CAC1E,GAAG,CAAC,CAAC,GAECC,IAAQC,SAAe;EAAE;EAAO;CAAQ,IAAI,CAACH,GAAOL,CAAO,CAAC;CAElE,OACE,kBAACR,EAAa,UAAd;EAA8B;EAA9B,UAAA,CACGiB,GACD,kBAACC,GAAD;GAAoB;GAAO,WAAWV;EAAU,CAAA,CAC3B;;AAE3B;AAEA,SAASU,EAAY,EACnB,UACA,gBAIC;CAED,OADIf,EAAM,WAAW,IAAU,OAE7B,kBAAC,OAAD;EAAK,WAAU;EAAkB,MAAK;EAAS,cAAW;EACvD,UAAAA,EAAM,KAAK,MACV,kBAACgB,GAAD;GAAgC;GAAiB;EAAY,GAA5CR,EAAK,EAAuC,CAC9D;CACE,CAAA;AAET;AAEA,SAASQ,EAAW,EAClB,SACA,gBAIC;CAMD,OALAC,QAAgB;EACd,IAAMC,IAAQ,OAAO,iBAAiBvB,EAAUa,EAAK,EAAE,GAAGA,EAAK,YAAY,GAAI;EAC/E,aAAa,OAAO,aAAaU,CAAK;CACxC,GAAG,CAACV,GAAMb,CAAS,CAAC,GAGlB,kBAACP,GAAD;EACE,MAAMoB,EAAK;EACX,OAAOA,EAAK;EACZ,aAAaA,EAAK;EAClB,iBAAiBb,EAAUa,EAAK,EAAE;CACnC,CAAA;AAEL;AAEA,SAAgBW,IAA8B;CAC5C,IAAMC,IAAUC,EAAWxB,CAAY;CACvC,IAAI,CAACuB,GAAS,MAAU,MAAM,iDAAiD;CAC/E,OAAOA;AACT"}

package/dist/components/Toast/style.css

@@ -0,0 +1,80 @@
+@layer components {
+  .ds-toast-region {
+    position: fixed;
+    z-index: 80;
+    inset-block-end: var(--space-6);
+    inset-inline-end: var(--space-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    inline-size: min(var(--toast-width), calc(100vw - var(--space-8)));
+  }
+
+  .ds-toast {
+    --field-bg: var(--color-surface-raised);
+    --toast-tone: var(--color-text);
+
+    display: flex;
+    align-items: start;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    background: var(--color-surface-raised);
+    border: var(--control-border-width) solid var(--toast-tone);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    animation: ds-toast-in var(--duration-panel) var(--ease-panel);
+  }
+
+  .ds-toast[data-tone="success"] {
+    --toast-tone: var(--color-success);
+  }
+
+  .ds-toast[data-tone="warning"] {
+    --toast-tone: var(--color-warning);
+  }
+
+  .ds-toast[data-tone="danger"] {
+    --toast-tone: var(--color-danger);
+  }
+
+  .ds-toast[data-tone="info"] {
+    --toast-tone: var(--color-primary);
+  }
+
+  .ds-toast__icon {
+    color: var(--toast-tone);
+  }
+
+  .ds-toast__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .ds-toast__title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  .ds-toast__description {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-body);
+  }
+
+  @keyframes ds-toast-in {
+    from {
+      opacity: 0%;
+      translate: 0 var(--space-4);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-toast {
+      animation: none;
+    }
+  }
+}

package/dist/components/TopNav/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({brand:e,actions:t,label:r=`Product`,className:i,children:a,...o},s){return(0,n.jsxs)(`header`,{ref:s,className:[`ds-topnav`,i].filter(Boolean).join(` `),...o,children:[e&&(0,n.jsx)(`div`,{className:`ds-topnav__brand`,children:e}),a&&(0,n.jsx)(`nav`,{className:`ds-topnav__nav`,"aria-label":r,children:(0,n.jsx)(`ul`,{className:`ds-topnav__list`,children:a})}),t&&(0,n.jsx)(`div`,{className:`ds-topnav__actions`,children:t})]})}),i=(0,t.forwardRef)(function({label:t,icon:r,isActive:i,className:a,...o},s){return(0,n.jsx)(`li`,{className:`ds-topnav__row`,children:(0,n.jsxs)(`a`,{ref:s,className:[`ds-topnav__item`,a].filter(Boolean).join(` `),"data-active":i||void 0,"aria-current":i?`page`:void 0,...o,children:[r&&(0,n.jsx)(e.t,{name:r}),t]})})});exports.TopNav=r,exports.TopNavItem=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/TopNav/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","TopNav","rest","className","brand","children","label","actions","TopNavItem","isActive","icon"],"sources":["../../../src/components/TopNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface TopNavProps extends HTMLAttributes<HTMLElement> {\n  /** Brand block or product mark, first in the bar. */\n  brand?: ReactNode;\n  /** Controls at the end: search, notifications, the account avatar. */\n  actions?: ReactNode;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The product bar: brand at the start, destinations in the middle, account\n * work at the end, one hairline rule under the whole thing. It sits above the\n * side rail, never inside it.\n */\nexport const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(\n  { brand, actions, label = \"Product\", className, children, ...rest },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      className={[\"ds-topnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {brand && <div className=\"ds-topnav__brand\">{brand}</div>}\n      {children && (\n        <nav className=\"ds-topnav__nav\" aria-label={label}>\n          <ul className=\"ds-topnav__list\">{children}</ul>\n        </nav>\n      )}\n      {actions && <div className=\"ds-topnav__actions\">{actions}</div>}\n    </header>\n  );\n});\n\nexport interface TopNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n}\n\n/**\n * One destination in the bar. The active item carries a solid underline —\n * the rail turned on its side, so selection reads the same as everywhere else.\n */\nexport const TopNavItem = forwardRef<HTMLAnchorElement, TopNavItemProps>(\n  function TopNavItem({ label, icon, isActive, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-topnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-topnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </a>\n      </li>\n    );\n  },\n);\n"],"mappings":"A,2KAyBA,IAAaK,GAAA,EAASL,EAAAA,WAAAA,CAAqC,SACzD,CAAE,QAAO,UAAS,QAAQ,UAAW,YAAW,WAAU,GAAGM,GAC7D,EACA,CACA,OACE,EAAAF,EAAA,KAAA,CAAC,SAAD,CACO,MACL,UAAW,CAAC,YAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAID,EAHN,SAAA,CAKGE,IAAS,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mBAAoB,SAAAI,CAAW,CAAA,EACvDC,IACC,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iBAAiB,aAAYM,EAC1C,UAAA,EAAAN,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kBAAmB,UAAa,CAAA,CAC3C,CAAA,EAENO,IAAW,EAAAP,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qBAAsB,SAAAO,CAAa,CAAA,CACxD,C,EAEZ,CAAC,EAYYC,GAAA,EAAaZ,EAAAA,WAAAA,CACxB,SAAoB,CAAE,QAAO,OAAM,WAAU,YAAW,GAAGM,GAAQ,EAAK,CACtE,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,IAAD,CACO,MACL,UAAW,CAAC,kBAAmBG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaM,GAAY,IAAA,GACzB,eAAcA,EAAW,OAAS,IAAA,GAClC,GAAIP,EALN,SAAA,CAOGQ,IAAQ,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMa,CAAO,CAAA,EAC3BJ,CACA,C,EACD,CAAA,CAER,CACF,E"}

package/dist/components/TopNav/index.d.cts

@@ -0,0 +1,28 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+export interface TopNavProps extends HTMLAttributes<HTMLElement> {
+    /** Brand block or product mark, first in the bar. */
+    brand?: ReactNode;
+    /** Controls at the end: search, notifications, the account avatar. */
+    actions?: ReactNode;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The product bar: brand at the start, destinations in the middle, account
+ * work at the end, one hairline rule under the whole thing. It sits above the
+ * side rail, never inside it.
+ */
+export declare const TopNav: import("react").ForwardRefExoticComponent<TopNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface TopNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    label: string;
+    icon?: IconName;
+    isActive?: boolean;
+}
+/**
+ * One destination in the bar. The active item carries a solid underline —
+ * the rail turned on its side, so selection reads the same as everywhere else.
+ */
+export declare const TopNavItem: import("react").ForwardRefExoticComponent<TopNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/TopNav/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TopNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,qGAmBjB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,+GAiBtB,CAAC"}

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

@@ -0,0 +1,28 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+export interface TopNavProps extends HTMLAttributes<HTMLElement> {
+    /** Brand block or product mark, first in the bar. */
+    brand?: ReactNode;
+    /** Controls at the end: search, notifications, the account avatar. */
+    actions?: ReactNode;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The product bar: brand at the start, destinations in the middle, account
+ * work at the end, one hairline rule under the whole thing. It sits above the
+ * side rail, never inside it.
+ */
+export declare const TopNav: import("react").ForwardRefExoticComponent<TopNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface TopNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    label: string;
+    icon?: IconName;
+    isActive?: boolean;
+}
+/**
+ * One destination in the bar. The active item carries a solid underline —
+ * the rail turned on its side, so selection reads the same as everywhere else.
+ */
+export declare const TopNavItem: import("react").ForwardRefExoticComponent<TopNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TopNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TopNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,qGAmBjB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,+GAiBtB,CAAC"}

package/dist/components/TopNav/index.js

@@ -0,0 +1,45 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/TopNav/index.tsx
+var i = t(function({ brand: e, actions: t, label: i = "Product", className: a, children: o, ...s }, c) {
+	return /* @__PURE__ */ r("header", {
+		ref: c,
+		className: ["ds-topnav", a].filter(Boolean).join(" "),
+		...s,
+		children: [
+			e && /* @__PURE__ */ n("div", {
+				className: "ds-topnav__brand",
+				children: e
+			}),
+			o && /* @__PURE__ */ n("nav", {
+				className: "ds-topnav__nav",
+				"aria-label": i,
+				children: /* @__PURE__ */ n("ul", {
+					className: "ds-topnav__list",
+					children: o
+				})
+			}),
+			t && /* @__PURE__ */ n("div", {
+				className: "ds-topnav__actions",
+				children: t
+			})
+		]
+	});
+}), a = t(function({ label: t, icon: i, isActive: a, className: o, ...s }, c) {
+	return /* @__PURE__ */ n("li", {
+		className: "ds-topnav__row",
+		children: /* @__PURE__ */ r("a", {
+			ref: c,
+			className: ["ds-topnav__item", o].filter(Boolean).join(" "),
+			"data-active": a || void 0,
+			"aria-current": a ? "page" : void 0,
+			...s,
+			children: [i && /* @__PURE__ */ n(e, { name: i }), t]
+		})
+	});
+});
+//#endregion
+export { i as TopNav, a as TopNavItem };
+
+//# sourceMappingURL=index.js.map

package/dist/components/TopNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","TopNav","forwardRef","rest","className","brand","children","label","actions","TopNavItem","isActive","icon"],"sources":["../../../src/components/TopNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface TopNavProps extends HTMLAttributes<HTMLElement> {\n  /** Brand block or product mark, first in the bar. */\n  brand?: ReactNode;\n  /** Controls at the end: search, notifications, the account avatar. */\n  actions?: ReactNode;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The product bar: brand at the start, destinations in the middle, account\n * work at the end, one hairline rule under the whole thing. It sits above the\n * side rail, never inside it.\n */\nexport const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(\n  { brand, actions, label = \"Product\", className, children, ...rest },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      className={[\"ds-topnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {brand && <div className=\"ds-topnav__brand\">{brand}</div>}\n      {children && (\n        <nav className=\"ds-topnav__nav\" aria-label={label}>\n          <ul className=\"ds-topnav__list\">{children}</ul>\n        </nav>\n      )}\n      {actions && <div className=\"ds-topnav__actions\">{actions}</div>}\n    </header>\n  );\n});\n\nexport interface TopNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n}\n\n/**\n * One destination in the bar. The active item carries a solid underline —\n * the rail turned on its side, so selection reads the same as everywhere else.\n */\nexport const TopNavItem = forwardRef<HTMLAnchorElement, TopNavItemProps>(\n  function TopNavItem({ label, icon, isActive, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-topnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-topnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </a>\n      </li>\n    );\n  },\n);\n"],"mappings":";;;;AAyBA,IAAaC,IAASC,EAAqC,SACzD,EAAE,UAAO,YAAS,WAAQ,WAAW,cAAW,aAAU,GAAGC,KAC7D,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAID;EAHN,UAAA;GAKGE,KAAS,kBAAC,OAAD;IAAK,WAAU;IAAoB,UAAAA;GAAW,CAAA;GACvDC,KACC,kBAAC,OAAD;IAAK,WAAU;IAAiB,cAAYC;IAC1C,UAAA,kBAAC,MAAD;KAAI,WAAU;KAAmB;IAAa,CAAA;GAC3C,CAAA;GAENC,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAsB,UAAAA;GAAa,CAAA;EACxD;;AAEZ,CAAC,GAYYC,IAAaP,EACxB,SAAoB,EAAE,UAAO,SAAM,aAAU,cAAW,GAAGC,KAAQ,GAAK;CACtE,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,KAAD;GACO;GACL,WAAW,CAAC,mBAAmBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaM,KAAY,KAAA;GACzB,gBAAcA,IAAW,SAAS,KAAA;GAClC,GAAIP;GALN,UAAA,CAOGQ,KAAQ,kBAACX,GAAD,EAAM,MAAMW,EAAO,CAAA,GAC3BJ,CACA;;CACD,CAAA;AAER,CACF"}