@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/components/SwitchSelector/index.cjs

@@ -1,214 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ReactExports = require("react");
-const classVarianceAuthority = require("class-variance-authority");
-require("@intlayer/config/built");
-require("../../better-auth.CiuwFiHM-C2nBKRMa.cjs");
-require("@intlayer/editor-react");
-require("@tanstack/react-query");
-require("@intlayer/api");
-const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
-require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
-const utils_cn = require("../../utils/cn.cjs");
-const defaultChoices = [
-  { content: "Off", value: false },
-  { content: "On", value: true }
-];
-var SwitchSelectorColor = /* @__PURE__ */ ((SwitchSelectorColor2) => {
-  SwitchSelectorColor2["PRIMARY"] = "primary";
-  SwitchSelectorColor2["SECONDARY"] = "secondary";
-  SwitchSelectorColor2["DESTRUCTIVE"] = "destructive";
-  SwitchSelectorColor2["NEUTRAL"] = "neutral";
-  SwitchSelectorColor2["LIGHT"] = "light";
-  SwitchSelectorColor2["DARK"] = "dark";
-  SwitchSelectorColor2["TEXT"] = "text";
-  return SwitchSelectorColor2;
-})(SwitchSelectorColor || {});
-const switchSelectorVariant = classVarianceAuthority.cva(
-  "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
-  {
-    variants: {
-      color: {
-        [
-          "primary"
-          /* PRIMARY */
-        ]: "border-primary text-primary",
-        [
-          "secondary"
-          /* SECONDARY */
-        ]: "border-secondary text-secondary",
-        [
-          "destructive"
-          /* DESTRUCTIVE */
-        ]: "border-destructive bg-destructive text-destructive",
-        [
-          "neutral"
-          /* NEUTRAL */
-        ]: "border-neutral text-neutral ",
-        [
-          "light"
-          /* LIGHT */
-        ]: "border-white text-white",
-        [
-          "dark"
-          /* DARK */
-        ]: "border-neutral-800 text-neutral-800",
-        [
-          "text"
-          /* TEXT */
-        ]: "border-text text-text"
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-      /* PRIMARY */
-    }
-  }
-);
-var SwitchSelectorSize = /* @__PURE__ */ ((SwitchSelectorSize2) => {
-  SwitchSelectorSize2["SM"] = "sm";
-  SwitchSelectorSize2["MD"] = "md";
-  SwitchSelectorSize2["LG"] = "lg";
-  return SwitchSelectorSize2;
-})(SwitchSelectorSize || {});
-const choiceVariant = classVarianceAuthority.cva(
-  "z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none",
-  {
-    variants: {
-      size: {
-        [
-          "sm"
-          /* SM */
-        ]: "py-1 px-2 text-xs",
-        [
-          "md"
-          /* MD */
-        ]: "p-2 text-sm",
-        [
-          "lg"
-          /* LG */
-        ]: "p-4 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-      /* MD */
-    }
-  }
-);
-const indicatorVariant = classVarianceAuthority.cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
-  {
-    variants: {
-      color: {
-        [
-          "primary"
-          /* PRIMARY */
-        ]: "bg-primary aria-selected:text-text",
-        [
-          "secondary"
-          /* SECONDARY */
-        ]: "bg-secondary aria-selected:text-text",
-        [
-          "destructive"
-          /* DESTRUCTIVE */
-        ]: "bg-destructive aria-selected:text-text",
-        [
-          "neutral"
-          /* NEUTRAL */
-        ]: "bg-neutral aria-selected:text-white ",
-        [
-          "light"
-          /* LIGHT */
-        ]: "bg-white aria-selected:text-black",
-        [
-          "dark"
-          /* DARK */
-        ]: "bg-neutral-800 aria-selected:text-white",
-        [
-          "text"
-          /* TEXT */
-        ]: "bg-text aria-selected:text-text-opposite"
-      }
-    }
-  }
-);
-const SwitchSelector = ({
-  choices = defaultChoices,
-  value,
-  defaultValue,
-  onChange,
-  color = "primary",
-  size = "md",
-  className
-}) => {
-  const [valueState, setValue] = ReactExports.useState(
-    value ?? defaultValue ?? choices[0].value
-  );
-  const optionsRefs = ReactExports.useRef([]);
-  const indicatorRef = ReactExports.useRef(null);
-  const { choiceIndicatorPosition } = hooks_useItemSelector.useItemSelector(optionsRefs);
-  const handleChange = (newValue) => {
-    setValue(newValue);
-    onChange?.(newValue);
-  };
-  ReactExports.useEffect(() => {
-    if (value === void 0) return;
-    setValue(value);
-  }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: switchSelectorVariant({
-        color,
-        className
-      }),
-      role: "tablist",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full flex-row items-center justify-center", children: [
-        choices.map((choice, index) => {
-          const { content, value: value2, ...buttonProps } = choice;
-          const isKeyOfKey = typeof value2 === "string" || typeof value2 === "number";
-          const isSelected = value2 === valueState;
-          return /* @__PURE__ */ ReactExports.createElement(
-            "button",
-            {
-              ...buttonProps,
-              className: utils_cn.cn(
-                choiceVariant({
-                  size
-                })
-              ),
-              key: isKeyOfKey ? value2 : index,
-              role: "tab",
-              onClick: () => handleChange(value2),
-              "aria-selected": isSelected,
-              disabled: isSelected,
-              ref: (el) => {
-                optionsRefs.current[index] = el;
-              }
-            },
-            content
-          );
-        }),
-        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn(
-              indicatorVariant({
-                color
-              })
-            ),
-            style: choiceIndicatorPosition,
-            ref: indicatorRef
-          }
-        )
-      ] })
-    }
-  );
-};
-exports.SwitchSelector = SwitchSelector;
-exports.SwitchSelectorColor = SwitchSelectorColor;
-exports.SwitchSelectorSize = SwitchSelectorSize;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\n/**\n * Configuration for a single choice in the SwitchSelector\n *\n * @template T - The type of the choice value\n * @interface SwitchSelectorChoice\n */\nexport type SwitchSelectorChoice<T = boolean> = {\n  /** The visual content displayed for this choice (text, icons, or React elements) */\n  content: ReactNode;\n  /** The value associated with this choice */\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\n\n/**\n * Array of choices for the SwitchSelector component\n *\n * @template T - The type of the choice values\n */\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\n/**\n * Props interface for the SwitchSelector component\n *\n * @template T - The type of the choice values\n * @interface SwitchSelectorProps\n */\nexport type SwitchSelectorProps<T = boolean> = {\n  /**\n   * Array of selectable choices\n   * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]\n   * @example\n   * ```tsx\n   * <SwitchSelector choices={[\n   *   { content: 'Draft', value: 'draft' },\n   *   { content: 'Published', value: 'published' },\n   *   { content: 'Archived', value: 'archived' }\n   * ]} />\n   * ```\n   */\n  choices?: SwitchSelectorChoices<T>;\n\n  /**\n   * Controlled value for the selected choice\n   * @example\n   * ```tsx\n   * const [status, setStatus] = useState('draft');\n   * <SwitchSelector value={status} onChange={setStatus} />\n   * ```\n   */\n  value?: T;\n\n  /**\n   * Default selected value for uncontrolled mode\n   * @example\n   * ```tsx\n   * <SwitchSelector defaultValue=\"published\" />\n   * ```\n   */\n  defaultValue?: T;\n\n  /**\n   * Callback function triggered when selection changes\n   * @param choice - The newly selected choice value\n   * @example\n   * ```tsx\n   * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />\n   * ```\n   */\n  onChange?: (choice: T) => void;\n\n  /** Additional CSS classes for custom styling */\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\n/**\n * Color variants for the SwitchSelector component\n *\n * @enum SwitchSelectorColor\n */\nexport enum SwitchSelectorColor {\n  /** Primary brand color theme */\n  PRIMARY = 'primary',\n  /** Secondary accent color theme */\n  SECONDARY = 'secondary',\n  /** Destructive/error color theme for dangerous actions */\n  DESTRUCTIVE = 'destructive',\n  /** Neutral gray color theme */\n  NEUTRAL = 'neutral',\n  /** Light color theme for dark backgrounds */\n  LIGHT = 'light',\n  /** Dark color theme for light backgrounds */\n  DARK = 'dark',\n  /** Text color theme that adapts to content */\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n        [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n        [SwitchSelectorColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive',\n        [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n        [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n        [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n        [SwitchSelectorColor.TEXT]: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: SwitchSelectorColor.PRIMARY,\n    },\n  }\n);\n\n/**\n * Size variants for the SwitchSelector component\n *\n * @enum SwitchSelectorSize\n */\nexport enum SwitchSelectorSize {\n  /** Small size - compact for tight layouts */\n  SM = 'sm',\n  /** Medium size - standard for most use cases */\n  MD = 'md',\n  /** Large size - prominent for important selections */\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n        [SwitchSelectorSize.MD]: 'p-2 text-sm',\n        [SwitchSelectorSize.LG]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: SwitchSelectorSize.MD,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n        [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n        [SwitchSelectorColor.DESTRUCTIVE]:\n          'bg-destructive aria-selected:text-text',\n        [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n        [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n        [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n        [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n * SwitchSelector - A versatile toggle component for multi-option selection\n *\n * A sophisticated switch selector component that provides an elegant way to choose between\n * multiple options with smooth animations and visual feedback. Built with accessibility\n * in mind, it supports keyboard navigation and screen reader announcements.\n *\n * ## Key Features\n * - **Smooth Animations**: Fluid indicator transitions between options\n * - **Accessible**: Full keyboard navigation and ARIA support\n * - **Flexible Styling**: Multiple color themes and size variants\n * - **Generic Types**: Type-safe values with TypeScript generics\n * - **Controlled/Uncontrolled**: Supports both usage patterns\n * - **Custom Content**: Rich content support including icons and text\n *\n * ## Use Cases\n * - Settings toggles (On/Off, Light/Dark theme)\n * - Status selectors (Draft/Published/Archived)\n * - View mode switches (List/Grid/Card)\n * - Filter options (All/Active/Completed)\n * - Language or region selection\n * - Any multi-option toggle interface\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options\n * - **Screen Readers**: Proper ARIA labels and role attributes\n * - **Focus Management**: Clear visual focus indicators\n * - **State Announcements**: Selection changes announced to assistive technology\n *\n * ## Visual Design\n * The component features a pill-shaped container with individual choice buttons.\n * A smooth-sliding background indicator highlights the active selection, creating\n * an intuitive and polished user experience.\n *\n * @template T - The type of values for the choices (string, number, boolean, etc.)\n *\n * @example\n * Basic boolean toggle:\n * ```tsx\n * <SwitchSelector\n *   defaultValue={false}\n *   onChange={(value) => setEnabled(value)}\n * />\n * ```\n *\n * @example\n * Multi-option selector with custom content:\n * ```tsx\n * <SwitchSelector\n *   choices={[\n *     { content: <>📝 Draft</>, value: 'draft' },\n *     { content: <>✅ Published</>, value: 'published' },\n *     { content: <>📦 Archived</>, value: 'archived' }\n *   ]}\n *   value={currentStatus}\n *   onChange={setStatus}\n *   color={SwitchSelectorColor.SECONDARY}\n *   size={SwitchSelectorSize.LG}\n * />\n * ```\n *\n * @example\n * View mode switcher:\n * ```tsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'List', value: 'list' },\n *     { content: 'Grid', value: 'grid' },\n *     { content: 'Card', value: 'card' }\n *   ]}\n *   defaultValue=\"grid\"\n *   color={SwitchSelectorColor.NEUTRAL}\n *   onChange={(view) => setViewMode(view)}\n * />\n * ```\n *\n * @example\n * Theme selector with icons:\n * ```tsx\n * <SwitchSelector\n *   choices={[\n *     { content: <>☀️ Light</>, value: 'light' },\n *     { content: <>🌙 Dark</>, value: 'dark' },\n *     { content: <>⚙️ System</>, value: 'system' }\n *   ]}\n *   value={theme}\n *   onChange={setTheme}\n *   size={SwitchSelectorSize.SM}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["SwitchSelectorColor","cva","SwitchSelectorSize","useState","useRef","useItemSelector","useEffect","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

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

@@ -1,203 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { HTMLAttributes, ReactNode } from 'react';
-/**
- * Configuration for a single choice in the SwitchSelector
- *
- * @template T - The type of the choice value
- * @interface SwitchSelectorChoice
- */
-export type SwitchSelectorChoice<T = boolean> = {
-    /** The visual content displayed for this choice (text, icons, or React elements) */
-    content: ReactNode;
-    /** The value associated with this choice */
-    value: T;
-} & HTMLAttributes<HTMLButtonElement>;
-/**
- * Array of choices for the SwitchSelector component
- *
- * @template T - The type of the choice values
- */
-export type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];
-/**
- * Props interface for the SwitchSelector component
- *
- * @template T - The type of the choice values
- * @interface SwitchSelectorProps
- */
-export type SwitchSelectorProps<T = boolean> = {
-    /**
-     * Array of selectable choices
-     * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]
-     * @example
-     * ```tsx
-     * <SwitchSelector choices={[
-     *   { content: 'Draft', value: 'draft' },
-     *   { content: 'Published', value: 'published' },
-     *   { content: 'Archived', value: 'archived' }
-     * ]} />
-     * ```
-     */
-    choices?: SwitchSelectorChoices<T>;
-    /**
-     * Controlled value for the selected choice
-     * @example
-     * ```tsx
-     * const [status, setStatus] = useState('draft');
-     * <SwitchSelector value={status} onChange={setStatus} />
-     * ```
-     */
-    value?: T;
-    /**
-     * Default selected value for uncontrolled mode
-     * @example
-     * ```tsx
-     * <SwitchSelector defaultValue="published" />
-     * ```
-     */
-    defaultValue?: T;
-    /**
-     * Callback function triggered when selection changes
-     * @param choice - The newly selected choice value
-     * @example
-     * ```tsx
-     * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />
-     * ```
-     */
-    onChange?: (choice: T) => void;
-    /** Additional CSS classes for custom styling */
-    className?: string;
-} & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
-/**
- * Color variants for the SwitchSelector component
- *
- * @enum SwitchSelectorColor
- */
-export declare enum SwitchSelectorColor {
-    /** Primary brand color theme */
-    PRIMARY = "primary",
-    /** Secondary accent color theme */
-    SECONDARY = "secondary",
-    /** Destructive/error color theme for dangerous actions */
-    DESTRUCTIVE = "destructive",
-    /** Neutral gray color theme */
-    NEUTRAL = "neutral",
-    /** Light color theme for dark backgrounds */
-    LIGHT = "light",
-    /** Dark color theme for light backgrounds */
-    DARK = "dark",
-    /** Text color theme that adapts to content */
-    TEXT = "text"
-}
-declare const switchSelectorVariant: (props?: ({
-    color?: SwitchSelectorColor | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Size variants for the SwitchSelector component
- *
- * @enum SwitchSelectorSize
- */
-export declare enum SwitchSelectorSize {
-    /** Small size - compact for tight layouts */
-    SM = "sm",
-    /** Medium size - standard for most use cases */
-    MD = "md",
-    /** Large size - prominent for important selections */
-    LG = "lg"
-}
-declare const choiceVariant: (props?: ({
-    size?: SwitchSelectorSize | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * SwitchSelector - A versatile toggle component for multi-option selection
- *
- * A sophisticated switch selector component that provides an elegant way to choose between
- * multiple options with smooth animations and visual feedback. Built with accessibility
- * in mind, it supports keyboard navigation and screen reader announcements.
- *
- * ## Key Features
- * - **Smooth Animations**: Fluid indicator transitions between options
- * - **Accessible**: Full keyboard navigation and ARIA support
- * - **Flexible Styling**: Multiple color themes and size variants
- * - **Generic Types**: Type-safe values with TypeScript generics
- * - **Controlled/Uncontrolled**: Supports both usage patterns
- * - **Custom Content**: Rich content support including icons and text
- *
- * ## Use Cases
- * - Settings toggles (On/Off, Light/Dark theme)
- * - Status selectors (Draft/Published/Archived)
- * - View mode switches (List/Grid/Card)
- * - Filter options (All/Active/Completed)
- * - Language or region selection
- * - Any multi-option toggle interface
- *
- * ## Accessibility
- * - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options
- * - **Screen Readers**: Proper ARIA labels and role attributes
- * - **Focus Management**: Clear visual focus indicators
- * - **State Announcements**: Selection changes announced to assistive technology
- *
- * ## Visual Design
- * The component features a pill-shaped container with individual choice buttons.
- * A smooth-sliding background indicator highlights the active selection, creating
- * an intuitive and polished user experience.
- *
- * @template T - The type of values for the choices (string, number, boolean, etc.)
- *
- * @example
- * Basic boolean toggle:
- * ```tsx
- * <SwitchSelector
- *   defaultValue={false}
- *   onChange={(value) => setEnabled(value)}
- * />
- * ```
- *
- * @example
- * Multi-option selector with custom content:
- * ```tsx
- * <SwitchSelector
- *   choices={[
- *     { content: <>📝 Draft</>, value: 'draft' },
- *     { content: <>✅ Published</>, value: 'published' },
- *     { content: <>📦 Archived</>, value: 'archived' }
- *   ]}
- *   value={currentStatus}
- *   onChange={setStatus}
- *   color={SwitchSelectorColor.SECONDARY}
- *   size={SwitchSelectorSize.LG}
- * />
- * ```
- *
- * @example
- * View mode switcher:
- * ```tsx
- * <SwitchSelector
- *   choices={[
- *     { content: 'List', value: 'list' },
- *     { content: 'Grid', value: 'grid' },
- *     { content: 'Card', value: 'card' }
- *   ]}
- *   defaultValue="grid"
- *   color={SwitchSelectorColor.NEUTRAL}
- *   onChange={(view) => setViewMode(view)}
- * />
- * ```
- *
- * @example
- * Theme selector with icons:
- * ```tsx
- * <SwitchSelector
- *   choices={[
- *     { content: <>☀️ Light</>, value: 'light' },
- *     { content: <>🌙 Dark</>, value: 'dark' },
- *     { content: <>⚙️ System</>, value: 'system' }
- *   ]}
- *   value={theme}
- *   onChange={setTheme}
- *   size={SwitchSelectorSize.SM}
- * />
- * ```
- */
-export declare const SwitchSelector: <T>({ choices, value, defaultValue, onChange, color, size, className, }: SwitchSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,oFAAoF;IACpF,OAAO,EAAE,SAAS,CAAC;IACnB,4CAA4C;IAC5C,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEtC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC7C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAEnC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAE/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,gCAAgC;IAChC,OAAO,YAAY;IACnB,mCAAmC;IACnC,SAAS,cAAc;IACvB,0DAA0D;IAC1D,WAAW,gBAAgB;IAC3B,+BAA+B;IAC/B,OAAO,YAAY;IACnB,6CAA6C;IAC7C,KAAK,UAAU;IACf,6CAA6C;IAC7C,IAAI,SAAS;IACb,8CAA8C;IAC9C,IAAI,SAAS;CACd;AAED,QAAA,MAAM,qBAAqB;;8EAmB1B,CAAC;AAEF;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,6CAA6C;IAC7C,EAAE,OAAO;IACT,gDAAgD;IAChD,EAAE,OAAO;IACT,sDAAsD;IACtD,EAAE,OAAO;CACV;AAED,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qEAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}

package/dist/components/SwitchSelector/index.mjs

@@ -1,214 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, createElement } from "react";
-import { cva } from "class-variance-authority";
-import "@intlayer/config/built";
-import "../../better-auth.CiuwFiHM-7umXOENE.js";
-import "@intlayer/editor-react";
-import "@tanstack/react-query";
-import "@intlayer/api";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
-import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
-import { cn } from "../../utils/cn.mjs";
-const defaultChoices = [
-  { content: "Off", value: false },
-  { content: "On", value: true }
-];
-var SwitchSelectorColor = /* @__PURE__ */ ((SwitchSelectorColor2) => {
-  SwitchSelectorColor2["PRIMARY"] = "primary";
-  SwitchSelectorColor2["SECONDARY"] = "secondary";
-  SwitchSelectorColor2["DESTRUCTIVE"] = "destructive";
-  SwitchSelectorColor2["NEUTRAL"] = "neutral";
-  SwitchSelectorColor2["LIGHT"] = "light";
-  SwitchSelectorColor2["DARK"] = "dark";
-  SwitchSelectorColor2["TEXT"] = "text";
-  return SwitchSelectorColor2;
-})(SwitchSelectorColor || {});
-const switchSelectorVariant = cva(
-  "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
-  {
-    variants: {
-      color: {
-        [
-          "primary"
-          /* PRIMARY */
-        ]: "border-primary text-primary",
-        [
-          "secondary"
-          /* SECONDARY */
-        ]: "border-secondary text-secondary",
-        [
-          "destructive"
-          /* DESTRUCTIVE */
-        ]: "border-destructive bg-destructive text-destructive",
-        [
-          "neutral"
-          /* NEUTRAL */
-        ]: "border-neutral text-neutral ",
-        [
-          "light"
-          /* LIGHT */
-        ]: "border-white text-white",
-        [
-          "dark"
-          /* DARK */
-        ]: "border-neutral-800 text-neutral-800",
-        [
-          "text"
-          /* TEXT */
-        ]: "border-text text-text"
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-      /* PRIMARY */
-    }
-  }
-);
-var SwitchSelectorSize = /* @__PURE__ */ ((SwitchSelectorSize2) => {
-  SwitchSelectorSize2["SM"] = "sm";
-  SwitchSelectorSize2["MD"] = "md";
-  SwitchSelectorSize2["LG"] = "lg";
-  return SwitchSelectorSize2;
-})(SwitchSelectorSize || {});
-const choiceVariant = cva(
-  "z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none",
-  {
-    variants: {
-      size: {
-        [
-          "sm"
-          /* SM */
-        ]: "py-1 px-2 text-xs",
-        [
-          "md"
-          /* MD */
-        ]: "p-2 text-sm",
-        [
-          "lg"
-          /* LG */
-        ]: "p-4 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-      /* MD */
-    }
-  }
-);
-const indicatorVariant = cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
-  {
-    variants: {
-      color: {
-        [
-          "primary"
-          /* PRIMARY */
-        ]: "bg-primary aria-selected:text-text",
-        [
-          "secondary"
-          /* SECONDARY */
-        ]: "bg-secondary aria-selected:text-text",
-        [
-          "destructive"
-          /* DESTRUCTIVE */
-        ]: "bg-destructive aria-selected:text-text",
-        [
-          "neutral"
-          /* NEUTRAL */
-        ]: "bg-neutral aria-selected:text-white ",
-        [
-          "light"
-          /* LIGHT */
-        ]: "bg-white aria-selected:text-black",
-        [
-          "dark"
-          /* DARK */
-        ]: "bg-neutral-800 aria-selected:text-white",
-        [
-          "text"
-          /* TEXT */
-        ]: "bg-text aria-selected:text-text-opposite"
-      }
-    }
-  }
-);
-const SwitchSelector = ({
-  choices = defaultChoices,
-  value,
-  defaultValue,
-  onChange,
-  color = "primary",
-  size = "md",
-  className
-}) => {
-  const [valueState, setValue] = useState(
-    value ?? defaultValue ?? choices[0].value
-  );
-  const optionsRefs = useRef([]);
-  const indicatorRef = useRef(null);
-  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
-  const handleChange = (newValue) => {
-    setValue(newValue);
-    onChange?.(newValue);
-  };
-  useEffect(() => {
-    if (value === void 0) return;
-    setValue(value);
-  }, [value]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: switchSelectorVariant({
-        color,
-        className
-      }),
-      role: "tablist",
-      children: /* @__PURE__ */ jsxs("div", { className: "relative flex size-full flex-row items-center justify-center", children: [
-        choices.map((choice, index) => {
-          const { content, value: value2, ...buttonProps } = choice;
-          const isKeyOfKey = typeof value2 === "string" || typeof value2 === "number";
-          const isSelected = value2 === valueState;
-          return /* @__PURE__ */ createElement(
-            "button",
-            {
-              ...buttonProps,
-              className: cn(
-                choiceVariant({
-                  size
-                })
-              ),
-              key: isKeyOfKey ? value2 : index,
-              role: "tab",
-              onClick: () => handleChange(value2),
-              "aria-selected": isSelected,
-              disabled: isSelected,
-              ref: (el) => {
-                optionsRefs.current[index] = el;
-              }
-            },
-            content
-          );
-        }),
-        choiceIndicatorPosition && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              indicatorVariant({
-                color
-              })
-            ),
-            style: choiceIndicatorPosition,
-            ref: indicatorRef
-          }
-        )
-      ] })
-    }
-  );
-};
-export {
-  SwitchSelector,
-  SwitchSelectorColor,
-  SwitchSelectorSize
-};
-//# sourceMappingURL=index.mjs.map