@customafk/lunas-ui 0.2.53 → 0.2.55

package/dist/ui/form.d.cts

@@ -1,2 +1,109 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-Cek0ebE_.cjs";
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+import { Label, Slot } from "radix-ui";
+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
+}: import("react-hook-form").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>) => import("react").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?: import("react-hook-form").FieldError;
+  id: string;
+  control: import("react-hook-form").Control<FieldValues, any, FieldValues>;
+  resetField: import("react-hook-form").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: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "vertical" | "horizontal" | "responsive";
+}) => import("react").JSX.Element>;
+/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
+declare const FormLabel: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
+declare const FormControl: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+/** Helper text displayed below the control that provides additional context about the field. */
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").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'>): import("react").JSX.Element;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.cts.map

package/dist/ui/form.d.mts

@@ -1,2 +1,109 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-BZAtjwSL.mjs";
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+import { Label, Slot } from "radix-ui";
+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
+}: import("react-hook-form").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>) => import("react").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?: import("react-hook-form").FieldError;
+  id: string;
+  control: import("react-hook-form").Control<FieldValues, any, FieldValues>;
+  resetField: import("react-hook-form").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: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "vertical" | "horizontal" | "responsive";
+}) => import("react").JSX.Element>;
+/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
+declare const FormLabel: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
+declare const FormControl: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+/** Helper text displayed below the control that provides additional context about the field. */
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").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'>): import("react").JSX.Element;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.mts.map

package/dist/ui/form.mjs

@@ -1 +1,2 @@
-"use client";import"../separator-BjRgoiEx.mjs";import"../label-BMVyfKu9.mjs";import"../field-BxYoF5AX.mjs";import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"../form-DvtaketZ.mjs";export{s as Form,r as FormControl,a as FormDescription,n as FormField,e as FormItem,i as FormLabel,o as FormMessage,t as useFormField};
+"use client";import{Field as e,FieldDescription as t,FieldLabel as n}from"./field.mjs";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:t,orientation:n=`responsive`,...r})=>{let i=o();return c(v.Provider,{value:{id:i},children:c(e,{orientation:n,...r,className:t})})});y.displayName=`FormItem`;const b=i(({...e})=>{let{formItemId:t}=_();return c(n,{htmlFor:t,...e})});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.mjs.map

package/dist/ui/form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.mjs","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":"4XAoCA,MAAM,EAAO,EAMP,EAAmB,EAAqC,CAAC,CAA0B,EAKnF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,KAAM,EAAM,IAAK,WACnD,EAAC,EAAD,CAAY,GAAI,CAAQ,CAAA,CACC,CAAA,EAQzB,MAAqB,CACzB,IAAM,EAAe,EAAI,CAAgB,EACnC,EAAc,EAAI,CAAe,EACjC,CAAE,gBAAe,UAAS,cAAe,EAAe,EACxD,EAAY,EAAa,CAAE,KAAM,EAAa,IAAK,CAAC,EACpD,EAAa,EAAc,EAAa,KAAM,CAAS,EAE7D,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,EAGlE,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,CACL,CACF,EAMM,EAAkB,EAAoC,CAAC,CAAyB,EAOhF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,EAAM,EAEjB,OACE,EAAC,EAAgB,SAAjB,CAA0B,MAAO,CAAE,IAAG,WACpC,EAAC,EAAD,CAAoB,cAAa,GAAI,EAAkB,WAAY,CAAA,CAC3C,CAAA,CAE9B,CACF,EACA,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,EAAa,EACpC,OAAO,EAAC,EAAD,CAAY,QAAS,EAAY,GAAI,CAAQ,CAAA,CACtD,CAAC,EACD,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,EAAa,EAE7E,OACE,EAACA,EAAc,KAAf,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,CACL,CAAA,CAEL,CAAC,EACD,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,EAAa,EAE3C,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,EAAa,EAE9C,OACE,EAAC,OAAD,CAAM,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,CAAS,EAAG,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,EAAE,EAAI,CACpC,CAAA,CAEV"}

package/dist/ui/hover-card.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../hover-card-Pde4G6Fc.cjs`);exports.HoverCard=e.t,exports.HoverCardContent=e.n,exports.HoverCardTrigger=e.r;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@customafk/react-toolkit/utils"),t=require("react/jsx-runtime"),n=require("radix-ui");function r({...e}){return(0,t.jsx)(n.HoverCard.Root,{"data-slot":`hover-card`,...e})}function i({...e}){return(0,t.jsx)(n.HoverCard.Trigger,{"data-slot":`hover-card-trigger`,...e})}function a({className:r,align:i=`center`,sideOffset:a=4,...o}){return(0,t.jsx)(n.HoverCard.Portal,{"data-slot":`hover-card-portal`,children:(0,t.jsx)(n.HoverCard.Content,{"data-slot":`hover-card-content`,align:i,sideOffset:a,className:(0,e.cn)(`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})})}exports.HoverCard=r,exports.HoverCardContent=a,exports.HoverCardTrigger=i;
+//# sourceMappingURL=hover-card.cjs.map

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

