@customafk/lunas-ui 0.0.2 → 0.0.3-a

package/dist/Atoms/Form/index.js

@@ -1,9 +1,11 @@
+"use client";
+
 // packages/Atoms/Form/index.tsx
 import * as React2 from "react";
 import {
-  Controller as ControllerBase,
-  FormProvider as FormProviderBase,
-  useFormContext as useFormContextBase
+  Controller,
+  FormProvider,
+  useFormContext
 } from "react-hook-form";
 
 // packages/Atoms/Label/index.tsx
@@ -266,17 +268,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
 // packages/Atoms/Form/index.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Form = FormProviderBase;
+var Form = FormProvider;
 var FormFieldContext = React2.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx2(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx2(ControllerBase, { ...props }) });
+  return /* @__PURE__ */ jsx2(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx2(Controller, { ...props }) });
 };
 var useFormField = () => {
   const fieldContext = React2.useContext(FormFieldContext);
   const itemContext = React2.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContextBase();
+  const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -293,55 +295,64 @@ var useFormField = () => {
 };
 var FormItemContext = React2.createContext({});
 var FormItem = React2.forwardRef(
-  ({ className, ...props }, reference) => {
+  ({ className, ...props }, ref) => {
     const id = React2.useId();
-    return /* @__PURE__ */ jsx2(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx2("div", { ref: reference, className: cn("space-y-2", className), ...props }) });
+    return /* @__PURE__ */ jsx2(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx2("div", { ref, className: cn("space-y-2", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React2.forwardRef(({ className, ...props }, reference) => {
+var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx2(
     Label,
     {
-      ref: reference,
-      className: cn(error && "text-destructive", className),
+      ref,
+      className: cn(error && "text-ui-destructive-500", className),
       htmlFor: formItemId,
       ...props
     }
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React2.forwardRef(({ ...props }, reference) => {
-  const { formItemId } = useFormField();
-  return /* @__PURE__ */ jsx2(Slot, { ref: reference, id: formItemId, ...props });
+var FormControl = React2.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React2.forwardRef(({ className, ...props }, reference) => {
+var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx2(
     "p",
     {
-      ref: reference,
+      ref,
       id: formDescriptionId,
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-sm text-ui-text-500", className),
       ...props
     }
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React2.forwardRef(({ className, children, ...props }, reference) => {
+var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
-    return void 0;
+    return null;
   }
   return /* @__PURE__ */ jsx2(
     "p",
     {
-      ref: reference,
+      ref,
       id: formMessageId,
-      className: cn("text-destructive text-sm font-medium", className),
+      className: cn("text-sm font-medium text-ui-destructive-500", className),
       ...props,
       children: body
     }

package/dist/Atoms/Input/index.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { HTMLAttributes, ReactNode, ChangeEvent } from 'react';
 
-interface IInputProps extends HTMLAttributes<HTMLDivElement> {
+interface IInputProps extends HTMLAttributes<HTMLInputElement> {
     icon?: ReactNode;
     placeholder?: string;
     isErrored?: boolean;
+    inputClassName?: string;
+    value?: string | number | readonly string[];
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLDivElement>>>;