@salemcobalt/ui 0.2.0-rc.0 → 0.2.0-rc.1

package/dist/index.js

@@ -737,6 +737,562 @@ var Menu = {
   Separator
 };
 
+// src/components/Input/Input.tsx
+import { Field as Field2 } from "@base-ui/react/field";
+
+// src/components/Field/FieldShell.tsx
+import { Field } from "@base-ui/react/field";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function FieldShell({
+  label,
+  hideLabel = false,
+  description,
+  error,
+  invalid = false,
+  required = false,
+  disabled = false,
+  name,
+  size = "md",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs9(
+    Field.Root,
+    {
+      className: cx("sc-field", className),
+      name,
+      disabled,
+      invalid: invalid || error != null,
+      "data-size": size,
+      children: [
+        /* @__PURE__ */ jsxs9(Field.Label, { className: cx("sc-field__label", hideLabel && "sc-visually-hidden"), children: [
+          label,
+          required ? /* @__PURE__ */ jsx10("span", { className: "sc-field__required", "aria-hidden": "true", children: "*" }) : null
+        ] }),
+        children,
+        description != null ? /* @__PURE__ */ jsx10(Field.Description, { className: "sc-field__description", children: description }) : null,
+        error != null ? /* @__PURE__ */ jsx10(Field.Error, { className: "sc-field__error", match: true, children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Input/Input.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function Input({
+  label,
+  hideLabel,
+  description,
+  error,
+  invalid,
+  required,
+  disabled,
+  name,
+  size,
+  className,
+  iconStart,
+  iconEnd,
+  onValueChange,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx11(
+    FieldShell,
+    {
+      label,
+      hideLabel,
+      description,
+      error,
+      invalid,
+      required,
+      disabled,
+      name,
+      size,
+      className,
+      children: /* @__PURE__ */ jsxs10(
+        "span",
+        {
+          className: "sc-input-wrap",
+          "data-icon-start": iconStart ? "" : void 0,
+          "data-icon-end": iconEnd ? "" : void 0,
+          children: [
+            iconStart ? /* @__PURE__ */ jsx11("span", { className: "sc-input__icon", "data-side": "start", "aria-hidden": "true", children: iconStart }) : null,
+            /* @__PURE__ */ jsx11(
+              Field2.Control,
+              {
+                className: "sc-input",
+                required,
+                onValueChange: onValueChange ? (value) => onValueChange(value) : void 0,
+                ...rest
+              }
+            ),
+            iconEnd ? /* @__PURE__ */ jsx11("span", { className: "sc-input__icon", "data-side": "end", "aria-hidden": "true", children: iconEnd }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Textarea/Textarea.tsx
+import { Field as Field3 } from "@base-ui/react/field";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Textarea({
+  label,
+  hideLabel,
+  description,
+  error,
+  invalid,
+  required,
+  disabled,
+  name,
+  className,
+  rows = 3,
+  resize = "vertical",
+  onValueChange,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx12(
+    FieldShell,
+    {
+      label,
+      hideLabel,
+      description,
+      error,
+      invalid,
+      required,
+      disabled,
+      name,
+      className,
+      children: /* @__PURE__ */ jsx12(
+        Field3.Control,
+        {
+          render: /* @__PURE__ */ jsx12("textarea", { rows, ...rest }),
+          className: "sc-input sc-textarea",
+          "data-resize": resize,
+          required,
+          onValueChange: onValueChange ? (value) => onValueChange(value) : void 0
+        }
+      )
+    }
+  );
+}
+
+// src/components/Select/Select.tsx
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function isGroup(entry) {
+  return "options" in entry;
+}
+function Option({ option }) {
+  return /* @__PURE__ */ jsxs11(BaseSelect.Item, { value: option.value, disabled: option.disabled, className: "sc-select__item", children: [
+    /* @__PURE__ */ jsx13(BaseSelect.ItemIndicator, { className: "sc-select__indicator", children: /* @__PURE__ */ jsx13(CheckIcon, { size: "sm" }) }),
+    /* @__PURE__ */ jsx13(BaseSelect.ItemText, { className: "sc-select__item-text", children: option.label })
+  ] });
+}
+function Select({
+  label,
+  hideLabel,
+  description,
+  error,
+  invalid,
+  required,
+  disabled,
+  name,
+  size = "md",
+  className,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Choose\u2026",
+  readOnly,
+  fullWidth = false,
+  id
+}) {
+  const items = options.flatMap((entry) => isGroup(entry) ? entry.options : [entry]);
+  return /* @__PURE__ */ jsx13(
+    FieldShell,
+    {
+      label,
+      hideLabel,
+      description,
+      error,
+      invalid,
+      required,
+      disabled,
+      name,
+      size,
+      className,
+      children: /* @__PURE__ */ jsxs11(
+        BaseSelect.Root,
+        {
+          items,
+          value,
+          defaultValue,
+          onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+          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__ */ jsx13(BaseSelect.Portal, { children: /* @__PURE__ */ jsx13(
+              BaseSelect.Positioner,
+              {
+                className: "sc-select__positioner",
+                sideOffset: 4,
+                alignItemWithTrigger: false,
+                children: /* @__PURE__ */ jsx13(BaseSelect.Popup, { className: "sc-select__popup", children: /* @__PURE__ */ jsx13(BaseSelect.List, { children: options.map(
+                  (entry, i) => isGroup(entry) ? /* @__PURE__ */ jsxs11(BaseSelect.Group, { className: "sc-select__group", children: [
+                    /* @__PURE__ */ jsx13(BaseSelect.GroupLabel, { className: "sc-select__group-label", children: entry.label }),
+                    entry.options.map((option) => /* @__PURE__ */ jsx13(Option, { option }, option.value))
+                  ] }, i) : /* @__PURE__ */ jsx13(Option, { option: entry }, entry.value)
+                ) }) })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Checkbox/Checkbox.tsx
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { useId } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function Checkbox({
+  label,
+  description,
+  onCheckedChange,
+  className,
+  disabled,
+  ...rest
+}) {
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsxs12("div", { className: cx("sc-choice", className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs12("label", { className: "sc-choice__control", children: [
+      /* @__PURE__ */ jsx14(
+        BaseCheckbox.Root,
+        {
+          className: "sc-checkbox",
+          disabled,
+          "aria-describedby": description != null ? descriptionId : void 0,
+          onCheckedChange: onCheckedChange ? (checked) => onCheckedChange(checked) : void 0,
+          ...rest,
+          children: /* @__PURE__ */ jsxs12(BaseCheckbox.Indicator, { className: "sc-checkbox__indicator", children: [
+            /* @__PURE__ */ jsx14(CheckIcon, { size: "sm", className: "sc-checkbox__check" }),
+            /* @__PURE__ */ jsx14(MinusIcon, { size: "sm", className: "sc-checkbox__dash" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx14("span", { className: "sc-choice__label", children: label })
+    ] }),
+    description != null ? /* @__PURE__ */ jsx14("span", { className: "sc-choice__description", id: descriptionId, children: description }) : null
+  ] });
+}
+
+// src/components/Switch/Switch.tsx
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { useId as useId2 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Switch({
+  label,
+  description,
+  onCheckedChange,
+  labelPosition = "end",
+  className,
+  disabled,
+  ...rest
+}) {
+  const descriptionId = useId2();
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cx("sc-choice", className),
+      "data-disabled": disabled || void 0,
+      "data-label-position": labelPosition,
+      children: [
+        /* @__PURE__ */ jsxs13("label", { className: "sc-choice__control", children: [
+          /* @__PURE__ */ jsx15(
+            BaseSwitch.Root,
+            {
+              className: "sc-switch",
+              disabled,
+              "aria-describedby": description != null ? descriptionId : void 0,
+              onCheckedChange: onCheckedChange ? (checked) => onCheckedChange(checked) : void 0,
+              ...rest,
+              children: /* @__PURE__ */ jsx15(BaseSwitch.Thumb, { className: "sc-switch__thumb" })
+            }
+          ),
+          /* @__PURE__ */ jsx15("span", { className: "sc-choice__label", children: label })
+        ] }),
+        description != null ? /* @__PURE__ */ jsx15("span", { className: "sc-choice__description", id: descriptionId, children: description }) : null
+      ]
+    }
+  );
+}
+
+// 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";
+function Root3({ className, onValueChange, ...rest }) {
+  return /* @__PURE__ */ jsx16(
+    BaseTabs.Root,
+    {
+      className: cx("sc-tabs", className),
+      onValueChange: onValueChange ? (value) => onValueChange(String(value)) : void 0,
+      ...rest
+    }
+  );
+}
+function List({ fill = false, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs14(BaseTabs.List, { className: cx("sc-tabs__list", className), "data-fill": fill || void 0, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx16(BaseTabs.Indicator, { className: "sc-tabs__indicator" })
+  ] });
+}
+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: [
+      " ",
+      /* @__PURE__ */ jsx16("span", { className: "sc-tabs__count", children: count })
+    ] }) : null
+  ] });
+}
+function Panel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16(BaseTabs.Panel, { className: cx("sc-tabs__panel", className), ...rest });
+}
+var Tabs = { Root: Root3, List, Tab, Panel };
+
+// src/components/Toolbar/Toolbar.tsx
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Root4({ wrap = true, gap = "xs", className, ...rest }) {
+  return /* @__PURE__ */ jsx17(
+    BaseToolbar.Root,
+    {
+      className: cx("sc-toolbar", className),
+      "data-wrap": wrap || void 0,
+      "data-gap": gap,
+      ...rest
+    }
+  );
+}
+function Group2({ gap = "2xs", className, ...rest }) {
+  return /* @__PURE__ */ jsx17(BaseToolbar.Group, { className: cx("sc-toolbar__group", className), "data-gap": gap, ...rest });
+}
+function Separator2({ className, ...rest }) {
+  return /* @__PURE__ */ jsx17(BaseToolbar.Separator, { className: cx("sc-toolbar__separator", className), ...rest });
+}
+var Button2 = BaseToolbar.Button;
+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 };
+
+// src/components/Banner/Banner.tsx
+import { useState } from "react";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+var toneIcons = {
+  info: /* @__PURE__ */ jsx18(InfoIcon, {}),
+  success: /* @__PURE__ */ jsx18(CircleCheckIcon, {}),
+  warning: /* @__PURE__ */ jsx18(WarningIcon, {}),
+  danger: /* @__PURE__ */ jsx18(CircleXIcon, {}),
+  neutral: null
+};
+function Banner({
+  tone = "info",
+  icon,
+  action,
+  dismissible = false,
+  onDismiss,
+  open,
+  dismissLabel = "Dismiss",
+  role,
+  className,
+  children,
+  ...rest
+}) {
+  const [dismissed, setDismissed] = useState(false);
+  const visible = open ?? !dismissed;
+  if (!visible) return null;
+  const glyph = icon === false ? null : icon ?? toneIcons[tone];
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      role: role ?? (tone === "warning" || tone === "danger" ? "alert" : "status"),
+      className: cx("sc-banner", className),
+      "data-tone": tone,
+      ...rest,
+      children: [
+        glyph ? /* @__PURE__ */ jsx18("span", { className: "sc-banner__icon", "aria-hidden": "true", children: glyph }) : null,
+        /* @__PURE__ */ jsx18("div", { className: "sc-banner__body", children }),
+        action ? /* @__PURE__ */ jsx18("div", { className: "sc-banner__action", children: action }) : null,
+        dismissible ? /* @__PURE__ */ jsx18(
+          IconButton,
+          {
+            label: dismissLabel,
+            size: "sm",
+            className: "sc-banner__dismiss",
+            onClick: () => {
+              setDismissed(true);
+              onDismiss?.();
+            },
+            children: /* @__PURE__ */ jsx18(XIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/Spinner/Spinner.tsx
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function Spinner({
+  size = "md",
+  label = "Loading",
+  decorative = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx19(
+    "span",
+    {
+      className: cx("sc-spinner", className),
+      "data-size": size,
+      role: decorative ? void 0 : "status",
+      "aria-label": decorative ? void 0 : label,
+      "aria-hidden": decorative || void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxs16(
+        "svg",
+        {
+          viewBox: "0 0 16 16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: [
+            /* @__PURE__ */ jsx19("circle", { className: "sc-spinner__track", cx: "8", cy: "8", r: "6.25" }),
+            /* @__PURE__ */ jsx19("circle", { className: "sc-spinner__arc", cx: "8", cy: "8", r: "6.25", strokeLinecap: "round" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Progress/Progress.tsx
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function Progress({
+  value,
+  max = 100,
+  min = 0,
+  label,
+  valueText,
+  showValue = false,
+  tone = "accent",
+  size = "md",
+  variant = "bar",
+  className,
+  ...rest
+}) {
+  const current = value ?? null;
+  const hasValueText = valueText != null || showValue && current !== null;
+  return /* @__PURE__ */ jsxs17(
+    BaseProgress.Root,
+    {
+      value: current,
+      max,
+      min,
+      getAriaValueText: (formatted) => typeof valueText === "string" ? valueText : formatted ?? "",
+      className: cx("sc-progress", className),
+      "data-variant": variant,
+      "data-tone": tone,
+      "data-size": size,
+      ...rest,
+      children: [
+        variant === "inline" ? /* @__PURE__ */ jsx20(Spinner, { size: "sm", decorative: true, className: "sc-progress__spinner" }) : null,
+        label != null ? /* @__PURE__ */ jsx20(BaseProgress.Label, { className: "sc-progress__label", children: label }) : null,
+        hasValueText ? /* @__PURE__ */ jsx20(BaseProgress.Value, { className: "sc-progress__value", children: (formatted) => valueText != null ? valueText : formatted }) : null,
+        variant === "bar" ? /* @__PURE__ */ jsx20(BaseProgress.Track, { className: "sc-progress__track", children: /* @__PURE__ */ jsx20(BaseProgress.Indicator, { className: "sc-progress__indicator" }) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Heading/Heading.tsx
+import { createElement as createElement3 } from "react";
+var sizeByLevel = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "sm"
+};
+function Heading({
+  level = 2,
+  size,
+  as,
+  tone = "default",
+  truncate = false,
+  className,
+  ...rest
+}) {
+  return createElement3(as ?? `h${level}`, {
+    className: cx("sc-heading", className),
+    "data-size": size ?? sizeByLevel[level],
+    "data-tone": tone,
+    "data-truncate": truncate || void 0,
+    ...rest
+  });
+}
+
+// src/components/Text/Text.tsx
+import { createElement as createElement4 } from "react";
+function Text({
+  as = "p",
+  size = "sm",
+  tone = "default",
+  weight = "regular",
+  align,
+  truncate = false,
+  numeric = false,
+  className,
+  style,
+  ...rest
+}) {
+  const clamp = typeof truncate === "number" ? truncate : void 0;
+  return createElement4(as, {
+    className: cx("sc-text", className),
+    "data-size": size,
+    "data-tone": tone,
+    "data-weight": weight,
+    "data-align": align,
+    "data-truncate": truncate === true ? "" : clamp !== void 0 ? "clamp" : void 0,
+    "data-numeric": numeric || void 0,
+    style: clamp !== void 0 ? { ...style, "--sc-text-lines": clamp } : style,
+    ...rest
+  });
+}
+
 // src/index.ts
 var version = "0.1.1";
 export {
@@ -744,12 +1300,14 @@ export {
   ArrowLeftIcon,
   ArrowRightIcon,
   Badge,
+  Banner,
   BellIcon,
   BriefcaseIcon,
   Button,
   CalendarIcon,
   Card,
   CheckIcon,
+  Checkbox,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -766,11 +1324,13 @@ export {
   EyeIcon,
   FilterIcon,
   FlagIcon,
+  Heading,
   Icon,
   IconButton,
   InboxIcon,
   InfoIcon,
   Inline,
+  Input,
   Kbd,
   LinkIcon,
   MailIcon,
@@ -784,14 +1344,22 @@ export {
   PauseIcon,
   PlayIcon,
   PlusIcon,
+  Progress,
   RefreshIcon,
   SearchIcon,
+  Select,
   SettingsIcon,
+  Spinner,
   Stack,
   StarIcon,
   SunIcon,
+  Switch,
+  Tabs,
+  Text,
+  Textarea,
   ThumbsDownIcon,
   ThumbsUpIcon,
+  Toolbar,
   Tooltip,
   TrashIcon,
   UndoIcon,