silver-ui 0.5.0 → 0.7.1

package/dist/chunk-7VUDE5BI.js

@@ -0,0 +1,91 @@
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Badge/Badge.recipe.ts
+var badgeRecipe = sva({
+  slots: ["root", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      fontFamily: "body",
+      lineHeight: "none",
+      fontWeight: "medium",
+      whiteSpace: "nowrap"
+    },
+    label: {
+      // Optically center the text — nudges it up 1px against the cap height.
+      // Scoped to the label slot so any leading icon stays vertically centered.
+      paddingBottom: "1px"
+    }
+  },
+  variants: {
+    size: {
+      sm: { root: { gap: "1", h: "5", px: "2", fontSize: "sm" } },
+      md: { root: { gap: "1.5", h: "6", px: "2.5", fontSize: "sm" } },
+      lg: { root: { gap: "2", h: "7", px: "3", fontSize: "md" } }
+    },
+    color: {
+      neutral: { root: { bg: "surface.gray", color: "fg" } },
+      info: { root: { bg: "status.info.solid", color: "status.info.solidFg" } },
+      success: {
+        root: { bg: "status.success.solid", color: "status.success.solidFg" }
+      },
+      warning: {
+        root: { bg: "status.warning.solid", color: "status.warning.solidFg" }
+      },
+      error: { root: { bg: "status.error.solid", color: "status.error.solidFg" } },
+      blue: { root: { bg: "surface.blue", color: "surface.blue.fg" } },
+      cyan: { root: { bg: "surface.cyan", color: "surface.cyan.fg" } },
+      green: { root: { bg: "surface.green", color: "surface.green.fg" } },
+      orange: { root: { bg: "surface.orange", color: "surface.orange.fg" } },
+      pink: { root: { bg: "surface.pink", color: "surface.pink.fg" } },
+      purple: { root: { bg: "surface.purple", color: "surface.purple.fg" } },
+      red: { root: { bg: "surface.red", color: "surface.red.fg" } },
+      teal: { root: { bg: "surface.teal", color: "surface.teal.fg" } },
+      yellow: { root: { bg: "surface.yellow", color: "surface.yellow.fg" } }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "neutral"
+  }
+});
+function Badge({
+  "aria-label": ariaLabel,
+  className,
+  "data-testid": dataTestId,
+  icon,
+  label,
+  ref,
+  role,
+  size = "md",
+  style,
+  color = "neutral"
+}) {
+  const classes = badgeRecipe({ size, color });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: cx(classes.root, className),
+      "data-testid": dataTestId,
+      ref,
+      role,
+      style,
+      children: [
+        icon != null ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", color: "inherit", icon, size }) : null,
+        /* @__PURE__ */ jsx("span", { className: classes.label, children: label })
+      ]
+    }
+  );
+}
+Badge.displayName = "Badge";
+
+export { Badge };
+//# sourceMappingURL=chunk-7VUDE5BI.js.map
+//# sourceMappingURL=chunk-7VUDE5BI.js.map

