@customafk/lunas-ui 0.2.51 → 0.2.53

package/dist/ui/form.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"sources":["../../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { createContext, memo, use, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\nimport { Field, FieldDescription, FieldLabel } from './field';\n\n/**\n * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.\n *\n * @example\n * ```tsx\n * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';\n * import { useForm } from 'react-hook-form';\n *\n * const form = useForm<{ username: string }>();\n *\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"username\"\n *       render={({ field }) => (\n *         <FormItem>\n *           <FormLabel>Username</FormLabel>\n *           <FormControl><input {...field} /></FormControl>\n *           <FormMessage />\n *         </FormItem>\n *       )}\n *     />\n *   </form>\n * </Form>\n * ```\n */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/**\n * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.\n */\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/**\n * Hook that returns the field state and IDs for the enclosing FormField.\n * Must be called inside a component rendered within a `<FormField>`.\n */\nconst useFormField = () => {\n  const fieldContext = use(FormFieldContext);\n  const itemContext = use(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/**\n * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.\n *\n * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).\n */\nconst FormItem = memo(\n  ({\n    className,\n    orientation = 'responsive',\n    ...props\n  }: React.ComponentProps<'div'> & {\n    orientation?: 'vertical' | 'horizontal' | 'responsive';\n  }) => {\n    const id = useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <Field orientation={orientation} {...props} className={className} />\n      </FormItemContext.Provider>\n    );\n  }\n);\nFormItem.displayName = 'FormItem';\n\n/** Styled label automatically associated with the FormItem's control via `htmlFor`. */\nconst FormLabel = memo(({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) => {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\n/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */\nconst FormControl = memo(({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\n/** Helper text displayed below the control that provides additional context about the field. */\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm/6 leading-normal font-normal',\n        'group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Displays the validation error message for the field, or falls back to `children` when there is no error. */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n\n  return (\n    <span data-slot=\"form-message\" id={formMessageId} className={cn('text-danger text-xs', className)} {...props}>\n      {error ? String(error?.message ?? '') : children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };\n"],"mappings":"0TAoCA,MAAM,EAAOA,EAAAA,aAMP,GAAA,EAAA,EAAA,eAAwD,EAAE,CAA0B,CAKpF,GAA8H,CAClI,GAAG,MAGD,EAAA,EAAA,KAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,WACpD,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,GAAI,EAAA,CAAS,EACC,CAQ1B,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,KAAmB,EAAiB,CACpC,GAAA,EAAA,EAAA,KAAkB,EAAgB,CAClC,CAAE,gBAAe,UAAS,eAAA,EAAA,EAAA,iBAA+B,CACzD,GAAA,EAAA,EAAA,cAAyB,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,EAOG,GAAA,EAAA,EAAA,eAAsD,EAAE,CAAyB,CAOjF,GAAA,EAAA,EAAA,OACH,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,GAAA,EAAA,EAAA,QAAY,CAElB,OACE,EAAA,EAAA,KAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,WACrC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAmB,cAAa,GAAI,EAAkB,aAAa,EAC3C,EAGhC,CACD,EAAS,YAAc,WAGvB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAW,QAAS,EAAY,GAAI,GAAS,EACrD,CACF,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAAA,EAAA,KAACC,EAAAA,KAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,GACJ,EAEJ,CACF,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACJ,WAAA,EAAA,EAAA,IACE,+DACA,6DACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,GAAc,CAE/C,OACE,EAAA,EAAA,KAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,GACnC"}

package/dist/ui/form.d.ts

@@ -1,112 +0,0 @@
-import * as react198 from "react";
-import { Label, Slot } from "radix-ui";
-import * as react_hook_form0 from "react-hook-form";
-import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
-
-//#region packages/components/ui/form.d.ts
-
-/**
- * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
- *
- * @example
- * ```tsx
- * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';
- * import { useForm } from 'react-hook-form';
- *
- * const form = useForm<{ username: string }>();
- *
- * <Form {...form}>
- *   <form onSubmit={form.handleSubmit(onSubmit)}>
- *     <FormField
- *       control={form.control}
- *       name="username"
- *       render={({ field }) => (
- *         <FormItem>
- *           <FormLabel>Username</FormLabel>
- *           <FormControl><input {...field} /></FormControl>
- *           <FormMessage />
- *         </FormItem>
- *       )}
- *     />
- *   </form>
- * </Form>
- * ```
- */
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
-  children,
-  watch,
-  getValues,
-  getFieldState,
-  setError,
-  clearErrors,
-  setValue,
-  setValues,
-  trigger,
-  formState,
-  resetField,
-  reset,
-  handleSubmit,
-  unregister,
-  control,
-  register,
-  setFocus,
-  subscribe
-}: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-/**
- * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
- */
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => react198.JSX.Element;
-/**
- * Hook that returns the field state and IDs for the enclosing FormField.
- * Must be called inside a component rendered within a `<FormField>`.
- */
-declare const useFormField: () => {
-  invalid: boolean;
-  isDirty: boolean;
-  isTouched: boolean;
-  isValidating: boolean;
-  error?: react_hook_form0.FieldError;
-  id: string;
-  control: react_hook_form0.Control<FieldValues, any, FieldValues>;
-  resetField: react_hook_form0.UseFormResetField<FieldValues>;
-  name: string;
-  formItemId: string;
-  formDescriptionId: string;
-  formMessageId: string;
-};
-/**
- * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.
- *
- * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
- */
-declare const FormItem: react198.MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & {
-  orientation?: "vertical" | "horizontal" | "responsive";
-}) => react198.JSX.Element>;
-/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
-declare const FormLabel: react198.MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Label.Root>) => react198.JSX.Element>;
-/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
-declare const FormControl: react198.MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Slot.Slot>) => react198.JSX.Element>;
-/** Helper text displayed below the control that provides additional context about the field. */
-declare function FormDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): react198.JSX.Element;
-/** Displays the validation error message for the field, or falls back to `children` when there is no error. */
-declare function FormMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'p'>): react198.JSX.Element;
-//#endregion
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
-//# sourceMappingURL=form.d.ts.map

