@customafk/lunas-ui 0.2.41 → 0.2.43

package/dist/ui/image.d.mts

@@ -0,0 +1,36 @@
+//#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

@@ -0,0 +1 @@
+import"../skeleton-C51IdOfK.mjs";import{t as e}from"../image-D7OZ13Ib.mjs";export{e as Image};

package/dist/ui/input-otp.cjs

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

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

@@ -1,4 +1,4 @@
-import * as react197 from "react";
+import * as react206 from "react";
 import { OTPInput } from "input-otp";
 
 //#region packages/components/ui/input-otp.d.ts
@@ -32,12 +32,12 @@ declare function InputOTP({
 }: React.ComponentProps<typeof OTPInput> & {
   /** Class name applied to the outer container div. */
   containerClassName?: string;
-}): react197.JSX.Element;
+}): react206.JSX.Element;
 /** Flex container that groups a sequence of InputOTPSlot elements. */
 declare function InputOTPGroup({
   className,
   ...props
-}: React.ComponentProps<'div'>): react197.JSX.Element;
+}: React.ComponentProps<'div'>): react206.JSX.Element;
 /**
  * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.
  *
@@ -49,11 +49,11 @@ declare function InputOTPSlot({
   ...props
 }: React.ComponentProps<'div'> & {
   index: number;
-}): react197.JSX.Element;
+}): react206.JSX.Element;
 /** Visual separator (dash) placed between InputOTPGroup elements. */
 declare function InputOTPSeparator({
   ...props
-}: React.ComponentProps<'div'>): react197.JSX.Element;
+}: React.ComponentProps<'div'>): react206.JSX.Element;
 //#endregion
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
 //# sourceMappingURL=input-otp.d.cts.map

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

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

package/dist/ui/input-otp.mjs

@@ -0,0 +1,2 @@
+"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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.mjs","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.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`react`);const i=(0,t.cva)([`w-full rounded font-normal text-text-positive caret-primary transition-all tabular-nums`,`placeholder:text-text-positive-muted`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,`read-only:pointer-events-none read-only:bg-muted-muted read-only:placeholder:text-text-positive-weak`],{variants:{variant:{outline:[`outline-1 outline-border -outline-offset-1 bg-transparent shadow-input`,`focus-visible:outline-primary-strong`,`focus-visible:ring-4`,`focus-visible:ring-primary-weak`,`aria-invalid:outline-danger`,`aria-invalid:ring-danger-weak`,`aria-invalid:bg-danger-bg-subtle`,`aria-invalid:focus-visible:outline-danger-strong`,`aria-invalid:focus-visible:ring-4`,`aria-invalid:placeholder:text-text-positive-weak`],ghost:``,none:``,soft:``,subtle:``},size:{xs:`px-2 py-1 text-xs leading-4`,sm:`px-2.5 py-1.5 text-xs leading-4`,md:`px-2.5 py-2 text-sm leading-5`,lg:`px-3 py-2 text-sm leading-5`,xl:`px-3 py-2 text-base leading-6`}},defaultVariants:{variant:`outline`,size:`md`}});function a({className:e,variant:t,size:a,onChange:o,onValueChange:s,...c}){let l=(0,r.useCallback)(e=>{o?.(e),s?.(e.target.value)},[o,s]);return(0,n.jsx)(`input`,{"data-slot":`input`,className:i({variant:t,size:a,className:e}),...c,onChange:l})}exports.Input=a,exports.inputVariants=i;
-//# sourceMappingURL=input.cjs.map
+"use client";const e=require(`../input-WJ0DLHTR.cjs`);exports.Input=e.t,exports.inputVariants=e.n;

package/dist/ui/input.d.cts

