@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-X3YNHX77.js → chunk-U4JPTWK6.js}

@@ -1,8 +1,8 @@
-import { createNotificationColorVariants, componentColors } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import { X } from 'lucide-react';
 import React from 'react';
+import { X } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var notificationVariants = cva(
@@ -10,34 +10,19 @@ var notificationVariants = cva(
   {
     variants: {
       variant: {
-        default: "",
-        solid: "",
-        outline: "border-2 border-l-6",
-        soft: "border-l-6"
-      },
-      color: {
-        default: "",
-        primary: "",
-        secondary: "",
-        accent: "",
-        success: "",
-        error: "",
-        warning: "",
-        info: ""
+        default: "bg-slot border border-slot text-slot-fg",
+        solid: "bg-slot text-slot-fg",
+        outline: "bg-background border border-slot border-l-4 border-l-slot text-slot",
+        soft: "bg-slot-10 border-l-4 border-l-slot text-slot"
       },
+      color: colorVars,
       size: {
-        xs: "p-2 text-xs gap-2",
-        sm: "p-3 text-sm gap-2.5",
-        md: "p-4 text-base gap-3",
-        lg: "p-5 text-lg gap-3.5"
+        xs: "p-2 gap-2",
+        sm: "p-3 gap-2.5",
+        md: "p-4 gap-3",
+        lg: "p-5 gap-3.5"
       }
     },
-    compoundVariants: createNotificationColorVariants(componentColors, [
-      "default",
-      "solid",
-      "outline",
-      "soft"
-    ]),
     defaultVariants: {
       variant: "default",
       color: "default",
@@ -45,6 +30,18 @@ var notificationVariants = cva(
     }
   }
 );
+var titleSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var descriptionSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base"
+};
 var Notification = React.memo(
   ({
     title,
@@ -52,16 +49,18 @@ var Notification = React.memo(
     variant = "default",
     color = "default",
     size = "md",
-    closable = true,
+    closable,
     onClose,
     action,
     className,
     classNames,
     children
   }) => {
+    const isClosable = closable ?? onClose !== void 0;
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-slot": "root",
         role: "alert",
         "aria-live": "polite",
         "aria-atomic": "true",
@@ -73,20 +72,20 @@ var Notification = React.memo(
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", "notification_content", classNames?.content), children: [
-            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1 text-sm", "notification_title", classNames?.title), children: title }),
-            description && /* @__PURE__ */ jsx("div", { className: cn("text-sm opacity-90", "notification_description", classNames?.description), children: description }),
+            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1", titleSizeClasses[size], "notification_title", classNames?.title), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn("opacity-90", descriptionSizeClasses[size], "notification_description", classNames?.description), children: description }),
             children && /* @__PURE__ */ jsx("div", { className: "mt-2", children }),
             action && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: action.onClick,
-                className: cn("mt-2 text-sm font-medium underline hover:no-underline", "notification_action", classNames?.action),
+                className: cn("mt-2 font-medium underline hover:no-underline", descriptionSizeClasses[size], "notification_action", classNames?.action),
                 children: action.label
               }
             )
           ] }),