package/dist/ui/form.js

@@ -1,2 +0,0 @@
-"use client";import"../separator-BM8hA4DP.js";import"../label-B8cAG2kc.js";import{o as e,r as t,t as n}from"../field-DpoKF1nY.js";import{createContext as r,memo as i,use as a,useId as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c}from"react/jsx-runtime";import{Slot as l}from"radix-ui";import{Controller as u,FormProvider as d,useFormContext as f,useFormState as p}from"react-hook-form";const m=d,h=r({}),g=({...e})=>c(h.Provider,{value:{name:e.name},children:c(u,{...e})}),_=()=>{let e=a(h),t=a(v),{getFieldState:n,control:r,resetField:i}=f(),o=p({name:e.name}),s=n(e.name,o);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:c}=t;return{id:c,control:r,resetField:i,name:e.name,formItemId:`${c}-form-item`,formDescriptionId:`${c}-form-item-description`,formMessageId:`${c}-form-item-message`,...s}},v=r({}),y=i(({className:e,orientation:t=`responsive`,...r})=>{let i=o();return c(v.Provider,{value:{id:i},children:c(n,{orientation:t,...r,className:e})})});y.displayName=`FormItem`;const b=i(({...t})=>{let{formItemId:n}=_();return c(e,{htmlFor:n,...t})});b.displayName=`FormLabel`;const x=i(({...e})=>{let{error:t,formItemId:n,formDescriptionId:r,formMessageId:i}=_();return c(l.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${i}`:`${r}`,"aria-invalid":!!t,...e})});x.displayName=`FormControl`;function S({className:e,...n}){let{formDescriptionId:r}=_();return c(t,{id:r,className:s(`text-text-positive-weak text-sm/6 leading-normal font-normal`,`group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...n})}function C({className:e,children:t,...n}){let{error:r,formMessageId:i}=_();return c(`span`,{"data-slot":`form-message`,id:i,className:s(`text-danger text-xs`,e),...n,children:r?String(r?.message??``):t})}export{m as Form,x as FormControl,S as FormDescription,g as FormField,y as FormItem,b as FormLabel,C as FormMessage,_ as useFormField};
-//# sourceMappingURL=form.js.map