@@ -1,44 +1,2 @@
-import * as react196 from "react";
-import * as class_variance_authority_types7 from "class-variance-authority/types";
-import { VariantProps } from "class-variance-authority";
-
-//#region packages/components/ui/input.d.ts
-/** CVA variant definitions for the `Input` component — controls sizing and visual style. */
-declare const inputVariants: (props?: ({
-  variant?: "outline" | "none" | "soft" | "ghost" | "subtle" | null | undefined;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_types7.ClassProp) | undefined) => string;
-type InputVariantProps = VariantProps<typeof inputVariants>;
-/**
- * Styled text input field built on the native `<input>` element with CVA-driven size and variant tokens.
- *
- * @example
- * ```tsx
- * import { Input } from '@customafk/lunas-ui/ui/input';
- *
- * <Input
- *   placeholder="Enter your name"
- *   variant="outline"
- *   size="md"
- *   onValueChange={(value) => console.log(value)}
- * />
- * ```
- */
-declare function Input({
-  className,
-  variant,
-  size,
-  onChange,
-  onValueChange,
-  ...props
-}: Omit<React.ComponentProps<'input'>, 'size'> & {
-  /** Visual style of the input border — `'outline'` (default), `'ghost'`, `'none'`, `'soft'`, or `'subtle'`. */
-  variant?: InputVariantProps['variant'];
-  /** Controls padding and font size — `'xs'` | `'sm'` | `'md'` (default) | `'lg'` | `'xl'`. */
-  size?: InputVariantProps['size'];
-  /** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */
-  onValueChange?: (value: string) => void;
-}): react196.JSX.Element;
-//#endregion
-export { Input, InputVariantProps, inputVariants };
-//# sourceMappingURL=input.d.cts.map
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-B_ucx08i.cjs";
+export { Input, InputVariantProps, inputVariants };

package/dist/ui/input.d.mts

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

package/dist/ui/input.mjs

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

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

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`),t=require(`../input.cjs`);let n=require(`lucide-react`),r=require(`@customafk/react-toolkit/utils`),i=require(`react/jsx-runtime`);const a=({className:e,...a})=>(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(t.Input,{...a,type:`search`,className:(0,r.cn)(`ps-9 pe-9`,e)}),(0,i.jsx)(`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:(0,i.jsx)(n.SearchIcon,{size:16})}),(0,i.jsx)(`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:(0,i.jsx)(n.ArrowRightIcon,{size:16,"aria-hidden":`true`})})]});exports.SearchInput=a;
+const e=require(`../../chunk-350yNsax.cjs`),t=require(`../../input-WJ0DLHTR.cjs`);let n=require(`lucide-react`),r=require(`@customafk/react-toolkit/utils`),i=require(`react/jsx-runtime`);const a=({className:e,...a})=>(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(t.t,{...a,type:`search`,className:(0,r.cn)(`ps-9 pe-9`,e)}),(0,i.jsx)(`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:(0,i.jsx)(n.SearchIcon,{size:16})}),(0,i.jsx)(`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:(0,i.jsx)(n.ArrowRightIcon,{size:16,"aria-hidden":`true`})})]});exports.SearchInput=a;
 //# sourceMappingURL=search-input.cjs.map

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

@@ -1 +1 @@
-{"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":"+KAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,MAExC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACA,EAAAA,MAAAA,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"}
+{"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.cts

@@ -1,5 +1,5 @@
-import { Input } from "../input.cjs";
-import * as react51 from "react";
+import { t as Input } from "../../input-B_ucx08i.cjs";
+import * as react86 from "react";
 
 //#region packages/components/ui/inputs/search-input.d.ts
 
@@ -23,7 +23,7 @@ type Props = React.ComponentPropsWithoutRef<typeof Input>;
 declare const SearchInput: ({
   className,
   ...rest
-}: Props) => react51.JSX.Element;
+}: Props) => react86.JSX.Element;
 //#endregion
 export { SearchInput };
 //# sourceMappingURL=search-input.d.cts.map

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

@@ -0,0 +1,29 @@
+import { t as Input } from "../../input-Drm_rLe2.mjs";
+import * as react34 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) => react34.JSX.Element;
+//#endregion
+export { SearchInput };
+//# sourceMappingURL=search-input.d.mts.map

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

@@ -0,0 +1,2 @@
+import{t as e}from"../../input-NJP2wQOm.mjs";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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.mjs","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":"iNAwBA,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

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@radix-ui/react-slot`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`),i=require(`react/jsx-runtime`),a=require(`@/components/ui/separator`);function o({className:e,...t}){return(0,i.jsx)(`div`,{role:`list`,"data-slot":`item-group`,className:(0,n.cn)(`group/item-group flex flex-col`,e),...t})}function s({className:e,...t}){return(0,i.jsx)(a.Separator,{"data-slot":`item-separator`,orientation:`horizontal`,className:(0,n.cn)(`my-0`,e),...t})}const c=(0,r.cva)(`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 l({className:e,variant:r=`default`,size:a=`default`,asChild:o=!1,...s}){return(0,i.jsx)(o?t.Slot:`div`,{"data-slot":`item`,"data-variant":r,"data-size":a,className:(0,n.cn)(c({variant:r,size:a,className:e})),...s})}const u=(0,r.cva)(`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 d({className:e,variant:t=`default`,...r}){return(0,i.jsx)(`div`,{"data-slot":`item-media`,"data-variant":t,className:(0,n.cn)(u({variant:t,className:e})),...r})}function f({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`item-content`,className:(0,n.cn)(`flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none`,e),...t})}function p({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`item-title`,className:(0,n.cn)(`flex w-fit items-center gap-2 text-sm leading-snug font-medium`,e),...t})}function m({className:e,...t}){return(0,i.jsx)(`p`,{"data-slot":`item-description`,className:(0,n.cn)(`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 h({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`item-actions`,className:(0,n.cn)(`flex items-center gap-2`,e),...t})}function g({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`item-header`,className:(0,n.cn)(`flex basis-full items-center justify-between gap-2`,e),...t})}function _({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`item-footer`,className:(0,n.cn)(`flex basis-full items-center justify-between gap-2`,e),...t})}exports.Item=l,exports.ItemActions=h,exports.ItemContent=f,exports.ItemDescription=m,exports.ItemFooter=_,exports.ItemGroup=o,exports.ItemHeader=g,exports.ItemMedia=d,exports.ItemSeparator=s,exports.ItemTitle=p;
+const e=require(`../chunk-350yNsax.cjs`),t=require(`../dist-Cx5ufCdr.cjs`),n=require(`../separator-KuymG9g0.cjs`);let r=require(`@customafk/react-toolkit/utils`),i=require(`class-variance-authority`),a=require(`react/jsx-runtime`);function o({className:e,...t}){return(0,a.jsx)(`div`,{role:`list`,"data-slot":`item-group`,className:(0,r.cn)(`group/item-group flex flex-col`,e),...t})}function s({className:e,...t}){return(0,a.jsx)(n.t,{"data-slot":`item-separator`,orientation:`horizontal`,className:(0,r.cn)(`my-0`,e),...t})}const c=(0,i.cva)(`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 l({className:e,variant:n=`default`,size:i=`default`,asChild:o=!1,...s}){return(0,a.jsx)(o?t.t:`div`,{"data-slot":`item`,"data-variant":n,"data-size":i,className:(0,r.cn)(c({variant:n,size:i,className:e})),...s})}const u=(0,i.cva)(`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 d({className:e,variant:t=`default`,...n}){return(0,a.jsx)(`div`,{"data-slot":`item-media`,"data-variant":t,className:(0,r.cn)(u({variant:t,className:e})),...n})}function f({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`item-content`,className:(0,r.cn)(`flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none`,e),...t})}function p({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`item-title`,className:(0,r.cn)(`flex w-fit items-center gap-2 text-sm leading-snug font-medium`,e),...t})}function m({className:e,...t}){return(0,a.jsx)(`p`,{"data-slot":`item-description`,className:(0,r.cn)(`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 h({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`item-actions`,className:(0,r.cn)(`flex items-center gap-2`,e),...t})}function g({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`item-header`,className:(0,r.cn)(`flex basis-full items-center justify-between gap-2`,e),...t})}function _({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`item-footer`,className:(0,r.cn)(`flex basis-full items-center justify-between gap-2`,e),...t})}exports.Item=l,exports.ItemActions=h,exports.ItemContent=f,exports.ItemDescription=m,exports.ItemFooter=_,exports.ItemGroup=o,exports.ItemHeader=g,exports.ItemMedia=d,exports.ItemSeparator=s,exports.ItemTitle=p;
 //# sourceMappingURL=item.cjs.map

package/dist/ui/item.cjs.map

@@ -1 +1 @@
-{"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,UAAAA,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,KAAO,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"}
+{"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.cts

@@ -1,7 +1,7 @@
-import * as react234 from "react";
-import * as class_variance_authority_types10 from "class-variance-authority/types";
+import { Separator } from "./separator.cjs";
+import * as react162 from "react";
+import * as class_variance_authority_types8 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
-import { Separator } from "@/components/ui/separator";
 
 //#region packages/components/ui/item.d.ts
 
@@ -28,16 +28,16 @@ import { Separator } from "@/components/ui/separator";
 declare function ItemGroup({
   className,
   ...props
-}: React.ComponentProps<'div'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.JSX.Element;
 /** Horizontal separator rendered between items in an ItemGroup. */
 declare function ItemSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Separator>): react234.JSX.Element;
+}: React.ComponentProps<typeof Separator>): react162.JSX.Element;
 declare const itemVariants: (props?: ({
   variant?: "default" | "outline" | "muted" | null | undefined;
   size?: "sm" | "default" | null | undefined;
-} & class_variance_authority_types10.ClassProp) | undefined) => string;
+} & class_variance_authority_types8.ClassProp) | undefined) => string;
 /**
  * The primary row container inside an ItemGroup.
  *
@@ -53,10 +53,10 @@ declare function Item({
   ...props
 }: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
   asChild?: boolean;
-}): react234.JSX.Element;
+}): react162.JSX.Element;
 declare const itemMediaVariants: (props?: ({
   variant?: "default" | "image" | "icon" | null | undefined;
-} & class_variance_authority_types10.ClassProp) | undefined) => string;
+} & class_variance_authority_types8.ClassProp) | undefined) => string;
 /**
  * Left-aligned slot for an avatar, icon, or image within an Item.
  *
@@ -66,37 +66,37 @@ declare function ItemMedia({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): react234.JSX.Element;
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): react162.JSX.Element;
 /** Flex-1 column that holds the ItemTitle and ItemDescription. */
 declare function ItemContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.JSX.Element;
 /** Primary label text rendered in medium weight inside an ItemContent. */
 declare function ItemTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.JSX.Element;
 /** Secondary, muted body text clamped to two lines inside an ItemContent. */
 declare function ItemDescription({
   className,
   ...props
-}: React.ComponentProps<'p'>): react234.JSX.Element;
+}: React.ComponentProps<'p'>): react162.JSX.Element;
 /** Right-aligned slot for buttons or other interactive controls within an Item. */
 declare function ItemActions({
   className,
   ...props
-}: React.ComponentProps<'div'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.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'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.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'>): react234.JSX.Element;
+}: React.ComponentProps<'div'>): react162.JSX.Element;
 //#endregion
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
 //# sourceMappingURL=item.d.cts.map

package/dist/ui/item.d.mts

@@ -0,0 +1,102 @@
+import { Separator } from "./separator.mjs";
+import * as react204 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types8 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'>): react204.JSX.Element;
+/** Horizontal separator rendered between items in an ItemGroup. */
+declare function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>): react204.JSX.Element;
+declare const itemVariants: (props?: ({
+  variant?: "default" | "outline" | "muted" | null | undefined;
+  size?: "sm" | "default" | null | undefined;
+} & class_variance_authority_types8.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;
+}): react204.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+  variant?: "default" | "image" | "icon" | null | undefined;
+} & class_variance_authority_types8.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>): react204.JSX.Element;
+/** Flex-1 column that holds the ItemTitle and ItemDescription. */
+declare function ItemContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react204.JSX.Element;
+/** Primary label text rendered in medium weight inside an ItemContent. */
+declare function ItemTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react204.JSX.Element;
+/** Secondary, muted body text clamped to two lines inside an ItemContent. */
+declare function ItemDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): react204.JSX.Element;
+/** Right-aligned slot for buttons or other interactive controls within an Item. */
+declare function ItemActions({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react204.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'>): react204.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'>): react204.JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
+//# sourceMappingURL=item.d.mts.map

package/dist/ui/item.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"../dist-DVrfqn8H.mjs";import{t}from"../separator-D3Gmkxzq.mjs";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.mjs.map

package/dist/ui/item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.mjs","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":"6NA0BA,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.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`),r=require(`radix-ui`);function i({className:e,...i}){return(0,n.jsx)(r.Label.Root,{"data-slot":`label`,className:(0,t.cn)(`text-text-positive`,`flex items-center gap-2`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,e),...i})}exports.Label=i;
-//# sourceMappingURL=label.cjs.map
+"use client";const e=require(`../label-CC6fXVbC.cjs`);exports.Label=e.t;