@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/components/SideNav/index.js

@@ -0,0 +1,113 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { createContext as t, forwardRef as n, useCallback as r, useContext as i, useMemo as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/SideNav/index.tsx
+var l = t({ isCollapsed: !1 });
+function u() {
+	return i(l).isCollapsed;
+}
+var d = n(function({ isCollapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, label: i = "Main", className: c, children: u, ...d }, p) {
+	let [m, h] = o(t), g = e ?? m, _ = r(() => {
+		let t = !g;
+		e === void 0 && h(t), n?.(t);
+	}, [
+		e,
+		g,
+		n
+	]), v = a(() => ({ isCollapsed: g }), [g]);
+	return /* @__PURE__ */ s(l.Provider, {
+		value: v,
+		children: /* @__PURE__ */ s(f.Provider, {
+			value: _,
+			children: /* @__PURE__ */ s("nav", {
+				ref: p,
+				"aria-label": i,
+				"data-collapsed": g || void 0,
+				className: ["ds-sidenav", c].filter(Boolean).join(" "),
+				...d,
+				children: u
+			})
+		})
+	});
+}), f = t(() => {}), p = n(function({ title: t, mark: n, isCollapsible: r = !0, className: a, children: o, ...u }, d) {
+	let { isCollapsed: p } = i(l), m = i(f);
+	return /* @__PURE__ */ c("div", {
+		ref: d,
+		className: ["ds-sidenav__header", a].filter(Boolean).join(" "),
+		...u,
+		children: [
+			n && /* @__PURE__ */ s("span", {
+				className: "ds-sidenav__mark",
+				children: n
+			}),
+			!p && (t || o) && /* @__PURE__ */ s("span", {
+				className: "ds-sidenav__title",
+				children: t ?? o
+			}),
+			r && /* @__PURE__ */ s("button", {
+				type: "button",
+				className: "ds-sidenav__toggle",
+				"aria-label": p ? "Expand navigation" : "Collapse navigation",
+				"aria-expanded": !p,
+				title: p ? "Expand navigation" : "Collapse navigation",
+				onClick: m,
+				children: /* @__PURE__ */ s(e, { name: p ? "chevrons-right" : "chevrons-left" })
+			})
+		]
+	});
+}), m = n(function({ label: e, className: t, children: n, ...r }, a) {
+	let { isCollapsed: o } = i(l);
+	return /* @__PURE__ */ c("div", {
+		ref: a,
+		className: ["ds-sidenav__section", t].filter(Boolean).join(" "),
+		"aria-label": e,
+		role: e ? "group" : void 0,
+		...r,
+		children: [e && !o && /* @__PURE__ */ s("span", {
+			className: "ds-sidenav__section-label",
+			children: e
+		}), /* @__PURE__ */ s("ul", {
+			className: "ds-sidenav__list",
+			children: n
+		})]
+	});
+}), h = n(function({ icon: t, label: n, isActive: r, badge: a, className: o, ...u }, d) {
+	let { isCollapsed: f } = i(l);
+	return /* @__PURE__ */ s("li", {
+		className: "ds-sidenav__row",
+		children: /* @__PURE__ */ c("a", {
+			ref: d,
+			className: ["ds-sidenav__item", o].filter(Boolean).join(" "),
+			"data-active": r || void 0,
+			"aria-current": r ? "page" : void 0,
+			title: f ? n : void 0,
+			...u,
+			children: [
+				/* @__PURE__ */ s(e, { name: t }),
+				!f && /* @__PURE__ */ s("span", {
+					className: "ds-sidenav__label",
+					children: n
+				}),
+				!f && a && /* @__PURE__ */ s("span", {
+					className: "ds-sidenav__badge",
+					children: a
+				}),
+				f && /* @__PURE__ */ s("span", {
+					className: "ds-sidenav__sr",
+					children: n
+				})
+			]
+		})
+	});
+}), g = n(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: ["ds-sidenav__footer", e].filter(Boolean).join(" "),
+		...n,
+		children: t
+	});
+});
+//#endregion
+export { d as SideNav, g as SideNavFooter, p as SideNavHeader, h as SideNavItem, m as SideNavSection, u as useSideNavCollapsed };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","SideNavContext","createContext","useSideNavCollapsed","useContext","SideNav","forwardRef","controlled","rest","uncontrolled","setUncontrolled","useState","defaultCollapsed","isCollapsed","toggle","useCallback","next","onCollapsedChange","value","useMemo","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\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\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <button\n            type=\"button\"\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          >\n            <Icon name={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SideNav/style.css