package/dist/chunk-7VUDE5BI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/Badge.recipe.ts","../src/components/Badge/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-7VUDE5BI.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const badgeRecipe = sva({\n  slots: ['root', 'label'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 'full',\n      fontFamily: 'body',\n      lineHeight: 'none',\n      fontWeight: 'medium',\n      whiteSpace: 'nowrap',\n    },\n    label: {\n      // Optically center the text — nudges it up 1px against the cap height.\n      // Scoped to the label slot so any leading icon stays vertically centered.\n      paddingBottom: '1px',\n    },\n  },\n  variants: {\n    size: {\n      sm: {root: {gap: '1', h: '5', px: '2', fontSize: 'sm'}},\n      md: {root: {gap: '1.5', h: '6', px: '2.5', fontSize: 'sm'}},\n      lg: {root: {gap: '2', h: '7', px: '3', fontSize: 'md'}},\n    },\n    color: {\n      neutral: {root: {bg: 'surface.gray', color: 'fg'}},\n      info: {root: {bg: 'status.info.solid', color: 'status.info.solidFg'}},\n      success: {\n        root: {bg: 'status.success.solid', color: 'status.success.solidFg'},\n      },\n      warning: {\n        root: {bg: 'status.warning.solid', color: 'status.warning.solidFg'},\n      },\n      error: {root: {bg: 'status.error.solid', color: 'status.error.solidFg'}},\n      blue: {root: {bg: 'surface.blue', color: 'surface.blue.fg'}},\n      cyan: {root: {bg: 'surface.cyan', color: 'surface.cyan.fg'}},\n      green: {root: {bg: 'surface.green', color: 'surface.green.fg'}},\n      orange: {root: {bg: 'surface.orange', color: 'surface.orange.fg'}},\n      pink: {root: {bg: 'surface.pink', color: 'surface.pink.fg'}},\n      purple: {root: {bg: 'surface.purple', color: 'surface.purple.fg'}},\n      red: {root: {bg: 'surface.red', color: 'surface.red.fg'}},\n      teal: {root: {bg: 'surface.teal', color: 'surface.teal.fg'}},\n      yellow: {root: {bg: 'surface.yellow', color: 'surface.yellow.fg'}},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'neutral',\n  },\n});\n\nexport type BadgeVariants = RecipeVariantProps<typeof badgeRecipe>;\n","import type {CSSProperties, Ref} from 'react';\nimport {badgeRecipe} from 'components/Badge/Badge.recipe';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {cx} from 'internal/cx';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport type BadgeColor =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\n/**\n * A compact status label, category marker, or count.\n */\nexport interface BadgeProps {\n  /**\n   * Accessible label for the badge.\n   */\n  'aria-label'?: string;\n  /**\n   * Additional CSS class names applied to the badge.\n   */\n  className?: string;\n  /**\n   * Visual color.\n   * @default 'neutral'\n   */\n  color?: BadgeColor;\n  /**\n   * Test ID applied to the badge.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional icon rendered before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Badge text or count.\n   */\n  label: string | number;\n  /**\n   * Ref forwarded to the badge element.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * ARIA role for the badge element. Common choices:\n   *\n   * - `'status'` — a live region whose content is advisory (e.g. \"3 new\").\n   * - `'alert'` — an urgent, time-sensitive message (e.g. error counts).\n   * - `'log'` — appended information such as chat counts or activity feeds.\n   *\n   * Any valid ARIA role string is accepted.\n   */\n  role?: 'status' | 'alert' | 'log' | (string & {});\n  /**\n   * Badge size.\n   * @default 'md'\n   */\n  size?: BadgeSize;\n  /**\n   * Inline styles applied to the badge.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * A compact status label, category marker, or count.\n */\nexport function Badge({\n  'aria-label': ariaLabel,\n  className,\n  'data-testid': dataTestId,\n  icon,\n  label,\n  ref,\n  role,\n  size = 'md',\n  style,\n  color = 'neutral',\n}: BadgeProps): React.JSX.Element {\n  const classes = badgeRecipe({size, color});\n  return (\n    <span\n      aria-label={ariaLabel}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role}\n      style={style}>\n      {icon != null ? (\n        <Icon aria-hidden=\"true\" color=\"inherit\" icon={icon} size={size} />\n      ) : null}\n      <span className={classes.label}>{label}</span>\n    </span>\n  );\n}\n\nBadge.displayName = 'Badge';\n"]}

package/dist/{chunk-Q3HMGFGI.js → chunk-7WQW7H3D.js}

@@ -1,23 +1,102 @@
-import { VStack, HStack } from './chunk-5ZU7FY4O.js';
-import { TagsInput } from './chunk-LBGC6EC5.js';
-import { Select } from './chunk-LKGHYNLH.js';
-import { NumberInput } from './chunk-ADSG24VE.js';
-import { TextInput } from './chunk-CUHJDV6K.js';
-import { TimeInput } from './chunk-XHJRAEGW.js';
-import { DateInput } from './chunk-75KSHZTV.js';
+import { HStack, VStack } from './chunk-5ZU7FY4O.js';
+import { TagsInput } from './chunk-OP6WQYYP.js';
+import { Select } from './chunk-YRJYWTVG.js';
+import { NumberInput } from './chunk-4UYMGEBF.js';
+import { TextInput } from './chunk-4NPVIEWF.js';
+import { TimeInput } from './chunk-223UOU3H.js';
+import { DateInput } from './chunk-2KLTODOC.js';
 import { plainDateFromUnixSeconds, plainDateToUnixSeconds } from './chunk-5HPXUDX6.js';
 import { getBrowserTimezoneID, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
-import { AutocompleteInputItem, createStaticSearchSource, AutocompleteInput } from './chunk-OERNLR2P.js';
-import { Tag } from './chunk-KC4EKXGF.js';
-import { Popover } from './chunk-S5CMLG2E.js';
-import { Button } from './chunk-THTVYP5V.js';
-import { Text } from './chunk-RJEZBOSH.js';
+import { AutocompleteInputItem, createStaticSearchSource, AutocompleteInput } from './chunk-AX653SYJ.js';
+import { Tag } from './chunk-EIJSWHG7.js';
+import { Popover } from './chunk-GTZQT6MK.js';
+import { Button } from './chunk-EBV3EX3J.js';
+import { Text } from './chunk-5GSRIOXE.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
+import { cx } from './chunk-PPNETWIP.js';
 import { Search, X } from 'lucide-react';
 import { useState, useRef, useEffect, useMemo, useImperativeHandle, useCallback } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/components/SearchFilterInput/SearchFilterInputEditPopover.recipe.ts
+var searchFilterInputEditPopoverRecipe = sva({
+  slots: [
+    "root",
+    "content",
+    "footer",
+    "fieldSelector",
+    "operatorSelector",
+    "valueEditor",
+    "nestedList",
+    "nestedNode",
+    "nestedRow",
+    "nestedCell",
+    "nestedField",
+    "nestedOperator",
+    "nestedValue"
+  ],
+  base: {
+    root: {
+      overflow: "hidden",
+      minW: "100"
+    },
+    content: {
+      p: "4"
+    },
+    footer: {
+      px: "3",
+      pb: "3"
+    },
+    fieldSelector: {
+      flexShrink: 0
+    },
+    operatorSelector: {
+      flex: "1 0 auto"
+    },
+    valueEditor: {
+      flex: "2 1 0",
+      minW: 0
+    },
+    nestedList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      w: "full",
+      listStyleType: "none",
+      m: 0,
+      p: 0
+    },
+    nestedNode: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      ps: "3",
+      borderInlineStartWidth: "default",
+      borderInlineStartStyle: "solid",
+      borderColor: "border"
+    },
+    nestedRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      w: "full"
+    },
+    nestedCell: {
+      minW: 0
+    },
+    nestedField: {
+      flex: "0 0 200px"
+    },
+    nestedOperator: {
+      flex: "0 0 180px"
+    },
+    nestedValue: {
+      flex: "2 1 0"
+    }
+  }
+});
 function enumItemsToSearchableItems(values) {
   return values.map((item) => ({ id: item.value, label: item.label }));
 }
@@ -523,65 +602,7 @@ function SearchFilterInputValueEditor({
       );
   }
 }
