@waveso/ui 0.0.9 → 0.1.0

package/dist/form.js

@@ -1,107 +1,128 @@
-import { Field, FieldLabel, FieldDescription, FieldError } from './chunk-NCHHHWTB.js';
-import { cn } from './chunk-76UQO56T.js';
-import * as React from 'react';
-import { FormProvider, useFormContext, Controller } from 'react-hook-form';
-export { useForm } from 'react-hook-form';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
+"use client";
+import { cn } from "./lib/utils.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller, FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
+//#region src/form.tsx
 function Form({ form, onSubmit, ...props }) {
-  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(FormRoot, { ...props, onSubmit: form.handleSubmit(onSubmit) }) });
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx(FormRoot, {
+			...props,
+			onSubmit: form.handleSubmit(onSubmit)
+		})
+	});
 }
+/**
+* Plain `<form>` element with RHF integration.
+*
+* Uses a native `<form>` instead of `@base-ui/react/form` because Base UI
+* Form's internal submit/validation handling conflicts with React Hook Form
+* and blocks button click events inside modal dialogs. Since RHF already
+* provides validation, error handling, and submit management, the Base UI
+* Form wrapper adds no value at the moment.
+*/
 function FormRoot({ className, ...props }) {
-  return /* @__PURE__ */ jsx("form", { noValidate: true, "data-slot": "form", className: cn("flex flex-col gap-6", className), ...props });
+	return /* @__PURE__ */ jsx("form", {
+		noValidate: true,
+		"data-slot": "form",
+		className: cn("flex flex-col gap-6", className),
+		...props
+	});
 }
+/**
+* Base UI + React Hook Form field helper.
+*
+* It maps RHF Controller state onto Base UI's <Field> state so styling can
+* rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.
+*/
 function FormField(props) {
-  const { name, id, required, label, description, rules, render, ...rootProps } = props;
-  const { control } = useFormContext();
-  const reactId = React.useId();
-  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, "-");
-  const controlId = id ?? `field-${safeName}-${reactId}`;
-  const inferredRequired = (() => {
-    if (!rules || !("required" in rules)) return false;
-    const req = rules.required;
-    if (typeof req === "boolean") return req;
-    if (typeof req === "string") return true;
-    if (req && typeof req === "object" && "value" in req) {
-      return Boolean(req.value);
-    }
-    return Boolean(req);
-  })();
-  const isRequired = required ?? inferredRequired;
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      rules,
-      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(
-        Field,
-        {
-          ...rootProps,
-          name: field.name,
-          invalid: fieldState.invalid,
-          touched: fieldState.isTouched,
-          dirty: fieldState.isDirty,
-          children: [
-            label ? /* @__PURE__ */ jsxs(FieldLabel, { children: [
-              label,
-              isRequired ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" }) : null
-            ] }) : null,
-            description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
-            render({ id: controlId, field, fieldState }),
-            fieldState.error ? /* @__PURE__ */ jsx(FieldError, { children: fieldState.error.message }) : null
-          ]
-        }
-      )
-    }
-  );
+	const { name, id, required, label, description, rules, render, ...rootProps } = props;
+	const { control } = useFormContext();
+	const reactId = React.useId();
+	const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, "-");
+	const controlId = id ?? `field-${safeName}-${reactId}`;
+	const inferredRequired = (() => {
+		if (!rules || !("required" in rules)) return false;
+		const req = rules.required;
+		if (typeof req === "boolean") return req;
+		if (typeof req === "string") return true;
+		if (req && typeof req === "object" && "value" in req) return Boolean(req.value);
+		return Boolean(req);
+	})();
+	const isRequired = required ?? inferredRequired;
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		rules,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			...rootProps,
+			name: field.name,
+			invalid: fieldState.invalid,
+			touched: fieldState.isTouched,
+			dirty: fieldState.isDirty,
+			children: [
+				label ? /* @__PURE__ */ jsxs(FieldLabel, { children: [label, isRequired ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-destructive ml-1",
+					children: "*"
+				}) : null] }) : null,
+				description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+				render({
+					id: controlId,
+					field,
+					fieldState
+				}),
+				fieldState.error ? /* @__PURE__ */ jsx(FieldError, { children: fieldState.error.message }) : null
+			]
+		})
+	});
 }
 function FormError({ className, ...props }) {
-  const {
-    formState: { errors }
-  } = useFormContext();
-  const message = errors?.root && typeof errors.root?.message === "string" ? String(errors.root?.message) : null;
-  if (!message) return null;
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "form-error",
-      className: cn(
-        "text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm",
-        className
-      ),
-      ...props,
-      children: message
-    }
-  );
+	const { formState: { errors } } = useFormContext();
+	const message = errors?.root && typeof errors.root?.message === "string" ? String(errors.root?.message) : null;
+	if (!message) return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "form-error",
+		className: cn("text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
+		...props,
+		children: message
+	});
 }
 function FormActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "form-actions",
