@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/Select-CBjqYDcs.js

@@ -0,0 +1,233 @@
+import { n as useFormContext } from "./useFormContext-JCm1UR_e.js";
+import { t as useUniformField } from "./useUniformField-ClprfrES.js";
+import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ReactSelect, { components } from "react-select";
+import { useSelect } from "@heroui/select";
+
+//#region src/Select/Select.tsx
+const selectVariants = tv({ slots: {
+	base: "group leading-normal",
+	clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
+	control: "duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
+	control_focused: "border-focus",
+	crossIcon: "",
+	downChevron: "",
+	dropdownIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black",
+	group: "",
+	groupHeading: "mb-1 ml-3 mt-2 text-sm text-foreground-500",
+	indicatorsContainer: "gap-1 p-1",
+	indicatorSeparator: "bg-default-300",
+	input: "py-0.5 pl-1",
+	label: "pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+	loadingIndicator: "",
+	loadingMessage: "rounded-sm p-2 text-foreground-500",
+	menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
+	menuList: "",
+	menuPortal: "z-50!",
+	multiValue: "items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1",
+	multiValueContainer: "",
+	multiValueLabel: "py-0.5 leading-6",
+	multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
+	noOptionsMessage: "rounded-sm p-2 text-foreground-500",
+	option_focused: "bg-default-100 active:bg-default-200",
+	option_selected: "bg-default-300",
+	option: "rounded px-3 py-2 hover:cursor-pointer",
+	placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
+	selectContainer: "",
+	singleValue: "ml-1! leading-7!",
+	valueContainer: "gap-1 p-1"
+} });
+const InputComponent = (props) => {
+	const testId = `${props.selectProps["data-testid"]}`;
+	return /* @__PURE__ */ jsx(components.Input, {
+		"data-testid": testId,
+		...props
+	});
+};
+const ControlComponent = (props) => {
+	const testId = `${props.selectProps["data-testid"]}_select`;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsx(components.Control, { ...props })
+	});
+};
+const OptionComponent = (props) => {
+	const testId = `${props.selectProps["data-testid"]}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsx(components.Option, { ...props })
+	});
+};
+const DropdownIndicatorComponent = (props) => {
+	const testId = props?.selectProps["data-testid"];
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `${testId}_select_dropdown`,
+		children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props })
+	});
+};
+/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
+const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const { getFieldState } = useFormContext();
+	const [isFocused, setIsFocused] = useState(false);
+	const classNames = variantsToClassNames(selectVariants(), className, "base");
+	const { getBaseProps, getTriggerProps, getValueProps } = useSelect({
+		children: [],
+		classNames,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isLoading: loading,
+		isRequired: required,
+		label,
+		labelPlacement: "outside"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...getBaseProps(),
+		className: cn(classNames.base),
+		"data-required": required,
+		"data-testid": `${testId}_wrapper`,
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: classNames.label,
+				"data-slot": "label",
+				htmlFor: `react-select-${name}-input`,
+				id: getLabelProps().id,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(ReactSelect, {
+				ref,
+				menuShouldBlockScroll: true,
+				unstyled: true,
+				"aria-errormessage": "",
+				"aria-invalid": invalid,
+				"aria-label": ariaLabel,
+				"data-testid": testId,
+				filterOption,
+				formatOptionLabel: renderOptionLabel,
+				inputValue,
+				instanceId: name,
+				isClearable: clearable,
+				isDisabled: disabled,
+				isLoading: loading,
+				isMulti: multiSelect,
+				menuPosition: "fixed",
+				name,
+				onInputChange,
+				options,
+				placeholder,
+				"aria-labelledby": label ? getTriggerProps()["aria-labelledby"]?.split(" ")[1] : void 0,
+				classNames: {
+					control: () => {
+						return cn(classNames.control, { [classNames.control_focused]: isFocused && !invalid });
+					},
+					clearIndicator: () => {
+						return classNames.clearIndicator;
+					},
+					dropdownIndicator: () => {
+						return classNames.dropdownIndicator;
+					},
+					groupHeading: () => {
+						return classNames.groupHeading;
+					},
+					indicatorsContainer: () => {
+						return classNames.indicatorsContainer;
+					},
+					indicatorSeparator: () => {
+						return classNames.indicatorSeparator;
+					},
+					loadingIndicator: () => {
+						return classNames.loadingIndicator;
+					},
+					loadingMessage: () => {
+						return classNames.loadingMessage;
+					},
+					input: () => {
+						return classNames.input;
+					},
+					menu: () => {
+						return classNames.menu;
+					},
+					menuList: () => {
+						return classNames.menuList;
+					},
+					menuPortal: () => {
+						return classNames.menuPortal;
+					},
+					multiValue: () => {
+						return classNames.multiValue;
+					},
+					multiValueLabel: () => {
+						return cn(classNames.multiValueLabel, `${getValueProps().className}`);
+					},
+					multiValueRemove: () => {
+						return classNames.multiValueRemove;
+					},
+					noOptionsMessage: () => {
+						return classNames.noOptionsMessage;
+					},
+					option: ({ isFocused: optionIsFocused, isSelected: optionIsSelected }) => {
+						return cn(classNames.option, {
+							[classNames.option_focused]: optionIsFocused,
+							[classNames.option_selected]: optionIsSelected
+						});
+					},
+					placeholder: () => {
+						return classNames.placeholder;
+					},
+					singleValue: () => {
+						return cn(classNames.singleValue, `${getValueProps().className}`);
+					},
+					valueContainer: () => {
+						return classNames.valueContainer;
+					}
+				},
+				components: {
+					Input: InputComponent,
+					Option: OptionComponent,
+					DropdownIndicator: DropdownIndicatorComponent,
+					Control: ControlComponent
+				},
+				onBlur: (_e) => {
+					setIsFocused(false);
+					onBlur();
+				},
+				onChange: (option) => {
+					if (multiSelect) onChange(option?.map((_option) => {
+						return _option.value;
+					}));
+					else onChange(option?.value);
+					const { isTouched: currentIsTouched } = getFieldState(name, testId);
+					if (!currentIsTouched) onBlur();
+				},
+				onFocus: (_e) => {
+					setIsFocused(true);
+				},
+				value: options.find((option) => {
+					return option.value === value;
+				})
+			}),
+			invalid ? /* @__PURE__ */ jsx("div", {
+				...getHelperWrapperProps(),
+				children: /* @__PURE__ */ jsx("div", {
+					...getErrorMessageProps(),
+					children: errorMessage
+				})
+			}) : null
+		]
+	});
+};
+var Select_default = Select;
+
+//#endregion
+//#region src/Select/index.ts
+var Select_default$1 = Select_default;
+
+//#endregion
+export { Select_default as n, Select_default$1 as t };
+//# sourceMappingURL=Select-CBjqYDcs.js.map

package/dist/Select-CBjqYDcs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CBjqYDcs.js","names":["InputComponent: typeof components.Input","ControlComponent: typeof components.Control","OptionComponent: typeof components.Option","DropdownIndicatorComponent: typeof components.DropdownIndicator","Select"],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-label={ariaLabel}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        classNames={{\n          control: () => {\n            return cn(classNames.control, {\n              [classNames.control_focused]: isFocused && !invalid,\n            });\n          },\n          clearIndicator: () => {\n            return classNames.clearIndicator;\n          },\n          dropdownIndicator: () => {\n            return classNames.dropdownIndicator;\n          },\n          groupHeading: () => {\n            return classNames.groupHeading;\n          },\n          indicatorsContainer: () => {\n            return classNames.indicatorsContainer;\n          },\n          indicatorSeparator: () => {\n            return classNames.indicatorSeparator;\n          },\n          loadingIndicator: () => {\n            return classNames.loadingIndicator;\n          },\n          loadingMessage: () => {\n            return classNames.loadingMessage;\n          },\n          input: () => {\n            return classNames.input;\n          },\n          menu: () => {\n            return classNames.menu;\n          },\n          menuList: () => {\n            return classNames.menuList;\n          },\n          menuPortal: () => {\n            return classNames.menuPortal;\n          },\n          multiValue: () => {\n            return classNames.multiValue;\n          },\n          multiValueLabel: () => {\n            return cn(\n              classNames.multiValueLabel,\n              `${getValueProps().className}`,\n            );\n          },\n          multiValueRemove: () => {\n            return classNames.multiValueRemove;\n          },\n          noOptionsMessage: () => {\n            return classNames.noOptionsMessage;\n          },\n          option: ({\n            isFocused: optionIsFocused,\n            isSelected: optionIsSelected,\n          }) => {\n            return cn(classNames.option, {\n              [classNames.option_focused]: optionIsFocused,\n              [classNames.option_selected]: optionIsSelected,\n            });\n          },\n          placeholder: () => {\n            return classNames.placeholder;\n          },\n          singleValue: () => {\n            return cn(classNames.singleValue, `${getValueProps().className}`);\n          },\n          valueContainer: () => {\n            return classNames.valueContainer;\n          },\n        }}\n        components={{\n          Input: InputComponent,\n          Option: OptionComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Control: ControlComponent,\n        }}\n        onBlur={(_e) => {\n          setIsFocused(false);\n          onBlur();\n        }}\n        onChange={(option) => {\n          if (multiSelect) {\n            onChange(\n              (option as SelectOption[])?.map((_option) => {\n                return _option.value;\n              }),\n            );\n          } else {\n            onChange((option as SelectOption)?.value);\n          }\n          // Mark field as touched immediately when a selection is made if not already touched\n          // This ensures validation errors show right away (isTouched becomes true)\n          // For Select components, selecting an option is a complete user action\n          // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n          const { isTouched: currentIsTouched } = getFieldState(name, testId);\n          if (!currentIsTouched) {\n            onBlur();\n          }\n        }}\n        onFocus={(_e) => {\n          setIsFocused(true);\n        }}\n        // set complete option as value by current field value\n        value={options.find((option) => {\n          return option.value === value;\n        })}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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"}

package/dist/Slider/index.cjs

@@ -1,19 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_Slider = require('../Slider-BDLbD7d5.cjs');
 
-
-var _chunk4HFPBJ3Ocjs = require('../chunk-4HFPBJ3O.cjs');
-require('../chunk-V3M7HL26.cjs');
-require('../chunk-OE5BOGGX.cjs');
-require('../chunk-NHEZXA4H.cjs');
-require('../chunk-6AWHOBNL.cjs');
-require('../chunk-PCTYJUY7.cjs');
-require('../chunk-56TQOKG7.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.Slider = _chunk4HFPBJ3Ocjs.Slider_default; exports.default = _chunk4HFPBJ3Ocjs.Slider_default2;
-//# sourceMappingURL=index.cjs.map
+exports.Slider = require_Slider.Slider_default$1;
+exports.default = require_Slider.Slider_default;

package/dist/Slider/index.d.cts

@@ -1,10 +1,2 @@
-import { S as Slider } from '../Slider-CxHvafJA.cjs';
-export { a as SliderProps } from '../Slider-CxHvafJA.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Slider, Slider as default };
+import { n as SliderProps, t as Slider } from "../index-B74QlCAy.cjs";
+export { Slider, Slider as default, SliderProps };

package/dist/Slider/index.d.ts

@@ -1,10 +1,2 @@
-import { S as Slider } from '../Slider-CxHvafJA.js';
-export { a as SliderProps } from '../Slider-CxHvafJA.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Slider, Slider as default };
+import { n as SliderProps, t as Slider } from "../index-B4Wkijem.js";
+export { Slider, Slider as default, SliderProps };

package/dist/Slider/index.js

@@ -1,19 +1,3 @@
-import {
-  Slider_default,
-  Slider_default2
-} from "../chunk-IR75YRIZ.js";
-import "../chunk-GEC75GNL.js";
-import "../chunk-NTDKZW4E.js";
-import "../chunk-ELYGQTXB.js";
-import "../chunk-5MTIQ6WD.js";
-import "../chunk-AHJJIANM.js";
-import "../chunk-CNTOODUQ.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  Slider_default as Slider,
-  Slider_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as Slider_default, t as Slider_default$1 } from "../Slider-BHjHSoIk.js";
+
+export { Slider_default as Slider, Slider_default$1 as default };

package/dist/Slider-BDLbD7d5.cjs

@@ -0,0 +1,123 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
+let __heroui_slider = require("@heroui/slider");
+
+//#region src/Slider/Slider.tsx
+const sliderVariants = (0, __fuf_stack_pixel_utils.tv)({ slots: {
+	base: "group",
+	endContent: "",
+	errorMessage: "ml-1 mt-1",
+	filler: "",
+	label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+	labelWrapper: "",
+	mark: "",
+	startContent: "",
+	step: "",
+	thumb: "",
+	track: "",
+	trackWrapper: "",
+	value: ""
+} });
+/**
+* Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)
+*/
+const Slider = ({ className = void 0, endContent = void 0, fillOffset = void 0, name, showSteps = false, size = "md", startContent = void 0, step = 1, minValue = 0, maxValue = 100, ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, field, getErrorMessageProps, getHelperWrapperProps, invalid, label, onBlur, onChange, ref, required, errorMessage, testId } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualSliderRef = (0, react.useRef)(null);
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(sliderVariants(), className, "base");
+	const currentValue = field.value != null ? Number(field.value) : minValue;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classNames.base,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref,
+				"aria-label": ariaLabel,
+				disabled,
+				max: maxValue,
+				min: minValue,
+				name,
+				onBlur,
+				step,
+				tabIndex: -1,
+				type: "range",
+				value: currentValue,
+				onChange: (e) => {
+					onChange(Number(e.target.value));
+				},
+				onFocus: () => {
+					visualSliderRef.current?.focus();
+				}
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__heroui_slider.Slider, {
+				ref: visualSliderRef,
+				"aria-label": ariaLabel,
+				color: invalid ? "danger" : "primary",
+				endContent,
+				fillOffset,
+				isDisabled: disabled,
+				label,
+				maxValue,
+				minValue,
+				name: `${name}_slider`,
+				onBlur,
+				onChange,
+				showSteps,
+				size,
+				startContent,
+				step,
+				value: currentValue,
+				classNames: {
+					endContent: classNames.endContent,
+					filler: classNames.filler,
+					label: classNames.label,
+					labelWrapper: classNames.labelWrapper,
+					mark: classNames.mark,
+					startContent: classNames.startContent,
+					step: classNames.step,
+					thumb: classNames.thumb,
+					track: classNames.track,
+					trackWrapper: classNames.trackWrapper,
+					value: classNames.value
+				}
+			}),
+			invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getHelperWrapperProps(),
+				className: (0, __fuf_stack_pixel_utils.cn)(getHelperWrapperProps()?.className, "ml-0 block"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...getErrorMessageProps(),
+					children: errorMessage
+				})
+			}) : null
+		]
+	});
+};
+var Slider_default = Slider;
+
+//#endregion
+//#region src/Slider/index.ts
+var Slider_default$1 = Slider_default;
+
+//#endregion
+Object.defineProperty(exports, 'Slider_default', {
+  enumerable: true,
+  get: function () {
+    return Slider_default$1;
+  }
+});
+Object.defineProperty(exports, 'Slider_default$1', {
+  enumerable: true,
+  get: function () {
+    return Slider_default;
+  }
+});
+//# sourceMappingURL=Slider-BDLbD7d5.cjs.map

package/dist/Slider-BDLbD7d5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-BDLbD7d5.cjs","names":["useUniformField","VisuallyHidden","HeroUISlider","Slider"],"sources":["../src/Slider/Slider.tsx","../src/Slider/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { Slider as HeroUISlider } from '@heroui/slider';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const sliderVariants = tv({\n  slots: {\n    base: 'group',\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\n    filler: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    labelWrapper: '',\n    mark: '',\n    startContent: '',\n    step: '',\n    thumb: '',\n    track: '',\n    trackWrapper: '',\n    value: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof sliderVariants>;\ntype ClassName = TVClassName<typeof sliderVariants>;\n\nexport interface SliderProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** Content to display at the end of the slider */\n  endContent?: ReactNode;\n  /** The offset from where the fill should start */\n  fillOffset?: number;\n  /** form field label */\n  label?: string;\n  /** form field name */\n  name: string;\n  /**\n   * Whether to show step dots on the slider\n   * @default false\n   */\n  showSteps?: boolean;\n  /**\n   * The size of the slider\n   * @default \"md\"\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /** Content to display at the start of the slider */\n  startContent?: ReactNode;\n  /**\n   * The step value of the slider\n   * @default 1\n   */\n  step?: number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /**\n   * The minimum value of the slider\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The maximum value of the slider\n   * @default 100\n   */\n  maxValue?: number;\n}\n\n/**\n * Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)\n */\nconst Slider = ({\n  className = undefined,\n  endContent = undefined,\n  fillOffset = undefined,\n  name,\n  showSteps = false,\n  size = 'md',\n  startContent = undefined,\n  step = 1,\n  minValue = 0,\n  maxValue = 100,\n  ...uniformFieldProps\n}: SliderProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    errorMessage,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual slider to forward focus\n  const visualSliderRef = useRef<HTMLDivElement>(null);\n\n  // classNames from slots\n  const variants = sliderVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // Get the current value, defaulting to minValue if null/undefined\n  const currentValue = field.value != null ? Number(field.value) : minValue;\n\n  return (\n    <div\n      className={classNames.base}\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n    >\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          disabled={disabled}\n          max={maxValue}\n          min={minValue}\n          name={name}\n          onBlur={onBlur}\n          step={step}\n          tabIndex={-1}\n          type=\"range\"\n          value={currentValue}\n          onChange={(e) => {\n            onChange(Number(e.target.value));\n          }}\n          onFocus={() => {\n            // When RHF focuses this hidden input (e.g., on validation error),\n            // forward focus to the visual slider to show focus ring\n            visualSliderRef.current?.focus();\n          }}\n        />\n      </VisuallyHidden>\n      {/* Visual HeroUISlider component */}\n      <HeroUISlider\n        ref={visualSliderRef}\n        aria-label={ariaLabel}\n        color={invalid ? 'danger' : 'primary'}\n        endContent={endContent}\n        fillOffset={fillOffset}\n        isDisabled={disabled}\n        label={label}\n        maxValue={maxValue}\n        minValue={minValue}\n        name={`${name}_slider`}\n        onBlur={onBlur}\n        onChange={onChange}\n        showSteps={showSteps}\n        size={size}\n        startContent={startContent}\n        step={step}\n        value={currentValue}\n        classNames={{\n          endContent: classNames.endContent,\n          filler: classNames.filler,\n          label: classNames.label,\n          labelWrapper: classNames.labelWrapper,\n          mark: classNames.mark,\n          startContent: classNames.startContent,\n          step: classNames.step,\n          thumb: classNames.thumb,\n          track: classNames.track,\n          trackWrapper: classNames.trackWrapper,\n          value: classNames.value,\n        }}\n      />\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Slider;\n","import Slider from './Slider';\n\nexport type { SliderProps } from './Slider';\n\nexport { Slider };\n\nexport default Slider;\n"],"mappings":";;;;;;;;;AAYA,MAAa,iDAAoB,EAC/B,OAAO;CACL,MAAM;CACN,YAAY;CACZ,cAAc;CACd,QAAQ;CAGR,OACE;CACF,cAAc;CACd,MAAM;CACN,cAAc;CACd,MAAM;CACN,OAAO;CACP,OAAO;CACP,cAAc;CACd,OAAO;CACR,EACF,CAAC;;;;AAsDF,MAAM,UAAU,EACd,YAAY,QACZ,aAAa,QACb,aAAa,QACb,MACA,YAAY,OACZ,OAAO,MACP,eAAe,QACf,OAAO,GACP,WAAW,GACX,WAAW,KACX,GAAG,wBACc;CACjB,MAAM,EACJ,WACA,UACA,OACA,sBACA,uBACA,SACA,OACA,QACA,UACA,KACA,UACA,cACA,WACEA,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,oCAAyC,KAAK;CAIpD,MAAM,+DADW,gBAAgB,EACiB,WAAW,OAAO;CAGpE,MAAM,eAAe,MAAM,SAAS,OAAO,OAAO,MAAM,MAAM,GAAG;AAEjE,QACE,4CAAC;EACC,WAAW,WAAW;EACtB,gBAAc;EACd,iBAAe;EACf,eAAa;;GAGb,2CAACC,yDACC,2CAAC;IACM;IACL,cAAY;IACF;IACV,KAAK;IACL,KAAK;IACC;IACE;IACF;IACN,UAAU;IACV,MAAK;IACL,OAAO;IACP,WAAW,MAAM;AACf,cAAS,OAAO,EAAE,OAAO,MAAM,CAAC;;IAElC,eAAe;AAGb,qBAAgB,SAAS,OAAO;;KAElC,GACa;GAEjB,2CAACC;IACC,KAAK;IACL,cAAY;IACZ,OAAO,UAAU,WAAW;IAChB;IACA;IACZ,YAAY;IACL;IACG;IACA;IACV,MAAM,GAAG,KAAK;IACN;IACE;IACC;IACL;IACQ;IACR;IACN,OAAO;IACP,YAAY;KACV,YAAY,WAAW;KACvB,QAAQ,WAAW;KACnB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,OAAO,WAAW;KAClB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,OAAO,WAAW;KACnB;KACD;GACD,UACC,2CAAC;IACC,GAAI,uBAAuB;IAC3B,2CACE,uBAAuB,EAAE,WAEzB,aACD;cAED,2CAAC;KAAI,GAAI,sBAAsB;eAAG;MAAmB;KACjD,GACJ;;GACA;;AAIV,qBAAe;;;;ACzMf,uBAAeC"}

package/dist/Slider-BHjHSoIk.js

@@ -0,0 +1,111 @@
+import { t as useUniformField } from "./useUniformField-ClprfrES.js";
+import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { Slider } from "@heroui/slider";
+
+//#region src/Slider/Slider.tsx
+const sliderVariants = tv({ slots: {
+	base: "group",
+	endContent: "",
+	errorMessage: "ml-1 mt-1",
+	filler: "",
+	label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+	labelWrapper: "",
+	mark: "",
+	startContent: "",
+	step: "",
+	thumb: "",
+	track: "",
+	trackWrapper: "",
+	value: ""
+} });
+/**
+* Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)
+*/
+const Slider$1 = ({ className = void 0, endContent = void 0, fillOffset = void 0, name, showSteps = false, size = "md", startContent = void 0, step = 1, minValue = 0, maxValue = 100, ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, field, getErrorMessageProps, getHelperWrapperProps, invalid, label, onBlur, onChange, ref, required, errorMessage, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualSliderRef = useRef(null);
+	const classNames = variantsToClassNames(sliderVariants(), className, "base");
+	const currentValue = field.value != null ? Number(field.value) : minValue;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames.base,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+				ref,
+				"aria-label": ariaLabel,
+				disabled,
+				max: maxValue,
+				min: minValue,
+				name,
+				onBlur,
+				step,
+				tabIndex: -1,
+				type: "range",
+				value: currentValue,
+				onChange: (e) => {
+					onChange(Number(e.target.value));
+				},
+				onFocus: () => {
+					visualSliderRef.current?.focus();
+				}
+			}) }),
+			/* @__PURE__ */ jsx(Slider, {
+				ref: visualSliderRef,
+				"aria-label": ariaLabel,
+				color: invalid ? "danger" : "primary",
+				endContent,
+				fillOffset,
+				isDisabled: disabled,
+				label,
+				maxValue,
+				minValue,
+				name: `${name}_slider`,
+				onBlur,
+				onChange,
+				showSteps,
+				size,
+				startContent,
+				step,
+				value: currentValue,
+				classNames: {
+					endContent: classNames.endContent,
+					filler: classNames.filler,
+					label: classNames.label,
+					labelWrapper: classNames.labelWrapper,
+					mark: classNames.mark,
+					startContent: classNames.startContent,
+					step: classNames.step,
+					thumb: classNames.thumb,
+					track: classNames.track,
+					trackWrapper: classNames.trackWrapper,
+					value: classNames.value
+				}
+			}),
+			invalid ? /* @__PURE__ */ jsx("div", {
+				...getHelperWrapperProps(),
+				className: cn(getHelperWrapperProps()?.className, "ml-0 block"),
+				children: /* @__PURE__ */ jsx("div", {
+					...getErrorMessageProps(),
+					children: errorMessage
+				})
+			}) : null
+		]
+	});
+};
+var Slider_default = Slider$1;
+
+//#endregion
+//#region src/Slider/index.ts
+var Slider_default$1 = Slider_default;
+
+//#endregion
+export { Slider_default as n, Slider_default$1 as t };
+//# sourceMappingURL=Slider-BHjHSoIk.js.map

package/dist/Slider-BHjHSoIk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-BHjHSoIk.js","names":["Slider","HeroUISlider","Slider"],"sources":["../src/Slider/Slider.tsx","../src/Slider/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { Slider as HeroUISlider } from '@heroui/slider';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const sliderVariants = tv({\n  slots: {\n    base: 'group',\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\n    filler: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    labelWrapper: '',\n    mark: '',\n    startContent: '',\n    step: '',\n    thumb: '',\n    track: '',\n    trackWrapper: '',\n    value: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof sliderVariants>;\ntype ClassName = TVClassName<typeof sliderVariants>;\n\nexport interface SliderProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** Content to display at the end of the slider */\n  endContent?: ReactNode;\n  /** The offset from where the fill should start */\n  fillOffset?: number;\n  /** form field label */\n  label?: string;\n  /** form field name */\n  name: string;\n  /**\n   * Whether to show step dots on the slider\n   * @default false\n   */\n  showSteps?: boolean;\n  /**\n   * The size of the slider\n   * @default \"md\"\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /** Content to display at the start of the slider */\n  startContent?: ReactNode;\n  /**\n   * The step value of the slider\n   * @default 1\n   */\n  step?: number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /**\n   * The minimum value of the slider\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The maximum value of the slider\n   * @default 100\n   */\n  maxValue?: number;\n}\n\n/**\n * Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)\n */\nconst Slider = ({\n  className = undefined,\n  endContent = undefined,\n  fillOffset = undefined,\n  name,\n  showSteps = false,\n  size = 'md',\n  startContent = undefined,\n  step = 1,\n  minValue = 0,\n  maxValue = 100,\n  ...uniformFieldProps\n}: SliderProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    errorMessage,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual slider to forward focus\n  const visualSliderRef = useRef<HTMLDivElement>(null);\n\n  // classNames from slots\n  const variants = sliderVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // Get the current value, defaulting to minValue if null/undefined\n  const currentValue = field.value != null ? Number(field.value) : minValue;\n\n  return (\n    <div\n      className={classNames.base}\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n    >\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          disabled={disabled}\n          max={maxValue}\n          min={minValue}\n          name={name}\n          onBlur={onBlur}\n          step={step}\n          tabIndex={-1}\n          type=\"range\"\n          value={currentValue}\n          onChange={(e) => {\n            onChange(Number(e.target.value));\n          }}\n          onFocus={() => {\n            // When RHF focuses this hidden input (e.g., on validation error),\n            // forward focus to the visual slider to show focus ring\n            visualSliderRef.current?.focus();\n          }}\n        />\n      </VisuallyHidden>\n      {/* Visual HeroUISlider component */}\n      <HeroUISlider\n        ref={visualSliderRef}\n        aria-label={ariaLabel}\n        color={invalid ? 'danger' : 'primary'}\n        endContent={endContent}\n        fillOffset={fillOffset}\n        isDisabled={disabled}\n        label={label}\n        maxValue={maxValue}\n        minValue={minValue}\n        name={`${name}_slider`}\n        onBlur={onBlur}\n        onChange={onChange}\n        showSteps={showSteps}\n        size={size}\n        startContent={startContent}\n        step={step}\n        value={currentValue}\n        classNames={{\n          endContent: classNames.endContent,\n          filler: classNames.filler,\n          label: classNames.label,\n          labelWrapper: classNames.labelWrapper,\n          mark: classNames.mark,\n          startContent: classNames.startContent,\n          step: classNames.step,\n          thumb: classNames.thumb,\n          track: classNames.track,\n          trackWrapper: classNames.trackWrapper,\n          value: classNames.value,\n        }}\n      />\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Slider;\n","import Slider from './Slider';\n\nexport type { SliderProps } from './Slider';\n\nexport { Slider };\n\nexport default Slider;\n"],"mappings":";;;;;;;;AAYA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CACL,MAAM;CACN,YAAY;CACZ,cAAc;CACd,QAAQ;CAGR,OACE;CACF,cAAc;CACd,MAAM;CACN,cAAc;CACd,MAAM;CACN,OAAO;CACP,OAAO;CACP,cAAc;CACd,OAAO;CACR,EACF,CAAC;;;;AAsDF,MAAMA,YAAU,EACd,YAAY,QACZ,aAAa,QACb,aAAa,QACb,MACA,YAAY,OACZ,OAAO,MACP,eAAe,QACf,OAAO,GACP,WAAW,GACX,WAAW,KACX,GAAG,wBACc;CACjB,MAAM,EACJ,WACA,UACA,OACA,sBACA,uBACA,SACA,OACA,QACA,UACA,KACA,UACA,cACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,kBAAkB,OAAuB,KAAK;CAIpD,MAAM,aAAa,qBADF,gBAAgB,EACiB,WAAW,OAAO;CAGpE,MAAM,eAAe,MAAM,SAAS,OAAO,OAAO,MAAM,MAAM,GAAG;AAEjE,QACE,qBAAC;EACC,WAAW,WAAW;EACtB,gBAAc;EACd,iBAAe;EACf,eAAa;;GAGb,oBAAC,4BACC,oBAAC;IACM;IACL,cAAY;IACF;IACV,KAAK;IACL,KAAK;IACC;IACE;IACF;IACN,UAAU;IACV,MAAK;IACL,OAAO;IACP,WAAW,MAAM;AACf,cAAS,OAAO,EAAE,OAAO,MAAM,CAAC;;IAElC,eAAe;AAGb,qBAAgB,SAAS,OAAO;;KAElC,GACa;GAEjB,oBAACC;IACC,KAAK;IACL,cAAY;IACZ,OAAO,UAAU,WAAW;IAChB;IACA;IACZ,YAAY;IACL;IACG;IACA;IACV,MAAM,GAAG,KAAK;IACN;IACE;IACC;IACL;IACQ;IACR;IACN,OAAO;IACP,YAAY;KACV,YAAY,WAAW;KACvB,QAAQ,WAAW;KACnB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,OAAO,WAAW;KAClB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,OAAO,WAAW;KACnB;KACD;GACD,UACC,oBAAC;IACC,GAAI,uBAAuB;IAC3B,WAAW,GACT,uBAAuB,EAAE,WAEzB,aACD;cAED,oBAAC;KAAI,GAAI,sBAAsB;eAAG;MAAmB;KACjD,GACJ;;GACA;;AAIV,qBAAeD;;;;ACzMf,uBAAeE"}

package/dist/SubmitButton/index.cjs

@@ -1,14 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_SubmitButton = require('../SubmitButton-DhtPJuro.cjs');
 
-
-var _chunkWXSISX5Ycjs = require('../chunk-WXSISX5Y.cjs');
-require('../chunk-3JAVQAL5.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.SubmitButton = _chunkWXSISX5Ycjs.SubmitButton_default; exports.default = _chunkWXSISX5Ycjs.SubmitButton_default2;
-//# sourceMappingURL=index.cjs.map
+exports.SubmitButton = require_SubmitButton.SubmitButton_default$1;
+exports.default = require_SubmitButton.SubmitButton_default;

package/dist/SubmitButton/index.d.cts

@@ -1,9 +1,2 @@
-import { S as SubmitButton } from '../SubmitButton-DqaxyVpp.cjs';
-export { a as SubmitButtonProps } from '../SubmitButton-DqaxyVpp.cjs';
-import 'react/jsx-runtime';
-import '@fuf-stack/pixels';
-import 'react';
-
-
-
-export { SubmitButton, SubmitButton as default };
+import { n as SubmitButtonProps, t as SubmitButton } from "../index-CbAh0Kfo.cjs";
+export { SubmitButton, SubmitButton as default, SubmitButtonProps };