@salesmind-ai/design-system 0.3.1 → 0.3.3

package/dist/chunk-HRENHNDJ.js

@@ -0,0 +1,211 @@
+import React2 from 'react';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import clsx from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+
+// src/components/Dialog/Dialog.tsx
+var Dialog = Dialog$1.Root;
+var DialogTrigger = Dialog$1.Trigger;
+var DialogClose = Dialog$1.Close;
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: clsx("ds-dialog__title", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog$1.Description,
+  {
+    ref,
+    className: clsx("ds-dialog__description", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogContent = React2.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "ds-dialog__backdrop" }),
+    /* @__PURE__ */ jsx(Dialog$1.Popup, { ref, className: clsx("ds-dialog__content", className), ...props, children })
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx("ds-dialog__header", className), ...props })
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx("ds-dialog__footer", className), ...props })
+);
+DialogFooter.displayName = "DialogFooter";
+var ToggleGroupContext = React2.createContext({
+  type: "single",
+  value: [],
+  onItemToggle: () => {
+  }
+});
+var ToggleGroup = React2.forwardRef(
+  ({ className, type, value, onValueChange, children, ...props }, ref) => {
+    const normalizedValue = React2.useMemo(() => {
+      if (value === void 0) return [];
+      return Array.isArray(value) ? value : [value];
+    }, [value]);
+    const onItemToggle = React2.useCallback(
+      (itemValue) => {
+        if (type === "single") {
+          const next = normalizedValue.includes(itemValue) ? "" : itemValue;
+          onValueChange?.(next);
+        } else {
+          const next = normalizedValue.includes(itemValue) ? normalizedValue.filter((v) => v !== itemValue) : [...normalizedValue, itemValue];
+          onValueChange?.(next);
+        }
+      },
+      [type, normalizedValue, onValueChange]
+    );
+    const ctx = React2.useMemo(
+      () => ({ type, value: normalizedValue, onItemToggle }),
+      [type, normalizedValue, onItemToggle]
+    );
+    return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx("ds-toggle-group", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = React2.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
+  const ctx = React2.useContext(ToggleGroupContext);
+  const pressed = ctx.value.includes(value);
+  const handleClick = (e) => {
+    ctx.onItemToggle(value);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-pressed": pressed,
+      className: clsx(
+        "ds-toggle-group__item",
+        pressed && "ds-toggle-group__item--pressed",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+var Slider = React2.forwardRef(
+  ({
+    className,
+    value: controlledValue,
+    defaultValue = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    onValueChange,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React2.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (e) => {
+      const next = Number(e.target.value);
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onValueChange?.(next);
+    };
+    const percentage = (value - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("ds-slider", disabled && "ds-slider--disabled", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ds-slider__range",
+              style: { width: `${percentage}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ds-slider__thumb",
+              role: "slider",
+              min,
+              max,
+              step,
+              value,
+              disabled,
+              onChange: handleChange,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": value
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var Tabs = React2.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tabs$1.Root,
+      {
+        ref,
+        className: clsx("ds-tabs", `ds-tabs--${orientation}`, className),
+        orientation,
+        ...props
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.List, { ref, className: clsx("ds-tabs__list", className), ...props });
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.Tab, { ref, className: clsx("ds-tabs__trigger", className), ...props, children });
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.Panel, { ref, className: clsx("ds-tabs__content", className), ...props });
+  }
+);
+TabsContent.displayName = "TabsContent";
+var Badge = React2.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: clsx("ds-badge", `ds-badge--${variant}`, className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+export { Badge, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Slider, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-HRENHNDJ.js.map

package/dist/chunk-HRENHNDJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/Dialog.tsx","../src/components/ToggleGroup/ToggleGroup.tsx","../src/components/Slider/Slider.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Badge/Badge.tsx"],"names":["React","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport clsx from 'clsx';\nimport './Dialog.css';\n\nexport const Dialog = BaseDialog.Root;\nexport const DialogTrigger = BaseDialog.Trigger;\nexport const DialogClose = BaseDialog.Close;\nexport const DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <BaseDialog.Title ref={ref} className={clsx('ds-dialog__title', className)} {...props} />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <BaseDialog.Description\n    ref={ref}\n    className={clsx('ds-dialog__description', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <BaseDialog.Portal>\n      <BaseDialog.Backdrop className=\"ds-dialog__backdrop\" />\n      <BaseDialog.Popup ref={ref} className={clsx('ds-dialog__content', className)} {...props}>\n        {children}\n      </BaseDialog.Popup>\n    </BaseDialog.Portal>\n  ),\n);\nDialogContent.displayName = 'DialogContent';\n\n/**\n * Semantic header section for a dialog, typically containing\n * DialogTitle and DialogDescription.\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={clsx('ds-dialog__header', className)} {...props} />\n  ),\n);\nDialogHeader.displayName = 'DialogHeader';\n\n/**\n * Footer section for dialog actions (confirm, cancel, etc.).\n * Renders children in a right-aligned flex row with standard gap.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={clsx('ds-dialog__footer', className)} {...props} />\n  ),\n);\nDialogFooter.displayName = 'DialogFooter';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './ToggleGroup.css';\n\n/* ==========================================================================\n   Context\n   ========================================================================== */\n\ninterface ToggleGroupContextValue {\n  type: 'single' | 'multiple';\n  value: string[];\n  onItemToggle: (itemValue: string) => void;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue>({\n  type: 'single',\n  value: [],\n  onItemToggle: () => {},\n});\n\n/* ==========================================================================\n   ToggleGroup (div — role=\"group\")\n   ========================================================================== */\n\nexport interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether a single or multiple items can be pressed at once. */\n  type: 'single' | 'multiple';\n  /** The controlled value(s). String for single, string[] for multiple. */\n  value?: string | string[];\n  /** Callback when value changes. */\n  onValueChange?: (value: string | string[]) => void;\n}\n\n/**\n * A group of toggle buttons where one or more can be selected.\n *\n * @example\n * <ToggleGroup type=\"single\" value=\"center\" onValueChange={setValue}>\n *   <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(\n  ({ className, type, value, onValueChange, children, ...props }, ref) => {\n    const normalizedValue = React.useMemo<string[]>(() => {\n      if (value === undefined) return [];\n      return Array.isArray(value) ? value : [value];\n    }, [value]);\n\n    const onItemToggle = React.useCallback(\n      (itemValue: string) => {\n        if (type === 'single') {\n          const next = normalizedValue.includes(itemValue) ? '' : itemValue;\n          onValueChange?.(next);\n        } else {\n          const next = normalizedValue.includes(itemValue)\n            ? normalizedValue.filter((v) => v !== itemValue)\n            : [...normalizedValue, itemValue];\n          onValueChange?.(next);\n        }\n      },\n      [type, normalizedValue, onValueChange],\n    );\n\n    const ctx = React.useMemo<ToggleGroupContextValue>(\n      () => ({ type, value: normalizedValue, onItemToggle }),\n      [type, normalizedValue, onItemToggle],\n    );\n\n    return (\n      <ToggleGroupContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={clsx('ds-toggle-group', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ToggleGroupContext.Provider>\n    );\n  },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n\n/* ==========================================================================\n   ToggleGroupItem (button)\n   ========================================================================== */\n\nexport interface ToggleGroupItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The value this item represents. */\n  value: string;\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  ToggleGroupItemProps\n>(({ className, value, children, onClick, ...props }, ref) => {\n  const ctx = React.useContext(ToggleGroupContext);\n  const pressed = ctx.value.includes(value);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    ctx.onItemToggle(value);\n    onClick?.(e);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={pressed}\n      className={clsx(\n        'ds-toggle-group__item',\n        pressed && 'ds-toggle-group__item--pressed',\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\n\nToggleGroupItem.displayName = 'ToggleGroupItem';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Slider.css';\n\nexport interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value (controlled). */\n  value?: number;\n  /** Default value (uncontrolled). */\n  defaultValue?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Maximum value. */\n  max?: number;\n  /** Step increment. */\n  step?: number;\n  /** Callback fired when the value changes. */\n  onValueChange?: (value: number) => void;\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n}\n\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n  (\n    {\n      className,\n      value: controlledValue,\n      defaultValue = 50,\n      min = 0,\n      max = 100,\n      step = 1,\n      onValueChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n\n    const isControlled = controlledValue !== undefined;\n    const value = isControlled ? controlledValue : uncontrolledValue;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const next = Number(e.target.value);\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onValueChange?.(next);\n    };\n\n    const percentage = ((value - min) / (max - min)) * 100;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-slider', disabled && 'ds-slider--disabled', className)}\n        {...props}\n      >\n        <div className=\"ds-slider__track\">\n          <div\n            className=\"ds-slider__range\"\n            style={{ width: `${percentage}%` }}\n          />\n        </div>\n        <input\n          type=\"range\"\n          className=\"ds-slider__thumb\"\n          role=\"slider\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={handleChange}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n        />\n      </div>\n    );\n  },\n);\n\nSlider.displayName = 'Slider';\n","import React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport clsx from 'clsx';\nimport './Tabs.css';\n\n/* ============================================================================\n   TABS ROOT\n   ============================================================================ */\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string | number;\n  value?: string | number;\n  onValueChange?: (value: string | number) => void;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  ({ className, orientation = 'horizontal', ...props }, ref) => {\n    return (\n      <BaseTabs.Root\n        ref={ref}\n        className={clsx('ds-tabs', `ds-tabs--${orientation}`, className)}\n        orientation={orientation}\n        {...props}\n      />\n    );\n  },\n);\n\nTabs.displayName = 'Tabs';\n\n/* ============================================================================\n   TABS LIST\n   ============================================================================ */\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  loop?: boolean;\n}\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  ({ className, ...props }, ref) => {\n    return <BaseTabs.List ref={ref} className={clsx('ds-tabs__list', className)} {...props} />;\n  },\n);\n\nTabsList.displayName = 'TabsList';\n\n/* ============================================================================\n   TABS TRIGGER\n   ============================================================================ */\n\nexport interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string | number;\n  disabled?: boolean;\n}\n\nexport const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <BaseTabs.Tab ref={ref} className={clsx('ds-tabs__trigger', className)} {...props}>\n        {children}\n      </BaseTabs.Tab>\n    );\n  },\n);\n\nTabsTrigger.displayName = 'TabsTrigger';\n\n/* ============================================================================\n   TABS CONTENT\n   ============================================================================ */\n\nexport interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string | number;\n}\n\nexport const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n  ({ className, ...props }, ref) => {\n    return <BaseTabs.Panel ref={ref} className={clsx('ds-tabs__content', className)} {...props} />;\n  },\n);\n\nTabsContent.displayName = 'TabsContent';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Badge.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant */\n  variant?: 'default' | 'secondary' | 'outline' | 'destructive';\n}\n\n/**\n * General-purpose badge for tags, labels, categories, and status indicators.\n *\n * For status-specific badges (success/warning/error/info), use `StatusBadge` instead.\n *\n * @example\n * <Badge>New</Badge>\n * <Badge variant=\"secondary\">Category</Badge>\n * <Badge variant=\"outline\">v2.1.0</Badge>\n * <Badge variant=\"destructive\">Breaking</Badge>\n */\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant = 'default', ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx('ds-badge', `ds-badge--${variant}`, className)}\n        {...props}\n      />\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n"]}