silver-ui 0.1.0

package/dist/chunk-D6KXW75E.js

@@ -0,0 +1,424 @@
+import { useDialogContext } from './chunk-CXBB2LN7.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { Heading, Text } from './chunk-PZO5MZ46.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { createContext, useMemo, use } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+
+// src/components/Layout/Layout.recipe.ts
+var paddingVariants = {
+  0: { p: "0" },
+  0.5: { p: "0.5" },
+  1: { p: "1" },
+  1.5: { p: "1.5" },
+  2: { p: "2" },
+  3: { p: "3" },
+  4: { p: "4" },
+  5: { p: "5" },
+  6: { p: "6" },
+  8: { p: "8" },
+  10: { p: "10" }
+};
+var layoutRecipe = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    minW: 0
+  },
+  variants: {
+    height: {
+      fill: {
+        h: "100%",
+        minH: 0
+      },
+      auto: {
+        minH: "100%"
+      }
+    },
+    padding: paddingVariants
+  },
+  defaultVariants: {
+    height: "fill"
+  }
+});
+var layoutMiddleRecipe = cva({
+  base: {
+    display: "flex",
+    flex: 1,
+    minH: 0,
+    minW: 0
+  }
+});
+var layoutRegionRecipe = cva({
+  variants: {
+    padding: paddingVariants
+  },
+  defaultVariants: {
+    padding: 4
+  }
+});
+var LayoutAreaContext = createContext("content");
+LayoutAreaContext.displayName = "LayoutAreaContext";
+var LayoutSlotsContext = createContext({
+  hasEnd: false,
+  hasFooter: false,
+  hasHeader: false,
+  hasStart: false
+});
+LayoutSlotsContext.displayName = "LayoutSlotsContext";
+var LayoutDividerContext = createContext(null);
+LayoutDividerContext.displayName = "LayoutDividerContext";
+function useLayoutArea() {
+  return use(LayoutAreaContext);
+}
+function useLayoutDivider() {
+  return use(LayoutDividerContext);
+}
+var styles = {
+  contentFill: css({
+    flex: 1,
+    minW: 0,
+    display: "flex",
+    flexDirection: "column"
+  })
+};
+function AreaProvider({
+  area,
+  children
+}) {
+  if (children == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(LayoutAreaContext, { value: area, children });
+}
+function Layout({
+  className,
+  content,
+  "data-testid": dataTestId,
+  hasDividers = true,
+  end,
+  footer,
+  header,
+  height = "fill",
+  padding,
+  ref,
+  start,
+  style
+}) {
+  const slots = useMemo(
+    () => ({
+      hasEnd: end != null,
+      hasFooter: footer != null,
+      hasHeader: header != null,
+      hasStart: start != null
+    }),
+    [end, footer, header, start]
+  );
+  const dividerValue = useMemo(() => ({ hasDividers }), [hasDividers]);
+  const rootStyle = {
+    ...style
+  };
+  return /* @__PURE__ */ jsx(LayoutDividerContext, { value: dividerValue, children: /* @__PURE__ */ jsx(LayoutSlotsContext, { value: slots, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(layoutRecipe({ height, padding }), className),
+      "data-testid": dataTestId,
+      ref,
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsx(AreaProvider, { area: "header", children: header }),
+        /* @__PURE__ */ jsxs("div", { className: layoutMiddleRecipe(), children: [
+          /* @__PURE__ */ jsx(AreaProvider, { area: "start", children: start }),
+          /* @__PURE__ */ jsx("div", { className: styles.contentFill, children: /* @__PURE__ */ jsx(AreaProvider, { area: "content", children: content }) }),
+          /* @__PURE__ */ jsx(AreaProvider, { area: "end", children: end })
+        ] }),
+        /* @__PURE__ */ jsx(AreaProvider, { area: "footer", children: footer })
+      ]
+    }
+  ) }) });
+}
+Layout.displayName = "Layout";
+var styles2 = {
+  root: css({
+    boxSizing: "border-box",
+    flex: 1,
+    minH: 0,
+    minW: 0,
+    overflow: "clip"
+  }),
+  scrollable: css({
+    overflow: "auto"
+  })
+};
+function LayoutContent({
+  as: Element = "div",
+  children,
+  className,
+  "data-testid": dataTestId,
+  isScrollable = true,
+  label,
+  padding = 4,
+  ref,
+  role,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      ...rest,
+      "aria-label": label,
+      className: cx(
+        styles2.root,
+        layoutRegionRecipe({ padding }),
+        isScrollable && styles2.scrollable,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: role ?? (label != null ? "region" : void 0),
+      style,
+      children
+    }
+  );
+}
+LayoutContent.displayName = "LayoutContent";
+var styles3 = {
+  root: css({
+    flexShrink: 0
+  }),
+  divider: css({
+    borderBlockStartWidth: "default",
+    borderBlockStartStyle: "solid",
+    borderBlockStartColor: "border"
+  }),
+  inner: css({
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "3"
+  }),
+  customInner: css({
+    boxSizing: "border-box"
+  }),
+  start: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    flex: 1,
+    minW: 0,
+    marginInlineEnd: "auto"
+  }),
+  actions: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    flexShrink: 0
+  })
+};
+function LayoutFooter({
+  children,
+  className,
+  "data-testid": dataTestId,
+  height,
+  label,
+  padding = 4,
+  primaryButton,
+  ref,
+  secondaryButton,
+  startContent,
+  style
+}) {
+  const dividerContext = useLayoutDivider();
+  const hasDivider = dividerContext?.hasDividers ?? false;
+  const rootStyle = { height, ...style };
+  const isCustom = children != null;
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      "aria-label": label,
+      className: cx(styles3.root, hasDivider && styles3.divider, className),
+      "data-divider": hasDivider || void 0,
+      "data-testid": dataTestId,
+      ref,
+      style: rootStyle,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            isCustom ? styles3.customInner : styles3.inner,
+            layoutRegionRecipe({ padding })
+          ),
+          children: isCustom ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            startContent != null ? /* @__PURE__ */ jsx("div", { className: styles3.start, children: startContent }) : null,
+            /* @__PURE__ */ jsxs("div", { className: styles3.actions, children: [
+              secondaryButton,
+              primaryButton
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+LayoutFooter.displayName = "LayoutFooter";
+var styles4 = {
+  root: css({
+    flexShrink: 0
+  }),
+  divider: css({
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  inner: css({
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "3"
+  }),
+  titleArea: css({
+    flex: 1,
+    minW: 0,
+    "& > :focus": {
+      outline: "none"
+    }
+  }),
+  actions: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    flexShrink: 0
+  }),
+  closeButton: css({
+    marginInlineEnd: "-2",
+    marginBlockStart: "-2"
+  })
+};
+function LayoutHeader({
+  className,
+  "data-testid": dataTestId,
+  endContent,
+  height,
+  label,
+  padding = 4,
+  ref,
+  startContent,
+  style,
+  subtitle,
+  title
+}) {
+  const dividerContext = useLayoutDivider();
+  const dialogContext = useDialogContext();
+  const hasDivider = dividerContext?.hasDividers ?? false;
+  const rootStyle = { height, ...style };
+  const closeButton = dialogContext != null ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: styles4.closeButton,
+      icon: X,
+      isIconOnly: true,
+      label: "Close",
+      onClick: () => dialogContext.onOpenChange(false),
+      variant: "ghost"
+    }
+  ) : null;
+  const hasEnd = endContent != null || closeButton != null;
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "aria-label": label,
+      className: cx(styles4.root, hasDivider && styles4.divider, className),
+      "data-testid": dataTestId,
+      ref,
+      style: rootStyle,
+      children: /* @__PURE__ */ jsxs("div", { className: cx(styles4.inner, layoutRegionRecipe({ padding })), children: [
+        startContent != null ? /* @__PURE__ */ jsx("div", { className: styles4.actions, children: startContent }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles4.titleArea, children: [
+          /* @__PURE__ */ jsx(
+            Heading,
+            {
+              "data-dialog-autofocus": dialogContext != null ? "true" : void 0,
+              level: 4,
+              tabIndex: dialogContext != null ? -1 : void 0,
+              children: title
+            }
+          ),
+          subtitle != null ? /* @__PURE__ */ jsx(Text, { as: "p", color: "secondary", type: "supporting", children: subtitle }) : null
+        ] }),
+        hasEnd ? /* @__PURE__ */ jsxs("div", { className: styles4.actions, children: [
+          endContent,
+          closeButton
+        ] }) : null
+      ] })
+    }
+  );
+}
+LayoutHeader.displayName = "LayoutHeader";
+var styles5 = {
+  root: css({
+    boxSizing: "border-box",
+    flexShrink: 0,
+    overflow: "clip"
+  }),
+  scrollable: css({
+    overflow: "auto"
+  }),
+  dividerEnd: css({
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border"
+  }),
+  dividerStart: css({
+    borderInlineStartWidth: "default",
+    borderInlineStartStyle: "solid",
+    borderInlineStartColor: "border"
+  })
+};
+function LayoutPanel({
+  children,
+  className,
+  "data-testid": dataTestId,
+  isScrollable = true,
+  label,
+  padding = 4,
+  ref,
+  role,
+  style,
+  width,
+  ...rest
+}) {
+  const area = useLayoutArea();
+  const dividerContext = useLayoutDivider();
+  const hasDivider = dividerContext?.hasDividers ?? false;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "aria-label": label,
+      className: cx(
+        styles5.root,
+        layoutRegionRecipe({ padding }),
+        isScrollable && styles5.scrollable,
+        hasDivider && area === "start" && styles5.dividerEnd,
+        hasDivider && area === "end" && styles5.dividerStart,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: role ?? (label != null ? "region" : void 0),
+      style: { width, ...style },
+      children
+    }
+  );
+}
+LayoutPanel.displayName = "LayoutPanel";
+
+export { Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutPanel, layoutRecipe };
+//# sourceMappingURL=chunk-D6KXW75E.js.map
+//# sourceMappingURL=chunk-D6KXW75E.js.map

