@salemcobalt/ui 0.2.0-rc.4 → 0.2.0-rc.6

package/dist/index.js

@@ -546,6 +546,9 @@ var iconNames = [
   "x"
 ];
 
+// src/components/IconButton/IconButton.tsx
+import { useRender as useRender2 } from "@base-ui/react/use-render";
+
 // src/components/Tooltip/Tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -583,7 +586,7 @@ var Provider = BaseTooltip.Provider;
 var Tooltip = Object.assign(TooltipBase, { Provider });
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function IconButton({
   label,
   children,
@@ -593,9 +596,11 @@ function IconButton({
   tooltipSide = "top",
   round = false,
   loading = false,
-  type = "button",
+  type,
   className,
   onClick,
+  render,
+  ref,
   ...rest
 }) {
   const handleClick = (event) => {
@@ -605,10 +610,13 @@ function IconButton({
     }
     onClick?.(event);
   };
-  const button = /* @__PURE__ */ jsxs7(
-    "button",
-    {
-      type,
+  const button = useRender2({
+    render,
+    ref,
+    defaultTagName: "button",
+    props: {
+      // `type` only means something on a real button; a rendered link keeps its own attributes.
+      type: render ? type : type ?? "button",
       className: cx("sc-button", "sc-icon-button", className),
       "data-variant": variant,
       "data-size": size,
@@ -618,19 +626,19 @@ function IconButton({
       "aria-label": label,
       onClick: handleClick,
       ...rest,
-      children: [
+      children: /* @__PURE__ */ jsxs7(Fragment2, { children: [
         /* @__PURE__ */ jsx8("span", { className: "sc-button__icon", "aria-hidden": "true", children }),
         loading ? /* @__PURE__ */ jsx8("span", { className: "sc-button__spinner", "aria-hidden": "true" }) : null
-      ]
+      ] })
     }
-  );
+  });
   if (!tooltip) return button;
   return /* @__PURE__ */ jsx8(Tooltip, { content: tooltip === true ? label : tooltip, side: tooltipSide, children: button });
 }
 
 // src/components/Menu/Menu.tsx
 import { Menu as BaseMenu } from "@base-ui/react/menu";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function Root2({ open, defaultOpen, onOpenChange, disabled, modal = true, children }) {
   return /* @__PURE__ */ jsx9(
     BaseMenu.Root,
@@ -670,7 +678,7 @@ function ItemBody({
   trailing,
   children
 }) {
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
     /* @__PURE__ */ jsx9("span", { className: "sc-menu__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx9("span", { className: "sc-menu__label", children }),
     trailing !== void 0 ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__trailing", children: trailing }) : null
@@ -857,9 +865,14 @@ function Textarea({
   className,
   rows = 3,
   resize = "vertical",
+  variant = "default",
   onValueChange,
+  spellCheck,
+  autoCorrect,
+  autoCapitalize,
   ...rest
 }) {
+  const code = variant === "code";
   return /* @__PURE__ */ jsx12(
     FieldShell,
     {
@@ -875,9 +888,19 @@ function Textarea({
       children: /* @__PURE__ */ jsx12(
         Field3.Control,
         {
-          render: /* @__PURE__ */ jsx12("textarea", { rows, ...rest }),
+          render: /* @__PURE__ */ jsx12(
+            "textarea",
+            {
+              rows,
+              spellCheck: spellCheck ?? (code ? false : void 0),
+              autoCorrect: autoCorrect ?? (code ? "off" : void 0),
+              autoCapitalize: autoCapitalize ?? (code ? "off" : void 0),
+              ...rest
+            }
+          ),
           className: "sc-input sc-textarea",
           "data-resize": resize,
+          "data-variant": code ? "code" : void 0,
           required,
           onValueChange: onValueChange ? (value) => onValueChange(value) : void 0
         }
@@ -888,6 +911,7 @@ function Textarea({
 
 // src/components/Select/Select.tsx
 import { Select as BaseSelect } from "@base-ui/react/select";
+import { useState } from "react";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function isGroup(entry) {
   return "options" in entry;
@@ -914,11 +938,27 @@ function Select({
   defaultValue,
   onValueChange,
   placeholder = "Choose\u2026",
+  clearable = false,
+  clearLabel = "Clear",
   readOnly,
   fullWidth = false,
   id
 }) {
   const items = options.flatMap((entry) => isGroup(entry) ? entry.options : [entry]);
+  const [internal, setInternal] = useState(defaultValue ?? null);
+  const controlled = value !== void 0;
+  const current = controlled ? value : internal;
+  const setValue = (next) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const canClear = clearable && current != null && !disabled && !readOnly;
+  const onTriggerKeyDown = (event) => {
+    if (canClear && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      setValue(null);
+    }
+  };
   return /* @__PURE__ */ jsx13(
     FieldShell,
     {
@@ -936,26 +976,39 @@ function Select({
         BaseSelect.Root,
         {
           items,
-          value,
-          defaultValue,
-          onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+          value: current,
+          onValueChange: (next) => setValue(next),
           disabled,
           required,
           readOnly,
           children: [
-            /* @__PURE__ */ jsxs11(
-              BaseSelect.Trigger,
-              {
-                id,
-                className: "sc-select",
-                "data-size": size,
-                "data-full-width": fullWidth || void 0,
-                children: [
-                  /* @__PURE__ */ jsx13(BaseSelect.Value, { className: "sc-select__value", placeholder }),
-                  /* @__PURE__ */ jsx13(BaseSelect.Icon, { className: "sc-select__icon", children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) })
-                ]
-              }
-            ),
+            /* @__PURE__ */ jsxs11("span", { className: "sc-select__wrap", "data-full-width": fullWidth || void 0, children: [
+              /* @__PURE__ */ jsxs11(
+                BaseSelect.Trigger,
+                {
+                  id,
+                  className: "sc-select",
+                  "data-size": size,
+                  "data-full-width": fullWidth || void 0,
+                  "data-clearable": canClear || void 0,
+                  onKeyDown: onTriggerKeyDown,
+                  children: [
+                    /* @__PURE__ */ jsx13(BaseSelect.Value, { className: "sc-select__value", placeholder }),
+                    /* @__PURE__ */ jsx13(BaseSelect.Icon, { className: "sc-select__icon", children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) })
+                  ]
+                }
+              ),
+              canClear ? /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  className: "sc-select__clear",
+                  "aria-label": clearLabel,
+                  onClick: () => setValue(null),
+                  children: /* @__PURE__ */ jsx13(XIcon, { size: "sm" })
+                }
+              ) : null
+            ] }),
             /* @__PURE__ */ jsx13(BaseSelect.Portal, { children: /* @__PURE__ */ jsx13(
               BaseSelect.Positioner,
               {
@@ -1055,7 +1108,7 @@ function Switch({
 
 // src/components/Tabs/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function Root3({ className, onValueChange, ...rest }) {
   return /* @__PURE__ */ jsx16(
     BaseTabs.Root,
@@ -1076,7 +1129,7 @@ function Tab({ icon, count, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs14(BaseTabs.Tab, { className: cx("sc-tabs__tab", className), ...rest, children: [
     icon ? /* @__PURE__ */ jsx16("span", { className: "sc-tabs__icon", "aria-hidden": "true", children: icon }) : null,
     /* @__PURE__ */ jsx16("span", { className: "sc-tabs__label", children }),
-    count != null ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    count != null ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
       " ",
       /* @__PURE__ */ jsx16("span", { className: "sc-tabs__count", children: count })
     ] }) : null
@@ -1108,13 +1161,14 @@ function Separator2({ className, ...rest }) {
   return /* @__PURE__ */ jsx17(BaseToolbar.Separator, { className: cx("sc-toolbar__separator", className), ...rest });
 }
 var Button2 = BaseToolbar.Button;
+var Link = BaseToolbar.Link;
 function Spacer({ className }) {
   return /* @__PURE__ */ jsx17("div", { className: cx("sc-toolbar__spacer", className), "aria-hidden": "true" });
 }
-var Toolbar = { Root: Root4, Group: Group2, Separator: Separator2, Button: Button2, Spacer };
+var Toolbar = { Root: Root4, Group: Group2, Separator: Separator2, Button: Button2, Link, Spacer };
 
 // src/components/Banner/Banner.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var toneIcons = {
   info: /* @__PURE__ */ jsx18(InfoIcon, {}),
@@ -1136,7 +1190,7 @@ function Banner({
   children,
   ...rest
 }) {
-  const [dismissed, setDismissed] = useState(false);
+  const [dismissed, setDismissed] = useState2(false);
   const visible = open ?? !dismissed;
   if (!visible) return null;
   const glyph = icon === false ? null : icon ?? toneIcons[tone];
@@ -1435,7 +1489,7 @@ var Table = { Root: Root5, Caption, Head, Body: Body2, Foot, Row, Header, Cell }
 
 // src/components/Stat/Stat.tsx
 import { createElement as createElement5 } from "react";
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var trendIcons = {
   up: /* @__PURE__ */ jsx22(ArrowUpIcon, { size: "xs" }),
   down: /* @__PURE__ */ jsx22(ArrowDownIcon, { size: "xs" }),
@@ -1463,7 +1517,7 @@ function Stat({
       "data-size": size,
       ...rest
     },
-    /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsxs19(Fragment5, { children: [
       /* @__PURE__ */ jsx22("div", { className: "sc-stat__label", children: label }),
       icon ? /* @__PURE__ */ jsx22("span", { className: "sc-stat__icon", "aria-hidden": "true", children: icon }) : null,
       /* @__PURE__ */ jsx22("div", { className: "sc-stat__value", children: value }),
@@ -1480,6 +1534,206 @@ function Stat({
   );
 }
 
+// src/components/Chip/Chip.tsx
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function Chip({
+  children,
+  icon,
+  tone = "neutral",
+  size = "md",
+  selected = false,
+  onClick,
+  onRemove,
+  removeLabel,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const interactive = onClick !== void 0;
+  const removeName = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+  const handleRemoveKey = (event) => {
+    if (onRemove && !disabled && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      onRemove();
+    }
+  };
+  const shared = {
+    className: cx("sc-chip", className),
+    "data-tone": tone,
+    "data-size": size,
+    "data-selected": selected || void 0,
+    "data-removable": onRemove ? "" : void 0,
+    "data-disabled": disabled || void 0
+  };
+  const body = /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    icon ? /* @__PURE__ */ jsx23("span", { className: "sc-chip__icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx23("span", { className: "sc-chip__label", children })
+  ] });
+  const remove = onRemove ? /* @__PURE__ */ jsx23(
+    "button",
+    {
+      type: "button",
+      className: "sc-chip__remove",
+      "aria-label": removeName,
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onRemove();
+      },
+      onKeyDown: handleRemoveKey,
+      children: /* @__PURE__ */ jsx23(XIcon, { size: "xs" })
+    }
+  ) : null;
+  if (interactive) {
+    return /* @__PURE__ */ jsxs20("span", { ...shared, ...rest, children: [
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          type: "button",
+          className: "sc-chip__action",
+          "aria-pressed": selected,
+          disabled,
+          onClick,
+          onKeyDown: handleRemoveKey,
+          children: body
+        }
+      ),
+      remove
+    ] });
+  }
+  return /* @__PURE__ */ jsxs20("span", { ...shared, ...rest, children: [
+    body,
+    remove
+  ] });
+}
+
+// src/components/Disclosure/Disclosure.tsx
+import {
+  useEffect,
+  useRef,
+  useState as useState3
+} from "react";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function Disclosure({
+  summary,
+  summaryOpen,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  previewLines,
+  summaryPosition,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const controlled = open !== void 0;
+  const [internal, setInternal] = useState3(defaultOpen);
+  const isOpen = controlled ? open : internal;
+  const inner = useRef(null);
+  useEffect(() => {
+    if (controlled && inner.current && inner.current.open !== open) inner.current.open = open;
+  });
+  const onToggle = (event) => {
+    const next = event.currentTarget.open;
+    if (next === isOpen) return;
+    if (!controlled) setInternal(next);
+    onOpenChange?.(next);
+  };
+  const position = summaryPosition ?? (previewLines ? "end" : "start");
+  return /* @__PURE__ */ jsxs21(
+    "details",
+    {
+      ref: (node) => {
+        inner.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cx("sc-disclosure", className),
+      open: isOpen,
+      onToggle,
+      "data-summary-position": position,
+      "data-preview": previewLines ? "" : void 0,
+      style: previewLines ? { ...style, "--_lines": previewLines } : style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs21("summary", { className: "sc-disclosure__summary", children: [
+          /* @__PURE__ */ jsx24(ChevronDownIcon, { className: "sc-disclosure__chevron" }),
+          /* @__PURE__ */ jsx24("span", { className: "sc-disclosure__summary-text", children: isOpen && summaryOpen != null ? summaryOpen : summary })
+        ] }),
+        /* @__PURE__ */ jsx24("div", { className: "sc-disclosure__content", children })
+      ]
+    }
+  );
+}
+
+// src/components/EmptyState/EmptyState.tsx
+import { createElement as createElement6 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function EmptyState({
+  title,
+  description,
+  icon,
+  children,
+  size = "md",
+  as = "div",
+  className,
+  ...rest
+}) {
+  return createElement6(
+    as,
+    { className: cx("sc-empty-state", className), "data-size": size, ...rest },
+    icon ? /* @__PURE__ */ jsx25("span", { className: "sc-empty-state__icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx25("p", { className: "sc-empty-state__title", children: title }),
+    description != null ? /* @__PURE__ */ jsx25("p", { className: "sc-empty-state__description", children: description }) : null,
+    children != null ? /* @__PURE__ */ jsx25("div", { className: "sc-empty-state__actions", children }) : null
+  );
+}
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  still = false,
+  className,
+  style,
+  ...rest
+}) {
+  const size = {
+    ...style,
+    ...width !== void 0 ? { inlineSize: width } : {},
+    ...height !== void 0 ? { blockSize: height } : {}
+  };
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx26("span", { className: cx("sc-skeleton-lines", className), "aria-hidden": "true", style, ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx26(
+      "span",
+      {
+        className: "sc-skeleton",
+        "data-variant": "text",
+        "data-still": still || void 0,
+        "data-last": i === lines - 1 || void 0,
+        style: width !== void 0 ? { inlineSize: width } : void 0
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: cx("sc-skeleton", className),
+      "data-variant": variant,
+      "data-still": still || void 0,
+      "aria-hidden": "true",
+      style: size,
+      ...rest
+    }
+  );
+}
+
 // src/index.ts
 var version = "0.1.1";
 export {
@@ -1501,14 +1755,17 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronUpIcon,
+  Chip,
   CircleCheckIcon,
   CircleXIcon,
   ClockIcon,
   CopyIcon,
   Dialog,
+  Disclosure,
   DocumentIcon,
   DownloadIcon,
   EditIcon,
+  EmptyState,
   ExternalLinkIcon,
   EyeIcon,
   FilterIcon,
@@ -1538,6 +1795,7 @@ export {
   SearchIcon,
   Select,
   SettingsIcon,
+  Skeleton,
   Spinner,
   Stack,
   StarIcon,