@salesmind-ai/design-system 0.3.4 → 0.3.6

package/dist/chunk-UFAJY2DM.js

@@ -0,0 +1,62 @@
+import { Container } from './chunk-HN4PHABT.js';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SectionHeader = forwardRef(
+  ({ title, subtitle, eyebrow, align = "center", className, ...props }, ref) => {
+    if (!title && !subtitle && !eyebrow) return null;
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: clsx("ds-section-header", `ds-section-header--${align}`, className),
+        ...props,
+        children: [
+          eyebrow && /* @__PURE__ */ jsx("span", { className: "ds-section-header__eyebrow", children: eyebrow }),
+          title && /* @__PURE__ */ jsx("h2", { className: "ds-section-header__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "ds-section-header__subtitle", children: subtitle })
+        ]
+      }
+    );
+  }
+);
+SectionHeader.displayName = "SectionHeader";
+var SectionShell = forwardRef(
+  ({
+    className,
+    children,
+    background = "default",
+    padding = "md",
+    containerSize,
+    containerFluid = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: clsx(
+          "ds-section",
+          `ds-section--bg-${background}`,
+          `ds-section--padding-${padding}`,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Container,
+          {
+            size: containerSize === "fluid" ? "full" : containerSize,
+            fluid: containerFluid || containerSize === "fluid",
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SectionShell.displayName = "SectionShell";
+
+export { SectionHeader, SectionShell };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-UFAJY2DM.js.map

package/dist/chunk-UFAJY2DM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SectionShell/SectionShell.tsx"],"names":[],"mappings":";;;;;AAAA,SAAgB,kBAAkC;AAClD,OAAO,UAAU;AAoBX,SAKc,KALd;AALC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,OAAO,UAAU,SAAS,QAAQ,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC5E,QAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAS,QAAO;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,qBAAqB,sBAAsB,KAAK,IAAI,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEH;AAAA,qBAAW,oBAAC,UAAK,WAAU,8BAA8B,mBAAQ;AAAA,UACjE,SAAS,oBAAC,QAAG,WAAU,4BAA4B,iBAAM;AAAA,UACzD,YAAY,oBAAC,OAAE,WAAU,+BAA+B,oBAAS;AAAA;AAAA;AAAA,IACpE;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAcrB,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,UAAU;AAAA,UAC5B,uBAAuB,OAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,kBAAkB,UAAU,SAAU;AAAA,YAC5C,OAAO,kBAAkB,kBAAkB;AAAA,YAE1C;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { Container } from '../LayoutPrimitives';\nimport './SectionShell.css';\n\n/* ============================================================================\n   Section Header Component\n   ============================================================================ */\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(\n  ({ title, subtitle, eyebrow, align = 'center', className, ...props }, ref) => {\n    if (!title && !subtitle && !eyebrow) return null;\n\n    return (\n      <header\n        ref={ref}\n        className={clsx('ds-section-header', `ds-section-header--${align}`, className)}\n        {...props}\n      >\n        {eyebrow && <span className=\"ds-section-header__eyebrow\">{eyebrow}</span>}\n        {title && <h2 className=\"ds-section-header__title\">{title}</h2>}\n        {subtitle && <p className=\"ds-section-header__subtitle\">{subtitle}</p>}\n      </header>\n    );\n  },\n);\nSectionHeader.displayName = 'SectionHeader';\n\n/* ============================================================================\n   Section Shell Component\n   ============================================================================ */\n\nexport interface SectionShellProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  background?: 'default' | 'muted' | 'brand' | 'transparent';\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  containerSize?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid'; // Maps to Container max-width\n  containerFluid?: boolean;\n}\n\nexport const SectionShell = forwardRef<HTMLDivElement, SectionShellProps>(\n  (\n    {\n      className,\n      children,\n      background = 'default',\n      padding = 'md',\n      containerSize,\n      containerFluid = false,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          'ds-section',\n          `ds-section--bg-${background}`,\n          `ds-section--padding-${padding}`,\n          className,\n        )}\n        {...props}\n      >\n        <Container\n          size={containerSize === 'fluid' ? 'full' : (containerSize as 'sm' | 'md' | 'lg' | 'xl' | undefined)}\n          fluid={containerFluid || containerSize === 'fluid'}\n        >\n          {children}\n        </Container>\n      </section>\n    );\n  },\n);\nSectionShell.displayName = 'SectionShell';\n"]}

package/dist/chunk-VC5LMUVQ.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var react = require('react');
+
+// src/web/analytics/use-analytics.tsx
+var AnalyticsContext = react.createContext(null);
+
+// src/web/analytics/use-analytics.tsx
+var NOOP_VALUE = {
+  track: () => {
+  }
+};
+function useAnalytics() {
+  return react.useContext(AnalyticsContext) ?? NOOP_VALUE;
+}
+
+exports.AnalyticsContext = AnalyticsContext;
+exports.useAnalytics = useAnalytics;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-VC5LMUVQ.cjs.map

package/dist/chunk-VC5LMUVQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/web/analytics/use-analytics.tsx","../src/web/analytics/analytics-context.ts"],"names":[],"mappings":";AACA,SAAS,kBAAkB;;;ACD3B,SAAS,qBAAqB;AAsBvB,IAAM,mBAAmB,cAA4C,IAAI;;;ADjBhF,IAAM,aAAoC;AAAA,EACxC,OAAO,MAAM;AAAA,EAEb;AACF;AAaO,SAAS,eAAsC;AACpD,SAAO,WAAW,gBAAgB,KAAK;AACzC","sourcesContent":["\"use client\";\nimport { useContext } from 'react';\nimport { AnalyticsContext } from './analytics-context';\nimport type { AnalyticsContextValue } from './analytics-context';\n\nconst NOOP_VALUE: AnalyticsContextValue = {\n  track: () => {\n    /* no-op when no provider is present */\n  },\n};\n\n/**\n * Access the analytics tracking interface.\n * Returns a no-op tracker when used outside an AnalyticsProvider —\n * components never need to guard against missing providers.\n *\n * @example\n * ```tsx\n * const { track } = useAnalytics();\n * track('form_submit', { form: 'lead-capture', email: true });\n * ```\n */\nexport function useAnalytics(): AnalyticsContextValue {\n  return useContext(AnalyticsContext) ?? NOOP_VALUE;\n}\n","import { createContext } from 'react';\n\n/* ============================================================================\n   ANALYTICS CONTEXT — Shared types & context object\n   ============================================================================ */\n\n/** Arbitrary properties bag attached to every analytics event. */\nexport type AnalyticsEventProps = Record<string, string | number | boolean | undefined>;\n\n/** Signature for the track function provided by AnalyticsProvider. */\nexport type TrackFn = (event: string, props?: AnalyticsEventProps) => void;\n\n/** Value exposed by the AnalyticsContext. */\nexport interface AnalyticsContextValue {\n  track: TrackFn;\n}\n\n/**\n * React context for analytics event tracking.\n * When no provider is present the value is `null` — consumers should\n * fall back to a no-op so components remain safe in Storybook / tests / SSR.\n */\nexport const AnalyticsContext = createContext<AnalyticsContextValue | null>(null);\n"]}

package/dist/chunk-VM7WFMKI.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/Avatar/Avatar.tsx
+var AvatarContext = React__default.default.createContext({
+  hasImage: false,
+  imageError: false,
+  onImageError: () => {
+  }
+});
+var Avatar = React__default.default.forwardRef(
+  ({ size = "md", className, children, ...props }, ref) => {
+    const [imageError, setImageError] = React__default.default.useState(false);
+    const [hasImage, setHasImage] = React__default.default.useState(false);
+    React__default.default.useEffect(() => {
+      let found = false;
+      React__default.default.Children.forEach(children, (child) => {
+        if (React__default.default.isValidElement(child) && child.type === AvatarImage) {
+          found = true;
+        }
+      });
+      setHasImage(found);
+    }, [children]);
+    const onImageError = React__default.default.useCallback(() => {
+      setImageError(true);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: clsx__default.default("ds-avatar", `ds-avatar--${size}`, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React__default.default.forwardRef(({ className, onError, ...props }, ref) => {
+  const { imageError, onImageError } = React__default.default.useContext(AvatarContext);
+  const handleError = (e) => {
+    onImageError();
+    onError?.(e);
+  };
+  if (imageError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      className: clsx__default.default("ds-avatar__image", className),
+      onError: handleError,
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  const { hasImage, imageError } = React__default.default.useContext(AvatarContext);
+  if (hasImage && !imageError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx__default.default("ds-avatar__fallback", className), ...props });
+});
+AvatarFallback.displayName = "AvatarFallback";
+
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-VM7WFMKI.cjs.map

package/dist/chunk-VM7WFMKI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AA2DT;AA9CR,IAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC5D,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC;AAoBM,IAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvD,UAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AACxD,UAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAGpD,UAAM,UAAU,MAAM;AACpB,UAAI,QAAQ;AACZ,YAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,YAAI,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,aAAa;AAC7D,kBAAQ;AAAA,QACV;AAAA,MACF,CAAC;AACD,kBAAY,KAAK;AAAA,IACnB,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,oBAAc,IAAI;AAAA,IACpB,GAAG,CAAC,CAAC;AAEL,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,UAAU,YAAY,aAAa,GAClE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,aAAa,cAAc,IAAI,IAAI,SAAS;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAMd,IAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,SAAS,GAAG,MAAM,GAAG,QAAQ;AAC3C,QAAM,EAAE,YAAY,aAAa,IAAI,MAAM,WAAW,aAAa;AAEnE,QAAM,cAAc,CAAC,MAA8C;AACjE,iBAAa;AACb,cAAU,CAAC;AAAA,EACb;AAEA,MAAI,WAAY,QAAO;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,oBAAoB,SAAS;AAAA,MAC7C,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,YAAY,cAAc;AAMnB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,UAAU,WAAW,IAAI,MAAM,WAAW,aAAa;AAG/D,MAAI,YAAY,CAAC,WAAY,QAAO;AAEpC,SACE,oBAAC,UAAK,KAAU,WAAW,KAAK,uBAAuB,SAAS,GAAI,GAAG,OAAO;AAElF,CAAC;AAED,eAAe,cAAc","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport './Avatar.css';\n\n/* ==========================================================================\n   Context\n   ========================================================================== */\n\ninterface AvatarContextValue {\n  hasImage: boolean;\n  imageError: boolean;\n  onImageError: () => void;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  hasImage: false,\n  imageError: false,\n  onImageError: () => {},\n});\n\n/* ==========================================================================\n   Avatar (root)\n   ========================================================================== */\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * User avatar with image and fallback support.\n *\n * @example\n * <Avatar>\n *   <AvatarImage src=\"/photo.jpg\" alt=\"User\" />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  ({ size = 'md', className, children, ...props }, ref) => {\n    const [imageError, setImageError] = React.useState(false);\n    const [hasImage, setHasImage] = React.useState(false);\n\n    // Scan children to detect if an AvatarImage is present\n    React.useEffect(() => {\n      let found = false;\n      React.Children.forEach(children, (child) => {\n        if (React.isValidElement(child) && child.type === AvatarImage) {\n          found = true;\n        }\n      });\n      setHasImage(found);\n    }, [children]);\n\n    const onImageError = React.useCallback(() => {\n      setImageError(true);\n    }, []);\n\n    return (\n      <AvatarContext.Provider value={{ hasImage, imageError, onImageError }}>\n        <span\n          ref={ref}\n          className={clsx('ds-avatar', `ds-avatar--${size}`, className)}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\n/* ==========================================================================\n   AvatarImage\n   ========================================================================== */\n\nexport const AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ImgHTMLAttributes<HTMLImageElement>\n>(({ className, onError, ...props }, ref) => {\n  const { imageError, onImageError } = React.useContext(AvatarContext);\n\n  const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    onImageError();\n    onError?.(e);\n  };\n\n  if (imageError) return null;\n\n  return (\n    <img\n      ref={ref}\n      className={clsx('ds-avatar__image', className)}\n      onError={handleError}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\n/* ==========================================================================\n   AvatarFallback\n   ========================================================================== */\n\nexport const AvatarFallback = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => {\n  const { hasImage, imageError } = React.useContext(AvatarContext);\n\n  // Show fallback when there is no image, or the image failed to load\n  if (hasImage && !imageError) return null;\n\n  return (\n    <span ref={ref} className={clsx('ds-avatar__fallback', className)} {...props} />\n  );\n});\n\nAvatarFallback.displayName = 'AvatarFallback';\n"]}

package/dist/chunk-W2WTP6HS.cjs

@@ -0,0 +1,233 @@
+'use strict';
+
+var React2 = require('react');
+var dialog = require('@base-ui/react/dialog');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var tabs = require('@base-ui/react/tabs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/Dialog/Dialog.tsx
+var Dialog = dialog.Dialog.Root;
+var DialogTrigger = dialog.Dialog.Trigger;
+var DialogClose = dialog.Dialog.Close;
+var DialogTitle = React2__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: clsx__default.default("ds-dialog__title", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React2__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  dialog.Dialog.Description,
+  {
+    ref,
+    className: clsx__default.default("ds-dialog__description", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogContent = React2__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: "ds-dialog__backdrop" }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { ref, className: clsx__default.default("ds-dialog__content", className), ...props, children })
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React2__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-dialog__header", className), ...props })
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = React2__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-dialog__footer", className), ...props })
+);
+DialogFooter.displayName = "DialogFooter";
+var ToggleGroupContext = React2__default.default.createContext({
+  type: "single",
+  value: [],
+  onItemToggle: () => {
+  }
+});
+var ToggleGroup = React2__default.default.forwardRef(
+  ({ className, type, value, onValueChange, children, ...props }, ref) => {
+    const normalizedValue = React2__default.default.useMemo(() => {
+      if (value === void 0) return [];
+      return Array.isArray(value) ? value : [value];
+    }, [value]);
+    const onItemToggle = React2__default.default.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__default.default.useMemo(
+      () => ({ type, value: normalizedValue, onItemToggle }),
+      [type, normalizedValue, onItemToggle]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx__default.default("ds-toggle-group", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = React2__default.default.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
+  const ctx = React2__default.default.useContext(ToggleGroupContext);
+  const pressed = ctx.value.includes(value);
+  const handleClick = (e) => {
+    ctx.onItemToggle(value);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-pressed": pressed,
+      className: clsx__default.default(
+        "ds-toggle-group__item",
+        pressed && "ds-toggle-group__item--pressed",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+var Slider = React2__default.default.forwardRef(
+  ({
+    className,
+    value: controlledValue,
+    defaultValue = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    onValueChange,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React2__default.default.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx__default.default("ds-slider", disabled && "ds-slider--disabled", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "ds-slider__range",
+              style: { width: `${percentage}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.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__default.default.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Root,
+      {
+        ref,
+        className: clsx__default.default("ds-tabs", `ds-tabs--${orientation}`, className),
+        orientation,
+        ...props
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = React2__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { ref, className: clsx__default.default("ds-tabs__list", className), ...props });
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React2__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { ref, className: clsx__default.default("ds-tabs__trigger", className), ...props, children });
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React2__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ref, className: clsx__default.default("ds-tabs__content", className), ...props });
+  }
+);
+TabsContent.displayName = "TabsContent";
+var Badge = React2__default.default.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: clsx__default.default("ds-badge", `ds-badge--${variant}`, className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.Slider = Slider;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-W2WTP6HS.cjs.map

package/dist/chunk-W2WTP6HS.cjs.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":";AAAA,OAAO,WAAW;AAClB,SAAS,UAAU,kBAAkB;AACrC,OAAO,UAAU;AAUf,cAkBE,YAlBF;AAPK,IAAM,SAAS,WAAW;AAC1B,IAAM,gBAAgB,WAAW;AACjC,IAAM,cAAc,WAAW;AAC/B,IAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,WAAW,OAAX,EAAiB,KAAU,WAAW,KAAK,oBAAoB,SAAS,GAAI,GAAG,OAAO,CACxF;AACD,YAAY,cAAc;AAEnB,IAAM,oBAAoB,MAAM,WAGrC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,WAAW;AAAA,EAAX;AAAA,IACC;AAAA,IACA,WAAW,KAAK,0BAA0B,SAAS;AAAA,IAClD,GAAG;AAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAEzB,IAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,qBAAC,WAAW,QAAX,EACC;AAAA,wBAAC,WAAW,UAAX,EAAoB,WAAU,uBAAsB;AAAA,IACrD,oBAAC,WAAW,OAAX,EAAiB,KAAU,WAAW,KAAK,sBAAsB,SAAS,GAAI,GAAG,OAC/E,UACH;AAAA,KACF;AAEJ;AACA,cAAc,cAAc;AAMrB,IAAM,eAAe,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAC,SAAI,KAAU,WAAW,KAAK,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAE/E;AACA,aAAa,cAAc;AAMpB,IAAM,eAAe,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAC,SAAI,KAAU,WAAW,KAAK,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAE/E;AACA,aAAa,cAAc;;;AC5D3B,OAAOA,YAAW;AAClB,OAAOC,WAAU;AAuET,gBAAAC,YAAA;AA1DR,IAAM,qBAAqBF,OAAM,cAAuC;AAAA,EACtE,MAAM;AAAA,EACN,OAAO,CAAC;AAAA,EACR,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC;AAyBM,IAAM,cAAcA,OAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,OAAO,eAAe,UAAU,GAAG,MAAM,GAAG,QAAQ;AACtE,UAAM,kBAAkBA,OAAM,QAAkB,MAAM;AACpD,UAAI,UAAU,OAAW,QAAO,CAAC;AACjC,aAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAAA,IAC9C,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,eAAeA,OAAM;AAAA,MACzB,CAAC,cAAsB;AACrB,YAAI,SAAS,UAAU;AACrB,gBAAM,OAAO,gBAAgB,SAAS,SAAS,IAAI,KAAK;AACxD,0BAAgB,IAAI;AAAA,QACtB,OAAO;AACL,gBAAM,OAAO,gBAAgB,SAAS,SAAS,IAC3C,gBAAgB,OAAO,CAAC,MAAM,MAAM,SAAS,IAC7C,CAAC,GAAG,iBAAiB,SAAS;AAClC,0BAAgB,IAAI;AAAA,QACtB;AAAA,MACF;AAAA,MACA,CAAC,MAAM,iBAAiB,aAAa;AAAA,IACvC;AAEA,UAAM,MAAMA,OAAM;AAAA,MAChB,OAAO,EAAE,MAAM,OAAO,iBAAiB,aAAa;AAAA,MACpD,CAAC,MAAM,iBAAiB,YAAY;AAAA,IACtC;AAEA,WACE,gBAAAE,KAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWD,MAAK,mBAAmB,SAAS;AAAA,QAC3C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAYnB,IAAM,kBAAkBD,OAAM,WAGnC,CAAC,EAAE,WAAW,OAAO,UAAU,SAAS,GAAG,MAAM,GAAG,QAAQ;AAC5D,QAAM,MAAMA,OAAM,WAAW,kBAAkB;AAC/C,QAAM,UAAU,IAAI,MAAM,SAAS,KAAK;AAExC,QAAM,cAAc,CAAC,MAA2C;AAC9D,QAAI,aAAa,KAAK;AACtB,cAAU,CAAC;AAAA,EACb;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,WAAWD;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,gBAAgB,cAAc;;;AC/H9B,OAAOD,YAAW;AAClB,OAAOC,WAAU;AAmDX,SAMI,OAAAC,MANJ,QAAAC,aAAA;AA/BC,IAAM,SAASH,OAAM;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,YAAY;AAE7E,UAAM,eAAe,oBAAoB;AACzC,UAAM,QAAQ,eAAe,kBAAkB;AAE/C,UAAM,eAAe,CAAC,MAA2C;AAC/D,YAAM,OAAO,OAAO,EAAE,OAAO,KAAK;AAClC,UAAI,CAAC,cAAc;AACjB,6BAAqB,IAAI;AAAA,MAC3B;AACA,sBAAgB,IAAI;AAAA,IACtB;AAEA,UAAM,cAAe,QAAQ,QAAQ,MAAM,OAAQ;AAEnD,WACE,gBAAAG;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAWF,MAAK,aAAa,YAAY,uBAAuB,SAAS;AAAA,QACxE,GAAG;AAAA,QAEJ;AAAA,0BAAAC,KAAC,SAAI,WAAU,oBACb,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,GAAG,UAAU,IAAI;AAAA;AAAA,UACnC,GACF;AAAA,UACA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,iBAAe;AAAA;AAAA,UACjB;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AClFrB,OAAOF,YAAW;AAClB,SAAS,QAAQ,gBAAgB;AACjC,OAAOC,WAAU;AAiBX,gBAAAC,YAAA;AAHC,IAAM,OAAOF,OAAM;AAAA,EACxB,CAAC,EAAE,WAAW,cAAc,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC5D,WACE,gBAAAE;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC;AAAA,QACA,WAAWD,MAAK,WAAW,YAAY,WAAW,IAAI,SAAS;AAAA,QAC/D;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAUZ,IAAM,WAAWD,OAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,WAAO,gBAAAE,KAAC,SAAS,MAAT,EAAc,KAAU,WAAWD,MAAK,iBAAiB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC1F;AACF;AAEA,SAAS,cAAc;AAWhB,IAAM,cAAcD,OAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,WACE,gBAAAE,KAAC,SAAS,KAAT,EAAa,KAAU,WAAWD,MAAK,oBAAoB,SAAS,GAAI,GAAG,OACzE,UACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAUnB,IAAM,cAAcD,OAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,WAAO,gBAAAE,KAAC,SAAS,OAAT,EAAe,KAAU,WAAWD,MAAK,oBAAoB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC9F;AACF;AAEA,YAAY,cAAc;;;AClF1B,OAAOD,YAAW;AAClB,OAAOC,WAAU;AAsBX,gBAAAC,YAAA;AAHC,IAAM,QAAQF,OAAM;AAAA,EACzB,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AACrD,WACE,gBAAAE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAWD,MAAK,YAAY,aAAa,OAAO,IAAI,SAAS;AAAA,QAC5D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc","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"]}

package/dist/chunk-WH7PYHZY.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var tooltip = require('@base-ui/react/tooltip');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/Tooltip/Tooltip.tsx
+var TooltipProvider = tooltip.Tooltip.Provider;
+var TooltipRoot = tooltip.Tooltip.Root;
+var TooltipTrigger = tooltip.Tooltip.Trigger;
+var TooltipContent = React__default.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ref, className: clsx__default.default("ds-tooltip__content", className), ...props, children: [
+  children,
+  /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "ds-tooltip__arrow" })
+] }) }) }));
+TooltipContent.displayName = "TooltipContent";
+var Tooltip = ({ content, children, delay = 200 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { delay, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: children }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: content })
+  ] }) });
+};
+
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipRoot = TooltipRoot;
+exports.TooltipTrigger = TooltipTrigger;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-WH7PYHZY.cjs.map

package/dist/chunk-WH7PYHZY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,WAAW,mBAAmB;AACvC,OAAO,UAAU;AAaX,SAEE,KAFF;AAVC,IAAM,kBAAkB,YAAY;AACpC,IAAM,cAAc,YAAY;AAChC,IAAM,iBAAiB,YAAY;AAEnC,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpC,oBAAC,YAAY,QAAZ,EACC,8BAAC,YAAY,YAAZ,EAAuB,YAAY,GAClC,+BAAC,YAAY,OAAZ,EAAkB,KAAU,WAAW,KAAK,uBAAuB,SAAS,GAAI,GAAG,OACjF;AAAA;AAAA,EACD,oBAAC,YAAY,OAAZ,EAAkB,WAAU,qBAAoB;AAAA,GACnD,GACF,GACF,CACD;AACD,eAAe,cAAc;AAQtB,IAAM,UAAU,CAAC,EAAE,SAAS,UAAU,QAAQ,IAAI,MAAoB;AAC3E,SACE,oBAAC,YAAY,UAAZ,EAAqB,OACpB,+BAAC,YAAY,MAAZ,EACC;AAAA,wBAAC,YAAY,SAAZ,EAAoB,QAAQ,UAAgC;AAAA,IAC7D,oBAAC,kBAAgB,mBAAQ;AAAA,KAC3B,GACF;AAEJ","sourcesContent":["import React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport './Tooltip.css';\n\nexport const TooltipProvider = BaseTooltip.Provider;\nexport const TooltipRoot = BaseTooltip.Root;\nexport const TooltipTrigger = BaseTooltip.Trigger;\n\nexport const TooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n  <BaseTooltip.Portal>\n    <BaseTooltip.Positioner sideOffset={5}>\n      <BaseTooltip.Popup ref={ref} className={clsx('ds-tooltip__content', className)} {...props}>\n        {children}\n        <BaseTooltip.Arrow className=\"ds-tooltip__arrow\" />\n      </BaseTooltip.Popup>\n    </BaseTooltip.Positioner>\n  </BaseTooltip.Portal>\n));\nTooltipContent.displayName = 'TooltipContent';\n\nexport interface TooltipProps {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  delay?: number;\n}\n\nexport const Tooltip = ({ content, children, delay = 200 }: TooltipProps) => {\n  return (\n    <BaseTooltip.Provider delay={delay}>\n      <BaseTooltip.Root>\n        <BaseTooltip.Trigger render={children as React.ReactElement} />\n        <TooltipContent>{content}</TooltipContent>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n};\n"]}

package/dist/chunk-XU3OMQ7V.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var Breadcrumb = React.forwardRef(
+  ({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: clsx("ds-breadcrumb", className),
+        ...props
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: clsx("ds-breadcrumb__list", className),
+      ...props
+    }
+  );
+});
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: clsx("ds-breadcrumb__item", className),
+      ...props
+    }
+  );
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: clsx("ds-breadcrumb__link", className),
+      ...props
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-current": "page",
+      "aria-disabled": "true",
+      className: clsx("ds-breadcrumb__page", className),
+      ...props
+    }
+  );
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: clsx("ds-breadcrumb__separator", className),
+      ...props,
+      children: children ?? "/"
+    }
+  );
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: clsx("ds-breadcrumb__ellipsis", className),
+      ...props,
+      children: "\u2026"
+    }
+  );
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-XU3OMQ7V.js.map

package/dist/chunk-XU3OMQ7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,OAAO,UAAU;AAgCX;AAHC,IAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,cAAc,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW,KAAK,iBAAiB,SAAS;AAAA,QACzC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAQlB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAetB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AACnD,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,gBAAa;AAAA,MACb,iBAAc;AAAA,MACd,WAAW,KAAK,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,eAAe,cAAc;AAQtB,IAAM,sBAAsB,MAAM,WAGvC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,KAAK,4BAA4B,SAAS;AAAA,MACpD,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAQ3B,IAAM,qBAAqB,MAAM,WAGtC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,2BAA2B,SAAS;AAAA,MACnD,GAAG;AAAA,MACL;AAAA;AAAA,EAED;AAEJ,CAAC;AAED,mBAAmB,cAAc","sourcesContent":["import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\nimport './Breadcrumb.css';\n\n/* ==========================================================================\n   Breadcrumb (nav)\n   ========================================================================== */\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  /** Override the default aria-label for the nav element. @default \"Breadcrumb\" */\n  'aria-label'?: string;\n}\n\n/**\n * Navigation breadcrumb trail. Wrap `BreadcrumbList`, `BreadcrumbItem`,\n * `BreadcrumbLink`, and `BreadcrumbPage` inside this root element.\n *\n * @example\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Current</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, 'aria-label': ariaLabel = 'Breadcrumb', ...props }, ref) => {\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={clsx('ds-breadcrumb', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\n/* ==========================================================================\n   BreadcrumbList (ol)\n   ========================================================================== */\n\nexport type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;\n\nexport const BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  BreadcrumbListProps\n>(({ className, ...props }, ref) => {\n  return (\n    <ol\n      ref={ref}\n      className={clsx('ds-breadcrumb__list', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbList.displayName = 'BreadcrumbList';\n\n/* ==========================================================================\n   BreadcrumbItem (li)\n   ========================================================================== */\n\nexport type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(({ className, ...props }, ref) => {\n  return (\n    <li\n      ref={ref}\n      className={clsx('ds-breadcrumb__item', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\n/* ==========================================================================\n   BreadcrumbLink (a)\n   ========================================================================== */\n\nexport interface BreadcrumbLinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true, renders its child as the root element via Radix Slot.\n   * Use this to compose with routing Link components.\n   */\n  asChild?: boolean;\n}\n\nexport const BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbLinkProps\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      ref={ref}\n      className={clsx('ds-breadcrumb__link', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\n/* ==========================================================================\n   BreadcrumbPage (span — current page)\n   ========================================================================== */\n\nexport type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  BreadcrumbPageProps\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-current=\"page\"\n      aria-disabled=\"true\"\n      className={clsx('ds-breadcrumb__page', className)}\n      {...props}\n    />\n  );\n});\n\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\n/* ==========================================================================\n   BreadcrumbSeparator (li — decorative)\n   ========================================================================== */\n\nexport type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const BreadcrumbSeparator = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbSeparatorProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <li\n      ref={ref}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={clsx('ds-breadcrumb__separator', className)}\n      {...props}\n    >\n      {children ?? '/'}\n    </li>\n  );\n});\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\n/* ==========================================================================\n   BreadcrumbEllipsis (span — truncation indicator)\n   ========================================================================== */\n\nexport type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const BreadcrumbEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  BreadcrumbEllipsisProps\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={clsx('ds-breadcrumb__ellipsis', className)}\n      {...props}\n    >\n      &hellip;\n    </span>\n  );\n});\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n"]}