package/dist/ui/form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.js","names":["SlotPrimitive"],"sources":["../../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { createContext, memo, use, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\nimport { Field, FieldDescription, FieldLabel } from './field';\n\n/**\n * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.\n *\n * @example\n * ```tsx\n * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';\n * import { useForm } from 'react-hook-form';\n *\n * const form = useForm<{ username: string }>();\n *\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"username\"\n *       render={({ field }) => (\n *         <FormItem>\n *           <FormLabel>Username</FormLabel>\n *           <FormControl><input {...field} /></FormControl>\n *           <FormMessage />\n *         </FormItem>\n *       )}\n *     />\n *   </form>\n * </Form>\n * ```\n */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/**\n * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.\n */\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/**\n * Hook that returns the field state and IDs for the enclosing FormField.\n * Must be called inside a component rendered within a `<FormField>`.\n */\nconst useFormField = () => {\n  const fieldContext = use(FormFieldContext);\n  const itemContext = use(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/**\n * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.\n *\n * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).\n */\nconst FormItem = memo(\n  ({\n    className,\n    orientation = 'responsive',\n    ...props\n  }: React.ComponentProps<'div'> & {\n    orientation?: 'vertical' | 'horizontal' | 'responsive';\n  }) => {\n    const id = useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <Field orientation={orientation} {...props} className={className} />\n      </FormItemContext.Provider>\n    );\n  }\n);\nFormItem.displayName = 'FormItem';\n\n/** Styled label automatically associated with the FormItem's control via `htmlFor`. */\nconst FormLabel = memo(({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) => {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\n/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */\nconst FormControl = memo(({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\n/** Helper text displayed below the control that provides additional context about the field. */\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm/6 leading-normal font-normal',\n        'group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Displays the validation error message for the field, or falls back to `children` when there is no error. */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n\n  return (\n    <span data-slot=\"form-message\" id={formMessageId} className={cn('text-danger text-xs', className)} {...props}>\n      {error ? String(error?.message ?? '') : children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };\n"],"mappings":"uaAoCA,MAAM,EAAO,EAMP,EAAmB,EAAqC,EAAE,CAA0B,CAKpF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,UACpD,EAAC,EAAA,CAAW,GAAI,EAAA,CAAS,EACC,CAQ1B,MAAqB,CACzB,IAAM,EAAe,EAAI,EAAiB,CACpC,EAAc,EAAI,EAAgB,CAClC,CAAE,gBAAe,UAAS,cAAe,GAAgB,CACzD,EAAY,EAAa,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,EAOG,EAAkB,EAAoC,EAAE,CAAyB,CAOjF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,GAAO,CAElB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,EAAA,CAAmB,cAAa,GAAI,EAAkB,aAAa,EAC3C,EAGhC,CACD,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAC,EAAA,CAAW,QAAS,EAAY,GAAI,GAAS,EACrD,CACF,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAACA,EAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,GACJ,EAEJ,CACF,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,EAAA,CACC,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,GAAc,CAE/C,OACE,EAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,GACnC"}

package/dist/ui/hover-card.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"hover-card.cjs","names":["HoverCardPrimitive"],"sources":["../../packages/components/ui/hover-card.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { HoverCard as HoverCardPrimitive } from 'radix-ui';\n\n/**\n * Root provider for the HoverCard — shows a floating card when the trigger is hovered.\n *\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';\n *\n * <HoverCard>\n *   <HoverCardTrigger>@username</HoverCardTrigger>\n *   <HoverCardContent>\n *     <p>Profile details here</p>\n *   </HoverCardContent>\n * </HoverCard>\n * ```\n */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that triggers the HoverCard on pointer enter. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating card panel displayed when the trigger is hovered. */\nfunction HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n"],"mappings":"2JAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,KAAA,CAAK,YAAU,aAAa,GAAI,GAAS,CAItE,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAAQ,YAAU,qBAAqB,GAAI,GAAS,CAIjF,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,KAACA,EAAAA,UAAmB,OAAA,CAAO,YAAU,8BACnC,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAClB,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,IACE,oeACA,EACD,CACD,GAAI,GACJ,EACwB"}

package/dist/ui/hover-card.d.ts

@@ -1,37 +0,0 @@
-import * as react195 from "react";
-import { HoverCard as HoverCard$1 } from "radix-ui";
-
-//#region packages/components/ui/hover-card.d.ts
-
-/**
- * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
- *
- * @example
- * ```tsx
- * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';
- *
- * <HoverCard>
- *   <HoverCardTrigger>@username</HoverCardTrigger>
- *   <HoverCardContent>
- *     <p>Profile details here</p>
- *   </HoverCardContent>
- * </HoverCard>
- * ```
- */
-declare function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Root>): react195.JSX.Element;
-/** The element that triggers the HoverCard on pointer enter. */
-declare function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Trigger>): react195.JSX.Element;
-/** The floating card panel displayed when the trigger is hovered. */
-declare function HoverCardContent({
-  className,
-  align,
-  sideOffset,
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Content>): react195.JSX.Element;
-//#endregion
-export { HoverCard, HoverCardContent, HoverCardTrigger };
-//# sourceMappingURL=hover-card.d.ts.map

package/dist/ui/hover-card.js

@@ -1,2 +0,0 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{HoverCard as n}from"radix-ui";function r({...e}){return t(n.Root,{"data-slot":`hover-card`,...e})}function i({...e}){return t(n.Trigger,{"data-slot":`hover-card-trigger`,...e})}function a({className:r,align:i=`center`,sideOffset:a=4,...o}){return t(n.Portal,{"data-slot":`hover-card-portal`,children:t(n.Content,{"data-slot":`hover-card-content`,align:i,sideOffset:a,className:e(`bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden`,r),...o})})}export{r as HoverCard,a as HoverCardContent,i as HoverCardTrigger};
-//# sourceMappingURL=hover-card.js.map

package/dist/ui/hover-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hover-card.js","names":["HoverCardPrimitive"],"sources":["../../packages/components/ui/hover-card.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { HoverCard as HoverCardPrimitive } from 'radix-ui';\n\n/**\n * Root provider for the HoverCard — shows a floating card when the trigger is hovered.\n *\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';\n *\n * <HoverCard>\n *   <HoverCardTrigger>@username</HoverCardTrigger>\n *   <HoverCardContent>\n *     <p>Profile details here</p>\n *   </HoverCardContent>\n * </HoverCard>\n * ```\n */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that triggers the HoverCard on pointer enter. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating card panel displayed when the trigger is hovered. */\nfunction HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n"],"mappings":"8IAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAACA,EAAmB,KAAA,CAAK,YAAU,aAAa,GAAI,GAAS,CAItE,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAACA,EAAmB,QAAA,CAAQ,YAAU,qBAAqB,GAAI,GAAS,CAIjF,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAACA,EAAmB,OAAA,CAAO,YAAU,6BACnC,EAACA,EAAmB,QAAA,CAClB,YAAU,qBACH,QACK,aACZ,UAAW,EACT,oeACA,EACD,CACD,GAAI,GACJ,EACwB"}

package/dist/ui/image.d.ts

@@ -1,36 +0,0 @@
-//#region packages/components/ui/image.d.ts
-/** Props for the Image component. */
-type Props = {
-  /** URL of the image to display. */
-  src?: string;
-  /** Accessible alt text for the image. */
-  alt?: string;
-  /** Width of the image container (number treated as pixels). */
-  width?: number | string;
-  /** Height of the image container (number treated as pixels). */
-  height?: number | string;
-  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
-  maxRetries?: number;
-  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
-  retryDelay?: number;
-  /** Class name applied to the outer container div. */
-  className?: string;
-  /** Class name applied to the `<img>` element. */
-  imageClassName?: string;
-  /** Click handler for the image container. */
-  onClick?: () => void;
-};
-/**
- * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
- *
- * @example
- * ```tsx
- * import { Image } from '@customafk/lunas-ui/ui/image';
- *
- * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
- * ```
- */
-declare const Image: React.FC<Props>;
-//#endregion
-export { Image };
-//# sourceMappingURL=image.d.ts.map

package/dist/ui/image.js

@@ -1 +0,0 @@
-import"../skeleton-DlRDNM97.js";import{t as e}from"../image-BpTuF_1w.js";export{e as Image};

package/dist/ui/input-otp.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp.cjs","names":["OTPInput","OTPInputContext","MinusIcon"],"sources":["../../packages/components/ui/input-otp.tsx"],"sourcesContent":["'use client';\nimport { use } from 'react';\n\nimport { MinusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\n/**\n * One-time password (OTP) input composed of individual character slots.\n *\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@customafk/lunas-ui/ui/input-otp';\n *\n * <InputOTP maxLength={6}>\n *   <InputOTPGroup>\n *     <InputOTPSlot index={0} />\n *     <InputOTPSlot index={1} />\n *     <InputOTPSlot index={2} />\n *   </InputOTPGroup>\n *   <InputOTPSeparator />\n *   <InputOTPGroup>\n *     <InputOTPSlot index={3} />\n *     <InputOTPSlot index={4} />\n *     <InputOTPSlot index={5} />\n *   </InputOTPGroup>\n * </InputOTP>\n * ```\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  /** Class name applied to the outer container div. */\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\n/** Flex container that groups a sequence of InputOTPSlot elements. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"input-otp-group\" className={cn('flex items-center', className)} {...props} />;\n}\n\n/**\n * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.\n *\n * @param index - Zero-based position of this slot within the OTP sequence.\n */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) {\n  const inputOTPContext = use(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Visual separator (dash) placed between InputOTPGroup elements. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"],"mappings":"yMA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAA,EAAA,KAACA,EAAAA,SAAAA,CACC,YAAU,YACV,oBAAA,EAAA,EAAA,IAAuB,kDAAmD,EAAmB,CAC7F,WAAA,EAAA,EAAA,IAAc,8BAA+B,EAAU,CACvD,GAAI,GACJ,CAKN,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,kBAAkB,WAAA,EAAA,EAAA,IAAc,oBAAqB,EAAU,CAAE,GAAI,GAAS,CAQtG,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,aAAA,EAAA,EAAA,KADAC,EAAAA,gBAAgB,EACc,MAAM,IAAU,EAAE,CAE5E,OACE,EAAA,EAAA,MAAC,MAAA,CACC,YAAU,iBACV,cAAa,EACb,WAAA,EAAA,EAAA,IACE,2fACA,EACD,CACD,GAAI,YAEH,EACA,IACC,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,kFACb,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,2DAAA,CAA6D,EACxE,CAAA,EAEJ,CAKV,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,sBAAsB,KAAK,YAAY,GAAI,YACxD,EAAA,EAAA,KAACC,EAAAA,UAAAA,EAAAA,CAAY,EACT"}

package/dist/ui/input-otp.d.ts

@@ -1,59 +0,0 @@
-import * as react207 from "react";
-import { OTPInput } from "input-otp";
-
-//#region packages/components/ui/input-otp.d.ts
-
-/**
- * One-time password (OTP) input composed of individual character slots.
- *
- * @example
- * ```tsx
- * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@customafk/lunas-ui/ui/input-otp';
- *
- * <InputOTP maxLength={6}>
- *   <InputOTPGroup>
- *     <InputOTPSlot index={0} />
- *     <InputOTPSlot index={1} />
- *     <InputOTPSlot index={2} />
- *   </InputOTPGroup>
- *   <InputOTPSeparator />
- *   <InputOTPGroup>
- *     <InputOTPSlot index={3} />
- *     <InputOTPSlot index={4} />
- *     <InputOTPSlot index={5} />
- *   </InputOTPGroup>
- * </InputOTP>
- * ```
- */
-declare function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  /** Class name applied to the outer container div. */
-  containerClassName?: string;
-}): react207.JSX.Element;
-/** Flex container that groups a sequence of InputOTPSlot elements. */
-declare function InputOTPGroup({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react207.JSX.Element;
-/**
- * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.
- *
- * @param index - Zero-based position of this slot within the OTP sequence.
- */
-declare function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  index: number;
-}): react207.JSX.Element;
-/** Visual separator (dash) placed between InputOTPGroup elements. */
-declare function InputOTPSeparator({
-  ...props
-}: React.ComponentProps<'div'>): react207.JSX.Element;
-//#endregion
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
-//# sourceMappingURL=input-otp.d.ts.map

package/dist/ui/input-otp.js

@@ -1,2 +0,0 @@
-"use client";import{MinusIcon as e}from"lucide-react";import{use as t}from"react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{OTPInput as a,OTPInputContext as o}from"input-otp";function s({className:e,containerClassName:t,...i}){return r(a,{"data-slot":`input-otp`,containerClassName:n(`flex items-center gap-2 has-disabled:opacity-50`,t),className:n(`disabled:cursor-not-allowed`,e),...i})}function c({className:e,...t}){return r(`div`,{"data-slot":`input-otp-group`,className:n(`flex items-center`,e),...t})}function l({index:e,className:a,...s}){let{char:c,hasFakeCaret:l,isActive:u}=t(o)?.slots[e]??{};return i(`div`,{"data-slot":`input-otp-slot`,"data-active":u,className:n(`data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]`,a),...s,children:[c,l&&r(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:r(`div`,{className:`animate-caret-blink bg-foreground h-4 w-px duration-1000`})})]})}function u({...t}){return r(`div`,{"data-slot":`input-otp-separator`,role:`separator`,...t,children:r(e,{})})}export{s as InputOTP,c as InputOTPGroup,u as InputOTPSeparator,l as InputOTPSlot};
-//# sourceMappingURL=input-otp.js.map

package/dist/ui/input-otp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../packages/components/ui/input-otp.tsx"],"sourcesContent":["'use client';\nimport { use } from 'react';\n\nimport { MinusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\n/**\n * One-time password (OTP) input composed of individual character slots.\n *\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@customafk/lunas-ui/ui/input-otp';\n *\n * <InputOTP maxLength={6}>\n *   <InputOTPGroup>\n *     <InputOTPSlot index={0} />\n *     <InputOTPSlot index={1} />\n *     <InputOTPSlot index={2} />\n *   </InputOTPGroup>\n *   <InputOTPSeparator />\n *   <InputOTPGroup>\n *     <InputOTPSlot index={3} />\n *     <InputOTPSlot index={4} />\n *     <InputOTPSlot index={5} />\n *   </InputOTPGroup>\n * </InputOTP>\n * ```\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  /** Class name applied to the outer container div. */\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\n/** Flex container that groups a sequence of InputOTPSlot elements. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"input-otp-group\" className={cn('flex items-center', className)} {...props} />;\n}\n\n/**\n * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.\n *\n * @param index - Zero-based position of this slot within the OTP sequence.\n */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) {\n  const inputOTPContext = use(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Visual separator (dash) placed between InputOTPGroup elements. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"],"mappings":"kPA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAC,EAAA,CACC,YAAU,YACV,mBAAoB,EAAG,kDAAmD,EAAmB,CAC7F,UAAW,EAAG,8BAA+B,EAAU,CACvD,GAAI,GACJ,CAKN,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAC,MAAA,CAAI,YAAU,kBAAkB,UAAW,EAAG,oBAAqB,EAAU,CAAE,GAAI,GAAS,CAQtG,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJ,EAAI,EAAgB,EACc,MAAM,IAAU,EAAE,CAE5E,OACE,EAAC,MAAA,CACC,YAAU,iBACV,cAAa,EACb,UAAW,EACT,2fACA,EACD,CACD,GAAI,YAEH,EACA,GACC,EAAC,MAAA,CAAI,UAAU,iFACb,EAAC,MAAA,CAAI,UAAU,2DAAA,CAA6D,EACxE,CAAA,EAEJ,CAKV,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAC,MAAA,CAAI,YAAU,sBAAsB,KAAK,YAAY,GAAI,WACxD,EAAC,EAAA,EAAA,CAAY,EACT"}

package/dist/ui/input.d.ts

@@ -1,2 +0,0 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BQpX4Zkc.js";
-export { Input, InputVariantProps, inputVariants };

package/dist/ui/input.js

@@ -1 +0,0 @@
-"use client";import{n as e,t}from"../input-DAfP6LZ7.js";export{t as Input,e as inputVariants};

package/dist/ui/inputs/search-input.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-input.cjs","names":["Input","SearchIcon","ArrowRightIcon"],"sources":["../../../packages/components/ui/inputs/search-input.tsx"],"sourcesContent":["import { ArrowRightIcon, SearchIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '../input';\n\n/**\n * Props for {@link SearchInput}. Accepts all native props of the underlying\n * `Input` component (itself a thin wrapper around `<input>`), including\n * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.\n * The `type` prop is fixed to `\"search\"` and cannot be overridden.\n */\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\n\n/**\n * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.\n *\n * @example\n * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';\n *\n * <form onSubmit={handleSearch}>\n *   <SearchInput placeholder=\"Search…\" value={query} onChange={(e) => setQuery(e.target.value)} />\n * </form>\n */\nexport const SearchInput = ({ className, ...rest }: Props) => {\n  return (\n    <div className=\"relative\">\n      <Input {...rest} type=\"search\" className={cn('ps-9 pe-9', className)} />\n      <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n"],"mappings":"2LAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,MAExC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACA,EAAAA,EAAAA,CAAM,GAAI,EAAM,KAAK,SAAS,WAAA,EAAA,EAAA,IAAc,YAAa,EAAU,EAAI,EACxE,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,kJACb,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAA,CAAM,EACpB,EACN,EAAA,EAAA,KAAC,SAAA,CACC,UAAU,0XACV,aAAW,gBACX,KAAK,mBAEL,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,KAAM,GAAI,cAAY,QAAS,EACxC,GACL"}

package/dist/ui/inputs/search-input.d.ts

@@ -1,29 +0,0 @@
-import { t as Input } from "../../input-BQpX4Zkc.js";
-import * as react14 from "react";
-
-//#region packages/components/ui/inputs/search-input.d.ts
-
-/**
- * Props for {@link SearchInput}. Accepts all native props of the underlying
- * `Input` component (itself a thin wrapper around `<input>`), including
- * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.
- * The `type` prop is fixed to `"search"` and cannot be overridden.
- */
-type Props = React.ComponentPropsWithoutRef<typeof Input>;
-/**
- * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.
- *
- * @example
- * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';
- *
- * <form onSubmit={handleSearch}>
- *   <SearchInput placeholder="Search…" value={query} onChange={(e) => setQuery(e.target.value)} />
- * </form>
- */
-declare const SearchInput: ({
-  className,
-  ...rest
-}: Props) => react14.JSX.Element;
-//#endregion
-export { SearchInput };
-//# sourceMappingURL=search-input.d.ts.map

package/dist/ui/inputs/search-input.js

@@ -1,2 +0,0 @@
-import{t as e}from"../../input-DAfP6LZ7.js";import{ArrowRightIcon as t,SearchIcon as n}from"lucide-react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({className:o,...s})=>a(`div`,{className:`relative`,children:[i(e,{...s,type:`search`,className:r(`ps-9 pe-9`,o)}),i(`div`,{className:`pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50`,children:i(n,{size:16})}),i(`button`,{className:`absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":`Submit search`,type:`submit`,children:i(t,{size:16,"aria-hidden":`true`})})]});export{o as SearchInput};
-//# sourceMappingURL=search-input.js.map

package/dist/ui/inputs/search-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-input.js","names":[],"sources":["../../../packages/components/ui/inputs/search-input.tsx"],"sourcesContent":["import { ArrowRightIcon, SearchIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '../input';\n\n/**\n * Props for {@link SearchInput}. Accepts all native props of the underlying\n * `Input` component (itself a thin wrapper around `<input>`), including\n * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.\n * The `type` prop is fixed to `\"search\"` and cannot be overridden.\n */\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\n\n/**\n * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.\n *\n * @example\n * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';\n *\n * <form onSubmit={handleSearch}>\n *   <SearchInput placeholder=\"Search…\" value={query} onChange={(e) => setQuery(e.target.value)} />\n * </form>\n */\nexport const SearchInput = ({ className, ...rest }: Props) => {\n  return (\n    <div className=\"relative\">\n      <Input {...rest} type=\"search\" className={cn('ps-9 pe-9', className)} />\n      <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n"],"mappings":"gNAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,KAExC,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAM,KAAK,SAAS,UAAW,EAAG,YAAa,EAAU,EAAI,CACxE,EAAC,MAAA,CAAI,UAAU,iJACb,EAAC,EAAA,CAAW,KAAM,GAAA,CAAM,EACpB,CACN,EAAC,SAAA,CACC,UAAU,0XACV,aAAW,gBACX,KAAK,kBAEL,EAAC,EAAA,CAAe,KAAM,GAAI,cAAY,QAAS,EACxC,GACL"}

package/dist/ui/item.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"item.cjs","names":["Separator","Slot"],"sources":["../../packages/components/ui/item.tsx"],"sourcesContent":["import { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Separator } from '@/components/ui/separator';\n\n/**\n * A list-row layout primitive for rendering structured content rows with optional media, title, description, and action areas.\n *\n * @example\n * ```tsx\n * import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup } from '@customafk/lunas-ui/ui/item';\n * import { User } from 'lucide-react';\n *\n * <ItemGroup>\n *   <Item variant=\"outline\">\n *     <ItemMedia variant=\"icon\"><User /></ItemMedia>\n *     <ItemContent>\n *       <ItemTitle>Alice</ItemTitle>\n *       <ItemDescription>alice@example.com</ItemDescription>\n *     </ItemContent>\n *     <ItemActions><button>Edit</button></ItemActions>\n *   </Item>\n * </ItemGroup>\n * ```\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div role=\"list\" data-slot=\"item-group\" className={cn('group/item-group flex flex-col', className)} {...props} />;\n}\n\n/** Horizontal separator rendered between items in an ItemGroup. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-0', className)} {...props} />;\n}\n\nconst itemVariants = cva(\n  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-primary-strong focus-visible:ring-primary-weak focus-visible:ring-[3px]',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted-weak',\n      },\n      size: {\n        default: 'p-4 gap-4 ',\n        sm: 'py-3 px-4 gap-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\n/**\n * The primary row container inside an ItemGroup.\n *\n * @param variant - Visual style: `'default'`, `'outline'`, or `'muted'`.\n * @param size - Spacing size: `'default'` or `'sm'`.\n * @param asChild - When true, renders as the child element via Radix Slot.\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div';\n  return <Comp data-slot=\"item\" data-variant={variant} data-size={size} className={cn(itemVariants({ variant, size, className }))} {...props} />;\n}\n\nconst itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Left-aligned slot for an avatar, icon, or image within an Item.\n *\n * @param variant - `'default'` for a transparent wrapper, `'icon'` for a small bordered square, or `'image'` for a rounded thumbnail.\n */\nfunction ItemMedia({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;\n}\n\n/** Flex-1 column that holds the ItemTitle and ItemDescription. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-content\" className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)} {...props} />;\n}\n\n/** Primary label text rendered in medium weight inside an ItemContent. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-title\" className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)} {...props} />;\n}\n\n/** Secondary, muted body text clamped to two lines inside an ItemContent. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned slot for buttons or other interactive controls within an Item. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n}\n\n/** Full-width row at the top of an Item for header-level labels or metadata. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-header\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n}\n\n/** Full-width row at the bottom of an Item for footer-level content or secondary actions. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-footer\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n}\n\nexport { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter };\n"],"mappings":"uOA0BA,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,KAAK,OAAO,YAAU,aAAa,WAAA,EAAA,EAAA,IAAc,iCAAkC,EAAU,CAAE,GAAI,GAAS,CAI1H,SAAS,EAAc,CAAE,YAAW,GAAG,GAAiD,CACtF,OAAO,EAAA,EAAA,KAACA,EAAAA,EAAAA,CAAU,YAAU,iBAAiB,YAAY,aAAa,WAAA,EAAA,EAAA,IAAc,OAAQ,EAAU,CAAE,GAAI,GAAS,CAGvH,MAAM,GAAA,EAAA,EAAA,KACJ,4QACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QAAS,gBACT,MAAO,gBACR,CACD,KAAM,CACJ,QAAS,aACT,GAAI,oBACL,CACF,CACD,gBAAiB,CACf,QAAS,UACT,KAAM,UACP,CACF,CACF,CASD,SAAS,EAAK,CACZ,YACA,UAAU,UACV,OAAO,UACP,UAAU,GACV,GAAG,GACuF,CAE1F,OAAO,EAAA,EAAA,KADM,EAAUC,EAAAA,EAAO,MAAA,CACjB,YAAU,OAAO,eAAc,EAAS,YAAW,EAAM,WAAA,EAAA,EAAA,IAAc,EAAa,CAAE,UAAS,OAAM,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAGhJ,MAAM,GAAA,EAAA,EAAA,KACJ,qMACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,KAAM,yEACN,MAAO,4EACR,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CAOD,SAAS,EAAU,CAAE,YAAW,UAAU,UAAW,GAAG,GAA+E,CACrI,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,aAAa,eAAc,EAAS,WAAA,EAAA,EAAA,IAAc,EAAkB,CAAE,UAAS,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAInI,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,oEAAqE,EAAU,CAAE,GAAI,GAAS,CAInJ,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,aAAa,WAAA,EAAA,EAAA,IAAc,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAI9I,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,OACE,EAAA,EAAA,KAAC,IAAA,CACC,YAAU,mBACV,WAAA,EAAA,EAAA,IACE,qFACA,oEACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAIzG,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,qDAAsD,EAAU,CAAE,GAAI,GAAS,CAInI,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,qDAAsD,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/item.d.ts

@@ -1,102 +0,0 @@
-import { Separator } from "./separator.js";
-import * as react237 from "react";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types9 from "class-variance-authority/types";
-
-//#region packages/components/ui/item.d.ts
-
-/**
- * A list-row layout primitive for rendering structured content rows with optional media, title, description, and action areas.
- *
- * @example
- * ```tsx
- * import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup } from '@customafk/lunas-ui/ui/item';
- * import { User } from 'lucide-react';
- *
- * <ItemGroup>
- *   <Item variant="outline">
- *     <ItemMedia variant="icon"><User /></ItemMedia>
- *     <ItemContent>
- *       <ItemTitle>Alice</ItemTitle>
- *       <ItemDescription>alice@example.com</ItemDescription>
- *     </ItemContent>
- *     <ItemActions><button>Edit</button></ItemActions>
- *   </Item>
- * </ItemGroup>
- * ```
- */
-declare function ItemGroup({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-/** Horizontal separator rendered between items in an ItemGroup. */
-declare function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>): react237.JSX.Element;
-declare const itemVariants: (props?: ({
-  variant?: "muted" | "outline" | "default" | null | undefined;
-  size?: "sm" | "default" | null | undefined;
-} & class_variance_authority_types9.ClassProp) | undefined) => string;
-/**
- * The primary row container inside an ItemGroup.
- *
- * @param variant - Visual style: `'default'`, `'outline'`, or `'muted'`.
- * @param size - Spacing size: `'default'` or `'sm'`.
- * @param asChild - When true, renders as the child element via Radix Slot.
- */
-declare function Item({
-  className,
-  variant,
-  size,
-  asChild,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
-  asChild?: boolean;
-}): react237.JSX.Element;
-declare const itemMediaVariants: (props?: ({
-  variant?: "image" | "default" | "icon" | null | undefined;
-} & class_variance_authority_types9.ClassProp) | undefined) => string;
-/**
- * Left-aligned slot for an avatar, icon, or image within an Item.
- *
- * @param variant - `'default'` for a transparent wrapper, `'icon'` for a small bordered square, or `'image'` for a rounded thumbnail.
- */
-declare function ItemMedia({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): react237.JSX.Element;
-/** Flex-1 column that holds the ItemTitle and ItemDescription. */
-declare function ItemContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-/** Primary label text rendered in medium weight inside an ItemContent. */
-declare function ItemTitle({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-/** Secondary, muted body text clamped to two lines inside an ItemContent. */
-declare function ItemDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): react237.JSX.Element;
-/** Right-aligned slot for buttons or other interactive controls within an Item. */
-declare function ItemActions({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-/** Full-width row at the top of an Item for header-level labels or metadata. */
-declare function ItemHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-/** Full-width row at the bottom of an Item for footer-level content or secondary actions. */
-declare function ItemFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react237.JSX.Element;
-//#endregion
-export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
-//# sourceMappingURL=item.d.ts.map

package/dist/ui/item.js

@@ -1,2 +0,0 @@
-import{t as e}from"../dist-EPxjIRJp.js";import{t}from"../separator-BM8hA4DP.js";import{cn as n}from"@customafk/react-toolkit/utils";import{cva as r}from"class-variance-authority";import{jsx as i}from"react/jsx-runtime";function a({className:e,...t}){return i(`div`,{role:`list`,"data-slot":`item-group`,className:n(`group/item-group flex flex-col`,e),...t})}function o({className:e,...r}){return i(t,{"data-slot":`item-separator`,orientation:`horizontal`,className:n(`my-0`,e),...r})}const s=r(`group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-primary-strong focus-visible:ring-primary-weak focus-visible:ring-[3px]`,{variants:{variant:{default:`bg-transparent`,outline:`border-border`,muted:`bg-muted-weak`},size:{default:`p-4 gap-4 `,sm:`py-3 px-4 gap-2.5`}},defaultVariants:{variant:`default`,size:`default`}});function c({className:t,variant:r=`default`,size:a=`default`,asChild:o=!1,...c}){return i(o?e:`div`,{"data-slot":`item`,"data-variant":r,"data-size":a,className:n(s({variant:r,size:a,className:t})),...c})}const l=r(`flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5`,{variants:{variant:{default:`bg-transparent`,icon:`size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4`,image:`size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover`}},defaultVariants:{variant:`default`}});function u({className:e,variant:t=`default`,...r}){return i(`div`,{"data-slot":`item-media`,"data-variant":t,className:n(l({variant:t,className:e})),...r})}function d({className:e,...t}){return i(`div`,{"data-slot":`item-content`,className:n(`flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none`,e),...t})}function f({className:e,...t}){return i(`div`,{"data-slot":`item-title`,className:n(`flex w-fit items-center gap-2 text-sm leading-snug font-medium`,e),...t})}function p({className:e,...t}){return i(`p`,{"data-slot":`item-description`,className:n(`text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...t})}function m({className:e,...t}){return i(`div`,{"data-slot":`item-actions`,className:n(`flex items-center gap-2`,e),...t})}function h({className:e,...t}){return i(`div`,{"data-slot":`item-header`,className:n(`flex basis-full items-center justify-between gap-2`,e),...t})}function g({className:e,...t}){return i(`div`,{"data-slot":`item-footer`,className:n(`flex basis-full items-center justify-between gap-2`,e),...t})}export{c as Item,m as ItemActions,d as ItemContent,p as ItemDescription,g as ItemFooter,a as ItemGroup,h as ItemHeader,u as ItemMedia,o as ItemSeparator,f as ItemTitle};
-//# sourceMappingURL=item.js.map

package/dist/ui/item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"item.js","names":[],"sources":["../../packages/components/ui/item.tsx"],"sourcesContent":["import { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Separator } from '@/components/ui/separator';\n\n/**\n * A list-row layout primitive for rendering structured content rows with optional media, title, description, and action areas.\n *\n * @example\n * ```tsx\n * import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup } from '@customafk/lunas-ui/ui/item';\n * import { User } from 'lucide-react';\n *\n * <ItemGroup>\n *   <Item variant=\"outline\">\n *     <ItemMedia variant=\"icon\"><User /></ItemMedia>\n *     <ItemContent>\n *       <ItemTitle>Alice</ItemTitle>\n *       <ItemDescription>alice@example.com</ItemDescription>\n *     </ItemContent>\n *     <ItemActions><button>Edit</button></ItemActions>\n *   </Item>\n * </ItemGroup>\n * ```\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div role=\"list\" data-slot=\"item-group\" className={cn('group/item-group flex flex-col', className)} {...props} />;\n}\n\n/** Horizontal separator rendered between items in an ItemGroup. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-0', className)} {...props} />;\n}\n\nconst itemVariants = cva(\n  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-primary-strong focus-visible:ring-primary-weak focus-visible:ring-[3px]',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted-weak',\n      },\n      size: {\n        default: 'p-4 gap-4 ',\n        sm: 'py-3 px-4 gap-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\n/**\n * The primary row container inside an ItemGroup.\n *\n * @param variant - Visual style: `'default'`, `'outline'`, or `'muted'`.\n * @param size - Spacing size: `'default'` or `'sm'`.\n * @param asChild - When true, renders as the child element via Radix Slot.\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div';\n  return <Comp data-slot=\"item\" data-variant={variant} data-size={size} className={cn(itemVariants({ variant, size, className }))} {...props} />;\n}\n\nconst itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Left-aligned slot for an avatar, icon, or image within an Item.\n *\n * @param variant - `'default'` for a transparent wrapper, `'icon'` for a small bordered square, or `'image'` for a rounded thumbnail.\n */\nfunction ItemMedia({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;\n}\n\n/** Flex-1 column that holds the ItemTitle and ItemDescription. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-content\" className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)} {...props} />;\n}\n\n/** Primary label text rendered in medium weight inside an ItemContent. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-title\" className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)} {...props} />;\n}\n\n/** Secondary, muted body text clamped to two lines inside an ItemContent. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned slot for buttons or other interactive controls within an Item. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n}\n\n/** Full-width row at the top of an Item for header-level labels or metadata. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-header\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n}\n\n/** Full-width row at the bottom of an Item for footer-level content or secondary actions. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"item-footer\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n}\n\nexport { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter };\n"],"mappings":"2NA0BA,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OAAO,EAAC,MAAA,CAAI,KAAK,OAAO,YAAU,aAAa,UAAW,EAAG,iCAAkC,EAAU,CAAE,GAAI,GAAS,CAI1H,SAAS,EAAc,CAAE,YAAW,GAAG,GAAiD,CACtF,OAAO,EAAC,EAAA,CAAU,YAAU,iBAAiB,YAAY,aAAa,UAAW,EAAG,OAAQ,EAAU,CAAE,GAAI,GAAS,CAGvH,MAAM,EAAe,EACnB,4QACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QAAS,gBACT,MAAO,gBACR,CACD,KAAM,CACJ,QAAS,aACT,GAAI,oBACL,CACF,CACD,gBAAiB,CACf,QAAS,UACT,KAAM,UACP,CACF,CACF,CASD,SAAS,EAAK,CACZ,YACA,UAAU,UACV,OAAO,UACP,UAAU,GACV,GAAG,GACuF,CAE1F,OAAO,EADM,EAAU,EAAO,MAAA,CACjB,YAAU,OAAO,eAAc,EAAS,YAAW,EAAM,UAAW,EAAG,EAAa,CAAE,UAAS,OAAM,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAGhJ,MAAM,EAAoB,EACxB,qMACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,KAAM,yEACN,MAAO,4EACR,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CAOD,SAAS,EAAU,CAAE,YAAW,UAAU,UAAW,GAAG,GAA+E,CACrI,OAAO,EAAC,MAAA,CAAI,YAAU,aAAa,eAAc,EAAS,UAAW,EAAG,EAAkB,CAAE,UAAS,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAInI,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAC,MAAA,CAAI,YAAU,eAAe,UAAW,EAAG,oEAAqE,EAAU,CAAE,GAAI,GAAS,CAInJ,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OAAO,EAAC,MAAA,CAAI,YAAU,aAAa,UAAW,EAAG,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAI9I,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,OACE,EAAC,IAAA,CACC,YAAU,mBACV,UAAW,EACT,qFACA,oEACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAC,MAAA,CAAI,YAAU,eAAe,UAAW,EAAG,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAIzG,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,qDAAsD,EAAU,CAAE,GAAI,GAAS,CAInI,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,qDAAsD,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/label.d.ts

@@ -1,24 +0,0 @@
-import * as react83 from "react";
-import { Label as Label$1 } from "radix-ui";
-
-//#region packages/components/ui/label.d.ts
-
-/**
- * Accessible form label built on Radix UI's `Label.Root`, with styles for disabled and peer-disabled states.
- *
- * @example
- * ```tsx
- * import { Label } from '@customafk/lunas-ui/ui/label';
- * import { Input } from '@customafk/lunas-ui/ui/input';
- *
- * <Label htmlFor="email">Email address</Label>
- * <Input id="email" type="email" placeholder="you@example.com" />
- * ```
- */
-declare function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label$1.Root>): react83.JSX.Element;
-//#endregion
-export { Label };
-//# sourceMappingURL=label.d.ts.map

package/dist/ui/label.js

@@ -1 +0,0 @@
-"use client";import{t as e}from"../label-B8cAG2kc.js";export{e as Label};