analytica-frontend-lib 1.0.84 → 1.0.85

package/dist/Radio/index.js

@@ -29,6 +29,13 @@ module.exports = __toCommonJS(Radio_exports);
 var import_react = require("react");
 var import_zustand = require("zustand");
 
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
 // src/components/Text/Text.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Text = ({
@@ -72,7 +79,7 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
@@ -193,8 +200,19 @@ var Radio = (0, import_react.forwardRef)(
       return sizeClasses.borderWidth;
     };
     const borderWidthClass = getBorderWidth();
-    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
-    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const radioClasses = cn(
+      BASE_RADIO_CLASSES,
+      actualRadioSize,
+      borderWidthClass,
+      stylingClasses,
+      className
+    );
+    const dotClasses = cn(
+      actualDotSize,
+      "rounded-full",
+      DOT_CLASSES[currentState],
+      "transition-all duration-200"
+    );
     const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
     const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
     const getTextColor = () => {
@@ -213,7 +231,11 @@ var Radio = (0, import_react.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
-          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          className: cn(
+            "flex flex-row items-center",
+            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "input",
@@ -270,7 +292,11 @@ var Radio = (0, import_react.forwardRef)(
             label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight,
+                  "flex-1 min-w-0"
+                ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   Text_default,
                   {
@@ -278,7 +304,11 @@ var Radio = (0, import_react.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
+                    className: cn(
+                      getCursorClass(),
+                      "select-none leading-normal flex items-center font-roboto truncate",
+                      labelClassName
+                    ),
                     color: getTextColor(),
                     children: label
                   }

package/dist/Radio/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  useEffect,\n  useRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-4 h-4',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      // Prevent automatic scroll when input changes\n      if (event.target) {\n        event.target.blur();\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5`\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={(node) => {\n              inputRef.current = node;\n              if (typeof ref === 'function') ref(node);\n              else if (ref) ref.current = node;\n            }}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            style={{\n              position: 'absolute',\n              left: '-9999px',\n              visibility: 'hidden',\n            }}\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <button\n            type=\"button\"\n            className={radioClasses}\n            disabled={disabled}\n            aria-pressed={checked}\n            onClick={(e) => {\n              // Prevent scroll when radio is clicked\n              e.preventDefault();\n              if (!disabled) {\n                // Simulate click on hidden input\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  // Remove focus to prevent scroll behavior\n                  inputRef.current.blur();\n                }\n              }\n            }}\n            onKeyDown={(e) => {\n              // Handle keyboard activation (Enter or Space)\n              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n                e.preventDefault();\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  inputRef.current.blur();\n                }\n              }\n            }}\n          >\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </button>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\n/**\n * RadioGroup store interface\n */\ninterface RadioGroupStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n  disabled: boolean;\n  name: string;\n}\n\ntype RadioGroupStoreApi = StoreApi<RadioGroupStore>;\n\n/**\n * Create a new RadioGroup store\n */\nconst createRadioGroupStore = (\n  name: string,\n  defaultValue: string,\n  disabled: boolean,\n  onValueChange?: (value: string) => void\n): RadioGroupStoreApi =>\n  create<RadioGroupStore>((set, get) => ({\n    value: defaultValue,\n    setValue: (value) => {\n      if (!get().disabled) {\n        set({ value });\n        get().onValueChange?.(value);\n      }\n    },\n    onValueChange,\n    disabled,\n    name,\n  }));\n\n/**\n * Hook to access RadioGroup store\n */\nexport const useRadioGroupStore = (externalStore?: RadioGroupStoreApi) => {\n  if (!externalStore) {\n    throw new Error('RadioGroupItem must be used within a RadioGroup');\n  }\n  return externalStore;\n};\n\n/**\n * Inject store into RadioGroupItem children\n */\nconst injectStore = (\n  children: ReactNode,\n  store: RadioGroupStoreApi\n): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === RadioGroupItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\n/**\n * RadioGroup component props interface\n */\nexport type RadioGroupProps = {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value for uncontrolled usage */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Group name for all radios */\n  name?: string;\n  /** Disabled state for the entire group */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Children components */\n  children: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\n/**\n * RadioGroup component for flexible radio group composition\n *\n * Uses Zustand for state management with automatic store injection.\n * Allows complete control over layout and styling by composing with RadioGroupItem.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\" onValueChange={setValue}>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option2\" id=\"r2\" />\n *     <label htmlFor=\"r2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value: propValue,\n      defaultValue = '',\n      onValueChange,\n      name: propName,\n      disabled = false,\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique name if not provided\n    const generatedId = useId();\n    const name = propName || `radio-group-${generatedId}`;\n\n    // Create store reference\n    const storeRef = useRef<RadioGroupStoreApi>(null);\n    storeRef.current ??= createRadioGroupStore(\n      name,\n      defaultValue,\n      disabled,\n      onValueChange\n    );\n    const store = storeRef.current;\n\n    // Get store actions\n    const { setValue } = useStore(store, (s) => s);\n\n    // Call onValueChange with initial value\n    useEffect(() => {\n      const currentValue = store.getState().value;\n      if (currentValue && onValueChange) {\n        onValueChange(currentValue);\n      }\n    }, []); // Empty dependency array for mount only\n\n    // Handle controlled value changes\n    useEffect(() => {\n      if (propValue !== undefined) {\n        setValue(propValue);\n      }\n    }, [propValue, setValue]);\n\n    // Update disabled state\n    useEffect(() => {\n      store.setState({ disabled });\n    }, [disabled, store]);\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        role=\"radiogroup\"\n        aria-label={name}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * RadioGroupItem component props interface\n */\nexport type RadioGroupItemProps = {\n  /** Value for this radio item */\n  value: string;\n  /** Store reference (automatically injected by RadioGroup) */\n  store?: RadioGroupStoreApi;\n  /** Disabled state for this specific item */\n  disabled?: boolean;\n  /** Size variant */\n  size?: RadioSize;\n  /** Visual state */\n  state?: RadioState;\n  /** Additional CSS classes */\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'\n>;\n\n/**\n * RadioGroupItem component for use within RadioGroup\n *\n * A radio button without label that works within RadioGroup context.\n * Provides just the radio input for maximum flexibility in composition.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  (\n    {\n      value,\n      store: externalStore,\n      disabled: itemDisabled,\n      size = 'medium',\n      state = 'default',\n      className = '',\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Get store and state\n    const store = useRadioGroupStore(externalStore);\n    const {\n      value: groupValue,\n      setValue,\n      disabled: groupDisabled,\n      name,\n    } = useStore(store);\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-item-${generatedId}`;\n\n    // Determine states\n    const isChecked = groupValue === value;\n    const isDisabled = groupDisabled || itemDisabled;\n    const currentState = isDisabled ? 'disabled' : state;\n\n    // Use standard Radio component for consistency and simplicity\n    return (\n      <Radio\n        ref={ref}\n        id={inputId}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        size={size}\n        state={currentState}\n        className={className}\n        onChange={(e) => {\n          if (e.target.checked && !isDisabled) {\n            setValue(value);\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport default Radio;\nexport { RadioGroup, RadioGroupItem };\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  useEffect,\n  useRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-4 h-4',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      // Prevent automatic scroll when input changes\n      if (event.target) {\n        event.target.blur();\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = cn(\n      BASE_RADIO_CLASSES,\n      actualRadioSize,\n      borderWidthClass,\n      stylingClasses,\n      className\n    );\n\n    // Get dot classes\n    const dotClasses = cn(\n      actualDotSize,\n      'rounded-full',\n      DOT_CLASSES[currentState],\n      'transition-all duration-200'\n    );\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={cn(\n            'flex flex-row items-center',\n            isWrapperNeeded\n              ? cn('p-1 border-2', wrapperBorderColor, 'rounded-lg gap-1.5')\n              : sizeClasses.spacing,\n            disabled ? 'opacity-40' : ''\n          )}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={(node) => {\n              inputRef.current = node;\n              if (typeof ref === 'function') ref(node);\n              else if (ref) ref.current = node;\n            }}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            style={{\n              position: 'absolute',\n              left: '-9999px',\n              visibility: 'hidden',\n            }}\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <button\n            type=\"button\"\n            className={radioClasses}\n            disabled={disabled}\n            aria-pressed={checked}\n            onClick={(e) => {\n              // Prevent scroll when radio is clicked\n              e.preventDefault();\n              if (!disabled) {\n                // Simulate click on hidden input\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  // Remove focus to prevent scroll behavior\n                  inputRef.current.blur();\n                }\n              }\n            }}\n            onKeyDown={(e) => {\n              // Handle keyboard activation (Enter or Space)\n              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n                e.preventDefault();\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  inputRef.current.blur();\n                }\n              }\n            }}\n          >\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </button>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={cn(\n                'flex flex-row items-center',\n                sizeClasses.labelHeight,\n                'flex-1 min-w-0'\n              )}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={cn(\n                  getCursorClass(),\n                  'select-none leading-normal flex items-center font-roboto truncate',\n                  labelClassName\n                )}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\n/**\n * RadioGroup store interface\n */\ninterface RadioGroupStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n  disabled: boolean;\n  name: string;\n}\n\ntype RadioGroupStoreApi = StoreApi<RadioGroupStore>;\n\n/**\n * Create a new RadioGroup store\n */\nconst createRadioGroupStore = (\n  name: string,\n  defaultValue: string,\n  disabled: boolean,\n  onValueChange?: (value: string) => void\n): RadioGroupStoreApi =>\n  create<RadioGroupStore>((set, get) => ({\n    value: defaultValue,\n    setValue: (value) => {\n      if (!get().disabled) {\n        set({ value });\n        get().onValueChange?.(value);\n      }\n    },\n    onValueChange,\n    disabled,\n    name,\n  }));\n\n/**\n * Hook to access RadioGroup store\n */\nexport const useRadioGroupStore = (externalStore?: RadioGroupStoreApi) => {\n  if (!externalStore) {\n    throw new Error('RadioGroupItem must be used within a RadioGroup');\n  }\n  return externalStore;\n};\n\n/**\n * Inject store into RadioGroupItem children\n */\nconst injectStore = (\n  children: ReactNode,\n  store: RadioGroupStoreApi\n): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === RadioGroupItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\n/**\n * RadioGroup component props interface\n */\nexport type RadioGroupProps = {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value for uncontrolled usage */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Group name for all radios */\n  name?: string;\n  /** Disabled state for the entire group */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Children components */\n  children: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\n/**\n * RadioGroup component for flexible radio group composition\n *\n * Uses Zustand for state management with automatic store injection.\n * Allows complete control over layout and styling by composing with RadioGroupItem.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\" onValueChange={setValue}>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option2\" id=\"r2\" />\n *     <label htmlFor=\"r2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value: propValue,\n      defaultValue = '',\n      onValueChange,\n      name: propName,\n      disabled = false,\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique name if not provided\n    const generatedId = useId();\n    const name = propName || `radio-group-${generatedId}`;\n\n    // Create store reference\n    const storeRef = useRef<RadioGroupStoreApi>(null);\n    storeRef.current ??= createRadioGroupStore(\n      name,\n      defaultValue,\n      disabled,\n      onValueChange\n    );\n    const store = storeRef.current;\n\n    // Get store actions\n    const { setValue } = useStore(store, (s) => s);\n\n    // Call onValueChange with initial value\n    useEffect(() => {\n      const currentValue = store.getState().value;\n      if (currentValue && onValueChange) {\n        onValueChange(currentValue);\n      }\n    }, []); // Empty dependency array for mount only\n\n    // Handle controlled value changes\n    useEffect(() => {\n      if (propValue !== undefined) {\n        setValue(propValue);\n      }\n    }, [propValue, setValue]);\n\n    // Update disabled state\n    useEffect(() => {\n      store.setState({ disabled });\n    }, [disabled, store]);\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        role=\"radiogroup\"\n        aria-label={name}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * RadioGroupItem component props interface\n */\nexport type RadioGroupItemProps = {\n  /** Value for this radio item */\n  value: string;\n  /** Store reference (automatically injected by RadioGroup) */\n  store?: RadioGroupStoreApi;\n  /** Disabled state for this specific item */\n  disabled?: boolean;\n  /** Size variant */\n  size?: RadioSize;\n  /** Visual state */\n  state?: RadioState;\n  /** Additional CSS classes */\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'\n>;\n\n/**\n * RadioGroupItem component for use within RadioGroup\n *\n * A radio button without label that works within RadioGroup context.\n * Provides just the radio input for maximum flexibility in composition.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  (\n    {\n      value,\n      store: externalStore,\n      disabled: itemDisabled,\n      size = 'medium',\n      state = 'default',\n      className = '',\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Get store and state\n    const store = useRadioGroupStore(externalStore);\n    const {\n      value: groupValue,\n      setValue,\n      disabled: groupDisabled,\n      name,\n    } = useStore(store);\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-item-${generatedId}`;\n\n    // Determine states\n    const isChecked = groupValue === value;\n    const isDisabled = groupDisabled || itemDisabled;\n    const currentState = isDisabled ? 'disabled' : state;\n\n    // Use standard Radio component for consistency and simplicity\n    return (\n      <Radio\n        ref={ref}\n        id={inputId}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        size={size}\n        state={currentState}\n        className={className}\n        onChange={(e) => {\n          if (e.target.checked && !isDisabled) {\n            setValue(value);\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport default Radio;\nexport { RadioGroup, RadioGroupItem };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/Radio/index.mjs

@@ -11,6 +11,13 @@ import {
 } from "react";
 import { create, useStore } from "zustand";
 
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // src/components/Text/Text.tsx
 import { jsx } from "react/jsx-runtime";
 var Text = ({
@@ -54,7 +61,7 @@ var Text = ({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
@@ -175,8 +182,19 @@ var Radio = forwardRef(
       return sizeClasses.borderWidth;
     };
     const borderWidthClass = getBorderWidth();
-    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
-    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const radioClasses = cn(
+      BASE_RADIO_CLASSES,
+      actualRadioSize,
+      borderWidthClass,
+      stylingClasses,
+      className
+    );
+    const dotClasses = cn(
+      actualDotSize,
+      "rounded-full",
+      DOT_CLASSES[currentState],
+      "transition-all duration-200"
+    );
     const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
     const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
     const getTextColor = () => {
@@ -195,7 +213,11 @@ var Radio = forwardRef(
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          className: cn(
+            "flex flex-row items-center",
+            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
           children: [
             /* @__PURE__ */ jsx2(
               "input",
@@ -252,7 +274,11 @@ var Radio = forwardRef(
             label && /* @__PURE__ */ jsx2(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight,
+                  "flex-1 min-w-0"
+                ),
                 children: /* @__PURE__ */ jsx2(
                   Text_default,
                   {
@@ -260,7 +286,11 @@ var Radio = forwardRef(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
+                    className: cn(
+                      getCursorClass(),
+                      "select-none leading-normal flex items-center font-roboto truncate",
+                      labelClassName
+                    ),
                     color: getTextColor(),
                     children: label
                   }

package/dist/Radio/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  useEffect,\n  useRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-4 h-4',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      // Prevent automatic scroll when input changes\n      if (event.target) {\n        event.target.blur();\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5`\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={(node) => {\n              inputRef.current = node;\n              if (typeof ref === 'function') ref(node);\n              else if (ref) ref.current = node;\n            }}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            style={{\n              position: 'absolute',\n              left: '-9999px',\n              visibility: 'hidden',\n            }}\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <button\n            type=\"button\"\n            className={radioClasses}\n            disabled={disabled}\n            aria-pressed={checked}\n            onClick={(e) => {\n              // Prevent scroll when radio is clicked\n              e.preventDefault();\n              if (!disabled) {\n                // Simulate click on hidden input\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  // Remove focus to prevent scroll behavior\n                  inputRef.current.blur();\n                }\n              }\n            }}\n            onKeyDown={(e) => {\n              // Handle keyboard activation (Enter or Space)\n              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n                e.preventDefault();\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  inputRef.current.blur();\n                }\n              }\n            }}\n          >\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </button>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\n/**\n * RadioGroup store interface\n */\ninterface RadioGroupStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n  disabled: boolean;\n  name: string;\n}\n\ntype RadioGroupStoreApi = StoreApi<RadioGroupStore>;\n\n/**\n * Create a new RadioGroup store\n */\nconst createRadioGroupStore = (\n  name: string,\n  defaultValue: string,\n  disabled: boolean,\n  onValueChange?: (value: string) => void\n): RadioGroupStoreApi =>\n  create<RadioGroupStore>((set, get) => ({\n    value: defaultValue,\n    setValue: (value) => {\n      if (!get().disabled) {\n        set({ value });\n        get().onValueChange?.(value);\n      }\n    },\n    onValueChange,\n    disabled,\n    name,\n  }));\n\n/**\n * Hook to access RadioGroup store\n */\nexport const useRadioGroupStore = (externalStore?: RadioGroupStoreApi) => {\n  if (!externalStore) {\n    throw new Error('RadioGroupItem must be used within a RadioGroup');\n  }\n  return externalStore;\n};\n\n/**\n * Inject store into RadioGroupItem children\n */\nconst injectStore = (\n  children: ReactNode,\n  store: RadioGroupStoreApi\n): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === RadioGroupItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\n/**\n * RadioGroup component props interface\n */\nexport type RadioGroupProps = {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value for uncontrolled usage */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Group name for all radios */\n  name?: string;\n  /** Disabled state for the entire group */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Children components */\n  children: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\n/**\n * RadioGroup component for flexible radio group composition\n *\n * Uses Zustand for state management with automatic store injection.\n * Allows complete control over layout and styling by composing with RadioGroupItem.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\" onValueChange={setValue}>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option2\" id=\"r2\" />\n *     <label htmlFor=\"r2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value: propValue,\n      defaultValue = '',\n      onValueChange,\n      name: propName,\n      disabled = false,\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique name if not provided\n    const generatedId = useId();\n    const name = propName || `radio-group-${generatedId}`;\n\n    // Create store reference\n    const storeRef = useRef<RadioGroupStoreApi>(null);\n    storeRef.current ??= createRadioGroupStore(\n      name,\n      defaultValue,\n      disabled,\n      onValueChange\n    );\n    const store = storeRef.current;\n\n    // Get store actions\n    const { setValue } = useStore(store, (s) => s);\n\n    // Call onValueChange with initial value\n    useEffect(() => {\n      const currentValue = store.getState().value;\n      if (currentValue && onValueChange) {\n        onValueChange(currentValue);\n      }\n    }, []); // Empty dependency array for mount only\n\n    // Handle controlled value changes\n    useEffect(() => {\n      if (propValue !== undefined) {\n        setValue(propValue);\n      }\n    }, [propValue, setValue]);\n\n    // Update disabled state\n    useEffect(() => {\n      store.setState({ disabled });\n    }, [disabled, store]);\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        role=\"radiogroup\"\n        aria-label={name}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * RadioGroupItem component props interface\n */\nexport type RadioGroupItemProps = {\n  /** Value for this radio item */\n  value: string;\n  /** Store reference (automatically injected by RadioGroup) */\n  store?: RadioGroupStoreApi;\n  /** Disabled state for this specific item */\n  disabled?: boolean;\n  /** Size variant */\n  size?: RadioSize;\n  /** Visual state */\n  state?: RadioState;\n  /** Additional CSS classes */\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'\n>;\n\n/**\n * RadioGroupItem component for use within RadioGroup\n *\n * A radio button without label that works within RadioGroup context.\n * Provides just the radio input for maximum flexibility in composition.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  (\n    {\n      value,\n      store: externalStore,\n      disabled: itemDisabled,\n      size = 'medium',\n      state = 'default',\n      className = '',\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Get store and state\n    const store = useRadioGroupStore(externalStore);\n    const {\n      value: groupValue,\n      setValue,\n      disabled: groupDisabled,\n      name,\n    } = useStore(store);\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-item-${generatedId}`;\n\n    // Determine states\n    const isChecked = groupValue === value;\n    const isDisabled = groupDisabled || itemDisabled;\n    const currentState = isDisabled ? 'disabled' : state;\n\n    // Use standard Radio component for consistency and simplicity\n    return (\n      <Radio\n        ref={ref}\n        id={inputId}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        size={size}\n        state={currentState}\n        className={className}\n        onChange={(e) => {\n          if (e.target.checked && !isDisabled) {\n            setValue(value);\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport default Radio;\nexport { RadioGroup, RadioGroupItem };\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  useEffect,\n  useRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-4 h-4',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      // Prevent automatic scroll when input changes\n      if (event.target) {\n        event.target.blur();\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = cn(\n      BASE_RADIO_CLASSES,\n      actualRadioSize,\n      borderWidthClass,\n      stylingClasses,\n      className\n    );\n\n    // Get dot classes\n    const dotClasses = cn(\n      actualDotSize,\n      'rounded-full',\n      DOT_CLASSES[currentState],\n      'transition-all duration-200'\n    );\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={cn(\n            'flex flex-row items-center',\n            isWrapperNeeded\n              ? cn('p-1 border-2', wrapperBorderColor, 'rounded-lg gap-1.5')\n              : sizeClasses.spacing,\n            disabled ? 'opacity-40' : ''\n          )}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={(node) => {\n              inputRef.current = node;\n              if (typeof ref === 'function') ref(node);\n              else if (ref) ref.current = node;\n            }}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            style={{\n              position: 'absolute',\n              left: '-9999px',\n              visibility: 'hidden',\n            }}\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <button\n            type=\"button\"\n            className={radioClasses}\n            disabled={disabled}\n            aria-pressed={checked}\n            onClick={(e) => {\n              // Prevent scroll when radio is clicked\n              e.preventDefault();\n              if (!disabled) {\n                // Simulate click on hidden input\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  // Remove focus to prevent scroll behavior\n                  inputRef.current.blur();\n                }\n              }\n            }}\n            onKeyDown={(e) => {\n              // Handle keyboard activation (Enter or Space)\n              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n                e.preventDefault();\n                if (inputRef.current) {\n                  inputRef.current.click();\n                  inputRef.current.blur();\n                }\n              }\n            }}\n          >\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </button>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={cn(\n                'flex flex-row items-center',\n                sizeClasses.labelHeight,\n                'flex-1 min-w-0'\n              )}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={cn(\n                  getCursorClass(),\n                  'select-none leading-normal flex items-center font-roboto truncate',\n                  labelClassName\n                )}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\n/**\n * RadioGroup store interface\n */\ninterface RadioGroupStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n  disabled: boolean;\n  name: string;\n}\n\ntype RadioGroupStoreApi = StoreApi<RadioGroupStore>;\n\n/**\n * Create a new RadioGroup store\n */\nconst createRadioGroupStore = (\n  name: string,\n  defaultValue: string,\n  disabled: boolean,\n  onValueChange?: (value: string) => void\n): RadioGroupStoreApi =>\n  create<RadioGroupStore>((set, get) => ({\n    value: defaultValue,\n    setValue: (value) => {\n      if (!get().disabled) {\n        set({ value });\n        get().onValueChange?.(value);\n      }\n    },\n    onValueChange,\n    disabled,\n    name,\n  }));\n\n/**\n * Hook to access RadioGroup store\n */\nexport const useRadioGroupStore = (externalStore?: RadioGroupStoreApi) => {\n  if (!externalStore) {\n    throw new Error('RadioGroupItem must be used within a RadioGroup');\n  }\n  return externalStore;\n};\n\n/**\n * Inject store into RadioGroupItem children\n */\nconst injectStore = (\n  children: ReactNode,\n  store: RadioGroupStoreApi\n): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === RadioGroupItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\n/**\n * RadioGroup component props interface\n */\nexport type RadioGroupProps = {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value for uncontrolled usage */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Group name for all radios */\n  name?: string;\n  /** Disabled state for the entire group */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Children components */\n  children: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\n/**\n * RadioGroup component for flexible radio group composition\n *\n * Uses Zustand for state management with automatic store injection.\n * Allows complete control over layout and styling by composing with RadioGroupItem.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\" onValueChange={setValue}>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option2\" id=\"r2\" />\n *     <label htmlFor=\"r2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value: propValue,\n      defaultValue = '',\n      onValueChange,\n      name: propName,\n      disabled = false,\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique name if not provided\n    const generatedId = useId();\n    const name = propName || `radio-group-${generatedId}`;\n\n    // Create store reference\n    const storeRef = useRef<RadioGroupStoreApi>(null);\n    storeRef.current ??= createRadioGroupStore(\n      name,\n      defaultValue,\n      disabled,\n      onValueChange\n    );\n    const store = storeRef.current;\n\n    // Get store actions\n    const { setValue } = useStore(store, (s) => s);\n\n    // Call onValueChange with initial value\n    useEffect(() => {\n      const currentValue = store.getState().value;\n      if (currentValue && onValueChange) {\n        onValueChange(currentValue);\n      }\n    }, []); // Empty dependency array for mount only\n\n    // Handle controlled value changes\n    useEffect(() => {\n      if (propValue !== undefined) {\n        setValue(propValue);\n      }\n    }, [propValue, setValue]);\n\n    // Update disabled state\n    useEffect(() => {\n      store.setState({ disabled });\n    }, [disabled, store]);\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        role=\"radiogroup\"\n        aria-label={name}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * RadioGroupItem component props interface\n */\nexport type RadioGroupItemProps = {\n  /** Value for this radio item */\n  value: string;\n  /** Store reference (automatically injected by RadioGroup) */\n  store?: RadioGroupStoreApi;\n  /** Disabled state for this specific item */\n  disabled?: boolean;\n  /** Size variant */\n  size?: RadioSize;\n  /** Visual state */\n  state?: RadioState;\n  /** Additional CSS classes */\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'\n>;\n\n/**\n * RadioGroupItem component for use within RadioGroup\n *\n * A radio button without label that works within RadioGroup context.\n * Provides just the radio input for maximum flexibility in composition.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-3\">\n *     <RadioGroupItem value=\"option1\" id=\"r1\" />\n *     <label htmlFor=\"r1\">Option 1</label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  (\n    {\n      value,\n      store: externalStore,\n      disabled: itemDisabled,\n      size = 'medium',\n      state = 'default',\n      className = '',\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    // Get store and state\n    const store = useRadioGroupStore(externalStore);\n    const {\n      value: groupValue,\n      setValue,\n      disabled: groupDisabled,\n      name,\n    } = useStore(store);\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-item-${generatedId}`;\n\n    // Determine states\n    const isChecked = groupValue === value;\n    const isDisabled = groupDisabled || itemDisabled;\n    const currentState = isDisabled ? 'disabled' : state;\n\n    // Use standard Radio component for consistency and simplicity\n    return (\n      <Radio\n        ref={ref}\n        id={inputId}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        size={size}\n        state={currentState}\n        className={className}\n        onChange={(e) => {\n          if (e.target.checked && !isDisabled) {\n            setValue(value);\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport default Radio;\nexport { RadioGroup, RadioGroupItem };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":";AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,QAAkB,gBAAgB;;;ACf3C,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AF6JP,SAUE,OAAAA,MAVF;AAjQR,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;AAUA,IAAM,qBACJ;AAKF,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF;AAKA,IAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AACZ;AAwDA,IAAM,QAAQ;AAAA,EACZ,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM,SAAS,WAAW;AAC1C,UAAM,WAAW,OAAyB,IAAI;AAG9C,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,cAAc;AACrE,UAAM,eAAe,gBAAgB;AACrC,UAAM,UAAU,eAAe,cAAc;AAG7C,UAAM,eAAe,CAAC,UAAyC;AAC7D,YAAM,aAAa,MAAM,OAAO;AAEhC,UAAI,CAAC,cAAc;AACjB,2BAAmB,UAAU;AAAA,MAC/B;AAGA,UAAI,MAAM,QAAQ;AAChB,cAAM,OAAO,KAAK;AAAA,MACpB;AAEA,iBAAW,KAAK;AAAA,IAClB;AAGA,UAAM,eAAe,WAAW,aAAa;AAG7C,UAAM,cAAc,aAAa,IAAI;AAGrC,UAAM,kBAAkB,YAAY;AACpC,UAAM,gBAAgB,YAAY;AAGlC,UAAM,eAAe,UAAU,YAAY;AAG3C,UAAM,iBAAiB,cAAc,YAAY,EAAE,YAAY;AAG/D,UAAM,iBAAiB,MAAM;AAC3B,UAAI,iBAAiB,WAAW;AAC9B,eAAO;AAAA,MACT;AACA,aAAO,YAAY;AAAA,IACrB;AAEA,UAAM,mBAAmB,eAAe;AAGxC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAGA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA,YAAY,YAAY;AAAA,MACxB;AAAA,IACF;AAGA,UAAM,kBACJ,iBAAiB,aAAa,iBAAiB;AACjD,UAAM,qBACJ,iBAAiB,YACb,0BACA;AAGN,UAAM,eAAe,MAAM;AACzB,UAAI,iBAAiB,YAAY;AAC/B,eAAO,UAAU,kBAAkB;AAAA,MACrC;AAEA,UAAI,iBAAiB,WAAW;AAC9B,eAAO;AAAA,MACT;AAEA,aAAO,UAAU,kBAAkB;AAAA,IACrC;AAGA,UAAM,iBAAiB,MAAM;AAC3B,aAAO,iBAAiB,aACpB,uBACA;AAAA,IACN;AAEA,WACE,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,kBACI,GAAG,gBAAgB,oBAAoB,oBAAoB,IAC3D,YAAY;AAAA,YAChB,WAAW,eAAe;AAAA,UAC5B;AAAA,UAGA;AAAA,4BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,CAAC,SAAS;AACb,2BAAS,UAAU;AACnB,sBAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,2BAC9B,IAAK,KAAI,UAAU;AAAA,gBAC9B;AAAA,gBACA,MAAK;AAAA,gBACL,IAAI;AAAA,gBACJ;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,MAAM;AAAA,kBACN,YAAY;AAAA,gBACd;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,YAGA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAW;AAAA,gBACX;AAAA,gBACA,gBAAc;AAAA,gBACd,SAAS,CAAC,MAAM;AAEd,oBAAE,eAAe;AACjB,sBAAI,CAAC,UAAU;AAEb,wBAAI,SAAS,SAAS;AACpB,+BAAS,QAAQ,MAAM;AAEvB,+BAAS,QAAQ,KAAK;AAAA,oBACxB;AAAA,kBACF;AAAA,gBACF;AAAA,gBACA,WAAW,CAAC,MAAM;AAEhB,uBAAK,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,CAAC,UAAU;AACrD,sBAAE,eAAe;AACjB,wBAAI,SAAS,SAAS;AACpB,+BAAS,QAAQ,MAAM;AACvB,+BAAS,QAAQ,KAAK;AAAA,oBACxB;AAAA,kBACF;AAAA,gBACF;AAAA,gBAGC,qBAAW,gBAAAA,KAAC,SAAI,WAAW,YAAY;AAAA;AAAA,YAC1C;AAAA,YAGC,SACC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ;AAAA,gBACF;AAAA,gBAEA,0BAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,SAAS;AAAA,oBACT,MAAM,YAAY;AAAA,oBAClB,QAAO;AAAA,oBACP,WAAW;AAAA,sBACT,eAAe;AAAA,sBACf;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,OAAO,aAAa;AAAA,oBAEnB;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MAEJ;AAAA,MAGC,gBACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,OAAM;AAAA,UAEL;AAAA;AAAA,MACH;AAAA,MAID,cAAc,CAAC,gBACd,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,OAAM;AAAA,UAEL;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AAkBpB,IAAM,wBAAwB,CAC5B,MACA,cACA,UACA,kBAEA,OAAwB,CAAC,KAAK,SAAS;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,CAAC,UAAU;AACnB,QAAI,CAAC,IAAI,EAAE,UAAU;AACnB,UAAI,EAAE,MAAM,CAAC;AACb,UAAI,EAAE,gBAAgB,KAAK;AAAA,IAC7B;AAAA,EACF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE;AAKG,IAAM,qBAAqB,CAAC,kBAAuC;AACxE,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AAKA,IAAM,cAAc,CAClB,UACA,UAEA,SAAS,IAAI,UAAU,CAAC,UAAU;AAChC,MAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,QAAM,aAAa;AACnB,QAAM,eAAe,WAAW,SAAS;AACzC,SAAO,aAAa,YAAY;AAAA,IAC9B,GAAI,eAAe,EAAE,MAAM,IAAI,CAAC;AAAA,IAChC,GAAI,WAAW,MAAM,WACjB,EAAE,UAAU,YAAY,WAAW,MAAM,UAAU,KAAK,EAAE,IAC1D,CAAC;AAAA,EACP,CAAC;AACH,CAAC;AA0CH,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,cAAc,MAAM;AAC1B,UAAM,OAAO,YAAY,eAAe,WAAW;AAGnD,UAAM,WAAW,OAA2B,IAAI;AAChD,aAAS,YAAY;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,QAAQ,SAAS;AAGvB,UAAM,EAAE,SAAS,IAAI,SAAS,OAAO,CAAC,MAAM,CAAC;AAG7C,cAAU,MAAM;AACd,YAAM,eAAe,MAAM,SAAS,EAAE;AACtC,UAAI,gBAAgB,eAAe;AACjC,sBAAc,YAAY;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,CAAC;AAGL,cAAU,MAAM;AACd,UAAI,cAAc,QAAW;AAC3B,iBAAS,SAAS;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,CAAC;AAGxB,cAAU,MAAM;AACd,YAAM,SAAS,EAAE,SAAS,CAAC;AAAA,IAC7B,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACX,GAAG;AAAA,QAEH,sBAAY,UAAU,KAAK;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAuCzB,IAAM,iBAAiB;AAAA,EACrB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,QAAQ,mBAAmB,aAAa;AAC9C,UAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,IACF,IAAI,SAAS,KAAK;AAGlB,UAAM,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM,cAAc,WAAW;AAG/C,UAAM,YAAY,eAAe;AACjC,UAAM,aAAa,iBAAiB;AACpC,UAAM,eAAe,aAAa,aAAa;AAG/C,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,UAAU,CAAC,MAAM;AACf,cAAI,EAAE,OAAO,WAAW,CAAC,YAAY;AACnC,qBAAS,KAAK;AAAA,UAChB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,IAAO,gBAAQ;","names":["jsx"]}

package/dist/Select/index.js

@@ -33,6 +33,15 @@ module.exports = __toCommonJS(Select_exports);
 var import_zustand = require("zustand");
 var import_react = require("react");
 var import_phosphor_react = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Select/Select.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var VARIANT_CLASSES = {
   outlined: "border rounded-lg focus:border-primary-950",
@@ -208,11 +217,11 @@ var Select = ({
       "label",
       {
         htmlFor: selectId,
-        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+        className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("relative", sizeClasses), ref: selectRef, children: injectStore(children, store, size, selectId) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
       helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
       errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
@@ -273,7 +282,10 @@ var SelectTrigger = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_phosphor_react.CaretDown,
             {
-              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+              className: cn(
+                "h-[1em] w-[1em] opacity-50 transition-transform",
+                open ? "rotate-180" : ""
+              )
             }
           )
         ]
@@ -300,7 +312,11 @@ var SelectContent = (0, import_react.forwardRef)(
       {
         role: "menu",
         ref,
-        className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
+        className: cn(
+          "bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100",
+          getPositionClasses(),
+          className
+        ),
         ...props,
         children
       }