@lindle/linoardo 1.0.19 → 1.0.21

package/dist/select.cjs

@@ -0,0 +1,173 @@
+'use strict';
+
+var React = require('react');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/Form/Select/index.tsx
+
+// src/utils/helpers/randomStr.ts
+var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function generateString(length = 5) {
+  let result = "";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
+var variantClasses = {
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
+  text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
+  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
+  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
+};
+var sizeClasses = {
+  "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
+  small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
+  medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
+  large: { padding: "pl-3.5 pr-11 py-3.5", text: "text-lg" },
+  "x-large": { padding: "pl-4 pr-12 py-4", text: "text-xl" }
+};
+var normalizeOption = (option) => {
+  if (typeof option === "string") {
+    return { label: option, value: option };
+  }
+  return option;
+};
+var Select = ({
+  options,
+  label,
+  placeholder,
+  variant = "outline",
+  size = "medium",
+  className,
+  wrapperClassName,
+  id,
+  name,
+  multiple,
+  onFocus,
+  onBlur,
+  onChange,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const selectId = id || name || generateString();
+  const selectName = name || selectId;
+  const variantClass = variantClasses[variant] ?? variantClasses.outline;
+  const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
+  const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
+  const normalizedOptions = options.map(normalizeOption);
+  const hasLabel = Boolean(label);
+  const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;
+  const placeholderText = placeholder ?? (hasLabel ? " " : void 0);
+  const [isFocused, setIsFocused] = React__default.default.useState(false);
+  const [hasValue, setHasValue] = React__default.default.useState(() => {
+    const initial = value ?? defaultValue;
+    if (initial === void 0 || initial === null) return false;
+    if (multiple) {
+      if (Array.isArray(initial)) return initial.length > 0;
+      return String(initial).length > 0;
+    }
+    if (Array.isArray(initial)) {
+      if (initial.length === 0) return false;
+      return String(initial[0]).length > 0;
+    }
+    return String(initial).length > 0;
+  });
+  const isControlled = value !== void 0;
+  React__default.default.useEffect(() => {
+    if (!isControlled) return;
+    if (value === void 0 || value === null) {
+      setHasValue(false);
+      return;
+    }
+    if (multiple) {
+      if (Array.isArray(value)) {
+        setHasValue(value.length > 0);
+      } else {
+        setHasValue(String(value).length > 0);
+      }
+      return;
+    }
+    if (Array.isArray(value)) {
+      setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);
+      return;
+    }
+    setHasValue(String(value).length > 0);
+  }, [isControlled, multiple, value]);
+  const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? " " : placeholderText;
+  const shouldRenderPlaceholder = !multiple && placeholderText !== void 0;
+  const labelShouldFloat = hasValue || isFocused;
+  const labelLeftClass = "left-3";
+  const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
+  const handleFocus = (event) => {
+    if (hidePlaceholderUntilFocus) setIsFocused(true);
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    if (hidePlaceholderUntilFocus) setIsFocused(false);
+    onBlur?.(event);
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== "";
+      setHasValue(nextHasValue);
+    }
+    onChange?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ...props,
+        id: selectId,
+        name: selectName,
+        multiple,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        className: tailwindMerge.twMerge("peer", baseClass, variantClass, sizeClass, className),
+        children: [
+          shouldRenderPlaceholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: props.required, hidden: hasValue, children: placeholderOptionLabel }),
+          normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, `${selectId}-${option.value}-${index}`))
+        ]
+      }
+    ),
+    !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: selectId,
+        className: tailwindMerge.twMerge(
+          "absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
+          labelLeftClass,
+          labelShouldFloat ? [
+            "top-0 text-xs px-1",
+            isFocused ? "-translate-y-1/2 text-gray-600" : "-translate-y-2/3",
+            labelBgDefault
+          ].join(" ") : "top-1/2 -translate-y-1/2 text-sm text-gray-500"
+        ),
+        children: label
+      }
+    )
+  ] }) });
+};
+var Select_default = Select;
+
+module.exports = Select_default;
+//# sourceMappingURL=select.cjs.map
+//# sourceMappingURL=select.cjs.map

