@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const group = "_group_1ea4w_1";
+const gapXs = "_gap-xs_1ea4w_6";
+const gapSm = "_gap-sm_1ea4w_10";
+const item = "_item_1ea4w_20";
+const selected = "_selected_1ea4w_25";
+const pills = "_pills_1ea4w_30";
+const outline = "_outline_1ea4w_43";
+const disabled = "_disabled_1ea4w_101";
+const sizeSm = "_size-sm_1ea4w_106";
+const sizeMd = "_size-md_1ea4w_112";
+const sizeLg = "_size-lg_1ea4w_118";
+const styles = {
+  group,
+  gapXs,
+  gapSm,
+  "default": "_default_1ea4w_14",
+  item,
+  selected,
+  pills,
+  outline,
+  disabled,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+exports.default = styles;
+exports.disabled = disabled;
+exports.gapSm = gapSm;
+exports.gapXs = gapXs;
+exports.group = group;
+exports.item = item;
+exports.outline = outline;
+exports.pills = pills;
+exports.selected = selected;
+exports.sizeLg = sizeLg;
+exports.sizeMd = sizeMd;
+exports.sizeSm = sizeSm;
+//# sourceMappingURL=ToggleGroup.module.scss.cjs.map

package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ToggleGroup/ToggleGroup.module.scss.js

@@ -0,0 +1,40 @@
+const group = "_group_1ea4w_1";
+const gapXs = "_gap-xs_1ea4w_6";
+const gapSm = "_gap-sm_1ea4w_10";
+const item = "_item_1ea4w_20";
+const selected = "_selected_1ea4w_25";
+const pills = "_pills_1ea4w_30";
+const outline = "_outline_1ea4w_43";
+const disabled = "_disabled_1ea4w_101";
+const sizeSm = "_size-sm_1ea4w_106";
+const sizeMd = "_size-md_1ea4w_112";
+const sizeLg = "_size-lg_1ea4w_118";
+const styles = {
+  group,
+  gapXs,
+  gapSm,
+  "default": "_default_1ea4w_14",
+  item,
+  selected,
+  pills,
+  outline,
+  disabled,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+export {
+  styles as default,
+  disabled,
+  gapSm,
+  gapXs,
+  group,
+  item,
+  outline,
+  pills,
+  selected,
+  sizeLg,
+  sizeMd,
+  sizeSm
+};
+//# sourceMappingURL=ToggleGroup.module.scss.js.map

package/dist/components/ToggleGroup/ToggleGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ToggleGroup/index.cjs

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ToggleGroup_module = require("./ToggleGroup.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ToggleGroupContext = React__namespace.createContext(
+  null
+);
+function useToggleGroupContext() {
+  const context = React__namespace.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleGroup.Item must be used within a ToggleGroup");
+  }
+  return context;
+}
+function ToggleGroupRoot({
+  value,
+  onChange,
+  children,
+  variant = "default",
+  size = "md",
+  gap = "xs",
+  className,
+  ...htmlProps
+}) {
+  var _a;
+  const classes = [
+    ToggleGroup_module.default.group,
+    ToggleGroup_module.default[variant],
+    ToggleGroup_module.default[`size-${size}`],
+    gap !== "none" && ToggleGroup_module.default[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  const childItems = React__namespace.Children.toArray(children).filter(
+    (child) => React__namespace.isValidElement(child)
+  );
+  const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
+  const hasFocusableSelection = childItems.some(
+    (item) => !item.props.disabled && item.props.value === value
+  );
+  const contextValue = {
+    value,
+    onChange,
+    variant,
+    size,
+    hasFocusableSelection,
+    firstEnabledValue
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, role: "radiogroup", className: classes, children }) });
+}
+function ToggleGroupItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  onKeyDown,
+  ...htmlProps
+}) {
+  const context = useToggleGroupContext();
+  const isSelected = context.value === value;
+  const isTabbableSelected = isSelected && !disabled;
+  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;
+  const classes = [
+    ToggleGroup_module.default.item,
+    isSelected && ToggleGroup_module.default.selected,
+    disabled && ToggleGroup_module.default.disabled,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled) {
+      context.onChange(value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    const key = event.key;
+    const supportsRoving = key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowUp" || key === "Home" || key === "End";
+    if (!supportsRoving) return;
+    event.preventDefault();
+    const group = event.currentTarget.closest('[role="radiogroup"]');
+    if (!group) return;
+    const radios = Array.from(
+      group.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    if (radios.length === 0) return;
+    const currentIndex = radios.indexOf(event.currentTarget);
+    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+    let nextIndex = fallbackIndex;
+    if (key === "ArrowRight" || key === "ArrowDown") {
+      nextIndex = (fallbackIndex + 1) % radios.length;
+    } else if (key === "ArrowLeft" || key === "ArrowUp") {
+      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;
+    } else if (key === "Home") {
+      nextIndex = 0;
+    } else if (key === "End") {
+      nextIndex = radios.length - 1;
+    }
+    const target = radios[nextIndex];
+    const nextValue = target.dataset.value;
+    if (nextValue != null) {
+      context.onChange(nextValue);
+    }
+    target.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      "data-value": value,
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: isTabbableSelected || isFirstFallback ? 0 : -1,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: classes,
+      children
+    }
+  );
+}
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+exports.ToggleGroupRoot = ToggleGroupRoot;
+exports.useToggleGroupContext = useToggleGroupContext;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ToggleGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value: string;\n  /** Callback when selection changes */\n  onChange: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant */\n  variant?: 'default' | 'pills' | 'outline';\n  /** Size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  onChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const classes = [\n    styles.group,\n    styles[variant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === value\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value,\n    onChange,\n    variant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div {...htmlProps} role=\"radiogroup\" className={classes}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":["React","styles","jsx"],"mappings":"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"}

package/dist/components/ToggleGroup/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current selected value */
+    value: string;
+    /** Callback when selection changes */
+    onChange: (value: string) => void;
+    /** Toggle items */
+    children: React.ReactNode;
+    /** Visual variant */
+    variant?: 'default' | 'pills' | 'outline';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Gap between items (for pills/outline variants) */
+    gap?: 'none' | 'xs' | 'sm';
+}
+export interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Value for this item */
+    value: string;
+    /** Item content */
+    children: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface ToggleGroupContextValue {
+    value: string;
+    onChange: (value: string) => void;
+    variant: 'default' | 'pills' | 'outline';
+    size: 'sm' | 'md' | 'lg';
+    hasFocusableSelection: boolean;
+    firstEnabledValue: string | null;
+}
+declare function useToggleGroupContext(): ToggleGroupContextValue;
+declare function ToggleGroupRoot({ value, onChange, children, variant, size, gap, className, ...htmlProps }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ value, children, disabled, className, onKeyDown, ...htmlProps }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ToggleGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACpG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAMD,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,GAAU,EACV,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAoClB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAuFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/ToggleGroup/index.js

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./ToggleGroup.module.scss.js";
+const ToggleGroupContext = React.createContext(
+  null
+);
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleGroup.Item must be used within a ToggleGroup");
+  }
+  return context;
+}
+function ToggleGroupRoot({
+  value,
+  onChange,
+  children,
+  variant = "default",
+  size = "md",
+  gap = "xs",
+  className,
+  ...htmlProps
+}) {
+  var _a;
+  const classes = [
+    styles.group,
+    styles[variant],
+    styles[`size-${size}`],
+    gap !== "none" && styles[`gap-${gap}`],
+    className
+  ].filter(Boolean).join(" ");
+  const childItems = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child)
+  );
+  const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
+  const hasFocusableSelection = childItems.some(
+    (item) => !item.props.disabled && item.props.value === value
+  );
+  const contextValue = {
+    value,
+    onChange,
+    variant,
+    size,
+    hasFocusableSelection,
+    firstEnabledValue
+  };
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...htmlProps, role: "radiogroup", className: classes, children }) });
+}
+function ToggleGroupItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  onKeyDown,
+  ...htmlProps
+}) {
+  const context = useToggleGroupContext();
+  const isSelected = context.value === value;
+  const isTabbableSelected = isSelected && !disabled;
+  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;
+  const classes = [
+    styles.item,
+    isSelected && styles.selected,
+    disabled && styles.disabled,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled) {
+      context.onChange(value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    const key = event.key;
+    const supportsRoving = key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowUp" || key === "Home" || key === "End";
+    if (!supportsRoving) return;
+    event.preventDefault();
+    const group = event.currentTarget.closest('[role="radiogroup"]');
+    if (!group) return;
+    const radios = Array.from(
+      group.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    if (radios.length === 0) return;
+    const currentIndex = radios.indexOf(event.currentTarget);
+    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+    let nextIndex = fallbackIndex;
+    if (key === "ArrowRight" || key === "ArrowDown") {
+      nextIndex = (fallbackIndex + 1) % radios.length;
+    } else if (key === "ArrowLeft" || key === "ArrowUp") {
+      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;
+    } else if (key === "Home") {
+      nextIndex = 0;
+    } else if (key === "End") {
+      nextIndex = radios.length - 1;
+    }
+    const target = radios[nextIndex];
+    const nextValue = target.dataset.value;
+    if (nextValue != null) {
+      context.onChange(nextValue);
+    }
+    target.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      "data-value": value,
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: isTabbableSelected || isFirstFallback ? 0 : -1,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: classes,
+      children
+    }
+  );
+}
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupRoot,
+  useToggleGroupContext
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ToggleGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value: string;\n  /** Callback when selection changes */\n  onChange: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant */\n  variant?: 'default' | 'pills' | 'outline';\n  /** Size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  onChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const classes = [\n    styles.group,\n    styles[variant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === value\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value,\n    onChange,\n    variant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div {...htmlProps} role=\"radiogroup\" className={classes}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.module.scss.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const positioner = "_positioner_1513t_1";
+const popup = "_popup_1513t_6";
+const arrow = "_arrow_1513t_43";
+const styles = {
+  positioner,
+  popup,
+  arrow
+};
+exports.arrow = arrow;
+exports.default = styles;
+exports.popup = popup;
+exports.positioner = positioner;
+//# sourceMappingURL=Tooltip.module.scss.cjs.map

package/dist/components/Tooltip/Tooltip.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -0,0 +1,15 @@
+const positioner = "_positioner_1513t_1";
+const popup = "_popup_1513t_6";
+const arrow = "_arrow_1513t_43";
+const styles = {
+  positioner,
+  popup,
+  arrow
+};
+export {
+  arrow,
+  styles as default,
+  popup,
+  positioner
+};
+//# sourceMappingURL=Tooltip.module.scss.js.map

package/dist/components/Tooltip/Tooltip.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const tooltip = require("@base-ui/react/tooltip");
+const Tooltip_module = require("./Tooltip.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function TooltipRoot({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  delay = 400,
+  closeDelay = 0,
+  disabled = false,
+  arrow = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  ...htmlProps
+}) {
+  const renderTrigger = React__namespace.useCallback(
+    (triggerProps) => {
+      const childProps = children.props;
+      const mergedProps = { ...childProps, ...triggerProps };
+      for (const [key, triggerHandler] of Object.entries(triggerProps)) {
+        const childHandler = childProps[key];
+        if (key.startsWith("on") && typeof triggerHandler === "function" && typeof childHandler === "function") {
+          mergedProps[key] = (...args) => {
+            childHandler(...args);
+            triggerHandler(...args);
+          };
+        }
+      }
+      return React__namespace.cloneElement(children, mergedProps);
+    },
+    [children]
+  );
+  if (disabled) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { delay, closeDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    tooltip.Tooltip.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: renderTrigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          tooltip.Tooltip.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            className: Tooltip_module.default.positioner,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ...htmlProps, className: [Tooltip_module.default.popup, className].filter(Boolean).join(" "), children: [
+              content,
+              arrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: Tooltip_module.default.arrow })
+            ] })
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function TooltipProvider({
+  children,
+  delay = 400,
+  closeDelay = 0,
+  timeout = 400
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      delay,
+      closeDelay,
+      timeout,
+      children
+    }
+  );
+}
+const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Provider: TooltipProvider
+});
+exports.Tooltip = Tooltip;
+exports.TooltipProvider = TooltipProvider;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Tooltip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay = 400,\n  closeDelay = 0,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  ...htmlProps\n}: TooltipProps) {\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  return (\n    <BaseTooltip.Provider delay={delay} closeDelay={closeDelay}>\n      <BaseTooltip.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <BaseTooltip.Trigger render={renderTrigger} />\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            className={styles.positioner}\n          >\n            <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>\n              {content}\n              {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n            </BaseTooltip.Popup>\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay = 400,\n  closeDelay = 0,\n  timeout = 400,\n}: TooltipProviderProps) {\n  return (\n    <BaseTooltip.Provider\n      delay={delay}\n      closeDelay={closeDelay}\n      timeout={timeout}\n    >\n      {children}\n    </BaseTooltip.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["React","jsx","BaseTooltip","jsxs","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,gBAAgBA,iBAAM;AAAA,IAC1B,CAAC,iBAAuF;AACtF,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC,EAAE,GAAG,YAAY,GAAG,aAAA;AAEjE,iBAAW,CAAC,KAAK,cAAc,KAAK,OAAO,QAAQ,YAAY,GAAG;AAChE,cAAM,eAAe,WAAW,GAAG;AACnC,YACE,IAAI,WAAW,IAAI,KACnB,OAAO,mBAAmB,cAC1B,OAAO,iBAAiB,YACxB;AACA,sBAAY,GAAG,IAAI,IAAI,SAAoB;AACxC,yBAA+C,GAAG,IAAI;AACtD,2BAAiD,GAAG,IAAI;AAAA,UAC3D;AAAA,QACF;AAAA,MACF;AAEA,aAAOA,iBAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACEC,2BAAAA,IAACC,QAAAA,QAAY,UAAZ,EAAqB,OAAc,YAClC,UAAAC,2BAAAA;AAAAA,IAACD,QAAAA,QAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAD,2BAAAA,IAACC,QAAAA,QAAY,SAAZ,EAAoB,QAAQ,cAAA,CAAe;AAAA,QAC5CD,2BAAAA,IAACC,QAAAA,QAAY,QAAZ,EACC,UAAAD,2BAAAA;AAAAA,UAACC,QAAAA,QAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAWE,eAAAA,QAAO;AAAA,YAElB,0CAACF,gBAAY,OAAZ,EAAmB,GAAG,WAAW,WAAW,CAACE,eAAAA,QAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,cAAA;AAAA,cACA,SAASH,2BAAAA,IAACC,gBAAY,OAAZ,EAAkB,WAAWE,eAAAA,QAAO,MAAA,CAAO;AAAA,YAAA,EAAA,CACxD;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,UAAU;AACZ,GAAyB;AACvB,SACEH,2BAAAA;AAAAA,IAACC,QAAAA,QAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;;;"}