-var styles = {
-  root: css({
-    overflow: "hidden",
-    minW: "100"
-  }),
-  content: css({
-    p: "4"
-  }),
-  footer: css({
-    px: "3",
-    pb: "3"
-  }),
-  fieldSelector: css({
-    flexShrink: 0
-  }),
-  operatorSelector: css({
-    flex: "1 0 auto"
-  }),
-  valueEditor: css({
-    flex: "2 1 0",
-    minW: 0
-  }),
-  nestedList: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "2",
-    w: "full",
-    listStyleType: "none",
-    m: 0,
-    p: 0
-  }),
-  nestedNode: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "2",
-    ps: "3",
-    borderInlineStartWidth: "default",
-    borderInlineStartStyle: "solid",
-    borderColor: "border"
-  }),
-  nestedRow: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    w: "full"
-  }),
-  nestedCell: css({
-    minW: 0
-  }),
-  nestedField: css({
-    flex: "0 0 200px"
-  }),
-  nestedOperator: css({
-    flex: "0 0 180px"
-  }),
-  nestedValue: css({
-    flex: "2 1 0"
-  })
-};
+var styles = searchFilterInputEditPopoverRecipe();
 function initEditableFilter(config, filter) {
   const operator = config.getOperator(filter.field, filter.operator);
   if (operator?.value.type === "nested" && filter.value.type === "nested") {
@@ -653,7 +674,7 @@ function NestedSubFilterRow({
   const isNested = operatorValue?.type === "nested";
   const isEmpty = operatorValue?.type === "empty";
   return /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
-    /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedField}`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedField), children: /* @__PURE__ */ jsx(
       Select,
       {
         isDisabled: isReadOnly,
@@ -676,7 +697,7 @@ function NestedSubFilterRow({
         value: subFilter.field
       }
     ) }),
-    operatorOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedOperator}`, children: /* @__PURE__ */ jsx(
+    operatorOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedOperator), children: /* @__PURE__ */ jsx(
       Select,
       {
         isDisabled: isReadOnly,
@@ -702,7 +723,7 @@ function NestedSubFilterRow({
         value: subFilter.operator ?? null
       }
     ) }) : null,
-    operatorValue != null && !isEmpty && !isNested ? /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedValue}`, children: /* @__PURE__ */ jsx(
+    operatorValue != null && !isEmpty && !isNested ? /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedValue), children: /* @__PURE__ */ jsx(
       SearchFilterInputValueEditor,
       {
         config,
@@ -2088,5 +2109,5 @@ function useSearchFilterInputConfig(definitions, configName) {
 }
 
 export { SearchFilterInput, SearchFilterInputEditPopover, SearchFilterInputFilterEditor, SearchFilterInputTag, createSearchFilterInputConfig, formatFilterValue, useSearchFilterInputConfig, useSearchFilterInputSource };
-//# sourceMappingURL=chunk-Q3HMGFGI.js.map
-//# sourceMappingURL=chunk-Q3HMGFGI.js.map
+//# sourceMappingURL=chunk-7WQW7H3D.js.map
+//# sourceMappingURL=chunk-7WQW7H3D.js.map