@@ -0,0 +1,184 @@
+@layer components {
+  .ds-sidenav {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    inline-size: var(--sidenav-width);
+    background: var(--color-surface);
+    border-inline-end: var(--frame-width) solid var(--frame-color);
+    overflow: hidden;
+    transition: inline-size var(--duration-panel) var(--ease-panel);
+  }
+
+  .ds-sidenav[data-collapsed] {
+    inline-size: var(--sidenav-width-collapsed);
+  }
+
+  .ds-sidenav__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-block-size: var(--topnav-height);
+    padding: var(--space-3) var(--space-4);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-sidenav[data-collapsed] .ds-sidenav__header {
+    justify-content: center;
+    padding-inline: var(--space-2);
+  }
+
+  .ds-sidenav__mark {
+    display: flex;
+    align-items: center;
+    flex: none;
+  }
+
+  .ds-sidenav__title {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-md);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-sidenav__toggle {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--space-8);
+    block-size: var(--space-8);
+    border: 0;
+    border-radius: var(--field-radius);
+    background: none;
+    color: var(--color-text-muted);
+    cursor: pointer;
+  }
+
+  .ds-sidenav[data-collapsed] .ds-sidenav__toggle {
+    margin-inline-start: 0;
+  }
+
+  .ds-sidenav__toggle:hover {
+    background: var(--field-hover);
+    color: var(--color-text);
+  }
+
+  .ds-sidenav__toggle:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-sidenav__section {
+    padding-block: var(--space-3);
+  }
+
+  .ds-sidenav__section + .ds-sidenav__section {
+    border-block-start: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-sidenav__section-label {
+    display: block;
+    padding: var(--space-1) var(--space-4) var(--space-2);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: var(--table-head-tracking);
+    text-transform: uppercase;
+  }
+
+  .ds-sidenav__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-sidenav__row {
+    display: block;
+  }
+
+  /* The rail is inset, so the active row never changes width. */
+  .ds-sidenav__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-block-size: var(--nav-item-height);
+    padding-inline: var(--space-4);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    cursor: pointer;
+    box-shadow: inset var(--rail-width) 0 0 0 transparent;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-sidenav[data-collapsed] .ds-sidenav__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .ds-sidenav__item:hover {
+    background: var(--field-hover);
+  }
+
+  .ds-sidenav__item:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  .ds-sidenav__item[data-active] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+    font-weight: var(--font-weight-bold);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  .ds-sidenav__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-sidenav__badge {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .ds-sidenav__sr {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .ds-sidenav__footer {
+    margin-block-start: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-block-start: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-sidenav[data-collapsed] .ds-sidenav__footer {
+    justify-content: center;
+    padding-inline: var(--space-2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-sidenav,
+    .ds-sidenav__item {
+      transition: none;
+    }
+  }
+}

package/dist/components/Skeleton/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({shape:e=`text`,width:n,size:r,className:i,style:a,...o},s){return(0,t.jsx)(`span`,{ref:s,"aria-hidden":`true`,"data-shape":e,className:[`ds-skeleton`,i].filter(Boolean).join(` `),style:{inlineSize:e===`circle`?r:n??`100%`,blockSize:e===`circle`?r:void 0,...a},...o})}),r=(0,e.forwardRef)(function({lines:e=3,className:r,...i},a){return(0,t.jsx)(`div`,{ref:a,role:`status`,"aria-busy":`true`,"aria-label":`Loading`,className:[`ds-skeleton-lines`,r].filter(Boolean).join(` `),...i,children:Array.from({length:e},(e,r)=>(0,t.jsx)(n,{style:{animationDelay:`calc(var(--skeleton-stagger) * ${r})`}},r))})});exports.Skeleton=n,exports.SkeletonText=r;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","Skeleton","rest","shape","className","size","width","style","SkeletonText","lines","i"],"sources":["../../../src/components/Skeleton/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type SkeletonShape = \"text\" | \"heading\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: SkeletonShape;\n  /** Any CSS length or percentage. Defaults to filling its container. */\n  width?: string;\n  /** Only for `circle`, where width and height are the same value. */\n  size?: string;\n}\n\n/**\n * A placeholder with the shape of the thing that is loading. Never a spinner\n * over a blank panel — the layout must not move when the content arrives.\n */\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(\n  { shape = \"text\", width, size, className, style, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-shape={shape}\n      className={[\"ds-skeleton\", className].filter(Boolean).join(\" \")}\n      style={{\n        inlineSize: shape === \"circle\" ? size : (width ?? \"100%\"),\n        blockSize: shape === \"circle\" ? size : undefined,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of lines; the last one renders short. */\n  lines?: number;\n}\n\n/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  function SkeletonText({ lines = 3, className, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading\"\n        className={[\"ds-skeleton-lines\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {Array.from({ length: lines }, (_, i) => (\n          <Skeleton\n            key={i}\n            style={{ animationDelay: `calc(var(--skeleton-stagger) * ${i})` }}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n"],"mappings":"A,yHAiBA,IAAaG,GAAA,EAAWH,EAAAA,WAAAA,CAA2C,SACjE,CAAE,QAAQ,OAAQ,QAAO,OAAM,YAAW,QAAO,GAAGI,GACpD,EACA,CACA,OACE,EAAAF,EAAA,IAAA,CAAC,OAAD,CACO,MACL,cAAY,OACZ,aAAYG,EACZ,UAAW,CAAC,cAAeC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC9D,MAAO,CACL,WAAYD,IAAU,SAAWE,EAAQC,GAAS,OAClD,UAAWH,IAAU,SAAWE,EAAO,IAAA,GACvC,GAAGE,CACL,EACA,GAAIL,CACL,CAAA,CAEL,CAAC,EAQYM,GAAA,EAAeV,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAQ,EAAG,YAAW,GAAGI,GAAQ,EAAK,CAC5D,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACO,MACL,KAAK,SACL,YAAU,OACV,aAAW,UACX,UAAW,CAAC,oBAAqBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EACpE,GAAIF,EAEH,SAAA,MAAM,KAAK,CAAE,OAAQO,CAAM,GAAI,EAAG,KACjC,EAAAT,EAAA,IAAA,CAACC,EAAD,CAEE,MAAO,CAAE,eAAgB,kCAAkCS,EAAE,EAAG,CACjE,EAFMA,CAEN,CACF,CACE,CAAA,CAET,CACF,E"}

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "react";
+export type SkeletonShape = "text" | "heading" | "block" | "circle";
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: SkeletonShape;
+    /** Any CSS length or percentage. Defaults to filling its container. */
+    width?: string;
+    /** Only for `circle`, where width and height are the same value. */
+    size?: string;
+}
+/**
+ * A placeholder with the shape of the thing that is loading. Never a spinner
+ * over a blank panel — the layout must not move when the content arrives.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of lines; the last one renders short. */
+    lines?: number;
+}
+/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */
+export declare const SkeletonText: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,2GAkBnB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GAoBxB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "react";
+export type SkeletonShape = "text" | "heading" | "block" | "circle";
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: SkeletonShape;
+    /** Any CSS length or percentage. Defaults to filling its container. */
+    width?: string;
+    /** Only for `circle`, where width and height are the same value. */
+    size?: string;
+}
+/**
+ * A placeholder with the shape of the thing that is loading. Never a spinner
+ * over a blank panel — the layout must not move when the content arrives.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of lines; the last one renders short. */
+    lines?: number;
+}
+/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */
+export declare const SkeletonText: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,2GAkBnB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GAoBxB,CAAC"}