package/dist/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/helpers/randomStr.ts","../src/Form/Select/index.tsx"],"names":["React","jsx","twMerge","jsxs"],"mappings":"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","file":"select.cjs","sourcesContent":["const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n\nexport function generateString(length = 5) {\n  let result: string = '';\n  const charactersLength = characters.length;\n  for (let i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n\n  return result;\n}\n","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { GlobalSize } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport type { SelectOption, SelectOptionObject, SelectProps } from './types.select';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nconst baseClass =\n  'select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400';\n\nconst variantClasses = {\n  solid:\n    'rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n  sharp:\n    'rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n  outline:\n    'rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40',\n  text: 'rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n  ghost:\n    'rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25',\n  filled:\n    'rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30',\n  underlined:\n    'rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n  rounded:\n    'rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n  'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n  small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n  medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n  large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n  'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n  if (typeof option === 'string') {\n    return { label: option, value: option };\n  }\n\n  return option;\n};\n\n/**\n * Native select styled with the same visual variants as Input.\n * Accepts options as string[] or { label, value }[] for convenience.\n */\nconst Select: React.FC<SelectProps> = ({\n  options,\n  label,\n  placeholder,\n  variant = 'outline',\n  size = 'medium',\n  className,\n  wrapperClassName,\n  id,\n  name,\n  multiple,\n  onFocus,\n  onBlur,\n  onChange,\n  value,\n  defaultValue,\n  ...props\n}) => {\n  const selectId = id || name || generateString();\n  const selectName = name || selectId;\n  const variantClass = variantClasses[variant] ?? variantClasses.outline;\n  const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n  const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n  const normalizedOptions = options.map(normalizeOption);\n  const hasLabel = Boolean(label);\n  const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;\n  const placeholderText = placeholder ?? (hasLabel ? ' ' : undefined);\n  const [isFocused, setIsFocused] = React.useState(false);\n  const [hasValue, setHasValue] = React.useState(() => {\n    const initial = value ?? defaultValue;\n    if (initial === undefined || initial === null) return false;\n    if (multiple) {\n      if (Array.isArray(initial)) return initial.length > 0;\n      return String(initial).length > 0;\n    }\n    if (Array.isArray(initial)) {\n      if (initial.length === 0) return false;\n      return String(initial[0]).length > 0;\n    }\n    return String(initial).length > 0;\n  });\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (!isControlled) return;\n    if (value === undefined || value === null) {\n      setHasValue(false);\n      return;\n    }\n    if (multiple) {\n      if (Array.isArray(value)) {\n        setHasValue(value.length > 0);\n      } else {\n        setHasValue(String(value).length > 0);\n      }\n      return;\n    }\n    if (Array.isArray(value)) {\n      setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);\n      return;\n    }\n    setHasValue(String(value).length > 0);\n  }, [isControlled, multiple, value]);\n\n  const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? ' ' : placeholderText;\n  const shouldRenderPlaceholder = !multiple && placeholderText !== undefined;\n  const labelShouldFloat = hasValue || isFocused;\n  const labelLeftClass = 'left-3';\n  const labelBgDefault = ['outline', 'text', 'underlined'].includes(variant)\n    ? 'bg-transparent'\n    : 'bg-white/90 dark:bg-slate-900';\n\n  const handleFocus: React.FocusEventHandler<HTMLSelectElement> = event => {\n    if (hidePlaceholderUntilFocus) setIsFocused(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur: React.FocusEventHandler<HTMLSelectElement> = event => {\n    if (hidePlaceholderUntilFocus) setIsFocused(false);\n    onBlur?.(event);\n  };\n\n  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = event => {\n    if (!isControlled) {\n      const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== '';\n      setHasValue(nextHasValue);\n    }\n    onChange?.(event);\n  };\n\n  return (\n    <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n      <div className='relative flex items-center'>\n        <select\n          {...props}\n          id={selectId}\n          name={selectName}\n          multiple={multiple}\n          value={value}\n          defaultValue={value === undefined ? defaultValue : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          className={twMerge('peer', baseClass, variantClass, sizeClass, className)}\n        >\n          {shouldRenderPlaceholder && (\n            <option value='' disabled={props.required} hidden={hasValue}>\n              {placeholderOptionLabel}\n            </option>\n          )}\n          {normalizedOptions.map((option, index) => (\n            <option key={`${selectId}-${option.value}-${index}`} value={option.value} disabled={option.disabled}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n        {!multiple && (\n          <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n            <i className='mdi mdi-chevron-down text-base leading-none' aria-hidden />\n          </span>\n        )}\n        {label && (\n          <label\n            htmlFor={selectId}\n            className={twMerge(\n              'absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200',\n              labelLeftClass,\n              labelShouldFloat\n                ? [\n                    'top-0 text-xs px-1',\n                    isFocused ? '-translate-y-1/2 text-gray-600' : '-translate-y-2/3',\n                    labelBgDefault\n                  ].join(' ')\n                : 'top-1/2 -translate-y-1/2 text-sm text-gray-500'\n            )}\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Select;\nexport type { SelectProps, SelectOption, SelectOptionObject } from './types.select';\n"]}

package/dist/select.d.cts

@@ -0,0 +1,29 @@
+import react__default from 'react';
+import { a as GlobalSize } from './global.types-E2uVLemv.cjs';
+import { a as InputVariant } from './types-BCqIOkp1.cjs';
+
+type SelectOptionObject = {
+    label: react__default.ReactNode;
+    value: string;
+    disabled?: boolean;
+};
+type SelectOption = string | SelectOptionObject;
+type SelectProps = Omit<react__default.SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> & {
+    /**
+     * Options can be an array of strings or objects with label/value.
+     */
+    options: SelectOption[];
+    label?: react__default.ReactNode;
+    placeholder?: string;
+    wrapperClassName?: string;
+    variant?: InputVariant;
+    size?: GlobalSize;
+};
+
+/**
+ * Native select styled with the same visual variants as Input.
+ * Accepts options as string[] or { label, value }[] for convenience.
+ */
+declare const Select: react__default.FC<SelectProps>;
+
+export { type SelectOption, type SelectOptionObject, type SelectProps, Select as default };

package/dist/select.d.ts

@@ -0,0 +1,29 @@
+import react__default from 'react';
+import { a as GlobalSize } from './global.types-E2uVLemv.js';
+import { a as InputVariant } from './types-ChXN4u7x.js';
+
+type SelectOptionObject = {
+    label: react__default.ReactNode;
+    value: string;
+    disabled?: boolean;
+};
+type SelectOption = string | SelectOptionObject;
+type SelectProps = Omit<react__default.SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> & {
+    /**
+     * Options can be an array of strings or objects with label/value.
+     */
+    options: SelectOption[];
+    label?: react__default.ReactNode;
+    placeholder?: string;
+    wrapperClassName?: string;
+    variant?: InputVariant;
+    size?: GlobalSize;
+};
+
+/**
+ * Native select styled with the same visual variants as Input.
+ * Accepts options as string[] or { label, value }[] for convenience.
+ */
+declare const Select: react__default.FC<SelectProps>;
+
+export { type SelectOption, type SelectOptionObject, type SelectProps, Select as default };

package/dist/select.js

@@ -0,0 +1,3 @@
+export { Select_default as default } from './chunk-SAGQYMS3.js';
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"select.js"}

package/dist/slider.cjs

@@ -6,7 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/Form/Slider/index.tsx
 var paletteValues = {
-  primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
+  primary: {
+    fill: "var(--color-primary, #6366f1)",
+    ring: "rgba(99, 102, 241, 0.28)",
+    thumbBorder: "#6366f1"
+  },
   neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
   info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
   success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
@@ -16,9 +20,19 @@ var paletteValues = {
   bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
 };
 var sizeTokens = {
-  small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
+  small: {
+    trackHeight: "0.375rem",
+    thumbSize: "1.1rem",
+    trackClass: "h-1.5",
+    valueClass: "text-xs"
+  },
   medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
-  large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
+  large: {
+    trackHeight: "0.6rem",
+    thumbSize: "1.4rem",
+    trackClass: "h-[0.65rem]",
+    valueClass: "text-base"
+  }
 };
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var toNumber = (value, fallback) => {

package/dist/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Form/Slider/index.tsx"],"names":["useState","useEffect","twMerge","jsxs","jsx"],"mappings":"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","file":"slider.cjs","sourcesContent":["import { type ChangeEvent, type CSSProperties, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SliderProps, SliderSize } from './types.slider';\n\nconst paletteValues: Record<Palette, { fill: string; ring: string; thumbBorder: string }> = {\n  primary: { fill: 'var(--color-primary, #6366f1)', ring: 'rgba(99, 102, 241, 0.28)', thumbBorder: '#6366f1' },\n  neutral: { fill: '#4b5563', ring: 'rgba(75, 85, 99, 0.28)', thumbBorder: '#4b5563' },\n  info: { fill: '#0284c7', ring: 'rgba(2, 132, 199, 0.28)', thumbBorder: '#0284c7' },\n  success: { fill: '#059669', ring: 'rgba(5, 150, 105, 0.24)', thumbBorder: '#059669' },\n  warning: { fill: '#d97706', ring: 'rgba(217, 119, 6, 0.24)', thumbBorder: '#d97706' },\n  danger: { fill: '#dc2626', ring: 'rgba(220, 38, 38, 0.24)', thumbBorder: '#dc2626' },\n  surface: { fill: '#0f172a', ring: 'rgba(15, 23, 42, 0.22)', thumbBorder: '#0f172a' },\n  bw: { fill: '#000000', ring: 'rgba(0, 0, 0, 0.26)', thumbBorder: '#000000' }\n};\n\nconst sizeTokens: Record<\n  SliderSize,\n  { trackHeight: string; thumbSize: string; trackClass: string; valueClass: string }\n> = {\n  small: { trackHeight: '0.375rem', thumbSize: '1.1rem', trackClass: 'h-1.5', valueClass: 'text-xs' },\n  medium: { trackHeight: '0.5rem', thumbSize: '1.25rem', trackClass: 'h-2', valueClass: 'text-sm' },\n  large: { trackHeight: '0.6rem', thumbSize: '1.4rem', trackClass: 'h-[0.65rem]', valueClass: 'text-base' }\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst toNumber = (value: number | string | undefined, fallback: number) => {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  const parsed = Number(value);\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\ntype SliderCssVariables = CSSProperties & Record<string, string>;\n\nconst Slider: React.FC<SliderProps> = ({\n  color = 'primary',\n  size = 'medium',\n  label,\n  hint,\n  showValue = true,\n  valueLabel,\n  wrapperClassName,\n  className,\n  trackColor,\n  onChange,\n  disabled,\n  min = 0,\n  max = 100,\n  step = 1,\n  ...rest\n}) => {\n  const palette = paletteValues[color] ?? paletteValues.primary;\n  const sizeToken = sizeTokens[size] ?? sizeTokens.medium;\n  const { value, defaultValue, ...inputProps } = rest;\n  const resolvedMin = toNumber(min, 0);\n  const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);\n  const resolvedStep = toNumber(step, 1);\n  const isControlled = typeof value === 'number';\n  const [internalValue, setInternalValue] = useState<number>(\n    clamp(\n      typeof value === 'number'\n        ? value\n        : typeof defaultValue === 'number'\n        ? defaultValue\n        : resolvedMin,\n      resolvedMin,\n      resolvedMax\n    )\n  );\n\n  useEffect(() => {\n    if (isControlled && typeof value === 'number') {\n      setInternalValue(clamp(value, resolvedMin, resolvedMax));\n    }\n  }, [isControlled, value, resolvedMin, resolvedMax]);\n\n  useEffect(() => {\n    if (!isControlled) {\n      setInternalValue(prev => clamp(prev, resolvedMin, resolvedMax));\n    }\n  }, [isControlled, resolvedMin, resolvedMax]);\n\n  const currentValue =\n    isControlled && typeof value === 'number' ? clamp(value, resolvedMin, resolvedMax) : internalValue;\n  const percentage = resolvedMax === resolvedMin ? 0 : ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n  const cssVars: SliderCssVariables = {\n    '--slider-color': palette.fill,\n    '--slider-ring-color': palette.ring,\n    '--slider-thumb-border': palette.thumbBorder,\n    '--slider-track-color': trackColor ?? '#e5e7eb',\n    '--slider-track-height': sizeToken.trackHeight,\n    '--slider-thumb-size': sizeToken.thumbSize,\n    '--slider-percentage': `${percentage}%`\n  };\n\n  if (disabled) {\n    cssVars['--slider-disabled-fill'] = '#d1d5db';\n    cssVars['--slider-thumb-border'] = '#d1d5db';\n    cssVars['--slider-track-color-disabled'] = '#e5e7eb';\n  }\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = Number(event.target.value);\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onChange?.(nextValue, event);\n  };\n\n  const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;\n\n  return (\n    <div className={twMerge('flex flex-col gap-2', wrapperClassName)}>\n      {(label || showValue) && (\n        <div className='flex items-center justify-between'>\n          {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n          {showValue && <span className={twMerge('tabular-nums text-gray-900', sizeToken.valueClass)}>{displayValue}</span>}\n        </div>\n      )}\n\n      <input\n        {...inputProps}\n        type='range'\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        onChange={handleChange}\n        disabled={disabled}\n        className={twMerge(\n          'slider-control focus-visible:outline-none rounded-full',\n          sizeToken.trackClass,\n          disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n          className\n        )}\n        style={cssVars}\n      />\n\n      {hint && <p className='text-xs text-gray-600'>{hint}</p>}\n    </div>\n  );\n};\n\nexport default Slider;\n"]}
+{"version":3,"sources":["../src/Form/Slider/index.tsx"],"names":["useState","useEffect","twMerge","jsxs","jsx"],"mappings":"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","file":"slider.cjs","sourcesContent":["import { type ChangeEvent, type CSSProperties, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SliderProps, SliderSize } from './types.slider';\n\nconst paletteValues: Record<Palette, { fill: string; ring: string; thumbBorder: string }> = {\n  primary: {\n    fill: 'var(--color-primary, #6366f1)',\n    ring: 'rgba(99, 102, 241, 0.28)',\n    thumbBorder: '#6366f1'\n  },\n  neutral: { fill: '#4b5563', ring: 'rgba(75, 85, 99, 0.28)', thumbBorder: '#4b5563' },\n  info: { fill: '#0284c7', ring: 'rgba(2, 132, 199, 0.28)', thumbBorder: '#0284c7' },\n  success: { fill: '#059669', ring: 'rgba(5, 150, 105, 0.24)', thumbBorder: '#059669' },\n  warning: { fill: '#d97706', ring: 'rgba(217, 119, 6, 0.24)', thumbBorder: '#d97706' },\n  danger: { fill: '#dc2626', ring: 'rgba(220, 38, 38, 0.24)', thumbBorder: '#dc2626' },\n  surface: { fill: '#0f172a', ring: 'rgba(15, 23, 42, 0.22)', thumbBorder: '#0f172a' },\n  bw: { fill: '#000000', ring: 'rgba(0, 0, 0, 0.26)', thumbBorder: '#000000' }\n};\n\nconst sizeTokens: Record<\n  SliderSize,\n  { trackHeight: string; thumbSize: string; trackClass: string; valueClass: string }\n> = {\n  small: {\n    trackHeight: '0.375rem',\n    thumbSize: '1.1rem',\n    trackClass: 'h-1.5',\n    valueClass: 'text-xs'\n  },\n  medium: { trackHeight: '0.5rem', thumbSize: '1.25rem', trackClass: 'h-2', valueClass: 'text-sm' },\n  large: {\n    trackHeight: '0.6rem',\n    thumbSize: '1.4rem',\n    trackClass: 'h-[0.65rem]',\n    valueClass: 'text-base'\n  }\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst toNumber = (value: number | string | undefined, fallback: number) => {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  const parsed = Number(value);\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\ntype SliderCssVariables = CSSProperties & Record<string, string>;\n\n/**\n * Range input styled as a slider with palette-aware colors, labels and controlled/uncontrolled modes.\n */\nconst Slider: React.FC<SliderProps> = ({\n  color = 'primary',\n  size = 'medium',\n  label,\n  hint,\n  showValue = true,\n  valueLabel,\n  wrapperClassName,\n  className,\n  trackColor,\n  onChange,\n  disabled,\n  min = 0,\n  max = 100,\n  step = 1,\n  ...rest\n}) => {\n  const palette = paletteValues[color] ?? paletteValues.primary;\n  const sizeToken = sizeTokens[size] ?? sizeTokens.medium;\n  const { value, defaultValue, ...inputProps } = rest;\n  const resolvedMin = toNumber(min, 0);\n  const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);\n  const resolvedStep = toNumber(step, 1);\n  const isControlled = typeof value === 'number';\n  const [internalValue, setInternalValue] = useState<number>(\n    clamp(\n      typeof value === 'number'\n        ? value\n        : typeof defaultValue === 'number'\n        ? defaultValue\n        : resolvedMin,\n      resolvedMin,\n      resolvedMax\n    )\n  );\n\n  useEffect(() => {\n    if (isControlled && typeof value === 'number') {\n      setInternalValue(clamp(value, resolvedMin, resolvedMax));\n    }\n  }, [isControlled, value, resolvedMin, resolvedMax]);\n\n  useEffect(() => {\n    if (!isControlled) {\n      setInternalValue(prev => clamp(prev, resolvedMin, resolvedMax));\n    }\n  }, [isControlled, resolvedMin, resolvedMax]);\n\n  const currentValue =\n    isControlled && typeof value === 'number'\n      ? clamp(value, resolvedMin, resolvedMax)\n      : internalValue;\n  const percentage =\n    resolvedMax === resolvedMin\n      ? 0\n      : ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n  const cssVars: SliderCssVariables = {\n    '--slider-color': palette.fill,\n    '--slider-ring-color': palette.ring,\n    '--slider-thumb-border': palette.thumbBorder,\n    '--slider-track-color': trackColor ?? '#e5e7eb',\n    '--slider-track-height': sizeToken.trackHeight,\n    '--slider-thumb-size': sizeToken.thumbSize,\n    '--slider-percentage': `${percentage}%`\n  };\n\n  if (disabled) {\n    cssVars['--slider-disabled-fill'] = '#d1d5db';\n    cssVars['--slider-thumb-border'] = '#d1d5db';\n    cssVars['--slider-track-color-disabled'] = '#e5e7eb';\n  }\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = Number(event.target.value);\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onChange?.(nextValue, event);\n  };\n\n  const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;\n\n  return (\n    <div className={twMerge('flex flex-col gap-2', wrapperClassName)}>\n      {(label || showValue) && (\n        <div className='flex items-center justify-between'>\n          {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n          {showValue && (\n            <span className={twMerge('tabular-nums text-gray-900', sizeToken.valueClass)}>\n              {displayValue}\n            </span>\n          )}\n        </div>\n      )}\n\n      <input\n        {...inputProps}\n        type='range'\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        onChange={handleChange}\n        disabled={disabled}\n        className={twMerge(\n          'slider-control focus-visible:outline-none rounded-full',\n          sizeToken.trackClass,\n          disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n          className\n        )}\n        style={cssVars}\n      />\n\n      {hint && <p className='text-xs text-gray-600'>{hint}</p>}\n    </div>\n  );\n};\n\nexport default Slider;\n"]}

package/dist/slider.d.cts

@@ -37,6 +37,9 @@ type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 's
     onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+/**
+ * Range input styled as a slider with palette-aware colors, labels and controlled/uncontrolled modes.
+ */
 declare const Slider: React.FC<SliderProps>;
 
 export { Slider as default };

package/dist/slider.d.ts

@@ -37,6 +37,9 @@ type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 's
     onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+/**
+ * Range input styled as a slider with palette-aware colors, labels and controlled/uncontrolled modes.
+ */
 declare const Slider: React.FC<SliderProps>;
 
 export { Slider as default };

package/dist/slider.js

@@ -1,3 +1,3 @@
-export { Slider_default as default } from './chunk-AOHXZ7OM.js';
+export { Slider_default as default } from './chunk-GMDNSU26.js';
 //# sourceMappingURL=slider.js.map
 //# sourceMappingURL=slider.js.map