silver-ui 0.4.0 → 0.5.0

package/dist/chunk-F7BFO3SD.cjs

@@ -0,0 +1,153 @@
+'use strict';
+
+var chunk3Z5PF75J_cjs = require('./chunk-3Z5PF75J.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/MetadataList/MetadataList.recipe.ts
+var metadataListRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["root", "title", "dl", "item", "label", "value"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    title: {
+      mb: "3"
+    },
+    dl: {
+      m: 0,
+      p: 0,
+      display: "grid"
+    },
+    label: {
+      color: "fg.muted",
+      fontSize: "md",
+      fontWeight: "bold",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      m: 0,
+      minH: "6"
+    },
+    value: {
+      color: "fg",
+      fontSize: "md",
+      m: 0,
+      minH: "6",
+      overflowWrap: "break-word"
+    }
+  },
+  variants: {
+    // Orientation of each label relative to its value. The parent sets the `dl`
+    // grid layout while each item sets its own wrapper display; both read the
+    // same value via MetadataListContext so the two stay in sync.
+    labelPosition: {
+      start: {
+        dl: {
+          gridTemplateColumns: "auto 1fr",
+          rowGap: "3",
+          columnGap: "6",
+          alignItems: "start"
+        },
+        item: {
+          display: "contents"
+        }
+      },
+      top: {
+        dl: {
+          gridTemplateColumns: "1fr",
+          gap: "3"
+        },
+        item: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    labelPosition: "start"
+  }
+});
+var MetadataListContext = react.createContext(null);
+MetadataListContext.displayName = "MetadataListContext";
+function useMetadataList() {
+  return react.use(MetadataListContext);
+}
+function MetadataList({
+  children,
+  labelPosition = "start",
+  title,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const titleId = react.useId();
+  const contextValue = react.useMemo(() => ({ labelPosition }), [labelPosition]);
+  const styles = metadataListRecipe({ labelPosition });
+  return /* @__PURE__ */ jsxRuntime.jsx(MetadataListContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(styles.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        title != null ? /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Heading, { className: styles.title, id: titleId, level: 5, children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "dl",
+          {
+            "aria-labelledby": title != null ? titleId : void 0,
+            className: styles.dl,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+MetadataList.displayName = "MetadataList";
+function MetadataListItem({
+  children,
+  icon,
+  label,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const context = useMetadataList();
+  if (context == null && process.env.NODE_ENV !== "production") {
+    throw new Error("MetadataListItem must be rendered inside a MetadataList.");
+  }
+  const styles = metadataListRecipe({ labelPosition: context?.labelPosition });
+  const labelContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon, size: "sm" }) : null,
+    label
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(styles.item, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: styles.label, children: labelContent }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: styles.value, children })
+      ]
+    }
+  );
+}
+MetadataListItem.displayName = "MetadataListItem";
+
+exports.MetadataList = MetadataList;
+exports.MetadataListItem = MetadataListItem;
+//# sourceMappingURL=chunk-F7BFO3SD.cjs.map
+//# sourceMappingURL=chunk-F7BFO3SD.cjs.map

package/dist/chunk-F7BFO3SD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MetadataList/MetadataList.recipe.ts","../src/components/MetadataList/MetadataListContext.ts","../src/components/MetadataList/MetadataList.tsx","../src/components/MetadataList/MetadataListItem.tsx"],"names":["sva","createContext","use","useId","useMemo","jsx","jsxs","cx","Heading","Fragment","Icon"],"mappings":"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","file":"chunk-F7BFO3SD.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const metadataListRecipe = sva({\n  slots: ['root', 'title', 'dl', 'item', 'label', 'value'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    title: {\n      mb: '3',\n    },\n    dl: {\n      m: 0,\n      p: 0,\n      display: 'grid',\n    },\n    label: {\n      color: 'fg.muted',\n      fontSize: 'md',\n      fontWeight: 'bold',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      m: 0,\n      minH: '6',\n    },\n    value: {\n      color: 'fg',\n      fontSize: 'md',\n      m: 0,\n      minH: '6',\n      overflowWrap: 'break-word',\n    },\n  },\n  variants: {\n    // Orientation of each label relative to its value. The parent sets the `dl`\n    // grid layout while each item sets its own wrapper display; both read the\n    // same value via MetadataListContext so the two stay in sync.\n    labelPosition: {\n      start: {\n        dl: {\n          gridTemplateColumns: 'auto 1fr',\n          rowGap: '3',\n          columnGap: '6',\n          alignItems: 'start',\n        },\n        item: {\n          display: 'contents',\n        },\n      },\n      top: {\n        dl: {\n          gridTemplateColumns: '1fr',\n          gap: '3',\n        },\n        item: {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '0.5',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    labelPosition: 'start',\n  },\n});\n\nexport type MetadataListVariants = RecipeVariantProps<\n  typeof metadataListRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport interface MetadataListContextValue {\n  labelPosition: 'start' | 'top';\n}\n\nexport const MetadataListContext =\n  createContext<MetadataListContextValue | null>(null);\n\nMetadataListContext.displayName = 'MetadataListContext';\n\nexport function useMetadataList(): MetadataListContextValue | null {\n  return use(MetadataListContext);\n}\n","import {\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {metadataListRecipe} from 'components/MetadataList/MetadataList.recipe';\nimport {MetadataListContext} from 'components/MetadataList/MetadataListContext';\nimport {Heading} from 'components/Text';\nimport {cx} from 'internal/cx';\n\nexport type MetadataListLabelPosition = 'start' | 'top';\n\nexport interface MetadataListProps {\n  /**\n   * Metadata items to render inside the list.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Position of item labels relative to their values.\n   * @default 'start'\n   */\n  labelPosition?: MetadataListLabelPosition;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n  /**\n   * Optional title rendered above the list as a heading.\n   */\n  title?: string;\n}\n\n/**\n * Displays a list of label-value metadata pairs in configurable layouts.\n */\nexport function MetadataList({\n  children,\n  labelPosition = 'start',\n  title,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListProps): React.JSX.Element {\n  const titleId = useId();\n  const contextValue = useMemo(() => ({labelPosition}), [labelPosition]);\n  const styles = metadataListRecipe({labelPosition});\n\n  return (\n    <MetadataListContext value={contextValue}>\n      <div\n        className={cx(styles.root, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        {title != null ? (\n          <Heading className={styles.title} id={titleId} level={5}>\n            {title}\n          </Heading>\n        ) : null}\n        <dl\n          aria-labelledby={title != null ? titleId : undefined}\n          className={styles.dl}>\n          {children}\n        </dl>\n      </div>\n    </MetadataListContext>\n  );\n}\n\nMetadataList.displayName = 'MetadataList';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {metadataListRecipe} from 'components/MetadataList/MetadataList.recipe';\nimport {useMetadataList} from 'components/MetadataList/MetadataListContext';\nimport {cx} from 'internal/cx';\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport interface MetadataListItemProps {\n  /**\n   * Value content rendered beside or below the label.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional icon rendered before the label text.\n   */\n  icon?: IconComponent;\n  /**\n   * Descriptive label for this metadata entry.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport function MetadataListItem({\n  children,\n  icon,\n  label,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListItemProps): React.JSX.Element {\n  const context = useMetadataList();\n\n  if (context == null && process.env.NODE_ENV !== 'production') {\n    throw new Error('MetadataListItem must be rendered inside a MetadataList.');\n  }\n\n  const styles = metadataListRecipe({labelPosition: context?.labelPosition});\n  const labelContent = (\n    <>\n      {icon != null ? <Icon color=\"secondary\" icon={icon} size=\"sm\" /> : null}\n      {label}\n    </>\n  );\n\n  return (\n    <div\n      className={cx(styles.item, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <dt className={styles.label}>{labelContent}</dt>\n      <dd className={styles.value}>{children}</dd>\n    </div>\n  );\n}\n\nMetadataListItem.displayName = 'MetadataListItem';\n"]}