package/dist/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/index.tsx
+var n = e(function({ shape: e = "text", width: n, size: r, className: i, style: a, ...o }, s) {
+	return /* @__PURE__ */ t("span", {
+		ref: s,
+		"aria-hidden": "true",
+		"data-shape": e,
+		className: ["ds-skeleton", i].filter(Boolean).join(" "),
+		style: {
+			inlineSize: e === "circle" ? r : n ?? "100%",
+			blockSize: e === "circle" ? r : void 0,
+			...a
+		},
+		...o
+	});
+}), r = e(function({ lines: e = 3, className: r, ...i }, a) {
+	return /* @__PURE__ */ t("div", {
+		ref: a,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": "Loading",
+		className: ["ds-skeleton-lines", r].filter(Boolean).join(" "),
+		...i,
+		children: Array.from({ length: e }, (e, r) => /* @__PURE__ */ t(n, { style: { animationDelay: `calc(var(--skeleton-stagger) * ${r})` } }, r))
+	});
+});
+//#endregion
+export { n as Skeleton, r as SkeletonText };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Skeleton","forwardRef","rest","shape","className","size","width","style","SkeletonText","lines","i"],"sources":["../../../src/components/Skeleton/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type SkeletonShape = \"text\" | \"heading\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: SkeletonShape;\n  /** Any CSS length or percentage. Defaults to filling its container. */\n  width?: string;\n  /** Only for `circle`, where width and height are the same value. */\n  size?: string;\n}\n\n/**\n * A placeholder with the shape of the thing that is loading. Never a spinner\n * over a blank panel — the layout must not move when the content arrives.\n */\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(\n  { shape = \"text\", width, size, className, style, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-shape={shape}\n      className={[\"ds-skeleton\", className].filter(Boolean).join(\" \")}\n      style={{\n        inlineSize: shape === \"circle\" ? size : (width ?? \"100%\"),\n        blockSize: shape === \"circle\" ? size : undefined,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of lines; the last one renders short. */\n  lines?: number;\n}\n\n/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  function SkeletonText({ lines = 3, className, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading\"\n        className={[\"ds-skeleton-lines\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {Array.from({ length: lines }, (_, i) => (\n          <Skeleton\n            key={i}\n            style={{ animationDelay: `calc(var(--skeleton-stagger) * ${i})` }}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;AAiBA,IAAaA,IAAWC,EAA2C,SACjE,EAAE,WAAQ,QAAQ,UAAO,SAAM,cAAW,UAAO,GAAGC,KACpD,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,eAAY;EACZ,cAAYC;EACZ,WAAW,CAAC,eAAeC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9D,OAAO;GACL,YAAYD,MAAU,WAAWE,IAAQC,KAAS;GAClD,WAAWH,MAAU,WAAWE,IAAO,KAAA;GACvC,GAAGE;EACL;EACA,GAAIL;CACL,CAAA;AAEL,CAAC,GAQYM,IAAeP,EAC1B,SAAsB,EAAE,WAAQ,GAAG,cAAW,GAAGC,KAAQ,GAAK;CAC5D,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,aAAU;EACV,cAAW;EACX,WAAW,CAAC,qBAAqBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACpE,GAAIF;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQO,EAAM,IAAI,GAAG,MACjC,kBAACT,GAAD,EAEE,OAAO,EAAE,gBAAgB,kCAAkCU,EAAE,GAAG,EACjE,GAFMA,CAEN,CACF;CACE,CAAA;AAET,CACF"}