@@ -0,0 +1 @@
+{"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":"qLAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,OAApB,CAA2B,YAAU,8BACnC,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}

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

@@ -1,2 +1,35 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-D2gz257Y.cjs";
-export { HoverCard, HoverCardContent, HoverCardTrigger };
+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>): import("react").JSX.Element;
+/** The element that triggers the HoverCard on pointer enter. */
+declare function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCard$1.Trigger>): import("react").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>): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.d.cts.map

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

@@ -1,2 +1,35 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-Dsf0S6eo.mjs";
-export { HoverCard, HoverCardContent, HoverCardTrigger };
+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>): import("react").JSX.Element;
+/** The element that triggers the HoverCard on pointer enter. */
+declare function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCard$1.Trigger>): import("react").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>): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.d.mts.map

package/dist/ui/hover-card.mjs

@@ -1 +1,2 @@
-"use client";import{n as e,r as t,t as n}from"../hover-card-DMVePTD9.mjs";export{n as HoverCard,e as HoverCardContent,t as HoverCardTrigger};
+"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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.mjs","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,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAACA,EAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAACA,EAAmB,OAApB,CAA2B,YAAU,6BACnC,EAACA,EAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,UAAW,EACT,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}

package/dist/ui/image.cjs

@@ -1 +1,2 @@
-require(`../skeleton-BuscPZgb.cjs`);const e=require(`../image-eYMg5TSJ.cjs`);exports.Image=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./skeleton.cjs");let t=require("lucide-react"),n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({src:a,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,n.useRef)(null),[h,g]=(0,n.useState)(a),[_,v]=(0,n.useState)(0),[y,b]=(0,n.useState)(!1),[x,S]=(0,n.useState)(!1),C=(0,n.useCallback)(()=>{b(!0)},[]),w=(0,n.useCallback)(()=>{if(_<l){S(!1);let e=_+1;v(e),setTimeout(()=>{g(a+`?retry=${Date.now()}&attempt=${e}`)},u*e);return}S(!0),b(!0),g(a)},[l,_,u,a]);return x?(0,i.jsx)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`@container relative inline-block`,d),children:(0,i.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[(0,i.jsx)(t.AlertCircleIcon,{className:`@max-[52px]:size-6 size-8 text-danger`}),(0,i.jsx)(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):(0,i.jsxs)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`relative flex items-center justify-center overflow-hidden rounded`,d),onClick:p,children:[!y&&(0,i.jsx)(e.Skeleton,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,i.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,i.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,r.cn)(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};exports.Image=a;
+//# sourceMappingURL=image.cjs.map

package/dist/ui/image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.cjs","names":["AlertCircleIcon","Skeleton"],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"iOAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,OAAA,CAAoC,IAAI,EACxC,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA8C,CAAG,EAC9D,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAAkC,CAAC,EAChD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EACjD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EAEjD,GAAA,EAAA,EAAA,YAAA,KAA+B,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,YAAA,KAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,CAEf,EAAc,EAAM,UADU,KAAK,IAAI,EAAE,WAAW,GACrB,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,GAEA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,mCAAoC,CAAS,YACxF,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2GAAf,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,UAAU,uCAAyC,CAAA,GACpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oEAA2D,sBAA0B,CAAA,CAClG,GACF,CAAA,GAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,oEAAqE,CAAS,EAAY,mBAAvI,CACG,CAAC,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,2EAA6E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}

package/dist/ui/image.d.cts

@@ -1,2 +1,27 @@
-import { t as Image } from "../image-BBPrcvIr.cjs";
-export { Image };
+//#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.cts.map

package/dist/ui/image.d.mts

@@ -1,2 +1,27 @@
-import { t as Image } from "../image-CwnOaUW7.mjs";
-export { Image };
+//#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.mts.map

package/dist/ui/image.mjs