-          closable && /* @__PURE__ */ jsx(
+          isClosable && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -105,5 +104,5 @@ Notification.displayName = "Notification";
 var notification_default = Notification;
 
 export { notification_default };
-//# sourceMappingURL=chunk-X3YNHX77.js.map
-//# sourceMappingURL=chunk-X3YNHX77.js.map
+//# sourceMappingURL=chunk-U4JPTWK6.js.map
+//# sourceMappingURL=chunk-U4JPTWK6.js.map

package/dist/chunk-U4JPTWK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notification/index.tsx"],"names":[],"mappings":"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","file":"chunk-U4JPTWK6.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { X } from 'lucide-react'\n\nimport { cn, iconSizes } from '../utils'\nimport { colorVars } from '../variants'\nimport type { NotificationProps } from './types'\n\nconst notificationVariants = cva(\n  'relative flex gap-3 rounded-md transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-slot border border-slot text-slot-fg',\n        solid: 'bg-slot text-slot-fg',\n        outline: 'bg-background border border-slot border-l-4 border-l-slot text-slot',\n        soft: 'bg-slot-10 border-l-4 border-l-slot text-slot',\n      },\n      color: colorVars,\n      size: {\n        xs: 'p-2 gap-2',\n        sm: 'p-3 gap-2.5',\n        md: 'p-4 gap-3',\n        lg: 'p-5 gap-3.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst titleSizeClasses = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n}\n\nconst descriptionSizeClasses = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-base',\n}\n\nconst Notification = React.memo<NotificationProps>(\n  ({\n    title,\n    description,\n    variant = 'default',\n    color = 'default',\n    size = 'md',\n    closable,\n    onClose,\n    action,\n    className,\n    classNames,\n    children,\n  }) => {\n    const isClosable = closable ?? (onClose !== undefined)\n\n    return (\n      <div\n        data-slot=\"root\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className={cn(\n          'notification_root',\n          notificationVariants({ variant, color, size }),\n          className,\n          classNames?.root,\n        )}\n      >\n        <div className={cn('flex-1 min-w-0', 'notification_content', classNames?.content)}>\n          {title && <div className={cn('font-semibold mb-1', titleSizeClasses[size], 'notification_title', classNames?.title)}>{title}</div>}\n          {description && (\n            <div className={cn('opacity-90', descriptionSizeClasses[size], 'notification_description', classNames?.description)}>{description}</div>\n          )}\n          {children && <div className=\"mt-2\">{children}</div>}\n          {action && (\n            <button\n              type=\"button\"\n              onClick={action.onClick}\n              className={cn('mt-2 font-medium underline hover:no-underline', descriptionSizeClasses[size], 'notification_action', classNames?.action)}\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {isClosable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cn('shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity', 'notification_closeButton', classNames?.closeButton)}\n            aria-label=\"Close notification\"\n          >\n            <X className={cn(iconSizes[size], 'notification_icon', classNames?.icon)} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n\nNotification.displayName = 'Notification'\n\nexport type * from './types'\nexport default Notification\n"]}

package/dist/{chunk-R3TLU26W.js → chunk-UFC3RGIN.js}

@@ -1,5 +1,5 @@
-import { radioCheckedColorClasses } from './chunk-POXI7JJ4.js';
-import { cn } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import React, { useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -8,7 +8,7 @@ var radioVariants = cva(
   "appearance-none rounded-full border-border border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary",
   {
     variants: {
-      color: radioCheckedColorClasses,
+      color: colorVars,
       size: {
         xs: "w-(--checkbox-size-xs) h-(--checkbox-size-xs)",
         sm: "w-(--checkbox-size-sm) h-(--checkbox-size-sm)",
@@ -50,6 +50,8 @@ var Radio = React.memo(
         className: cn(
           "radio_radio",
           radioVariants({ color, size, error: !!error }),
+          "checked:border-slot checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--_c)]",
+          "focus-visible:ring-slot",
           className,
           classNames?.radio
         ),
@@ -59,7 +61,7 @@ var Radio = React.memo(
         id: radioId
       }
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn("radio_root", "w-full", classNames?.root), children: [
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "root", className: cn("radio_root", "w-full", classNames?.root), children: [
       /* @__PURE__ */ jsxs(
         "label",
         {
@@ -75,7 +77,7 @@ var Radio = React.memo(
               {
                 className: cn(
                   "radio_label",
-                  "text-sm text-text-secondary select-none",
+                  "text-sm text-text-primary select-none",
                   error && "text-error",
                   props.disabled && "opacity-50",
                   classNames?.label
@@ -106,5 +108,5 @@ Radio.displayName = "Radio";
 var radio_default = Radio;
 
 export { radio_default };
-//# sourceMappingURL=chunk-R3TLU26W.js.map
-//# sourceMappingURL=chunk-R3TLU26W.js.map
+//# sourceMappingURL=chunk-UFC3RGIN.js.map
+//# sourceMappingURL=chunk-UFC3RGIN.js.map

package/dist/chunk-UFC3RGIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/index.tsx"],"names":[],"mappings":"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","file":"chunk-UFC3RGIN.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React, { useId } from \"react\";\n\nimport { cn } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { RadioProps } from \"./types\";\n\nconst radioVariants = cva(\n  \"appearance-none rounded-full border-border border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary\",\n  {\n    variants: {\n      color: colorVars,\n      size: {\n        xs: \"w-(--checkbox-size-xs) h-(--checkbox-size-xs)\",\n        sm: \"w-(--checkbox-size-sm) h-(--checkbox-size-sm)\",\n        md: \"w-(--checkbox-size-md) h-(--checkbox-size-md)\",\n        lg: \"w-(--checkbox-size-lg) h-(--checkbox-size-lg)\",\n      },\n      error: {\n        true: \"border-error checked:border-error\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      color: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nconst Radio = React.memo<RadioProps>(\n  ({\n    color = \"primary\",\n    size = \"md\",\n    label,\n    helperText,\n    error,\n    className,\n    ref,\n    classNames,\n    ...props\n  }) => {\n    // Generate unique ID for accessibility\n    const uniqueId = useId();\n    const radioId = props.id || `radio-${uniqueId}`;\n    const helperId = `radio-helper-${uniqueId}`;\n    const hasHelperText = !!(helperText || error);\n\n    const radioElement = (\n      <input\n        ref={ref}\n        type=\"radio\"\n        className={cn(\n          \"radio_radio\",\n          radioVariants({ color, size, error: !!error }),\n          \"checked:border-slot checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--_c)]\",\n          \"focus-visible:ring-slot\",\n          className,\n          classNames?.radio,\n        )}\n        aria-invalid={!!error || undefined}\n        aria-describedby={hasHelperText ? helperId : undefined}\n        {...props}\n        id={radioId}\n      />\n    );\n\n    return (\n      <div data-slot=\"root\" className={cn(\"radio_root\", \"w-full\", classNames?.root)}>\n        <label\n          htmlFor={radioId}\n          className={cn(\n            \"flex items-center gap-2\",\n            !props.disabled && \"cursor-pointer\",\n          )}\n        >\n          {radioElement}\n          {label && (\n            <span\n              className={cn(\n                \"radio_label\",\n                \"text-sm text-text-primary select-none\",\n                error && \"text-error\",\n                props.disabled && \"opacity-50\",\n                classNames?.label,\n              )}\n            >\n              {label}\n            </span>\n          )}\n        </label>\n        {(helperText || error) && (\n          <p\n            id={helperId}\n            className={cn(\n              \"radio_description\",\n              \"mt-1 ml-0 text-xs\",\n              error ? \"text-error\" : \"text-text-secondary\",\n              classNames?.description,\n            )}\n          >\n            {typeof error === \"string\" ? error : helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\n\nexport type * from \"./types\";\nexport default Radio;\n"]}

package/dist/{chunk-KH577UDI.js → chunk-W5VLFE4U.js}

@@ -1,8 +1,8 @@
-import { spinner_default } from './chunk-Y4XAXZHB.js';
-import { getValidationStatus, cn, statusMessageVariants, iconSizes } from './chunk-NGYLRX6F.js';
+import { spinner_default } from './chunk-RRPMZYVN.js';
+import { getValidationStatus, cn, statusMessageVariants, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import { X } from 'lucide-react';
 import React, { useId, useMemo } from 'react';
+import { X } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var inputVariants = cva(
@@ -66,7 +66,7 @@ var Input = React.memo(
     ref,
     ...props
   }) => {
-    const [internalValue, setInternalValue] = React.useState("");
+    const [internalValue, setInternalValue] = React.useState(props.defaultValue ?? "");
     const currentValue = value !== void 0 ? value : internalValue;
     const uniqueId = useId();
     const inputId = props.id || `input-${uniqueId}`;
@@ -85,8 +85,11 @@ var Input = React.memo(
     );
     const handleClear = React.useCallback(() => {
       if (value === void 0) setInternalValue("");
+      onChange?.({
+        target: { value: "" }
+      });
       onClear?.();
-    }, [value, onClear]);
+    }, [value, onChange, onClear]);
     const showClear = clearable && currentValue && !props.disabled && !props.readOnly;
     const hasRightIcon = rightIcon || showClear || loading;
     const ariaDescribedBy = useMemo(() => {
@@ -174,7 +177,7 @@ var Input = React.memo(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs("div", { "data-slot": "rightIcon", className: rightIconClass, children: [
+      (rightIcon || showClear || loading) && /* @__PURE__ */ jsxs("div", { "data-slot": "rightIcon", className: rightIconClass, children: [
         showClear && !loading && /* @__PURE__ */ jsx(
           "button",
           {
@@ -214,5 +217,5 @@ Input.displayName = "Input";
 var input_default = Input;
 
 export { input_default };
-//# sourceMappingURL=chunk-KH577UDI.js.map
-//# sourceMappingURL=chunk-KH577UDI.js.map
+//# sourceMappingURL=chunk-W5VLFE4U.js.map
+//# sourceMappingURL=chunk-W5VLFE4U.js.map

package/dist/chunk-W5VLFE4U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input/index.tsx"],"names":[],"mappings":"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","file":"chunk-W5VLFE4U.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React, { useId, useMemo } from \"react\";\n\nimport { X } from 'lucide-react';\n\nimport Spinner from \"../spinner\";\n\nimport {\n  cn,\n  getValidationStatus,\n  iconSizes,\n  statusMessageVariants,\n} from \"../utils\";\nimport type { InputProps } from \"./types\";\n\nconst inputVariants = cva(\n  \"w-full placeholder:text-text-secondary/50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors\",\n  {\n    variants: {\n      variant: {\n        outline: \"bg-background border border-border focus:border-primary\",\n        filled: \"bg-surface border border-transparent focus:border-primary\",\n      },\n      status: {\n        default: \"\",\n        error: \"border-error focus:border-error\",\n        warning: \"border-warning focus:border-warning\",\n        info: \"border-info focus:border-info\",\n        success: \"border-success focus:border-success\",\n      },\n      size: {\n        xs: \"h-(--input-height-xs) px-(--input-padding-x-xs) text-xs\",\n        sm: \"h-(--input-height-sm) px-(--input-padding-x-sm) text-sm\",\n        md: \"h-(--input-height-md) px-(--input-padding-x-md) text-base\",\n        lg: \"h-(--input-height-lg) px-(--input-padding-x-lg) text-lg\",\n      },\n      fullWidth: {\n        true: \"w-full\",\n        false: \"max-w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"outline\",\n      status: \"default\",\n      size: \"md\",\n      fullWidth: true,\n    },\n  },\n);\n\nconst Input = React.memo<InputProps>(\n  ({\n    variant = \"outline\",\n    size = \"md\",\n    label,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n    messagePosition = \"bottom\",\n    leftIcon,\n    rightIcon,\n    clearable = false,\n    onClear,\n    loading = false,\n    maxLength,\n    showCount = false,\n    fullWidth = true,\n    className,\n    wrapperClassName,\n    classNames,\n    value,\n    onChange,\n    ref,\n    ...props\n  }) => {\n\n\n    const [internalValue, setInternalValue] = React.useState(props.defaultValue ?? '');\n    const currentValue = value !== undefined ? value : internalValue;\n\n    const uniqueId = useId();\n    const inputId = props.id || `input-${uniqueId}`;\n    const helperId = `input-helper-${uniqueId}`;\n    const loadingId = `input-loading-${uniqueId}`;\n\n    const { status, message: helperMessage } = useMemo(\n      () => getValidationStatus({ error, warning, info, success, helperText }),\n      [error, warning, info, success, helperText],\n    );\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (value === undefined) setInternalValue(e.target.value);\n        onChange?.(e);\n      },\n      [value, onChange],\n    );\n\n    const handleClear = React.useCallback(() => {\n      if (value === undefined) setInternalValue('');\n\n      onChange?.({\n        target: { value: \"\" },\n      } as React.ChangeEvent<HTMLInputElement>);\n      onClear?.();\n    }, [value, onChange, onClear]);\n\n    const showClear =\n      clearable && currentValue && !props.disabled && !props.readOnly;\n    const hasRightIcon = rightIcon || showClear || loading;\n\n    // Memoize aria-describedby to avoid array recreation on every render\n    const ariaDescribedBy = useMemo(() => {\n      const parts: string[] = [];\n      if (helperMessage) parts.push(helperId);\n      if (loading) parts.push(loadingId);\n      return parts.length > 0 ? parts.join(\" \") : undefined;\n    }, [helperMessage, helperId, loading, loadingId]);\n\n    const wrapperClass = cn(\n      \"input_wrapper\",\n      \"relative w-full\",\n      wrapperClassName,\n      loading && \"opacity-50 cursor-not-allowed\",\n      classNames?.wrapper,\n    );\n\n    const leftIconClass = cn(\n      \"input_leftIcon\",\n      \"absolute left-3 flex items-center h-full top-0 text-text-secondary\",\n      classNames?.leftIcon,\n    );\n\n    const inputClass = cn(\n      \"input_input\",\n      inputVariants({ variant, status, size, fullWidth }),\n      !!leftIcon && \"pl-10\",\n      !!hasRightIcon && \"pr-8\",\n      className,\n      classNames?.input,\n    );\n\n    const rightIconClass = cn(\n      \"input_rightIcon\",\n      \"absolute right-3 flex gap-2 items-center h-full top-0 text-text-secondary\",\n      classNames?.rightIcon,\n    );\n\n    const clearButtonClass = cn(\n      \"input_clearButton\",\n      \"flex items-center h-full top-0 text-text-secondary hover:text-text-primary\",\n      classNames?.clearButton,\n    );\n\n    const rootClass = cn(\n      \"input_root\",\n      \"w-full flex flex-col relative\",\n      !fullWidth && \"inline-block\",\n      classNames?.root,\n    );\n\n    const labelClass = cn(\n      \"input_label\",\n      \"text-sm font-medium text-text-secondary\",\n      classNames?.label,\n    );\n\n    const helperClass = cn(\n      \"input_helper\",\n      statusMessageVariants({ status }),\n      status === \"error\" ? classNames?.error : classNames?.helper,\n    );\n\n    const helperBottomClass = cn(\n      \"input_helper\",\n      statusMessageVariants({ status }),\n      \"mt-0.5\",\n      status === \"error\" ? classNames?.error : classNames?.helper,\n    );\n\n    const iconSize = iconSizes[size];\n\n    const inputElement = (\n      <div data-slot=\"wrapper\" className={wrapperClass}>\n        {leftIcon && (\n          <div\n            data-slot=\"leftIcon\"\n            className={leftIconClass}\n            aria-hidden=\"true\"\n          >\n            {leftIcon}\n          </div>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          data-slot=\"input\"\n          className={inputClass}\n          value={currentValue}\n          onChange={handleChange}\n          maxLength={maxLength}\n          aria-invalid={status === \"error\"}\n          aria-busy={loading}\n          aria-describedby={ariaDescribedBy}\n          {...props}\n        />\n        {(rightIcon || showClear || loading) && (\n          <div data-slot=\"rightIcon\" className={rightIconClass}>\n            {showClear && !loading && (\n              <button\n                type=\"button\"\n                onClick={handleClear}\n                data-slot=\"clearButton\"\n                className={clearButtonClass}\n                aria-label=\"Clear input\"\n              >\n                <X className={iconSize} aria-hidden=\"true\" />\n              </button>\n            )}\n            {loading ? (\n              <>\n                <Spinner aria-hidden=\"true\" />\n                <span id={loadingId} className=\"sr-only\">\n                  Loading\n                </span>\n              </>\n            ) : (\n              rightIcon && <span aria-hidden=\"true\">{rightIcon}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <div data-slot=\"root\" className={rootClass}>\n        <div className=\"flex gap-2 items-center relative mb-0.5\">\n          {label && (\n            <label htmlFor={inputId} data-slot=\"label\" className={labelClass}>\n              {label}\n              {props.required && <span className=\"text-error ml-1\">*</span>}\n            </label>\n          )}\n          {helperMessage && messagePosition === \"top\" && (\n            <p id={helperId} data-slot=\"helper\" className={helperClass}>\n              {helperMessage}\n            </p>\n          )}\n          {showCount && maxLength && (\n            <span className=\"text-xs text-text-secondary absolute right-0\">\n              {String(currentValue).length}/{maxLength}\n            </span>\n          )}\n        </div>\n        {inputElement}\n        {helperMessage && messagePosition === \"bottom\" && (\n          <p id={helperId} data-slot=\"helper\" className={helperBottomClass}>\n            {helperMessage}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport type * from \"./types\";\nexport default Input;\n"]}

package/dist/{chunk-G6NVGBYZ.js → chunk-WG5AYAC6.js}

@@ -1,8 +1,10 @@
-import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent } from './chunk-YXLIGJTN.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent } from './chunk-AFW2ORFT.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import { Command as Command$1 } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
+import { Search } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var commandVariants = cva(
@@ -21,7 +23,7 @@ var commandVariants = cva(
     }
   }
 );
-var Command = ({
+var Command = React.memo(({
   className,
   size = "md",
   classNames,
@@ -35,9 +37,9 @@ var Command = ({
       ...props
     }
   );
-};
+});
 Command.displayName = "Command";
-var CommandModal = ({
+var CommandModal = React.memo(({
   title = "Command Palette",
   description = "Search for a command to run...",
   children,
@@ -67,7 +69,7 @@ var CommandModal = ({
       }
     )
   ] });
-};
+});
 CommandModal.displayName = "CommandModal";
 var commandInputVariants = cva(
   "flex w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-text-secondary/50 text-text-primary",
@@ -101,7 +103,7 @@ var commandInputWrapperVariants = cva(
     }
   }
 );
-var CommandInput = ({
+var CommandInput = React.memo(({
   className,
   size = "md",
   classNames,
@@ -114,7 +116,7 @@ var CommandInput = ({
       className: commandInputWrapperVariants({ size }),
       children: [
         /* @__PURE__ */ jsx(
-          SearchIcon,
+          Search,
           {
             "data-slot": "command-input-icon",
             className: cn("command_inputIcon", "shrink-0 opacity-50 text-text-secondary", iconSizes[size], classNames?.inputIcon)
@@ -131,7 +133,7 @@ var CommandInput = ({
       ]
     }
   );
-};
+});
 CommandInput.displayName = "CommandInput";
 var commandListVariants = cva(
   "scroll-py-1 overflow-x-hidden overflow-y-auto",
@@ -149,7 +151,7 @@ var commandListVariants = cva(
     }
   }
 );
-var CommandList = ({
+var CommandList = React.memo(({
   className,
   size = "md",
   classNames,
@@ -163,7 +165,7 @@ var CommandList = ({
       ...props
     }
   );
-};
+});
 CommandList.displayName = "CommandList";
 var commandEmptyVariants = cva("text-center text-text-secondary", {
   variants: {
@@ -178,7 +180,7 @@ var commandEmptyVariants = cva("text-center text-text-secondary", {
     size: "md"
   }
 });
-var CommandEmpty = ({
+var CommandEmpty = React.memo(({
   size = "md",
   classNames,
   ...props
@@ -191,7 +193,7 @@ var CommandEmpty = ({
       ...props
     }
   );
-};
+});
 CommandEmpty.displayName = "CommandEmpty";
 var commandGroupVariants = cva(
   "overflow-hidden text-text-primary [&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:font-medium",
@@ -209,7 +211,7 @@ var commandGroupVariants = cva(
     }
   }
 );
-var CommandGroup = ({
+var CommandGroup = React.memo(({
   className,
   size = "md",
   classNames,
@@ -223,7 +225,7 @@ var CommandGroup = ({
       ...props
     }
   );
-};
+});
 CommandGroup.displayName = "CommandGroup";
 var commandSeparatorVariants = cva("bg-border h-px", {
   variants: {
@@ -238,7 +240,7 @@ var commandSeparatorVariants = cva("bg-border h-px", {
     size: "md"
   }
 });
-var CommandSeparator = ({
+var CommandSeparator = React.memo(({
   className,
   size = "md",
   ...props
@@ -251,18 +253,8 @@ var CommandSeparator = ({
       ...props
     }
   );
-};
+});
 CommandSeparator.displayName = "CommandSeparator";
-var commandSelectedColorClasses = {
-  default: "data-[selected=true]:bg-surface data-[selected=true]:text-text-primary",
-  primary: "data-[selected=true]:bg-primary/10 data-[selected=true]:text-primary",
-  secondary: "data-[selected=true]:bg-secondary/10 data-[selected=true]:text-secondary",
-  accent: "data-[selected=true]:bg-accent/10 data-[selected=true]:text-accent",
-  success: "data-[selected=true]:bg-success/10 data-[selected=true]:text-success",
-  error: "data-[selected=true]:bg-error/10 data-[selected=true]:text-error",
-  warning: "data-[selected=true]:bg-warning/10 data-[selected=true]:text-warning",
-  info: "data-[selected=true]:bg-info/10 data-[selected=true]:text-info"
-};
 var commandItemVariants = cva(
   "relative flex cursor-default items-center gap-2 rounded-sm outline-hidden select-none text-text-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-text-secondary transition-colors",
   {
@@ -279,7 +271,7 @@ var commandItemVariants = cva(
     }
   }
 );
-var CommandItem = ({
+var CommandItem = React.memo(({
   className,
   size = "md",
   color = "primary",
@@ -290,11 +282,11 @@ var CommandItem = ({
     Command$1.Item,
     {
       "data-slot": "command-item",
-      className: cn("command_item", commandItemVariants({ size }), commandSelectedColorClasses[color], classNames?.item, className),
+      className: cn("command_item", commandItemVariants({ size }), colorVars[color], "data-[selected=true]:bg-slot-10 data-[selected=true]:text-slot", classNames?.item, className),
       ...props
     }
   );
-};
+});
 CommandItem.displayName = "CommandItem";
 var commandShortcutVariants = cva(
   "ml-auto tracking-widest text-text-secondary opacity-60",
@@ -312,7 +304,7 @@ var commandShortcutVariants = cva(
     }
   }
 );
-var CommandShortcut = ({
+var CommandShortcut = React.memo(({
   className,
   size = "md",
   classNames,
@@ -326,9 +318,9 @@ var CommandShortcut = ({
       ...props
     }
   );
-};
+});
 CommandShortcut.displayName = "CommandShortcut";
 
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut };
-//# sourceMappingURL=chunk-G6NVGBYZ.js.map
-//# sourceMappingURL=chunk-G6NVGBYZ.js.map
+//# sourceMappingURL=chunk-WG5AYAC6.js.map
+//# sourceMappingURL=chunk-WG5AYAC6.js.map

package/dist/chunk-WG5AYAC6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/command/index.tsx"],"names":["CommandPrimitive","SearchIcon"],"mappings":"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","file":"chunk-WG5AYAC6.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Search as SearchIcon } from 'lucide-react'\n\nimport { colorVars } from '../variants'\nimport { CommandSize, CommandClassNames } from './types'\n\nimport {\n  Modal,\n  ModalContent,\n  ModalDescription,\n  ModalHeader,\n  ModalTitle,\n} from '../modal'\nimport { ComponentColor } from '../types'\nimport { cn, iconSizes } from '../utils'\n\nconst commandVariants = cva(\n  'flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-text-primary',\n  {\n    variants: {\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-base',\n        lg: 'text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst Command = React.memo(({\n  className,\n  size = 'md',\n  classNames,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('command_root', commandVariants({ size }), classNames?.root, className)}\n      {...props}\n    />\n  )\n})\n\nCommand.displayName = 'Command'\n\nconst CommandModal = React.memo(({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = true,\n  size = 'md',\n  ...props\n}: React.ComponentProps<typeof Modal> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  size?: CommandSize\n}) => {\n  return (\n    <Modal {...props}>\n      <ModalHeader className=\"sr-only\">\n        <ModalTitle>{title}</ModalTitle>\n        <ModalDescription>{description}</ModalDescription>\n      </ModalHeader>\n      <ModalContent\n        className={cn('overflow-hidden p-0', className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command\n          size={size}\n          className=\"[&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0\"\n        >\n          {children}\n        </Command>\n      </ModalContent>\n    </Modal>\n  )\n})\n\nCommandModal.displayName = 'CommandModal'\n\nconst commandInputVariants = cva(\n  'flex w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-text-secondary/50 text-text-primary',\n  {\n    variants: {\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-base',\n        lg: 'text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst commandInputWrapperVariants = cva(\n  'flex items-center gap-2 border-b border-border px-3',\n  {\n    variants: {\n      size: {\n        xs: 'h-6',\n        sm: 'h-8',\n        md: 'h-10',\n        lg: 'h-12',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst CommandInput = React.memo(({\n  className,\n  size = 'md',\n  classNames,\n  ...props\n}: Omit<React.ComponentProps<typeof CommandPrimitive.Input>, 'size'> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={commandInputWrapperVariants({ size })}\n    >\n      <SearchIcon\n        data-slot=\"command-input-icon\"\n        className={cn('command_inputIcon', 'shrink-0 opacity-50 text-text-secondary', iconSizes[size], classNames?.inputIcon)}\n      />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn('command_input', commandInputVariants({ size }), classNames?.input, className)}\n        {...props}\n      />\n    </div>\n  )\n})\n\nCommandInput.displayName = 'CommandInput'\n\nconst commandListVariants = cva(\n  'scroll-py-1 overflow-x-hidden overflow-y-auto',\n  {\n    variants: {\n      size: {\n        xs: 'max-h-[150px]',\n        sm: 'max-h-[200px]',\n        md: 'max-h-[300px]',\n        lg: 'max-h-[400px]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst CommandList = React.memo(({\n  className,\n  size = 'md',\n  classNames,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn('command_list', commandListVariants({ size }), classNames?.list, className)}\n      {...props}\n    />\n  )\n})\n\nCommandList.displayName = 'CommandList'\n\nconst commandEmptyVariants = cva('text-center text-text-secondary', {\n  variants: {\n    size: {\n      xs: 'py-3 text-[10px]',\n      sm: 'py-4 text-xs',\n      md: 'py-6 text-sm',\n      lg: 'py-8 text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nconst CommandEmpty = React.memo(({\n  size = 'md',\n  classNames,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn('command_empty', commandEmptyVariants({ size }), classNames?.empty)}\n      {...props}\n    />\n  )\n})\n\nCommandEmpty.displayName = 'CommandEmpty'\n\nconst commandGroupVariants = cva(\n  'overflow-hidden text-text-primary [&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:font-medium',\n  {\n    variants: {\n      size: {\n        xs: 'p-0.5 [&_[cmdk-group-heading]]:px-1 [&_[cmdk-group-heading]]:py-0.5 [&_[cmdk-group-heading]]:text-[9px]',\n        sm: 'p-0.5 [&_[cmdk-group-heading]]:px-1.5 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-[10px]',\n        md: 'p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs',\n        lg: 'p-1.5 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst CommandGroup = React.memo(({\n  className,\n  size = 'md',\n  classNames,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn('command_group', commandGroupVariants({ size }), classNames?.group, className)}\n      {...props}\n    />\n  )\n})\n\nCommandGroup.displayName = 'CommandGroup'\n\nconst commandSeparatorVariants = cva('bg-border h-px', {\n  variants: {\n    size: {\n      xs: '-mx-0',\n      sm: '-mx-0.5',\n      md: '-mx-1',\n      lg: '-mx-1.5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nconst CommandSeparator = React.memo(({\n  className,\n  size = 'md',\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator> & {\n  size?: CommandSize\n}) => {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(commandSeparatorVariants({ size }), className)}\n      {...props}\n    />\n  )\n})\n\nCommandSeparator.displayName = 'CommandSeparator'\n\nconst commandItemVariants = cva(\n  \"relative flex cursor-default items-center gap-2 rounded-sm outline-hidden select-none text-text-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-text-secondary transition-colors\",\n  {\n    variants: {\n      size: {\n        xs: \"px-1 py-0.5 text-[10px] gap-1 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"px-1.5 py-1 text-xs gap-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        md: \"px-2 py-1.5 text-sm gap-2 [&_svg:not([class*='size-'])]:size-4\",\n        lg: \"px-3 py-2 text-base gap-2.5 [&_svg:not([class*='size-'])]:size-5\",\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst CommandItem = React.memo(({\n  className,\n  size = 'md',\n  color = 'primary',\n  classNames,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item> & {\n  size?: CommandSize\n  color?: ComponentColor\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn('command_item', commandItemVariants({ size }), colorVars[color], 'data-[selected=true]:bg-slot-10 data-[selected=true]:text-slot', classNames?.item, className)}\n      {...props}\n    />\n  )\n})\n\nCommandItem.displayName = 'CommandItem'\n\nconst commandShortcutVariants = cva(\n  'ml-auto tracking-widest text-text-secondary opacity-60',\n  {\n    variants: {\n      size: {\n        xs: 'text-[9px]',\n        sm: 'text-[10px]',\n        md: 'text-xs',\n        lg: 'text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst CommandShortcut = React.memo(({\n  className,\n  size = 'md',\n  classNames,\n  ...props\n}: React.ComponentProps<'span'> & {\n  size?: CommandSize\n  classNames?: CommandClassNames\n}) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('command_shortcut', commandShortcutVariants({ size }), classNames?.shortcut, className)}\n      {...props}\n    />\n  )\n})\n\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport type * from './types'\nexport {\n  Command,\n  CommandModal,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"]}