package/dist/components/Skeleton/style.css

@@ -0,0 +1,55 @@
+@layer components {
+  .ds-skeleton {
+    display: block;
+    background: color-mix(in srgb, var(--color-text) 9%, var(--color-surface));
+    border-radius: var(--field-radius);
+    animation: ds-skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
+  }
+
+  .ds-skeleton[data-shape="text"] {
+    block-size: var(--space-4);
+  }
+
+  .ds-skeleton[data-shape="heading"] {
+    block-size: var(--space-6);
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-skeleton[data-shape="block"] {
+    block-size: var(--space-12);
+    border-radius: var(--radius-md);
+  }
+
+  .ds-skeleton[data-shape="circle"] {
+    border-radius: var(--radius-pill);
+    aspect-ratio: 1;
+  }
+
+  .ds-skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  /* Last line is short, the way real text ends. */
+  .ds-skeleton-lines > .ds-skeleton:last-child:not(:only-child) {
+    inline-size: 62%;
+  }
+
+  @keyframes ds-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+    }
+
+    50% {
+      opacity: 45%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-skeleton {
+      animation: none;
+    }
+  }
+}

package/dist/components/Slider/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(...e){return e.filter(Boolean).join(` `)}function r(e,t,n){return n===t?0:(e-t)/(n-t)*100}var i=(0,e.forwardRef)(function({value:i,defaultValue:a=0,onValueChange:o,min:s=0,max:c=100,step:l=1,hasValueLabel:u=!0,suffix:d,isDisabled:f=!1,className:p,disabled:m,...h},g){let[_,v]=(0,e.useState)(a),y=i??_;return(0,t.jsxs)(`div`,{className:n(`ds-slider`,p),"data-disabled":f||m||void 0,children:[(0,t.jsxs)(`div`,{className:`ds-slider__track`,"data-thumbs":`1`,"data-disabled":f||m||void 0,"data-at-min":y<=s||void 0,"data-at-max":y>=c||void 0,style:{"--slider-from":`0%`,"--slider-to":`${r(y,s,c)}%`},children:[(0,t.jsx)(`span`,{className:`ds-slider__rail`}),(0,t.jsx)(`span`,{className:`ds-slider__fill`}),(0,t.jsx)(`input`,{ref:g,type:`range`,className:`ds-slider__input`,min:s,max:c,step:l,value:y,disabled:f||m,onChange:e=>{let t=Number(e.target.value);i===void 0&&v(t),o?.(t)},...h})]}),u&&(0,t.jsxs)(`output`,{className:`ds-slider__value`,children:[y,d]})]})});function a({value:i,defaultValue:a={min:20,max:80},onValueChange:o,min:s=0,max:c=100,step:l=1,hasValueLabel:u=!0,suffix:d,isDisabled:f=!1,minLabel:p=`Minimum`,maxLabel:m=`Maximum`,className:h}){let[g,_]=(0,e.useState)(a),v=i??g,y=e=>{i===void 0&&_(e),o?.(e)};return(0,t.jsxs)(`div`,{className:n(`ds-slider`,h),"data-disabled":f||void 0,children:[(0,t.jsxs)(`div`,{className:`ds-slider__track`,"data-thumbs":`2`,"data-disabled":f||void 0,"data-at-min":v.min<=s||void 0,"data-at-max":v.max>=c||void 0,style:{"--slider-from":`${r(v.min,s,c)}%`,"--slider-to":`${r(v.max,s,c)}%`},children:[(0,t.jsx)(`span`,{className:`ds-slider__rail`}),(0,t.jsx)(`span`,{className:`ds-slider__fill`}),(0,t.jsx)(`input`,{type:`range`,"aria-label":p,className:`ds-slider__input`,min:s,max:c,step:l,value:v.min,disabled:f,onChange:e=>y({...v,min:Math.min(Number(e.target.value),v.max-l)})}),(0,t.jsx)(`input`,{type:`range`,"aria-label":m,className:`ds-slider__input`,min:s,max:c,step:l,value:v.max,disabled:f,onChange:e=>y({...v,max:Math.max(Number(e.target.value),v.min+l)})})]}),u&&(0,t.jsxs)(`output`,{className:`ds-slider__value`,children:[v.min,d,` – `,v.max,d]})]})}exports.RangeSlider=a,exports.Slider=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","react","react_jsx_runtime","cx","parts","percent","max","min","value","Slider","rest","internal","setInternal","defaultValue","current","className","isDisabled","disabled","next","event","onValueChange","hasValueLabel","suffix","RangeSlider","commit","minLabel","step","maxLabel"],"sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type InputHTMLAttributes,\n} from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nfunction percent(value: number, min: number, max: number) {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"defaultValue\" | \"onChange\"> {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Print the current value, in the system's mono, beside the track. */\n  hasValueLabel?: boolean;\n  /** Appended to the printed value — \"%\", \"px\", \"s\". */\n  suffix?: string;\n  isDisabled?: boolean;\n}\n\n/** One value on a continuous scale. The filled part of the track is the value. */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    value,\n    defaultValue = 0,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    hasValueLabel = true,\n    suffix,\n    isDisabled = false,\n    className,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value ?? internal;\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || disabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"1\"\n        data-disabled={isDisabled || disabled || undefined}\n        data-at-min={current <= min || undefined}\n        data-at-max={current >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: \"0%\",\n          [\"--slider-to\" as string]: `${percent(current, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          ref={ref}\n          type=\"range\"\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          disabled={isDisabled || disabled}\n          onChange={(event) => {\n            const next = Number(event.target.value);\n            if (value === undefined) setInternal(next);\n            onValueChange?.(next);\n          }}\n          {...rest}\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n});\n\nexport interface RangeSliderValue {\n  min: number;\n  max: number;\n}\n\nexport interface RangeSliderProps {\n  value?: RangeSliderValue;\n  defaultValue?: RangeSliderValue;\n  onValueChange?: (value: RangeSliderValue) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  hasValueLabel?: boolean;\n  suffix?: string;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n  className?: string;\n}\n\n/**\n * A span on a scale — two thumbs on one track. The thumbs cannot cross; each\n * one stops a `step` short of the other.\n */\nexport function RangeSlider({\n  value,\n  defaultValue = { min: 20, max: 80 },\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  hasValueLabel = true,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n  className,\n}: RangeSliderProps) {\n  const [internal, setInternal] = useState<RangeSliderValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: RangeSliderValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"2\"\n        data-disabled={isDisabled || undefined}\n        data-at-min={current.min <= min || undefined}\n        data-at-max={current.max >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: `${percent(current.min, min, max)}%`,\n          [\"--slider-to\" as string]: `${percent(current.max, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          type=\"range\"\n          aria-label={minLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.min}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, min: Math.min(Number(event.target.value), current.max - step) })\n          }\n        />\n        <input\n          type=\"range\"\n          aria-label={maxLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.max}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, max: Math.max(Number(event.target.value), current.min + step) })\n          }\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current.min}\n          {suffix} – {current.max}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Print the current value, in the system's mono, beside the track. */
+    hasValueLabel?: boolean;
+    /** Appended to the printed value — "%", "px", "s". */
+    suffix?: string;
+    isDisabled?: boolean;
+}
+/** One value on a continuous scale. The filled part of the track is the value. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RangeSliderValue {
+    min: number;
+    max: number;
+}
+export interface RangeSliderProps {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    hasValueLabel?: boolean;
+    suffix?: string;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    className?: string;
+}
+/**
+ * A span on a scale — two thumbs on one track. The thumbs cannot cross; each
+ * one stops a `step` short of the other.
+ */
+export declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, hasValueLabel, suffix, isDisabled, minLabel, maxLabel, className, }: RangeSliderProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AAWrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,MAAM,0GA4DjB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAoB,EACpB,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,EACpB,SAAS,GACV,EAAE,gBAAgB,+BA4DlB"}

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Print the current value, in the system's mono, beside the track. */
+    hasValueLabel?: boolean;
+    /** Appended to the printed value — "%", "px", "s". */
+    suffix?: string;
+    isDisabled?: boolean;
+}
+/** One value on a continuous scale. The filled part of the track is the value. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RangeSliderValue {
+    min: number;
+    max: number;
+}
+export interface RangeSliderProps {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    hasValueLabel?: boolean;
+    suffix?: string;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    className?: string;
+}
+/**
+ * A span on a scale — two thumbs on one track. The thumbs cannot cross; each
+ * one stops a `step` short of the other.
+ */
+export declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, hasValueLabel, suffix, isDisabled, minLabel, maxLabel, className, }: RangeSliderProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AAWrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,MAAM,0GA4DjB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAoB,EACpB,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,EACpB,SAAS,GACV,EAAE,gBAAgB,+BA4DlB"}