@@ -1 +1,2 @@
-import"../skeleton-teVJKfpX.mjs";import{t as e}from"../image-CbZwvmmL.mjs";export{e as Image};
+import{Skeleton as e}from"./skeleton.mjs";import{AlertCircleIcon as t}from"lucide-react";import{useCallback as n,useRef as r,useState as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=r(null),[v,y]=i(c),[b,x]=i(0),[S,C]=i(!1),[w,T]=i(!1),E=n(()=>{C(!0)},[]),D=n(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{y(c+`?retry=${Date.now()}&attempt=${e}`)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?o(`div`,{style:{width:u,height:d},className:a(`@container relative inline-block`,m),children:s(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[o(t,{className:`@max-[52px]:size-6 size-8 text-danger`}),o(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):s(`div`,{style:{width:u,height:d},className:a(`relative flex items-center justify-center overflow-hidden rounded`,m),onClick:g,children:[!S&&o(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),o(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),o(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:a(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as Image};
+//# sourceMappingURL=image.mjs.map

package/dist/ui/image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.mjs","names":[],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"6PAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,IAAI,EACxC,CAAC,EAAY,GAAiB,EAA6B,CAAG,EAC9D,CAAC,EAAY,GAAiB,EAAiB,CAAC,EAChD,CAAC,EAAU,GAAe,EAAkB,EAAK,EACjD,CAAC,EAAU,GAAe,EAAkB,EAAK,EAEjD,EAAa,MAAkB,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,CAEf,EAAc,EAAM,UADU,KAAK,IAAI,EAAE,WAAW,GACrB,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,EAEA,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,mCAAoC,CAAS,WACxF,EAAC,MAAD,CAAK,UAAU,2GAAf,CACE,EAAC,EAAD,CAAiB,UAAU,uCAAyC,CAAA,EACpE,EAAC,OAAD,CAAM,UAAU,oEAA2D,sBAA0B,CAAA,CAClG,GACF,CAAA,EAKP,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,oEAAqE,CAAS,EAAY,mBAAvI,CACG,CAAC,GAAY,EAAC,EAAD,CAAU,UAAU,2EAA6E,CAAA,EAC/G,EAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,EAC/G,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}

package/dist/ui/input-otp.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../input-otp-phGylVzo.cjs`);exports.InputOTP=e.t,exports.InputOTPGroup=e.n,exports.InputOTPSeparator=e.r,exports.InputOTPSlot=e.i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("lucide-react"),t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime"),i=require("input-otp");function a({className:e,containerClassName:t,...a}){return(0,r.jsx)(i.OTPInput,{"data-slot":`input-otp`,containerClassName:(0,n.cn)(`flex items-center gap-2 has-disabled:opacity-50`,t),className:(0,n.cn)(`disabled:cursor-not-allowed`,e),...a})}function o({className:e,...t}){return(0,r.jsx)(`div`,{"data-slot":`input-otp-group`,className:(0,n.cn)(`flex items-center`,e),...t})}function s({index:e,className:a,...o}){let{char:s,hasFakeCaret:c,isActive:l}=(0,t.use)(i.OTPInputContext)?.slots[e]??{};return(0,r.jsxs)(`div`,{"data-slot":`input-otp-slot`,"data-active":l,className:(0,n.cn)(`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),...o,children:[s,c&&(0,r.jsx)(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:(0,r.jsx)(`div`,{className:`animate-caret-blink bg-foreground h-4 w-px duration-1000`})})]})}function c({...t}){return(0,r.jsx)(`div`,{"data-slot":`input-otp-separator`,role:`separator`,...t,children:(0,r.jsx)(e.MinusIcon,{})})}exports.InputOTP=a,exports.InputOTPGroup=o,exports.InputOTPSeparator=c,exports.InputOTPSlot=s;
+//# sourceMappingURL=input-otp.cjs.map

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

@@ -0,0 +1 @@
+{"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":"mOA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,SAAD,CACE,YAAU,YACV,oBAAA,EAAA,EAAA,GAAA,CAAuB,kDAAmD,CAAkB,EAC5F,WAAA,EAAA,EAAA,GAAA,CAAc,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,WAAA,EAAA,EAAA,GAAA,CAAc,oBAAqB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrG,CAOA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,aAAA,EAAA,EAAA,IAAA,CADAC,EAAAA,eAC2B,CAAC,EAAE,MAAM,IAAU,CAAC,EAE3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,WAAA,EAAA,EAAA,GAAA,CACE,2fACA,CACF,EACA,GAAI,WAPN,CASG,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kFACb,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAGA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,sBAAsB,KAAK,YAAY,GAAI,YACxD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,CACT,CAAA,CAET"}

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

@@ -1,2 +1,56 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-CMEY_7IK.cjs";
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+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;
+}): import("react").JSX.Element;
+/** Flex container that groups a sequence of InputOTPSlot elements. */
+declare function InputOTPGroup({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").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;
+}): import("react").JSX.Element;
+/** Visual separator (dash) placed between InputOTPGroup elements. */
+declare function InputOTPSeparator({
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=input-otp.d.cts.map

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

@@ -1,2 +1,56 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-DXt9rivn.mjs";
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+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;
+}): import("react").JSX.Element;
+/** Flex container that groups a sequence of InputOTPSlot elements. */
+declare function InputOTPGroup({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").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;
+}): import("react").JSX.Element;
+/** Visual separator (dash) placed between InputOTPGroup elements. */
+declare function InputOTPSeparator({
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=input-otp.d.mts.map

package/dist/ui/input-otp.mjs

@@ -1 +1,2 @@
-"use client";import{i as e,n as t,r as n,t as r}from"../input-otp-C9SpN7qa.mjs";export{r as InputOTP,t as InputOTPGroup,n as InputOTPSeparator,e as InputOTPSlot};
+"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.mjs.map