@nomos-ui/form 0.2.1 → 0.3.0

package/dist/components/form-switch.d.ts

@@ -0,0 +1,45 @@
+import { Control, FieldValues, Path, PathValue } from "react-hook-form";
+import { SwitchProps } from "./switch";
+/**
+ * Props for the `FormSwitch` component with type-safe form integration.
+ */
+export type FormSwitchProps<TFieldValues extends FieldValues> = {
+    /** React Hook Form control instance */
+    control: Control<TFieldValues>;
+    /** The name of the field (type-safe, must match form schema) */
+    name: Path<TFieldValues>;
+    /** Default value of the switch */
+    defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>;
+} & Omit<SwitchProps, "checked" | "onCheckedChange">;
+/**
+ * A form switch component that adds type-safe form functionality to Switch.
+ * Designed to integrate with React Hook Form with full TypeScript support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * type FormData = {
+ *   notifications: boolean;
+ *   darkMode: boolean;
+ * };
+ *
+ * const { control } = useForm<FormData>();
+ *
+ * <FormSwitch
+ *   control={control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   required
+ * />
+ *
+ * <FormSwitch
+ *   control={control}
+ *   name="darkMode"
+ *   label="Dark mode"
+ *   labelPosition="start"
+ *   size="sm"
+ * />
+ * ```
+ */
+export default function FormSwitch<TFieldValues extends FieldValues>({ control, name, defaultValue, required, ...props }: FormSwitchProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form-switch.d.ts.map

package/dist/components/form-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-switch.d.ts","sourceRoot":"","sources":["../../src/components/form-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,OAAO,EACP,WAAW,EACX,IAAI,EACJ,SAAS,EACV,MAAM,iBAAiB,CAAC;AACzB,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;IAC/B,gEAAgE;IAChE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACzB,kCAAkC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;CAC5D,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,iBAAiB,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;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"}

package/dist/components/form-switch.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormSwitch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const switch_1 = __importDefault(require("./switch"));
+const form_helpers_1 = require("../utils/helpers/form.helpers");
+/**
+ * A form switch component that adds type-safe form functionality to Switch.
+ * Designed to integrate with React Hook Form with full TypeScript support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * type FormData = {
+ *   notifications: boolean;
+ *   darkMode: boolean;
+ * };
+ *
+ * const { control } = useForm<FormData>();
+ *
+ * <FormSwitch
+ *   control={control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   required
+ * />
+ *
+ * <FormSwitch
+ *   control={control}
+ *   name="darkMode"
+ *   label="Dark mode"
+ *   labelPosition="start"
+ *   size="sm"
+ * />
+ * ```
+ */
+function FormSwitch({ control, name, defaultValue, required = false, ...props }) {
+    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)(switch_1.default, { switchProps: { id: `form-switch-${name}` }, checked: !!value, onCheckedChange: onChange, required: required, error: (0, form_helpers_1.getNestedErrorMessage)(errors || {}, name), ...props })) }) }));
+}
+//# sourceMappingURL=form-switch.js.map

package/dist/components/form-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-switch.js","sourceRoot":"","sources":["../../src/components/form-switch.tsx"],"names":[],"mappings":";;;;;AAoDA,6BA2BC;;AA/ED,qDAMyB;AACzB,sDAA+C;AAC/C,gEAAsE;AActE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;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,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,eAAe,EAAE,QAAQ,EACzB,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"}

package/dist/components/switch.d.ts

@@ -1,2 +1,24 @@
-export {};
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+export type SwitchProps = {
+    className?: string;
+    label?: string;
+    required?: boolean;
+    showRequiredSign?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: "sm" | "default";
+    labelProps?: React.ComponentProps<"label">;
+    switchProps?: Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, "checked" | "onCheckedChange">;
+    /** Place the label before ("start") or after ("end") the switch. Defaults to "end". */
+    labelPosition?: "start" | "end";
+    error?: string;
+    tip?: string;
+    disabled?: boolean;
+};
+/**
+ * Switch with an optional label, tip, and error message.
+ * Mirrors the Select component's label + error + tip pattern.
+ */
+export default function Switch({ className, label, required, showRequiredSign, checked, onCheckedChange, size, labelProps, switchProps, labelPosition, error, tip, disabled, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,IAAI,CAChB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACjD,SAAS,GAAG,iBAAiB,CAC9B,CAAC;IACF,uFAAuF;IACvF,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;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAgB,EAChB,gBAAwB,EACxB,OAAO,EACP,eAAe,EACf,IAAgB,EAChB,UAAU,EACV,WAAW,EACX,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE,WAAW,2CAkDb"}

package/dist/components/switch.js

@@ -1,3 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Switch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tailwind_merge_1 = require("tailwind-merge");
+const lucide_react_1 = require("lucide-react");
+const switch_1 = require("./shadcn-ui/switch");
+/**
+ * Switch with an optional label, tip, and error message.
+ * Mirrors the Select component's label + error + tip pattern.
+ */
+function Switch({ className, label, required = false, showRequiredSign = false, checked, onCheckedChange, size = "default", labelProps, switchProps, labelPosition = "end", error, tip, disabled, }) {
+    const switchId = switchProps?.id ??
+        (label ? `switch-${label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
+    const switchEl = ((0, jsx_runtime_1.jsx)(switch_1.Switch, { ...switchProps, id: switchId, size: size, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, "aria-invalid": !!error }));
+    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 ?? switchId, className: (0, tailwind_merge_1.twMerge)("font-bold cursor-pointer", 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;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_merge_1.twMerge)("gap-1 grid w-full", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [labelPosition === "start" && labelEl, switchEl, 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] }))] }));
+}
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":";;AA8BA,yBAgEC;;AA5FD,mDAAyC;AACzC,+CAA4C;AAC5C,+CAA4D;AAsB5D;;;GAGG;AACH,SAAwB,MAAM,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,KAAK,EACxB,OAAO,EACP,eAAe,EACf,IAAI,GAAG,SAAS,EAChB,UAAU,EACV,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,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,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,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,0BAA0B,EAC1B,QAAQ,IAAI,+BAA+B,EAC3C,UAAU,EAAE,SAAS,CACtB,YAEA,KAAK,GACA,EACP,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,aACrD,iCAAK,SAAS,EAAC,kCAAkC,aAC9C,aAAa,KAAK,OAAO,IAAI,OAAO,EACpC,QAAQ,EACR,aAAa,KAAK,KAAK,IAAI,OAAO,IAC/B,EAEL,GAAG,IAAI,CAAC,KAAK,IAAI,CAChB,8BAAG,SAAS,EAAC,2CAA2C,YAAE,GAAG,GAAK,CACnE,EACA,KAAK,IAAI,CACR,+BAAG,SAAS,EAAC,wCAAwC,kBAAG,KAAK,IAAK,CACnE,IACG,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomos-ui/form",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "The Shadcn library for building robust React forms",
   "main": "dist/index.js",
   "module": "dist/exports/index.js",