@nomos-ui/form 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,46 @@
1
+ import { Control, FieldValues, Path, PathValue } from "react-hook-form";
2
+ import { SliderProps } from "./slider";
3
+ /**
4
+ * Props for the `FormSlider` component with type-safe form integration.
5
+ */
6
+ export type FormSliderProps<TFieldValues extends FieldValues> = {
7
+ /** React Hook Form control instance */
8
+ control: Control<TFieldValues>;
9
+ /** The name of the field (type-safe, must match form schema) */
10
+ name: Path<TFieldValues>;
11
+ /** Default value of the slider */
12
+ defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>;
13
+ } & Omit<SliderProps, "value" | "defaultValue" | "onValueChange">;
14
+ /**
15
+ * A form slider component that adds type-safe form functionality to Slider.
16
+ * Designed to integrate with React Hook Form with full TypeScript support.
17
+ *
18
+ * @component
19
+ * @example
20
+ * ```tsx
21
+ * type FormData = {
22
+ * volume: number[];
23
+ * range: number[];
24
+ * };
25
+ *
26
+ * const { control } = useForm<FormData>();
27
+ *
28
+ * <FormSlider
29
+ * control={control}
30
+ * name="volume"
31
+ * label="Volume"
32
+ * defaultValue={[50]}
33
+ * />
34
+ *
35
+ * <FormSlider
36
+ * control={control}
37
+ * name="range"
38
+ * label="Price range"
39
+ * defaultValue={[20, 80]}
40
+ * min={0}
41
+ * max={100}
42
+ * />
43
+ * ```
44
+ */
45
+ export default function FormSlider<TFieldValues extends FieldValues>({ control, name, defaultValue, required, ...props }: FormSliderProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
46
+ //# sourceMappingURL=form-slider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form-slider.d.ts","sourceRoot":"","sources":["../../src/components/form-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,OAAO,EACP,WAAW,EACX,IAAI,EACJ,SAAS,EACV,MAAM,iBAAiB,CAAC;AAEzB,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,YAAY,SAAS,WAAW,IAAI;IAC9D,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAE/B,gEAAgE;IAChE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAEzB,kCAAkC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;CAC5D,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,YAAY,SAAS,WAAW,EAAE,EACnE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,YAAY,CAAC,2CAqB/B"}
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = FormSlider;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_hook_form_1 = require("react-hook-form");
9
+ const slider_1 = __importDefault(require("./slider"));
10
+ const form_helpers_1 = require("../utils/helpers/form.helpers");
11
+ /**
12
+ * A form slider component that adds type-safe form functionality to Slider.
13
+ * Designed to integrate with React Hook Form with full TypeScript support.
14
+ *
15
+ * @component
16
+ * @example
17
+ * ```tsx
18
+ * type FormData = {
19
+ * volume: number[];
20
+ * range: number[];
21
+ * };
22
+ *
23
+ * const { control } = useForm<FormData>();
24
+ *
25
+ * <FormSlider
26
+ * control={control}
27
+ * name="volume"
28
+ * label="Volume"
29
+ * defaultValue={[50]}
30
+ * />
31
+ *
32
+ * <FormSlider
33
+ * control={control}
34
+ * name="range"
35
+ * label="Price range"
36
+ * defaultValue={[20, 80]}
37
+ * min={0}
38
+ * max={100}
39
+ * />
40
+ * ```
41
+ */
42
+ function FormSlider({ control, name, defaultValue, required = false, ...props }) {
43
+ return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, defaultValue: defaultValue, rules: { required: required ? "Required" : false }, render: ({ field: { onChange, value }, formState: { errors } }) => ((0, jsx_runtime_1.jsx)(slider_1.default, { sliderProps: { id: `form-slider-${name}` }, value: value, onValueChange: onChange, required: required, error: (0, form_helpers_1.getNestedErrorMessage)(errors || {}, name), ...props })) }) }));
44
+ }
45
+ //# sourceMappingURL=form-slider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form-slider.js","sourceRoot":"","sources":["../../src/components/form-slider.tsx"],"names":[],"mappings":";;;;;AAwDA,6BA2BC;;AAnFD,qDAMyB;AAEzB,sDAA+C;AAC/C,gEAAsE;AAgBtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAwB,UAAU,CAAmC,EACnE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACsB;IAC9B,OAAO,CACL,gCAAK,SAAS,EAAC,QAAQ,YACrB,uBAAC,4BAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,EAClD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CACjE,uBAAC,gBAAM,IACL,WAAW,EAAE,EAAE,EAAE,EAAE,eAAe,IAAI,EAAE,EAAE,EAC1C,KAAK,EAAE,KAAiB,EACxB,aAAa,EAAE,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAA,oCAAqB,EAAC,MAAM,IAAI,EAAE,EAAE,IAAI,CAAW,KACtD,KAAK,GACT,CACH,GACD,GACE,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,33 @@
1
+ import * as React from "react";
2
+ import * as SliderPrimitive from "@radix-ui/react-slider";
3
+ /**
4
+ * Accessible slider component built on top of Radix UI Slider.
5
+ *
6
+ * Supports:
7
+ * - Single value sliders
8
+ * - Range sliders with multiple thumbs
9
+ * - Controlled and uncontrolled usage
10
+ * - Horizontal and vertical orientations
11
+ *
12
+ * @example
13
+ * Single value
14
+ * ```tsx
15
+ * <Slider defaultValue={[50]} max={100} step={1} />
16
+ * ```
17
+ *
18
+ * @example
19
+ * Range slider
20
+ * ```tsx
21
+ * <Slider defaultValue={[20, 80]} min={0} max={100} />
22
+ * ```
23
+ *
24
+ * @example
25
+ * Controlled slider
26
+ * ```tsx
27
+ * const [value, setValue] = React.useState([40]);
28
+ *
29
+ * <Slider value={value} onValueChange={setValue} />
30
+ * ```
31
+ */
32
+ export declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
33
+ //# sourceMappingURL=slider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/shadcn-ui/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CA0CnD"}
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.Slider = Slider;
37
+ const jsx_runtime_1 = require("react/jsx-runtime");
38
+ const React = __importStar(require("react"));
39
+ const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
40
+ const utils_1 = require("../../utils/shadcn-ui/utils");
41
+ /**
42
+ * Accessible slider component built on top of Radix UI Slider.
43
+ *
44
+ * Supports:
45
+ * - Single value sliders
46
+ * - Range sliders with multiple thumbs
47
+ * - Controlled and uncontrolled usage
48
+ * - Horizontal and vertical orientations
49
+ *
50
+ * @example
51
+ * Single value
52
+ * ```tsx
53
+ * <Slider defaultValue={[50]} max={100} step={1} />
54
+ * ```
55
+ *
56
+ * @example
57
+ * Range slider
58
+ * ```tsx
59
+ * <Slider defaultValue={[20, 80]} min={0} max={100} />
60
+ * ```
61
+ *
62
+ * @example
63
+ * Controlled slider
64
+ * ```tsx
65
+ * const [value, setValue] = React.useState([40]);
66
+ *
67
+ * <Slider value={value} onValueChange={setValue} />
68
+ * ```
69
+ */
70
+ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
71
+ const _values = React.useMemo(() => Array.isArray(value)
72
+ ? value
73
+ : Array.isArray(defaultValue)
74
+ ? defaultValue
75
+ : [min, max], [value, defaultValue, min, max]);
76
+ return ((0, jsx_runtime_1.jsxs)(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: (0, utils_1.cn)("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", className), ...props, children: [(0, jsx_runtime_1.jsx)(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: (0, jsx_runtime_1.jsx)(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => ((0, jsx_runtime_1.jsx)(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
77
+ }
78
+ //# sourceMappingURL=slider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/shadcn-ui/slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,wBAiDC;;AAlFD,6CAA+B;AAC/B,wEAA0D;AAC1D,uDAAiD;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAgB,MAAM,CAAC,EACrB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,GAAG,KAAK,EAC0C;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CACH,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAClB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;YAC3B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAClB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAChC,CAAC;IAEF,OAAO,CACL,wBAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACX,2KAA2K,EAC3K,SAAS,CACV,KACG,KAAK,aAET,uBAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAC,uIAAuI,YAEjJ,uBAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAC,6EAA6E,GACvF,GACoB,EACvB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,uBAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EAExB,SAAS,EAAC,4RAA4R,IADjS,KAAK,CAEV,CACH,CAAC,IACmB,CACxB,CAAC;AACJ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/shadcn-ui/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
1
+ {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/shadcn-ui/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAiBA;AACD,OAAO,EAAE,MAAM,EAAE,CAAC"}
@@ -38,6 +38,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
38
38
  const SwitchPrimitive = __importStar(require("@radix-ui/react-switch"));
39
39
  const utils_1 = require("../../utils/shadcn-ui/utils");
40
40
  function Switch({ className, size = "default", ...props }) {
41
- return ((0, jsx_runtime_1.jsx)(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: (0, utils_1.cn)("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: (0, jsx_runtime_1.jsx)(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
41
+ return ((0, jsx_runtime_1.jsx)(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: (0, utils_1.cn)("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className), ...props, children: (0, jsx_runtime_1.jsx)(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-foreground" }) }));
42
42
  }
43
43
  //# sourceMappingURL=switch.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/shadcn-ui/switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BS,wBAAM;;AA5Bf,wEAA0D;AAC1D,uDAAiD;AAEjD,SAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EAGT;IACC,OAAO,CACL,uBAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,eACP,IAAI,EACf,SAAS,EAAE,IAAA,UAAE,EACX,qpBAAqpB,EACrpB,SAAS,CACV,KACG,KAAK,YAET,uBAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAC,+eAA+e,GACzf,GACmB,CACxB,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/shadcn-ui/switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BS,wBAAM;;AA3Bf,wEAA0D;AAC1D,uDAAiD;AAEjD,SAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EAGT;IACC,OAAO,CACL,uBAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,eACP,IAAI,EACf,SAAS,EAAE,IAAA,UAAE,EACX,irBAAirB,EACjrB,SAAS,CACV,KACG,KAAK,YAET,uBAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAC,+hBAA+hB,GACziB,GACmB,CACxB,CAAC;AACJ,CAAC"}
@@ -0,0 +1,19 @@
1
+ import * as React from "react";
2
+ import { Slider as ShadcnSlider } from "./shadcn-ui/slider";
3
+ export type SliderProps = {
4
+ className?: string;
5
+ label?: string;
6
+ required?: boolean;
7
+ showRequiredSign?: boolean;
8
+ value?: number[];
9
+ defaultValue?: number[];
10
+ onValueChange?: (value: number[]) => void;
11
+ labelProps?: React.ComponentProps<"label">;
12
+ sliderProps?: Omit<React.ComponentProps<typeof ShadcnSlider>, "value" | "defaultValue" | "onValueChange">;
13
+ labelPosition?: "start" | "end";
14
+ error?: string;
15
+ tip?: string;
16
+ disabled?: boolean;
17
+ };
18
+ export default function Slider({ className, label, required, showRequiredSign, value, defaultValue, onValueChange, labelProps, sliderProps, labelPosition, error, tip, disabled, }: SliderProps): import("react/jsx-runtime").JSX.Element;
19
+ //# sourceMappingURL=slider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,IAAI,CAChB,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,eAAe,CAC3C,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAgB,EAChB,gBAAwB,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAuB,EACvB,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE,WAAW,2CAoDb"}
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = Slider;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const tailwind_merge_1 = require("tailwind-merge");
6
+ const lucide_react_1 = require("lucide-react");
7
+ const slider_1 = require("./shadcn-ui/slider");
8
+ function Slider({ className, label, required = false, showRequiredSign = false, value, defaultValue, onValueChange, labelProps, sliderProps, labelPosition = "start", error, tip, disabled, }) {
9
+ const sliderId = sliderProps?.id ??
10
+ (label ? `slider-${label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
11
+ const sliderEl = ((0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, id: sliderId, value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, "aria-invalid": !!error }));
12
+ const labelEl = label ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [(0, jsx_runtime_1.jsx)("label", { ...labelProps, htmlFor: labelProps?.htmlFor ?? sliderId, className: (0, tailwind_merge_1.twMerge)("font-bold", disabled && "opacity-50 cursor-not-allowed", labelProps?.className), children: label }), required && showRequiredSign && (0, jsx_runtime_1.jsx)(lucide_react_1.AsteriskIcon, { size: 12, color: "red" })] })) : null;
13
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_merge_1.twMerge)("grid gap-1 w-full", className), children: [labelPosition === "start" && labelEl, sliderEl, labelPosition === "end" && labelEl, tip && !error && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted-foreground tip-message", children: tip })), error && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-destructive error-message", children: ["*", error] }))] }));
14
+ }
15
+ //# sourceMappingURL=slider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":";;AAwBA,yBAkEC;;AAzFD,mDAAyC;AACzC,+CAA4C;AAC5C,+CAA4D;AAqB5D,SAAwB,MAAM,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,GAAG,OAAO,EACvB,KAAK,EACL,GAAG,EACH,QAAQ,GACI;IACZ,MAAM,QAAQ,GACZ,WAAW,EAAE,EAAE;QACf,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE7E,MAAM,QAAQ,GAAG,CACf,uBAAC,eAAY,OACP,WAAW,EACf,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,GACrB,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CACtB,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,qCACM,UAAU,EACd,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,QAAQ,EACxC,SAAS,EAAE,IAAA,wBAAO,EAChB,WAAW,EACX,QAAQ,IAAI,+BAA+B,EAC3C,UAAU,EAAE,SAAS,CACtB,YAEA,KAAK,GACA,EAEP,QAAQ,IAAI,gBAAgB,IAAI,uBAAC,2BAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,IACnE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,wBAAO,EAAC,mBAAmB,EAAE,SAAS,CAAC,aACpD,aAAa,KAAK,OAAO,IAAI,OAAO,EAEpC,QAAQ,EAER,aAAa,KAAK,KAAK,IAAI,OAAO,EAElC,GAAG,IAAI,CAAC,KAAK,IAAI,CAChB,8BAAG,SAAS,EAAC,2CAA2C,YAAE,GAAG,GAAK,CACnE,EAEA,KAAK,IAAI,CACR,+BAAG,SAAS,EAAC,wCAAwC,kBAAG,KAAK,IAAK,CACnE,IACG,CACP,CAAC;AACJ,CAAC"}
@@ -9,9 +9,15 @@ import ImageInput from "../components/image-input";
9
9
  import FileInput, { FileInputProps } from "../components/file-input";
10
10
  import FormFileInput, { FormFileInputProps } from "../components/form-file-input";
11
11
  import FormDebugInfo from "../components/form-debug-info";
12
- export { FormDebugInfo, FormInput, Input, Select, FormSelect, Textarea, FormTextarea, ImageInput, FormImageInput, FileInput, FormFileInput, };
13
- export type { SelectOption, SelectProps, FormSelectProps, FormFileInputProps, FileInputProps, };
12
+ import Switch, { SwitchProps } from "../components/switch";
13
+ import FormSwitch, { FormSwitchProps } from "../components/form-switch";
14
+ import Slider, { SliderProps } from "../components/slider";
15
+ import FormSlider, { FormSliderProps } from "../components/form-slider";
16
+ export { FormDebugInfo, FormInput, Input, Select, FormSelect, Textarea, FormTextarea, ImageInput, FormImageInput, FileInput, FormFileInput, Switch, FormSwitch, Slider, FormSlider, };
17
+ export type { SelectOption, SelectProps, FormSelectProps, FormFileInputProps, FileInputProps, SwitchProps, FormSwitchProps, FormSliderProps, SliderProps, };
14
18
  export * from "../components/input";
19
+ export * from "../components/switch";
20
+ export * from "../components/form-switch";
15
21
  export * from "../components/form-input";
16
22
  export * from "../components/file-input";
17
23
  export * from "../components/form-file-input";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,SAAS,EAAE,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,aAAa,EAAE,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AACvC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,OAAO,EACL,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,GACd,CAAC;AACF,YAAY,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,cAAc,GACf,CAAC;AACF,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,SAAS,EAAE,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,aAAa,EAAE,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AACvC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EACL,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,MAAM,EACN,UAAU,EACV,MAAM,EACN,UAAU,GACX,CAAC;AACF,YAAY,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,eAAe,EACf,eAAe,EACf,WAAW,GACZ,CAAC;AACF,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC"}
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.FormFileInput = exports.FileInput = exports.FormImageInput = exports.ImageInput = exports.FormTextarea = exports.Textarea = exports.FormSelect = exports.Select = exports.Input = exports.FormInput = exports.FormDebugInfo = void 0;
20
+ exports.FormSlider = exports.Slider = exports.FormSwitch = exports.Switch = exports.FormFileInput = exports.FileInput = exports.FormImageInput = exports.ImageInput = exports.FormTextarea = exports.Textarea = exports.FormSelect = exports.Select = exports.Input = exports.FormInput = exports.FormDebugInfo = void 0;
21
21
  const form_input_1 = __importDefault(require("../components/form-input"));
22
22
  exports.FormInput = form_input_1.default;
23
23
  const input_1 = __importDefault(require("../components/input"));
@@ -40,7 +40,17 @@ const form_file_input_1 = __importDefault(require("../components/form-file-input
40
40
  exports.FormFileInput = form_file_input_1.default;
41
41
  const form_debug_info_1 = __importDefault(require("../components/form-debug-info"));
42
42
  exports.FormDebugInfo = form_debug_info_1.default;
43
+ const switch_1 = __importDefault(require("../components/switch"));
44
+ exports.Switch = switch_1.default;
45
+ const form_switch_1 = __importDefault(require("../components/form-switch"));
46
+ exports.FormSwitch = form_switch_1.default;
47
+ const slider_1 = __importDefault(require("../components/slider"));
48
+ exports.Slider = slider_1.default;
49
+ const form_slider_1 = __importDefault(require("../components/form-slider"));
50
+ exports.FormSlider = form_slider_1.default;
43
51
  __exportStar(require("../components/input"), exports);
52
+ __exportStar(require("../components/switch"), exports);
53
+ __exportStar(require("../components/form-switch"), exports);
44
54
  __exportStar(require("../components/form-input"), exports);
45
55
  __exportStar(require("../components/file-input"), exports);
46
56
  __exportStar(require("../components/form-file-input"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,0EAAiD;AAgB/C,oBAhBK,oBAAS,CAgBL;AAfX,gEAAwC;AAgBtC,gBAhBK,eAAK,CAgBL;AAfP,kEAAyE;AAgBvE,iBAhBK,gBAAM,CAgBL;AAfR,4EAAwE;AAgBtE,qBAhBK,qBAAU,CAgBL;AAfZ,sEAA8C;AAgB5C,mBAhBK,kBAAQ,CAgBL;AAfV,gFAAuD;AAgBrD,uBAhBK,uBAAY,CAgBL;AAfd,sFAA4D;AAiB1D,yBAjBK,0BAAc,CAiBL;AAhBhB,4EAAmD;AAejD,qBAfK,qBAAU,CAeL;AAdZ,0EAAqE;AAgBnE,oBAhBK,oBAAS,CAgBL;AAfX,oFAEuC;AAcrC,wBAhBK,yBAAa,CAgBL;AAbf,oFAA0D;AAGxD,wBAHK,yBAAa,CAGL;AAmBf,sDAAoC;AACpC,2DAAyC;AACzC,2DAAyC;AACzC,gEAA8C"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/exports/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,0EAAiD;AAoB/C,oBApBK,oBAAS,CAoBL;AAnBX,gEAAwC;AAoBtC,gBApBK,eAAK,CAoBL;AAnBP,kEAAyE;AAoBvE,iBApBK,gBAAM,CAoBL;AAnBR,4EAAwE;AAoBtE,qBApBK,qBAAU,CAoBL;AAnBZ,sEAA8C;AAoB5C,mBApBK,kBAAQ,CAoBL;AAnBV,gFAAuD;AAoBrD,uBApBK,uBAAY,CAoBL;AAnBd,sFAA4D;AAqB1D,yBArBK,0BAAc,CAqBL;AApBhB,4EAAmD;AAmBjD,qBAnBK,qBAAU,CAmBL;AAlBZ,0EAAqE;AAoBnE,oBApBK,oBAAS,CAoBL;AAnBX,oFAEuC;AAkBrC,wBApBK,yBAAa,CAoBL;AAjBf,oFAA0D;AAOxD,wBAPK,yBAAa,CAOL;AANf,kEAA2D;AAiBzD,iBAjBK,gBAAM,CAiBL;AAhBR,4EAAwE;AAiBtE,qBAjBK,qBAAU,CAiBL;AAhBZ,kEAA2D;AAiBzD,iBAjBK,gBAAM,CAiBL;AAhBR,4EAAwE;AAiBtE,qBAjBK,qBAAU,CAiBL;AAaZ,sDAAoC;AACpC,uDAAqC;AACrC,4DAA0C;AAC1C,2DAAyC;AACzC,2DAAyC;AACzC,gEAA8C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nomos-ui/form",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "The Shadcn library for building robust React forms",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/exports/index.js",
@@ -71,6 +71,7 @@
71
71
  "@nomos-ui/layout": "^0.0.6",
72
72
  "@nomos-ui/uanela-redux-next": "^0.3.1",
73
73
  "@radix-ui/react-select": "^2.2.6",
74
+ "@radix-ui/react-slider": "^1.3.6",
74
75
  "@radix-ui/react-slot": "^1.2.3",
75
76
  "@radix-ui/react-switch": "^1.2.6",
76
77
  "@tailwindcss/postcss": "^4.1.16",