-      className: cn("flex flex-wrap items-center gap-2", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "form-actions",
+		className: cn("flex flex-wrap items-center gap-2", className),
+		...props
+	});
 }
 function FormMessage({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", className: cn("text-sm text-foreground/80", className), ...props });
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "form-message",
+		className: cn("text-sm text-foreground/80", className),
+		...props
+	});
 }
+/**
+* Convenience helper for mapping RHF field props onto either:
+* - Base UI controls (use `onValueChange`)
+* - Native/standard inputs (use `onChange`)
+*/
 function fieldControlProps(field, opts) {
-  return {
-    id: opts?.id,
-    name: field.name,
-    ref: field.ref,
-    value: field.value ?? "",
-    onBlur: field.onBlur,
-    onChange: field.onChange,
-    ...opts?.native ? {} : { onValueChange: field.onChange },
-    "aria-describedby": opts?.describedBy,
-    "aria-invalid": opts?.invalid
-  };
+	return {
+		id: opts?.id,
+		name: field.name,
+		ref: field.ref,
+		value: field.value ?? "",
+		onBlur: field.onBlur,
+		onChange: field.onChange,
+		...opts?.native ? {} : { onValueChange: field.onChange },
+		"aria-describedby": opts?.describedBy,
+		"aria-invalid": opts?.invalid
+	};
 }
+//#endregion
+export { Form, FormActions, FormError, FormField, FormMessage, FormRoot, fieldControlProps, useForm, useWatch };
 
-export { Form, FormActions, FormError, FormField, FormMessage, FormRoot, fieldControlProps };
-//# sourceMappingURL=form.js.map
 //# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/form.tsx"],"names":[],"mappings":"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","file":"form.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-foreground/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"]}
+{"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  useWatch,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-foreground/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  useWatch,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,0FACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,8BAA8B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASrG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}

package/dist/gradient-reveal-text.d.ts

@@ -1,21 +1,26 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/gradient-reveal-text.d.ts
 interface GradientRevealTextProps {
-    /** The text to display */
-    text: string;
-    /** Spotlight follow speed in seconds. Default: 0 (instant) */
-    duration?: number;
-    /** Gradient colors for the reveal effect. Default: rainbow */
-    colors?: string[];
-    /** Base stroke opacity when not hovered. Default: 0.3 */
-    baseOpacity?: number;
-    /** Hovered stroke opacity. Default: 0.7 */
-    hoverOpacity?: number;
-    /** Font family for SVG text. Default: Helvetica Neue */
-    fontFamily?: string;
-    /** Spotlight radius multiplier relative to text height. Default: 0.6 */
-    spotlightSize?: number;
-    className?: string;
+  /** The text to display */
+  text: string;
+  /** Spotlight follow speed in seconds. Default: 0 (instant) */
+  duration?: number;
+  /** Gradient colors for the reveal effect. Default: rainbow */
+  colors?: string[];
+  /** Base stroke opacity when not hovered. Default: 0.3 */
+  baseOpacity?: number;
+  /** Hovered stroke opacity. Default: 0.7 */
+  hoverOpacity?: number;
+  /** Font family for SVG text. Default: Helvetica Neue */
+  fontFamily?: string;
+  /** Spotlight radius multiplier relative to text height. Default: 0.6 */
+  spotlightSize?: number;
+  /** Stroke width in px. Default: auto (1.5% of text height) */
+  strokeWidth?: number;
+  /** Base stroke color. Default: neutral-200 (light) / neutral-800 (dark) via Tailwind */
+  baseColor?: string;
+  className?: string;
 }
 /**
  * Large decorative text with a gradient spotlight that follows the cursor.
@@ -30,6 +35,18 @@ interface GradientRevealTextProps {
  * <GradientRevealText text="BRAND" colors={["#ff0000", "#00ff00"]} />
  * ```
  */
-declare function GradientRevealText({ text, duration, colors, baseOpacity, hoverOpacity, fontFamily, spotlightSize, className, }: GradientRevealTextProps): react_jsx_runtime.JSX.Element;
-
+declare function GradientRevealText({
+  text,
+  duration,
+  colors,
+  baseOpacity,
+  hoverOpacity,
+  fontFamily,
+  spotlightSize,
+  strokeWidth: strokeWidthPx,
+  baseColor,
+  className
+}: GradientRevealTextProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 export { GradientRevealText, type GradientRevealTextProps };
+//# sourceMappingURL=gradient-reveal-text.d.ts.map

package/dist/gradient-reveal-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-reveal-text.d.ts","names":[],"sources":["../src/gradient-reveal-text.tsx"],"mappings":";;;UAKU,uBAAA;;EAER,IAAA;EAFQ;EAIR,QAAA;;EAEA,MAAA;EAJA;EAMA,WAAA;EAFA;EAIA,YAAA;EAAA;EAEA,UAAA;EAEA;EAAA,aAAA;EAIA;EAFA,WAAA;EAGS;EADT,SAAA;EACA,SAAA;AAAA;;;;;;;;;;;;;;iBAwBO,kBAAA,CAAA;EACP,IAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,WAAA,EAAa,aAAA;EACb,SAAA;EACA;AAAA,GACC,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}