package/dist/chunk-D6KXW75E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Layout/Layout.recipe.ts","../src/components/Layout/LayoutContext.ts","../src/components/Layout/Layout.tsx","../src/components/Layout/LayoutContent.tsx","../src/components/Layout/LayoutFooter.tsx","../src/components/Layout/LayoutHeader.tsx","../src/components/Layout/LayoutPanel.tsx"],"names":["styles","jsx","jsxs"],"mappings":"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","file":"chunk-D6KXW75E.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nconst paddingVariants = {\n  0: {p: '0'},\n  0.5: {p: '0.5'},\n  1: {p: '1'},\n  1.5: {p: '1.5'},\n  2: {p: '2'},\n  3: {p: '3'},\n  4: {p: '4'},\n  5: {p: '5'},\n  6: {p: '6'},\n  8: {p: '8'},\n  10: {p: '10'},\n};\n\nexport const layoutRecipe = cva({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    minW: 0,\n  },\n  variants: {\n    height: {\n      fill: {\n        h: '100%',\n        minH: 0,\n      },\n      auto: {\n        minH: '100%',\n      },\n    },\n    padding: paddingVariants,\n  },\n  defaultVariants: {\n    height: 'fill',\n  },\n});\n\nexport const layoutMiddleRecipe = cva({\n  base: {\n    display: 'flex',\n    flex: 1,\n    minH: 0,\n    minW: 0,\n  },\n});\n\nexport const layoutRegionRecipe = cva({\n  variants: {\n    padding: paddingVariants,\n  },\n  defaultVariants: {\n    padding: 4,\n  },\n});\n\nexport type LayoutVariants = RecipeVariantProps<typeof layoutRecipe>;\nexport type LayoutRegionVariants = RecipeVariantProps<\n  typeof layoutRegionRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport type LayoutArea = 'header' | 'content' | 'start' | 'end' | 'footer';\n\nexport interface LayoutSlots {\n  hasEnd: boolean;\n  hasFooter: boolean;\n  hasHeader: boolean;\n  hasStart: boolean;\n}\n\nexport interface LayoutDividerContextValue {\n  hasDividers: boolean;\n}\n\nexport const LayoutAreaContext = createContext<LayoutArea>('content');\nLayoutAreaContext.displayName = 'LayoutAreaContext';\nexport const LayoutSlotsContext = createContext<LayoutSlots>({\n  hasEnd: false,\n  hasFooter: false,\n  hasHeader: false,\n  hasStart: false,\n});\nLayoutSlotsContext.displayName = 'LayoutSlotsContext';\nexport const LayoutDividerContext =\n  createContext<LayoutDividerContextValue | null>(null);\nLayoutDividerContext.displayName = 'LayoutDividerContext';\n\nexport function useLayoutArea(): LayoutArea {\n  return use(LayoutAreaContext);\n}\n\nexport function useLayoutDivider(): LayoutDividerContextValue | null {\n  return use(LayoutDividerContext);\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {layoutMiddleRecipe, layoutRecipe} from './Layout.recipe';\nimport {\n  LayoutAreaContext,\n  LayoutDividerContext,\n  LayoutSlotsContext,\n  type LayoutArea,\n} from './LayoutContext';\nimport type {LayoutHeight, SpacingStep} from './types';\n\n/**\n * Shell with header, side panels, content, and footer slots.\n */\nexport interface LayoutProps {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Main content slot.\n   */\n  content?: ReactNode;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * End panel slot.\n   */\n  end?: ReactNode;\n  /**\n   * Footer slot.\n   */\n  footer?: ReactNode;\n  /**\n   * Whether child layout regions should show dividers.\n   */\n  hasDividers?: boolean;\n  /**\n   * Header slot.\n   */\n  header?: ReactNode;\n  /**\n   * Layout height behavior. Default is `fill`.\n   */\n  height?: LayoutHeight;\n  /**\n   * Outer padding for layout edges.\n   */\n  padding?: SpacingStep;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Start panel slot.\n   */\n  start?: ReactNode;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  contentFill: css({\n    flex: 1,\n    minW: 0,\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n};\n\nfunction AreaProvider({\n  area,\n  children,\n}: {\n  area: LayoutArea;\n  children?: ReactNode;\n}): React.JSX.Element | null {\n  if (children == null) {\n    return null;\n  }\n\n  return <LayoutAreaContext value={area}>{children}</LayoutAreaContext>;\n}\n\nexport function Layout({\n  className,\n  content,\n  'data-testid': dataTestId,\n  hasDividers = true,\n  end,\n  footer,\n  header,\n  height = 'fill',\n  padding,\n  ref,\n  start,\n  style,\n}: LayoutProps): React.JSX.Element {\n  const slots = useMemo(\n    () => ({\n      hasEnd: end != null,\n      hasFooter: footer != null,\n      hasHeader: header != null,\n      hasStart: start != null,\n    }),\n    [end, footer, header, start],\n  );\n  const dividerValue = useMemo(() => ({hasDividers}), [hasDividers]);\n  const rootStyle: CSSProperties = {\n    ...style,\n  };\n\n  return (\n    <LayoutDividerContext value={dividerValue}>\n      <LayoutSlotsContext value={slots}>\n        <div\n          className={cx(layoutRecipe({height, padding}), className)}\n          data-testid={dataTestId}\n          ref={ref}\n          style={rootStyle}>\n          <AreaProvider area=\"header\">{header}</AreaProvider>\n          <div className={layoutMiddleRecipe()}>\n            <AreaProvider area=\"start\">{start}</AreaProvider>\n            <div className={styles.contentFill}>\n              <AreaProvider area=\"content\">{content}</AreaProvider>\n            </div>\n            <AreaProvider area=\"end\">{end}</AreaProvider>\n          </div>\n          <AreaProvider area=\"footer\">{footer}</AreaProvider>\n        </div>\n      </LayoutSlotsContext>\n    </LayoutDividerContext>\n  );\n}\n\nLayout.displayName = 'Layout';\n","import type {ComponentPropsWithRef, ElementType} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {layoutRegionRecipe} from './Layout.recipe';\nimport type {SpacingStep} from './types';\n\n/**\n * Scrollable main content area within a Layout. Fills the remaining space\n * between panels and stretches to fill the available height.\n */\nexport interface LayoutContentProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * HTML element to render. Default is `div`.\n   */\n  as?: ElementType;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the content area scrolls when it overflows.\n   */\n  isScrollable?: boolean;\n  /**\n   * Accessible label. Automatically sets role=\"region\" when provided.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingStep;\n}\n\nconst styles = {\n  root: css({\n    boxSizing: 'border-box',\n    flex: 1,\n    minH: 0,\n    minW: 0,\n    overflow: 'clip',\n  }),\n  scrollable: css({\n    overflow: 'auto',\n  }),\n};\n\n/**\n * Scrollable main content area within a Layout. Fills the remaining space\n * between panels and stretches to fill the available height.\n */\nexport function LayoutContent({\n  as: Element = 'div',\n  children,\n  className,\n  'data-testid': dataTestId,\n  isScrollable = true,\n  label,\n  padding = 4,\n  ref,\n  role,\n  style,\n  ...rest\n}: LayoutContentProps): React.JSX.Element {\n  return (\n    <Element\n      {...rest}\n      aria-label={label}\n      className={cx(\n        styles.root,\n        layoutRegionRecipe({padding}),\n        isScrollable && styles.scrollable,\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role ?? (label != null ? 'region' : undefined)}\n      style={style}>\n      {children}\n    </Element>\n  );\n}\n\nLayoutContent.displayName = 'LayoutContent';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {layoutRegionRecipe} from './Layout.recipe';\nimport {useLayoutDivider} from './LayoutContext';\nimport type {SpacingStep} from './types';\n\ninterface LayoutFooterBaseProps {\n  /**\n   * Additional CSS class names applied to the footer.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Fixed height for the footer.\n   */\n  height?: number | string;\n  /**\n   * Accessible label for the footer landmark.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingStep;\n  /**\n   * Ref forwarded to the footer element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Inline styles applied to the footer.\n   */\n  style?: CSSProperties;\n}\n\ninterface LayoutFooterCustomProps extends LayoutFooterBaseProps {\n  /**\n   * Custom footer content rendered inside the footer shell.\n   */\n  children: ReactNode;\n  primaryButton?: never;\n  secondaryButton?: never;\n  startContent?: never;\n}\n\ninterface LayoutFooterActionsProps extends LayoutFooterBaseProps {\n  children?: never;\n  /**\n   * Primary action button, rendered rightmost.\n   */\n  primaryButton: ReactNode;\n  /**\n   * Secondary action button, rendered left of the primary button.\n   */\n  secondaryButton?: ReactNode;\n  /**\n   * Content rendered at the start (left) of the footer.\n   */\n  startContent?: ReactNode;\n}\n\n/**\n * Footer landmark region within a Layout. Use action slots for the standard\n * footer layout, or children for a custom footer inside the same shell.\n */\nexport type LayoutFooterProps =\n  | LayoutFooterActionsProps\n  | LayoutFooterCustomProps;\n\nconst styles = {\n  root: css({\n    flexShrink: 0,\n  }),\n  divider: css({\n    borderBlockStartWidth: 'default',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: 'border',\n  }),\n  inner: css({\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: '3',\n  }),\n  customInner: css({\n    boxSizing: 'border-box',\n  }),\n  start: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    flex: 1,\n    minW: 0,\n    marginInlineEnd: 'auto',\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    flexShrink: 0,\n  }),\n};\n\n/**\n * Footer landmark region within a Layout.\n */\nexport function LayoutFooter({\n  children,\n  className,\n  'data-testid': dataTestId,\n  height,\n  label,\n  padding = 4,\n  primaryButton,\n  ref,\n  secondaryButton,\n  startContent,\n  style,\n}: LayoutFooterProps): React.JSX.Element {\n  const dividerContext = useLayoutDivider();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n  const rootStyle: CSSProperties = {height, ...style};\n  const isCustom = children != null;\n\n  return (\n    <footer\n      aria-label={label}\n      className={cx(styles.root, hasDivider && styles.divider, className)}\n      data-divider={hasDivider || undefined}\n      data-testid={dataTestId}\n      ref={ref}\n      style={rootStyle}>\n      <div\n        className={cx(\n          isCustom ? styles.customInner : styles.inner,\n          layoutRegionRecipe({padding}),\n        )}>\n        {isCustom ? (\n          children\n        ) : (\n          <>\n            {startContent != null ? (\n              <div className={styles.start}>{startContent}</div>\n            ) : null}\n            <div className={styles.actions}>\n              {secondaryButton}\n              {primaryButton}\n            </div>\n          </>\n        )}\n      </div>\n    </footer>\n  );\n}\n\nLayoutFooter.displayName = 'LayoutFooter';\n","import {X} from 'lucide-react';\nimport type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {useDialogContext} from '../Dialog/DialogContext';\nimport {Heading, Text} from '../Text';\nimport {layoutRegionRecipe} from './Layout.recipe';\nimport {useLayoutDivider} from './LayoutContext';\nimport type {SpacingStep} from './types';\n\n/**\n * Header landmark region within a Layout with a structured title,\n * optional subtitle, and start/end content slots.\n *\n * When rendered inside a Dialog, a close button is automatically\n * appended after `endContent`. The button calls `onOpenChange(false)`\n * on the parent Dialog and the title receives initial focus.\n */\nexport interface LayoutHeaderProps {\n  /**\n   * Additional CSS class names applied to the header.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the header.\n   */\n  'data-testid'?: string;\n  /**\n   * Content rendered after the title area.\n   */\n  endContent?: ReactNode;\n  /**\n   * Fixed height for the header.\n   */\n  height?: number | string;\n  /**\n   * Accessible label for the header landmark.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingStep;\n  /**\n   * Ref forwarded to the header element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Content rendered before the title area.\n   */\n  startContent?: ReactNode;\n  /**\n   * Inline styles applied to the header.\n   */\n  style?: CSSProperties;\n  /**\n   * Supporting text displayed below the title.\n   */\n  subtitle?: string;\n  /**\n   * Primary header title.\n   */\n  title: string;\n}\n\nconst styles = {\n  root: css({\n    flexShrink: 0,\n  }),\n  divider: css({\n    borderBlockEndWidth: 'default',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: 'border',\n  }),\n  inner: css({\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    gap: '3',\n  }),\n  titleArea: css({\n    flex: 1,\n    minW: 0,\n    '& > :focus': {\n      outline: 'none',\n    },\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    flexShrink: 0,\n  }),\n  closeButton: css({\n    marginInlineEnd: '-2',\n    marginBlockStart: '-2',\n  }),\n} as const;\n\n/**\n * Header landmark region within a Layout with a structured title,\n * optional subtitle, and start/end content slots.\n *\n * When rendered inside a Dialog, a close button is automatically\n * appended after `endContent`. The button calls `onOpenChange(false)`\n * on the parent Dialog and the title receives initial focus.\n */\nexport function LayoutHeader({\n  className,\n  'data-testid': dataTestId,\n  endContent,\n  height,\n  label,\n  padding = 4,\n  ref,\n  startContent,\n  style,\n  subtitle,\n  title,\n}: LayoutHeaderProps): React.JSX.Element {\n  const dividerContext = useLayoutDivider();\n  const dialogContext = useDialogContext();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n  const rootStyle: CSSProperties = {height, ...style};\n  const closeButton =\n    dialogContext != null ? (\n      <Button\n        className={styles.closeButton}\n        icon={X}\n        isIconOnly\n        label=\"Close\"\n        onClick={() => dialogContext.onOpenChange(false)}\n        variant=\"ghost\"\n      />\n    ) : null;\n  const hasEnd = endContent != null || closeButton != null;\n\n  return (\n    <header\n      aria-label={label}\n      className={cx(styles.root, hasDivider && styles.divider, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={rootStyle}>\n      <div className={cx(styles.inner, layoutRegionRecipe({padding}))}>\n        {startContent != null ? (\n          <div className={styles.actions}>{startContent}</div>\n        ) : null}\n        <div className={styles.titleArea}>\n          <Heading\n            data-dialog-autofocus={dialogContext != null ? 'true' : undefined}\n            level={4}\n            tabIndex={dialogContext != null ? -1 : undefined}>\n            {title}\n          </Heading>\n          {subtitle != null ? (\n            <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n              {subtitle}\n            </Text>\n          ) : null}\n        </div>\n        {hasEnd ? (\n          <div className={styles.actions}>\n            {endContent}\n            {closeButton}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n\nLayoutHeader.displayName = 'LayoutHeader';\n","import type {ComponentPropsWithRef} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {layoutRegionRecipe} from './Layout.recipe';\nimport {useLayoutArea, useLayoutDivider} from './LayoutContext';\nimport type {SpacingStep} from './types';\n\n/**\n * Side panel region within a Layout. Placed in the start or end slot,\n * with optional dividers and scrolling.\n */\nexport interface LayoutPanelProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the panel scrolls when it overflows.\n   */\n  isScrollable?: boolean;\n  /**\n   * Accessible label. Automatically sets role=\"region\" when provided.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingStep;\n  /**\n   * Fixed width for the panel.\n   */\n  width?: number | string;\n}\n\nconst styles = {\n  root: css({\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    overflow: 'clip',\n  }),\n  scrollable: css({\n    overflow: 'auto',\n  }),\n  dividerEnd: css({\n    borderInlineEndWidth: 'default',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: 'border',\n  }),\n  dividerStart: css({\n    borderInlineStartWidth: 'default',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: 'border',\n  }),\n};\n\n/**\n * Side panel region within a Layout. Placed in the start or end slot,\n * with optional dividers and scrolling.\n */\nexport function LayoutPanel({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isScrollable = true,\n  label,\n  padding = 4,\n  ref,\n  role,\n  style,\n  width,\n  ...rest\n}: LayoutPanelProps): React.JSX.Element {\n  const area = useLayoutArea();\n  const dividerContext = useLayoutDivider();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n\n  return (\n    <div\n      {...rest}\n      aria-label={label}\n      className={cx(\n        styles.root,\n        layoutRegionRecipe({padding}),\n        isScrollable && styles.scrollable,\n        hasDivider && area === 'start' && styles.dividerEnd,\n        hasDivider && area === 'end' && styles.dividerStart,\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role ?? (label != null ? 'region' : undefined)}\n      style={{width, ...style}}>\n      {children}\n    </div>\n  );\n}\n\nLayoutPanel.displayName = 'LayoutPanel';\n"]}

package/dist/chunk-DFF72N57.js

@@ -0,0 +1,192 @@
+import { Item } from './chunk-CA6645TQ.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { createContext, useId, useMemo, use } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ListContext = createContext(null);
+ListContext.displayName = "ListContext";
+var styles = {
+  root: css({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  list: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    m: 0,
+    p: 0,
+    listStyleType: "none"
+  }),
+  withDividers: css({
+    gap: 0
+  }),
+  withCounter: css({
+    counterReset: "silver-list"
+  }),
+  header: css({
+    mb: "2"
+  })
+};
+function List({
+  children,
+  className,
+  "data-testid": dataTestId,
+  hasDividers = false,
+  header,
+  listStyle = "none",
+  ref,
+  start,
+  style
+}) {
+  const headerId = useId();
+  const isOrdered = listStyle === "decimal";
+  const Component = isOrdered ? "ol" : "ul";
+  const counterReset = listStyle !== "none" && start != null && start !== 1 ? `silver-list ${start - 1}` : void 0;
+  const contextValue = useMemo(
+    () => ({ hasDividers, listStyle }),
+    [hasDividers, listStyle]
+  );
+  const listElement = /* @__PURE__ */ jsx(
+    Component,
+    {
+      "aria-labelledby": header != null ? headerId : void 0,
+      className: cx(
+        styles.list,
+        hasDividers ? styles.withDividers : void 0,
+        listStyle !== "none" ? styles.withCounter : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: listStyle === "none" && !isOrdered ? "list" : void 0,
+      start: isOrdered ? start : void 0,
+      style: { counterReset, ...style },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(ListContext, { value: contextValue, children: header == null ? listElement : /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.header, id: headerId, children: header }),
+    listElement
+  ] }) });
+}
+List.displayName = "List";
+var markerSize = "6px";
+var styles2 = {
+  withCounter: css({
+    counterIncrement: "silver-list"
+  }),
+  withDivider: css({
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border",
+    _last: {
+      borderBlockEndWidth: 0
+    }
+  }),
+  noRadius: css({
+    borderRadius: 0
+  }),
+  markerContainer: css({
+    alignSelf: "baseline",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "4",
+    mt: `calc((1em * 1.5 - ${markerSize}) / 2)`
+  }),
+  dot: css({
+    w: markerSize,
+    h: markerSize,
+    borderRadius: "full",
+    bg: "fg"
+  }),
+  circle: css({
+    w: markerSize,
+    h: markerSize,
+    borderRadius: "full",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "fg",
+    bg: "transparent"
+  }),
+  number: css({
+    alignSelf: "baseline",
+    flexShrink: 0,
+    color: "fg",
+    fontFamily: "body",
+    fontSize: "md",
+    lineHeight: "1.5",
+    w: "4",
+    _before: {
+      content: 'counter(silver-list) "."'
+    }
+  })
+};
+function Marker({ listStyle }) {
+  if (listStyle === "disc") {
+    return /* @__PURE__ */ jsx("span", { className: styles2.markerContainer, children: /* @__PURE__ */ jsx("span", { className: styles2.dot }) });
+  }
+  if (listStyle === "circle") {
+    return /* @__PURE__ */ jsx("span", { className: styles2.markerContainer, children: /* @__PURE__ */ jsx("span", { className: styles2.circle }) });
+  }
+  if (listStyle === "decimal") {
+    return /* @__PURE__ */ jsx("span", { className: styles2.number });
+  }
+  return null;
+}
+function ListItem({
+  className,
+  "data-testid": dataTestId,
+  description,
+  endContent,
+  href,
+  isDisabled = false,
+  isSelected = false,
+  label,
+  onClick,
+  ref,
+  rel,
+  startContent,
+  style,
+  target
+}) {
+  const context = use(ListContext);
+  const hasDividers = context?.hasDividers ?? false;
+  const listStyle = context?.listStyle ?? "none";
+  const hasMarkers = listStyle !== "none";
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      as: "li",
+      className: cx(
+        hasMarkers ? styles2.withCounter : void 0,
+        hasDividers ? styles2.withDivider : void 0,
+        hasDividers ? styles2.noRadius : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      description,
+      endContent,
+      href,
+      isDisabled,
+      isSelected,
+      label,
+      leadingContent: /* @__PURE__ */ jsx(Marker, { listStyle }),
+      onClick,
+      ref,
+      rel,
+      startContent,
+      style,
+      target
+    }
+  );
+}
+ListItem.displayName = "ListItem";
+
+export { List, ListItem };
+//# sourceMappingURL=chunk-DFF72N57.js.map
+//# sourceMappingURL=chunk-DFF72N57.js.map