@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/SelectionCard/style.css

@@ -0,0 +1,133 @@
+@layer components {
+  .ds-selection-card {
+    display: flex;
+    align-items: start;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    min-inline-size: var(--choice-card-min-width);
+    background: var(--color-surface);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--field-radius);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-selection-card:hover:not(:has(:disabled)) {
+    background: var(--field-hover);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:checked) {
+    background: var(--color-primary-soft);
+    border-color: var(--color-primary);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:focus-visible) {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control[aria-invalid="true"]) {
+    border-color: var(--color-danger);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:disabled) {
+    cursor: not-allowed;
+    opacity: 45%;
+  }
+
+  /* Same control geometry as the bare checkbox and radio. */
+  .ds-selection-card__control {
+    appearance: none;
+    flex: none;
+    inline-size: var(--icon-md);
+    block-size: var(--icon-md);
+    margin: 0;
+    margin-block-start: calc((1lh - var(--icon-md)) / 2);
+    border: var(--control-border-width) solid var(--control-border-color);
+    background: var(--color-surface);
+    cursor: inherit;
+    display: grid;
+    place-content: center;
+  }
+
+  .ds-selection-card__control[data-kind="checkbox"] {
+    border-radius: var(--field-radius);
+  }
+
+  .ds-selection-card__control[data-kind="radio"] {
+    border-radius: var(--radius-pill);
+  }
+
+  .ds-selection-card__control[data-kind="checkbox"]:checked {
+    background: var(--color-primary);
+  }
+
+  .ds-selection-card__control[data-kind="checkbox"]:checked::before {
+    content: "";
+    inline-size: 13px;
+    block-size: 13px;
+    background: var(--color-text-on-solid);
+    clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 10%, 38% 71%);
+  }
+
+  .ds-selection-card__control[data-kind="radio"]:checked::before {
+    content: "";
+    inline-size: var(--space-2);
+    block-size: var(--space-2);
+    border-radius: var(--radius-pill);
+    background: var(--color-primary);
+  }
+
+
+
+
+  .ds-selection-card__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  .ds-selection-card__title {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-selection-card__description {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-selection-card__extra {
+    margin-block-start: var(--space-1);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ds-selection-card-group {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+
+  .ds-selection-card-group__label {
+    padding: 0;
+    margin-block-end: var(--space-3);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+  }
+
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-selection-card {
+      transition: none;
+    }
+  }
+}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createContext","useContext","forwardRef","useState","useCallback","useMemo","Icon","require_Icon","react","react_jsx_runtime","SideNavContext","useSideNavCollapsed","SideNav","controlled","rest","uncontrolled","setUncontrolled","defaultCollapsed","isCollapsed","toggle","next","onCollapsedChange","value","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/index.d.cts

@@ -0,0 +1,58 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+/** Read the rail's collapsed state from anything rendered inside it. */
+export declare function useSideNavCollapsed(): boolean;
+export interface SideNavProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. Omit to let the rail own it. */
+    isCollapsed?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Fired by the header's collapse toggle. */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The primary rail: one heavy edge against the page, hairline rules between
+ * sections. Collapsed it keeps the icons and drops the words — the width is a
+ * token, so every rail in the product collapses to the same measure.
+ */
+export declare const SideNav: import("react").ForwardRefExoticComponent<SideNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Shown when the rail is open; hidden when it collapses. */
+    title?: ReactNode;
+    /** A mark that survives the collapse — a logo, a monogram. */
+    mark?: ReactNode;
+    /** Set false when the rail is permanently open. */
+    isCollapsible?: boolean;
+    children?: ReactNode;
+}
+/** Brand block plus the collapse toggle, above the first hairline rule. */
+export declare const SideNavHeader: import("react").ForwardRefExoticComponent<SideNavHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Section label. Hidden — but still announced — when collapsed. */
+    label?: string;
+    children?: ReactNode;
+}
+/** A group of items under one label, separated by a hairline rule. */
+export declare const SideNavSection: import("react").ForwardRefExoticComponent<SideNavSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon: IconName;
+    /** The words. Kept in the accessible name even when the rail is collapsed. */
+    label: string;
+    isActive?: boolean;
+    /** A count or status pill at the end of the row. Hidden when collapsed. */
+    badge?: ReactNode;
+}
+/**
+ * One destination. The active row carries the solid rail on its leading edge —
+ * the same rail as a selected table row, so selection reads the same anywhere.
+ */
+export declare const SideNavItem: import("react").ForwardRefExoticComponent<SideNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** The bottom band — account, theme, help. Above the page edge, under a rule. */
+export declare const SideNavFooter: import("react").ForwardRefExoticComponent<SideNavFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,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;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA8BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+/** Read the rail's collapsed state from anything rendered inside it. */
+export declare function useSideNavCollapsed(): boolean;
+export interface SideNavProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. Omit to let the rail own it. */
+    isCollapsed?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Fired by the header's collapse toggle. */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The primary rail: one heavy edge against the page, hairline rules between
+ * sections. Collapsed it keeps the icons and drops the words — the width is a
+ * token, so every rail in the product collapses to the same measure.
+ */
+export declare const SideNav: import("react").ForwardRefExoticComponent<SideNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Shown when the rail is open; hidden when it collapses. */
+    title?: ReactNode;
+    /** A mark that survives the collapse — a logo, a monogram. */
+    mark?: ReactNode;
+    /** Set false when the rail is permanently open. */
+    isCollapsible?: boolean;
+    children?: ReactNode;
+}
+/** Brand block plus the collapse toggle, above the first hairline rule. */
+export declare const SideNavHeader: import("react").ForwardRefExoticComponent<SideNavHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Section label. Hidden — but still announced — when collapsed. */
+    label?: string;
+    children?: ReactNode;
+}
+/** A group of items under one label, separated by a hairline rule. */
+export declare const SideNavSection: import("react").ForwardRefExoticComponent<SideNavSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon: IconName;
+    /** The words. Kept in the accessible name even when the rail is collapsed. */
+    label: string;
+    isActive?: boolean;
+    /** A count or status pill at the end of the row. Hidden when collapsed. */
+    badge?: ReactNode;
+}
+/**
+ * One destination. The active row carries the solid rail on its leading edge —
+ * the same rail as a selected table row, so selection reads the same anywhere.
+ */
+export declare const SideNavItem: import("react").ForwardRefExoticComponent<SideNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** The bottom band — account, theme, help. Above the page edge, under a rule. */
+export declare const SideNavFooter: import("react").ForwardRefExoticComponent<SideNavFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,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;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA8BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}

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"}