@customafk/lunas-ui 0.2.52 → 0.2.54

package/dist/ui/pagination.d.mts

@@ -1,3 +1,64 @@
-import "../button-CwxEnAw3.mjs";
-import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../pagination-DYMPNWwJ.mjs";
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+import { t as Button } from "../button-DIqm3YRo.mjs";
+
+//#region packages/components/ui/pagination.d.ts
+/**
+ * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Pagination, PaginationContent, PaginationItem,
+ *   PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
+ * } from '@customafk/lunas-ui/ui/pagination';
+ *
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
+declare function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>): import("react").JSX.Element;
+/** Horizontal list that holds PaginationItem elements. */
+declare function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>): import("react").JSX.Element;
+/** Wrapper `<li>` for a single pagination button or link. */
+declare function PaginationItem({
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+type PaginationLinkProps = {
+  /** When true, the link is styled as the currently active page. */isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
+/** An anchor-based page link styled as a button, highlighted when `isActive` is true. */
+declare function PaginationLink({
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps): import("react").JSX.Element;
+/** "Previous page" navigation link with a left chevron icon. */
+declare function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** "Next page" navigation link with a right chevron icon. */
+declare function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** Ellipsis indicator rendered between non-adjacent page numbers. */
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.d.mts.map

package/dist/ui/pagination.mjs

@@ -1 +1,2 @@
-"use client";import"../button.variants-DkMqWB8G.mjs";import{a as e,i as t,n,o as r,r as i,s as a,t as o}from"../pagination-DXpyiDJW.mjs";export{o as Pagination,n as PaginationContent,i as PaginationEllipsis,t as PaginationItem,e as PaginationLink,r as PaginationNext,a as PaginationPrevious};
+"use client";import{n as e}from"../button.variants-pziHKxvE.mjs";import{ChevronLeftIcon as t,ChevronRightIcon as n,MoreHorizontalIcon as r}from"lucide-react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({className:e,...t}){return a(`nav`,{role:`navigation`,"aria-label":`pagination`,"data-slot":`pagination`,className:i(`mx-auto flex w-full justify-center`,e),...t})}function c({className:e,...t}){return a(`ul`,{"data-slot":`pagination-content`,className:i(`flex flex-row items-center gap-1`,e),...t})}function l({...e}){return a(`li`,{"data-slot":`pagination-item`,...e})}function u({className:t,isActive:n,size:r=`icon`,...o}){return a(`a`,{"aria-current":n?`page`:void 0,"data-slot":`pagination-link`,"data-active":n,className:i(e({variant:n?`outline`:`ghost`,size:r}),t),...o})}function d({className:e,...n}){return o(u,{"aria-label":`Go to previous page`,size:`default`,className:i(`gap-1 px-2.5 sm:pl-2.5`,e),...n,children:[a(t,{}),a(`span`,{className:`hidden sm:block`,children:`Previous`})]})}function f({className:e,...t}){return o(u,{"aria-label":`Go to next page`,size:`default`,className:i(`gap-1 px-2.5 sm:pr-2.5`,e),...t,children:[a(`span`,{className:`hidden sm:block`,children:`Next`}),a(n,{})]})}function p({className:e,...t}){return o(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:i(`flex size-9 items-center justify-center`,e),...t,children:[a(r,{className:`size-4`}),a(`span`,{className:`sr-only`,children:`More pages`})]})}export{s as Pagination,c as PaginationContent,p as PaginationEllipsis,l as PaginationItem,u as PaginationLink,f as PaginationNext,d as PaginationPrevious};
+//# sourceMappingURL=pagination.mjs.map

package/dist/ui/pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","names":[],"sources":["../../packages/components/ui/pagination.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { Button } from '@/components/ui/button';\nimport { buttonVariants } from './button.variants';\n\n/**\n * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.\n *\n * @example\n * ```tsx\n * import {\n *   Pagination, PaginationContent, PaginationItem,\n *   PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,\n * } from '@customafk/lunas-ui/ui/pagination';\n *\n * <Pagination>\n *   <PaginationContent>\n *     <PaginationItem><PaginationPrevious href=\"?page=1\" /></PaginationItem>\n *     <PaginationItem><PaginationLink href=\"?page=2\" isActive>2</PaginationLink></PaginationItem>\n *     <PaginationItem><PaginationEllipsis /></PaginationItem>\n *     <PaginationItem><PaginationNext href=\"?page=3\" /></PaginationItem>\n *   </PaginationContent>\n * </Pagination>\n * ```\n */\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n  return <nav role=\"navigation\" aria-label=\"pagination\" data-slot=\"pagination\" className={cn('mx-auto flex w-full justify-center', className)} {...props} />;\n}\n\n/** Horizontal list that holds PaginationItem elements. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {\n  return <ul data-slot=\"pagination-content\" className={cn('flex flex-row items-center gap-1', className)} {...props} />;\n}\n\n/** Wrapper `<li>` for a single pagination button or link. */\nfunction PaginationItem({ ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** When true, the link is styled as the currently active page. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, 'size'> &\n  React.ComponentProps<'a'>;\n\n/** An anchor-based page link styled as a button, highlighted when `isActive` is true. */\nfunction PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? 'page' : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? 'outline' : 'ghost',\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous page\" navigation link with a left chevron icon. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" size=\"default\" className={cn('gap-1 px-2.5 sm:pl-2.5', className)} {...props}>\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\n/** \"Next page\" navigation link with a right chevron icon. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" size=\"default\" className={cn('gap-1 px-2.5 sm:pr-2.5', className)} {...props}>\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\n/** Ellipsis indicator rendered between non-adjacent page numbers. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span aria-hidden data-slot=\"pagination-ellipsis\" className={cn('flex size-9 items-center justify-center', className)} {...props}>\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };\n"],"mappings":"oQA6BA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAD,CAAK,KAAK,aAAa,aAAW,aAAa,YAAU,aAAa,UAAW,EAAG,qCAAsC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC3J,CAGA,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAqC,CAC9E,OAAO,EAAC,KAAD,CAAI,YAAU,qBAAqB,UAAW,EAAG,mCAAoC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACtH,CAGA,SAAS,EAAe,CAAE,GAAG,GAAqC,CAChE,OAAO,EAAC,KAAD,CAAI,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CACrD,CASA,SAAS,EAAe,CAAE,YAAW,WAAU,OAAO,OAAQ,GAAG,GAA8B,CAC7F,OACE,EAAC,IAAD,CACE,eAAc,EAAW,OAAS,IAAA,GAClC,YAAU,kBACV,cAAa,EACb,UAAW,EACT,EAAe,CACb,QAAS,EAAW,UAAY,QAChC,MACF,CAAC,EACD,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAsD,CAChG,OACE,EAAC,EAAD,CAAgB,aAAW,sBAAsB,KAAK,UAAU,UAAW,EAAG,yBAA0B,CAAS,EAAG,GAAI,WAAxH,CACE,EAAC,EAAD,CAAkB,CAAA,EAClB,EAAC,OAAD,CAAM,UAAU,2BAAkB,UAAc,CAAA,CAClC,GAEpB,CAGA,SAAS,EAAe,CAAE,YAAW,GAAG,GAAsD,CAC5F,OACE,EAAC,EAAD,CAAgB,aAAW,kBAAkB,KAAK,UAAU,UAAW,EAAG,yBAA0B,CAAS,EAAG,GAAI,WAApH,CACE,EAAC,OAAD,CAAM,UAAU,2BAAkB,MAAU,CAAA,EAC5C,EAAC,EAAD,CAAmB,CAAA,CACL,GAEpB,CAGA,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAuC,CACjF,OACE,EAAC,OAAD,CAAM,cAAA,GAAY,YAAU,sBAAsB,UAAW,EAAG,0CAA2C,CAAS,EAAG,GAAI,WAA3H,CACE,EAAC,EAAD,CAAoB,UAAU,QAAU,CAAA,EACxC,EAAC,OAAD,CAAM,UAAU,mBAAU,YAAgB,CAAA,CACtC,GAEV"}

package/dist/ui/popover.cjs

@@ -1 +1,2 @@
-"use client";require(`../close-DYBVx-8O.cjs`);const e=require(`../popover-eSwUy8WP.cjs`);exports.Popover=e.t,exports.PopoverAnchor=e.n,exports.PopoverClose=e.r,exports.PopoverContent=e.i,exports.PopoverTrigger=e.a;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../close-BYHgEZvZ.cjs");let t=require("@customafk/react-toolkit/utils"),n=require("react/jsx-runtime"),r=require("radix-ui");function i({...e}){return(0,n.jsx)(r.Popover.Root,{"data-slot":`popover`,...e})}function a({...e}){return(0,n.jsx)(r.Popover.Trigger,{"data-slot":`popover-trigger`,...e})}function o({className:e,align:i=`start`,sideOffset:a=4,...o}){return(0,n.jsx)(r.Popover.Portal,{children:(0,n.jsx)(r.Popover.Content,{"data-slot":`popover-content`,align:i,sideOffset:a,className:(0,t.cn)(`relative bg-popover`,`text-text-positive`,`z-50`,`min-w-(--radix-popover-trigger-width)`,`max-h-(--radix-popover-content-available-height)`,`origin-(--radix-popover-content-transform-origin)`,`rounded-md p-4 shadow-dropdown outline-none`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-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`,e),...o})})}function s({...e}){return(0,n.jsx)(r.Popover.Anchor,{"data-slot":`popover-anchor`,...e})}function c({className:t,...i}){return(0,n.jsx)(r.Popover.Close,{"data-slot":`popover-close`,...i,asChild:!0,children:(0,n.jsx)(e.t,{className:`absolute top-2 right-2`})})}exports.Popover=i,exports.PopoverAnchor=s,exports.PopoverClose=c,exports.PopoverContent=o,exports.PopoverTrigger=a;
+//# sourceMappingURL=popover.cjs.map

package/dist/ui/popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.cjs","names":["PopoverPrimitive","CloseButton"],"sources":["../../packages/components/ui/popover.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport { CloseButton } from './buttons/close';\n\n/**\n * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.\n *\n * @example\n * ```tsx\n * import {\n *   Popover, PopoverTrigger, PopoverContent, PopoverClose,\n * } from '@customafk/lunas-ui/ui/popover';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button variant=\"outline\">Open popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverClose />\n *     <p>Popover body content goes here.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nfunction Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\n/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */\nfunction PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\n/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */\nfunction PopoverContent({ className, align = 'start', sideOffset = 4, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'relative bg-popover',\n          'text-text-positive',\n          'z-50',\n          'min-w-(--radix-popover-trigger-width)',\n          'max-h-(--radix-popover-content-available-height)',\n          'origin-(--radix-popover-content-transform-origin)',\n          'rounded-md p-4 shadow-dropdown outline-none',\n\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */\nfunction PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\n/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */\nfunction PopoverClose({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return (\n    <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} asChild>\n      <CloseButton className=\"absolute top-2 right-2\" />\n    </PopoverPrimitive.Close>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PopoverClose };\n"],"mappings":"8NA4BA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CAChE,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,QAAQ,QAAS,aAAa,EAAG,GAAG,GAAgE,CACvI,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,OAAlB,CAAA,UACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,QAAlB,CACE,YAAU,kBACH,QACK,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,sBACA,qBACA,OACA,wCACA,mDACA,oDACA,8CAEA,+BACA,8BACA,+BAEA,kCACA,iCACA,kCAEA,yCACA,yCACA,yCACA,yCACA,CACF,EACA,GAAI,CACL,CAAA,CACsB,CAAA,CAE7B,CAGA,SAAS,EAAc,CAAE,GAAG,GAA+D,CACzF,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,OAAlB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAGA,SAAS,EAAa,CAAE,YAAW,GAAG,GAA8D,CAClG,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,MAAlB,CAAwB,YAAU,gBAAgB,GAAI,EAAO,QAAA,aAC3D,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAa,UAAU,wBAA0B,CAAA,CAC3B,CAAA,CAE5B"}

package/dist/ui/popover.d.cts

@@ -1,2 +1,50 @@
-import { a as PopoverTrigger, i as PopoverContent, n as PopoverAnchor, r as PopoverClose, t as Popover } from "../popover-m32DoRiq.cjs";
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+import { Popover as Popover$1 } from "radix-ui";
+
+//#region packages/components/ui/popover.d.ts
+/**
+ * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Popover, PopoverTrigger, PopoverContent, PopoverClose,
+ * } from '@customafk/lunas-ui/ui/popover';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="outline">Open popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverClose />
+ *     <p>Popover body content goes here.</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare function Popover({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Root>): import("react").JSX.Element;
+/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */
+declare function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
+/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Popover$1.Content>): import("react").JSX.Element;
+/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */
+declare function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Anchor>): import("react").JSX.Element;
+/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */
+declare function PopoverClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof Popover$1.Close>): import("react").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.cts.map

package/dist/ui/popover.d.mts

@@ -1,2 +1,50 @@
-import { a as PopoverTrigger, i as PopoverContent, n as PopoverAnchor, r as PopoverClose, t as Popover } from "../popover-CaU_EoBJ.mjs";
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+import { Popover as Popover$1 } from "radix-ui";
+
+//#region packages/components/ui/popover.d.ts
+/**
+ * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Popover, PopoverTrigger, PopoverContent, PopoverClose,
+ * } from '@customafk/lunas-ui/ui/popover';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="outline">Open popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverClose />
+ *     <p>Popover body content goes here.</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare function Popover({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Root>): import("react").JSX.Element;
+/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */
+declare function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
+/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Popover$1.Content>): import("react").JSX.Element;
+/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */
+declare function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof Popover$1.Anchor>): import("react").JSX.Element;
+/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */
+declare function PopoverClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof Popover$1.Close>): import("react").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.mts.map

package/dist/ui/popover.mjs

@@ -1 +1,2 @@
-"use client";import"../close-Co-WLsSG.mjs";import{a as e,i as t,n,r,t as i}from"../popover-BGd0Tvmy.mjs";export{i as Popover,n as PopoverAnchor,r as PopoverClose,t as PopoverContent,e as PopoverTrigger};
+"use client";import{t as e}from"../close-DYJZ8fkh.mjs";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n}from"react/jsx-runtime";import{Popover as r}from"radix-ui";function i({...e}){return n(r.Root,{"data-slot":`popover`,...e})}function a({...e}){return n(r.Trigger,{"data-slot":`popover-trigger`,...e})}function o({className:e,align:i=`start`,sideOffset:a=4,...o}){return n(r.Portal,{children:n(r.Content,{"data-slot":`popover-content`,align:i,sideOffset:a,className:t(`relative bg-popover`,`text-text-positive`,`z-50`,`min-w-(--radix-popover-trigger-width)`,`max-h-(--radix-popover-content-available-height)`,`origin-(--radix-popover-content-transform-origin)`,`rounded-md p-4 shadow-dropdown outline-none`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-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`,e),...o})})}function s({...e}){return n(r.Anchor,{"data-slot":`popover-anchor`,...e})}function c({className:t,...i}){return n(r.Close,{"data-slot":`popover-close`,...i,asChild:!0,children:n(e,{className:`absolute top-2 right-2`})})}export{i as Popover,s as PopoverAnchor,c as PopoverClose,o as PopoverContent,a as PopoverTrigger};
+//# sourceMappingURL=popover.mjs.map

package/dist/ui/popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.mjs","names":["PopoverPrimitive"],"sources":["../../packages/components/ui/popover.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport { CloseButton } from './buttons/close';\n\n/**\n * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.\n *\n * @example\n * ```tsx\n * import {\n *   Popover, PopoverTrigger, PopoverContent, PopoverClose,\n * } from '@customafk/lunas-ui/ui/popover';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button variant=\"outline\">Open popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverClose />\n *     <p>Popover body content goes here.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nfunction Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\n/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */\nfunction PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\n/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */\nfunction PopoverContent({ className, align = 'start', sideOffset = 4, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'relative bg-popover',\n          'text-text-positive',\n          'z-50',\n          'min-w-(--radix-popover-trigger-width)',\n          'max-h-(--radix-popover-content-available-height)',\n          'origin-(--radix-popover-content-transform-origin)',\n          'rounded-md p-4 shadow-dropdown outline-none',\n\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */\nfunction PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\n/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */\nfunction PopoverClose({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return (\n    <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} asChild>\n      <CloseButton className=\"absolute top-2 right-2\" />\n    </PopoverPrimitive.Close>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PopoverClose };\n"],"mappings":"sLA4BA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OAAO,EAACA,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CAChE,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAACA,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,QAAQ,QAAS,aAAa,EAAG,GAAG,GAAgE,CACvI,OACE,EAACA,EAAiB,OAAlB,CAAA,SACE,EAACA,EAAiB,QAAlB,CACE,YAAU,kBACH,QACK,aACZ,UAAW,EACT,sBACA,qBACA,OACA,wCACA,mDACA,oDACA,8CAEA,+BACA,8BACA,+BAEA,kCACA,iCACA,kCAEA,yCACA,yCACA,yCACA,yCACA,CACF,EACA,GAAI,CACL,CAAA,CACsB,CAAA,CAE7B,CAGA,SAAS,EAAc,CAAE,GAAG,GAA+D,CACzF,OAAO,EAACA,EAAiB,OAAlB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAGA,SAAS,EAAa,CAAE,YAAW,GAAG,GAA8D,CAClG,OACE,EAACA,EAAiB,MAAlB,CAAwB,YAAU,gBAAgB,GAAI,EAAO,QAAA,YAC3D,EAAC,EAAD,CAAa,UAAU,wBAA0B,CAAA,CAC3B,CAAA,CAE5B"}

package/dist/ui/progress.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../progress-Dlgbu5Ff.cjs`);exports.Progress=e.t;
+"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({className:r,value:i,...a}){return(0,t.jsx)(n.Progress.Root,{"data-slot":`progress`,className:(0,e.cn)(`bg-primary-weak relative h-2 w-full overflow-hidden rounded-full`,r),...a,children:(0,t.jsx)(n.Progress.Indicator,{"data-slot":`progress-indicator`,className:`bg-primary size-full flex-1 transition-all`,style:{transform:`translateX(-${100-(i||0)}%)`}})})}exports.Progress=r;
+//# sourceMappingURL=progress.cjs.map

package/dist/ui/progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.cjs","names":["ProgressPrimitive"],"sources":["../../packages/components/ui/progress.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress as ProgressPrimitive } from 'radix-ui';\n\n/**\n * A horizontal progress bar that visually represents a completion percentage.\n *\n * @example\n * ```tsx\n * import { Progress } from '@customafk/lunas-ui/ui/progress';\n *\n * <Progress value={65} />\n * ```\n */\nfunction Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root data-slot=\"progress\" className={cn('bg-primary-weak relative h-2 w-full overflow-hidden rounded-full', className)} {...props}>\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":"qLAeA,SAAS,EAAS,CAAE,YAAW,QAAO,GAAG,GAA8D,CACrG,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,SAAkB,KAAnB,CAAwB,YAAU,WAAW,WAAA,EAAA,EAAA,GAAA,CAAc,mEAAoE,CAAS,EAAG,GAAI,YAC7I,EAAA,EAAA,IAAA,CAACA,EAAAA,SAAkB,UAAnB,CACE,YAAU,qBACV,UAAU,6CACV,MAAO,CAAE,UAAW,eAAe,KAAO,GAAS,GAAG,GAAI,CAC3D,CAAA,CACqB,CAAA,CAE5B"}

package/dist/ui/progress.d.cts

@@ -1,2 +1,21 @@
-import { t as Progress } from "../progress-BwbACJal.cjs";
-export { Progress };
+import { Progress as Progress$1 } from "radix-ui";
+
+//#region packages/components/ui/progress.d.ts
+/**
+ * A horizontal progress bar that visually represents a completion percentage.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from '@customafk/lunas-ui/ui/progress';
+ *
+ * <Progress value={65} />
+ * ```
+ */
+declare function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof Progress$1.Root>): import("react").JSX.Element;
+//#endregion
+export { Progress };
+//# sourceMappingURL=progress.d.cts.map

package/dist/ui/progress.d.mts

@@ -1,2 +1,21 @@
-import { t as Progress } from "../progress-sn0IL4k4.mjs";
-export { Progress };
+import { Progress as Progress$1 } from "radix-ui";
+
+//#region packages/components/ui/progress.d.ts
+/**
+ * A horizontal progress bar that visually represents a completion percentage.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from '@customafk/lunas-ui/ui/progress';
+ *
+ * <Progress value={65} />
+ * ```
+ */
+declare function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof Progress$1.Root>): import("react").JSX.Element;
+//#endregion
+export { Progress };
+//# sourceMappingURL=progress.d.mts.map

package/dist/ui/progress.mjs

@@ -1 +1,2 @@
-"use client";import{t as e}from"../progress-RvyBMsxb.mjs";export{e as Progress};
+"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{Progress as n}from"radix-ui";function r({className:r,value:i,...a}){return t(n.Root,{"data-slot":`progress`,className:e(`bg-primary-weak relative h-2 w-full overflow-hidden rounded-full`,r),...a,children:t(n.Indicator,{"data-slot":`progress-indicator`,className:`bg-primary size-full flex-1 transition-all`,style:{transform:`translateX(-${100-(i||0)}%)`}})})}export{r as Progress};
+//# sourceMappingURL=progress.mjs.map

package/dist/ui/progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.mjs","names":["ProgressPrimitive"],"sources":["../../packages/components/ui/progress.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress as ProgressPrimitive } from 'radix-ui';\n\n/**\n * A horizontal progress bar that visually represents a completion percentage.\n *\n * @example\n * ```tsx\n * import { Progress } from '@customafk/lunas-ui/ui/progress';\n *\n * <Progress value={65} />\n * ```\n */\nfunction Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root data-slot=\"progress\" className={cn('bg-primary-weak relative h-2 w-full overflow-hidden rounded-full', className)} {...props}>\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":"6IAeA,SAAS,EAAS,CAAE,YAAW,QAAO,GAAG,GAA8D,CACrG,OACE,EAACA,EAAkB,KAAnB,CAAwB,YAAU,WAAW,UAAW,EAAG,mEAAoE,CAAS,EAAG,GAAI,WAC7I,EAACA,EAAkB,UAAnB,CACE,YAAU,qBACV,UAAU,6CACV,MAAO,CAAE,UAAW,eAAe,KAAO,GAAS,GAAG,GAAI,CAC3D,CAAA,CACqB,CAAA,CAE5B"}

package/dist/ui/radio-group.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../radio-group-C4sIDN68.cjs`);exports.RadioGroup=e.t,exports.RadioGroupItem=e.n;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("lucide-react"),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.RadioGroup.Root,{"data-slot":`radio-group`,className:(0,t.cn)(`grid gap-3`,e),...i})}function a({className:i,...a}){return(0,n.jsx)(r.RadioGroup.Item,{"data-slot":`radio-group-item`,className:(0,t.cn)(`aspect-square size-4 shrink-0 rounded-full border border-border shadow-xs outline-none transition-all`,`disabled:cursor-not-allowed disabled:opacity-50`,`focus:border-border focus:ring-4 focus:ring-primary-weak`,`aria-invalid:border-danger-strong aria-invalid:ring-danger-weak`,`aria-readonly:pointer-events-none`,`aria-readonly:[&_div]:bg-muted`,`aria-readonly:[&_svg]:fill-muted-weak`,`aria-readonly:[&_svg]:text-muted-weak`,i),...a,children:(0,n.jsxs)(r.RadioGroup.Indicator,{"data-slot":`radio-group-indicator`,className:`relative flex items-center justify-center bg-primary`,children:[(0,n.jsx)(`div`,{className:`absolute size-4 rounded-full bg-primary`}),(0,n.jsx)(e.CircleIcon,{className:`-translate-1/2 absolute top-1/2 left-1/2 size-2 fill-text-negative-strong text-text-negative`})]})})}exports.RadioGroup=i,exports.RadioGroupItem=a;
+//# sourceMappingURL=radio-group.cjs.map

package/dist/ui/radio-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.cjs","names":["RadioGroupPrimitive","CircleIcon"],"sources":["../../packages/components/ui/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\n/**\n * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.\n *\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <RadioGroup defaultValue=\"monthly\">\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n *     <Label htmlFor=\"monthly\">Monthly</Label>\n *   </div>\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"annually\" id=\"annually\" />\n *     <Label htmlFor=\"annually\">Annually</Label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nfunction RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return <RadioGroupPrimitive.Root data-slot=\"radio-group\" className={cn('grid gap-3', className)} {...props} />;\n}\n\n/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */\nfunction RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        'aspect-square size-4 shrink-0 rounded-full border border-border shadow-xs outline-none transition-all',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'focus:border-border focus:ring-4 focus:ring-primary-weak',\n        'aria-invalid:border-danger-strong aria-invalid:ring-danger-weak',\n        'aria-readonly:pointer-events-none',\n        'aria-readonly:[&_div]:bg-muted',\n        'aria-readonly:[&_svg]:fill-muted-weak',\n        'aria-readonly:[&_svg]:text-muted-weak',\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator data-slot=\"radio-group-indicator\" className=\"relative flex items-center justify-center bg-primary\">\n        <div className=\"absolute size-4 rounded-full bg-primary\" />\n        <CircleIcon className=\"-translate-1/2 absolute top-1/2 left-1/2 size-2 fill-text-negative-strong text-text-negative\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":"+MA4BA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAgE,CAClG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,KAArB,CAA0B,YAAU,cAAc,WAAA,EAAA,EAAA,GAAA,CAAc,aAAc,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/G,CAGA,SAAS,EAAe,CAAE,YAAW,GAAG,GAAgE,CACtG,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,KAArB,CACE,YAAU,mBACV,WAAA,EAAA,EAAA,GAAA,CACE,wGACA,kDACA,2DACA,kEACA,oCACA,iCACA,wCACA,wCACA,CACF,EACA,GAAI,YAEJ,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAoB,UAArB,CAA+B,YAAU,wBAAwB,UAAU,gEAA3E,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yCAA2C,CAAA,GAC1D,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,8FAAgG,CAAA,CACzF,GACP,CAAA,CAE9B"}

package/dist/ui/radio-group.d.cts

@@ -1,2 +1,35 @@
-import { n as RadioGroupItem, t as RadioGroup } from "../radio-group-Ck0NoDHp.cjs";
-export { RadioGroup, RadioGroupItem };
+import { RadioGroup as RadioGroup$1 } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup$1.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup$1.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.cts.map

package/dist/ui/radio-group.d.mts

@@ -1,2 +1,35 @@
-import { n as RadioGroupItem, t as RadioGroup } from "../radio-group-DeKN6NpB.mjs";
-export { RadioGroup, RadioGroupItem };
+import { RadioGroup as RadioGroup$1 } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup$1.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup$1.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.mts.map

package/dist/ui/radio-group.mjs

@@ -1 +1,2 @@
-"use client";import{n as e,t}from"../radio-group-CD-4vNQR.mjs";export{t as RadioGroup,e as RadioGroupItem};
+"use client";import{CircleIcon as e}from"lucide-react";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{RadioGroup as i}from"radix-ui";function a({className:e,...r}){return n(i.Root,{"data-slot":`radio-group`,className:t(`grid gap-3`,e),...r})}function o({className:a,...o}){return n(i.Item,{"data-slot":`radio-group-item`,className:t(`aspect-square size-4 shrink-0 rounded-full border border-border shadow-xs outline-none transition-all`,`disabled:cursor-not-allowed disabled:opacity-50`,`focus:border-border focus:ring-4 focus:ring-primary-weak`,`aria-invalid:border-danger-strong aria-invalid:ring-danger-weak`,`aria-readonly:pointer-events-none`,`aria-readonly:[&_div]:bg-muted`,`aria-readonly:[&_svg]:fill-muted-weak`,`aria-readonly:[&_svg]:text-muted-weak`,a),...o,children:r(i.Indicator,{"data-slot":`radio-group-indicator`,className:`relative flex items-center justify-center bg-primary`,children:[n(`div`,{className:`absolute size-4 rounded-full bg-primary`}),n(e,{className:`-translate-1/2 absolute top-1/2 left-1/2 size-2 fill-text-negative-strong text-text-negative`})]})})}export{a as RadioGroup,o as RadioGroupItem};
+//# sourceMappingURL=radio-group.mjs.map

package/dist/ui/radio-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.mjs","names":["RadioGroupPrimitive"],"sources":["../../packages/components/ui/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\n/**\n * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.\n *\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <RadioGroup defaultValue=\"monthly\">\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n *     <Label htmlFor=\"monthly\">Monthly</Label>\n *   </div>\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"annually\" id=\"annually\" />\n *     <Label htmlFor=\"annually\">Annually</Label>\n *   </div>\n * </RadioGroup>\n * ```\n */\nfunction RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return <RadioGroupPrimitive.Root data-slot=\"radio-group\" className={cn('grid gap-3', className)} {...props} />;\n}\n\n/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */\nfunction RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        'aspect-square size-4 shrink-0 rounded-full border border-border shadow-xs outline-none transition-all',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'focus:border-border focus:ring-4 focus:ring-primary-weak',\n        'aria-invalid:border-danger-strong aria-invalid:ring-danger-weak',\n        'aria-readonly:pointer-events-none',\n        'aria-readonly:[&_div]:bg-muted',\n        'aria-readonly:[&_svg]:fill-muted-weak',\n        'aria-readonly:[&_svg]:text-muted-weak',\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator data-slot=\"radio-group-indicator\" className=\"relative flex items-center justify-center bg-primary\">\n        <div className=\"absolute size-4 rounded-full bg-primary\" />\n        <CircleIcon className=\"-translate-1/2 absolute top-1/2 left-1/2 size-2 fill-text-negative-strong text-text-negative\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":"mMA4BA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAgE,CAClG,OAAO,EAACA,EAAoB,KAArB,CAA0B,YAAU,cAAc,UAAW,EAAG,aAAc,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/G,CAGA,SAAS,EAAe,CAAE,YAAW,GAAG,GAAgE,CACtG,OACE,EAACA,EAAoB,KAArB,CACE,YAAU,mBACV,UAAW,EACT,wGACA,kDACA,2DACA,kEACA,oCACA,iCACA,wCACA,wCACA,CACF,EACA,GAAI,WAEJ,EAACA,EAAoB,UAArB,CAA+B,YAAU,wBAAwB,UAAU,gEAA3E,CACE,EAAC,MAAD,CAAK,UAAU,yCAA2C,CAAA,EAC1D,EAAC,EAAD,CAAY,UAAU,8FAAgG,CAAA,CACzF,GACP,CAAA,CAE9B"}

package/dist/ui/resizable.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../resizable-yKKhHTqx.cjs`);exports.ResizableHandle=e.t,exports.ResizablePanel=e.n,exports.ResizablePanelGroup=e.r;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-C6qsp3rV.cjs");let t=require("lucide-react"),n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("react-resizable-panels");a=e.n(a,1);const o=(0,n.memo)(({className:e,...t})=>(0,i.jsx)(a.PanelGroup,{"data-slot":`resizable-panel-group`,className:(0,r.cn)(`flex h-full w-full data-[panel-group-direction=vertical]:flex-col`,e),...t}));o.displayName=`ResizablePanelGroup`;const s=(0,n.memo)(({...e})=>(0,i.jsx)(a.Panel,{"data-slot":`resizable-panel`,...e}));s.displayName=`ResizablePanel`;const c=(0,n.memo)(({withHandle:e,className:n,...o})=>(0,i.jsx)(a.PanelResizeHandle,{"data-slot":`resizable-handle`,className:(0,r.cn)(`relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90`,n),...o,children:e&&(0,i.jsx)(`div`,{className:`z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border`,children:(0,i.jsx)(t.GripVerticalIcon,{className:`size-2.5`})})}));c.displayName=`ResizableHandle`,exports.ResizableHandle=c,exports.ResizablePanel=s,exports.ResizablePanelGroup=o;
+//# sourceMappingURL=resizable.cjs.map

package/dist/ui/resizable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.cjs","names":["ResizablePrimitive","GripVerticalIcon"],"sources":["../../packages/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { GripVerticalIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\ntype TResizablePanelGroup = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;\n\ntype TResizablePanel = React.ComponentProps<typeof ResizablePrimitive.Panel>;\n\ntype TResizableHandle = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean;\n};\n\n/**\n * Root container that manages a group of resizable panels; supports horizontal and vertical orientations.\n *\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@customafk/lunas-ui/ui/resizable';\n *\n * <ResizablePanelGroup direction=\"horizontal\">\n *   <ResizablePanel defaultSize={50}>Left</ResizablePanel>\n *   <ResizableHandle withHandle />\n *   <ResizablePanel defaultSize={50}>Right</ResizablePanel>\n * </ResizablePanelGroup>\n * ```\n */\nconst ResizablePanelGroup = memo<TResizablePanelGroup>(({ className, ...props }) => {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n});\nResizablePanelGroup.displayName = 'ResizablePanelGroup';\n\n/** An individual resizable panel within a ResizablePanelGroup. */\nconst ResizablePanel = memo<TResizablePanel>(({ ...props }) => {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />;\n});\nResizablePanel.displayName = 'ResizablePanel';\n\n/**\n * The drag handle placed between two ResizablePanels to resize them.\n *\n * @param withHandle - When true, renders a visible grip icon centered on the handle.\n */\nconst ResizableHandle = memo<TResizableHandle>(({ withHandle, className, ...props }) => {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  );\n});\nResizableHandle.displayName = 'ResizableHandle';\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n"],"mappings":"+SAgCA,MAAM,GAAA,EAAA,EAAA,KAAA,EAAkD,CAAE,YAAW,GAAG,MAEpE,EAAA,EAAA,IAAA,CAACA,EAAmB,WAApB,CACE,YAAU,wBACV,WAAA,EAAA,EAAA,GAAA,CAAc,oEAAqE,CAAS,EAC5F,GAAI,CACL,CAAA,CAEJ,EACD,EAAoB,YAAc,sBAGlC,MAAM,GAAA,EAAA,EAAA,KAAA,EAAwC,CAAE,GAAG,MAC1C,EAAA,EAAA,IAAA,CAACA,EAAmB,MAApB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC1E,EACD,EAAe,YAAc,iBAO7B,MAAM,GAAA,EAAA,EAAA,KAAA,EAA0C,CAAE,aAAY,YAAW,GAAG,MAExE,EAAA,EAAA,IAAA,CAACA,EAAmB,kBAApB,CACE,YAAU,mBACV,WAAA,EAAA,EAAA,GAAA,CACE,4oBACA,CACF,EACA,GAAI,WAEH,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,UAAY,CAAA,CACrC,CAAA,CAE6B,CAAA,CAEzC,EACD,EAAgB,YAAc"}

package/dist/ui/resizable.d.cts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-DYxHVdyf.cjs";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-CNIYTd7k.cjs";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/resizable.d.mts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-BilIxAxi.mjs";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-CNIYTd7k.mjs";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/resizable.mjs

@@ -1 +1,2 @@
-"use client";import{n as e,r as t,t as n}from"../resizable-p6zxjcHs.mjs";export{n as ResizableHandle,e as ResizablePanel,t as ResizablePanelGroup};
+"use client";import{GripVerticalIcon as e}from"lucide-react";import{memo as t}from"react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";import*as i from"react-resizable-panels";const a=t(({className:e,...t})=>r(i.PanelGroup,{"data-slot":`resizable-panel-group`,className:n(`flex h-full w-full data-[panel-group-direction=vertical]:flex-col`,e),...t}));a.displayName=`ResizablePanelGroup`;const o=t(({...e})=>r(i.Panel,{"data-slot":`resizable-panel`,...e}));o.displayName=`ResizablePanel`;const s=t(({withHandle:t,className:a,...o})=>r(i.PanelResizeHandle,{"data-slot":`resizable-handle`,className:n(`relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90`,a),...o,children:t&&r(`div`,{className:`z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border`,children:r(e,{className:`size-2.5`})})}));s.displayName=`ResizableHandle`;export{s as ResizableHandle,o as ResizablePanel,a as ResizablePanelGroup};
+//# sourceMappingURL=resizable.mjs.map

package/dist/ui/resizable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.mjs","names":[],"sources":["../../packages/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { GripVerticalIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\ntype TResizablePanelGroup = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;\n\ntype TResizablePanel = React.ComponentProps<typeof ResizablePrimitive.Panel>;\n\ntype TResizableHandle = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean;\n};\n\n/**\n * Root container that manages a group of resizable panels; supports horizontal and vertical orientations.\n *\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@customafk/lunas-ui/ui/resizable';\n *\n * <ResizablePanelGroup direction=\"horizontal\">\n *   <ResizablePanel defaultSize={50}>Left</ResizablePanel>\n *   <ResizableHandle withHandle />\n *   <ResizablePanel defaultSize={50}>Right</ResizablePanel>\n * </ResizablePanelGroup>\n * ```\n */\nconst ResizablePanelGroup = memo<TResizablePanelGroup>(({ className, ...props }) => {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n});\nResizablePanelGroup.displayName = 'ResizablePanelGroup';\n\n/** An individual resizable panel within a ResizablePanelGroup. */\nconst ResizablePanel = memo<TResizablePanel>(({ ...props }) => {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />;\n});\nResizablePanel.displayName = 'ResizablePanel';\n\n/**\n * The drag handle placed between two ResizablePanels to resize them.\n *\n * @param withHandle - When true, renders a visible grip icon centered on the handle.\n */\nconst ResizableHandle = memo<TResizableHandle>(({ withHandle, className, ...props }) => {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  );\n});\nResizableHandle.displayName = 'ResizableHandle';\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n"],"mappings":"+NAgCA,MAAM,EAAsB,GAA4B,CAAE,YAAW,GAAG,KAEpE,EAAC,EAAmB,WAApB,CACE,YAAU,wBACV,UAAW,EAAG,oEAAqE,CAAS,EAC5F,GAAI,CACL,CAAA,CAEJ,EACD,EAAoB,YAAc,sBAGlC,MAAM,EAAiB,GAAuB,CAAE,GAAG,KAC1C,EAAC,EAAmB,MAApB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC1E,EACD,EAAe,YAAc,iBAO7B,MAAM,EAAkB,GAAwB,CAAE,aAAY,YAAW,GAAG,KAExE,EAAC,EAAmB,kBAApB,CACE,YAAU,mBACV,UAAW,EACT,4oBACA,CACF,EACA,GAAI,WAEH,GACC,EAAC,MAAD,CAAK,UAAU,qFACb,EAAC,EAAD,CAAkB,UAAU,UAAY,CAAA,CACrC,CAAA,CAE6B,CAAA,CAEzC,EACD,EAAgB,YAAc"}

package/dist/ui/scroll-area.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../scroll-area-Dn3a9ZCQ.cjs`);exports.ScrollArea=e.t,exports.ScrollBar=e.n;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("@customafk/react-toolkit/utils"),n=require("react/jsx-runtime"),r=require("radix-ui");const i=(0,e.memo)(({className:e,children:i,ref:o,onScroll:s,...c})=>(0,n.jsxs)(r.ScrollArea.Root,{"data-slot":`scroll-area`,className:(0,t.cn)(`relative overflow-hidden`,e),...c,children:[(0,n.jsx)(r.ScrollArea.Viewport,{ref:o,className:`size-full rounded-[inherit]`,onScroll:s,children:i}),(0,n.jsx)(a,{}),(0,n.jsx)(r.ScrollArea.Corner,{})]}));i.displayName=`ScrollArea`;const a=(0,e.memo)(({className:e,orientation:i=`vertical`,...a})=>(0,n.jsx)(r.ScrollArea.ScrollAreaScrollbar,{"data-slot":`scroll-area-scrollbar`,orientation:i,className:(0,t.cn)(`flex touch-none select-none border-border-weak p-px transition-colors`,i===`vertical`&&`h-full w-2.5 border-l border-l-transparent`,i===`horizontal`&&`h-2.5 flex-col border-t border-t-transparent`,e),...a,children:(0,n.jsx)(r.ScrollArea.ScrollAreaThumb,{className:`relative flex-1 rounded-full bg-border-weak`})}));a.displayName=`ScrollBar`,exports.ScrollArea=i,exports.ScrollBar=a;
+//# sourceMappingURL=scroll-area.cjs.map

package/dist/ui/scroll-area.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.cjs","names":["ScrollAreaPrimitive"],"sources":["../../packages/components/ui/scroll-area.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\n\n/**\n * A scrollable container with a styled, custom scrollbar that overlays the content.\n *\n * @example\n * ```tsx\n * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';\n *\n * <ScrollArea className=\"h-64 w-full\">\n *   <div className=\"p-4\">Long content goes here…</div>\n * </ScrollArea>\n * ```\n */\nconst ScrollArea = memo(({ className, children, ref, onScroll, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) => {\n  return (\n    <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" className={cn('relative overflow-hidden', className)} {...props}>\n      <ScrollAreaPrimitive.Viewport ref={ref} className=\"size-full rounded-[inherit]\" onScroll={onScroll}>\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\nScrollArea.displayName = 'ScrollArea';\n\n/**\n * The styled scrollbar track and thumb rendered inside a ScrollArea.\n *\n * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.\n */\nconst ScrollBar = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none border-border-weak p-px transition-colors',\n        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',\n        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border-weak\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"wMAmBA,MAAM,GAAA,EAAA,EAAA,KAAA,EAAmB,CAAE,YAAW,WAAU,MAAK,WAAU,GAAG,MAE9D,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAoB,KAArB,CAA0B,YAAU,cAAc,WAAA,EAAA,EAAA,GAAA,CAAc,2BAA4B,CAAS,EAAG,GAAI,WAA5G,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,SAArB,CAAmC,MAAK,UAAU,8BAAwC,WACvF,UAC2B,CAAA,GAC9B,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,OAArB,CAA6B,CAAA,CACL,GAE7B,EACD,EAAW,YAAc,aAOzB,MAAM,GAAA,EAAA,EAAA,KAAA,EAAkB,CAAE,YAAW,cAAc,WAAY,GAAG,MAE9D,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,oBAArB,CACE,YAAU,wBACG,cACb,WAAA,EAAA,EAAA,GAAA,CACE,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,CACF,EACA,GAAI,YAEJ,EAAA,EAAA,IAAA,CAACA,EAAAA,WAAoB,gBAArB,CAAqC,UAAU,6CAA+C,CAAA,CACvD,CAAA,CAE5C,EACD,EAAU,YAAc"}

package/dist/ui/scroll-area.d.cts

@@ -1,2 +1,35 @@
-import { n as ScrollBar, t as ScrollArea } from "../scroll-area-CKWenzXh.cjs";
-export { ScrollArea, ScrollBar };
+import { ScrollArea as ScrollArea$1 } from "radix-ui";
+
+//#region packages/components/ui/scroll-area.d.ts
+/**
+ * A scrollable container with a styled, custom scrollbar that overlays the content.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';
+ *
+ * <ScrollArea className="h-64 w-full">
+ *   <div className="p-4">Long content goes here…</div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: import("react").MemoExoticComponent<({
+  className,
+  children,
+  ref,
+  onScroll,
+  ...props
+}: React.ComponentProps<typeof ScrollArea$1.Root>) => import("react").JSX.Element>;
+/**
+ * The styled scrollbar track and thumb rendered inside a ScrollArea.
+ *
+ * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.
+ */
+declare const ScrollBar: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => import("react").JSX.Element>;
+//#endregion
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.cts.map

package/dist/ui/scroll-area.d.mts

@@ -1,2 +1,35 @@
-import { n as ScrollBar, t as ScrollArea } from "../scroll-area-C7s40z6d.mjs";
-export { ScrollArea, ScrollBar };
+import { ScrollArea as ScrollArea$1 } from "radix-ui";
+
+//#region packages/components/ui/scroll-area.d.ts
+/**
+ * A scrollable container with a styled, custom scrollbar that overlays the content.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';
+ *
+ * <ScrollArea className="h-64 w-full">
+ *   <div className="p-4">Long content goes here…</div>
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: import("react").MemoExoticComponent<({
+  className,
+  children,
+  ref,
+  onScroll,
+  ...props
+}: React.ComponentProps<typeof ScrollArea$1.Root>) => import("react").JSX.Element>;
+/**
+ * The styled scrollbar track and thumb rendered inside a ScrollArea.
+ *
+ * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.
+ */
+declare const ScrollBar: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => import("react").JSX.Element>;
+//#endregion
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.mts.map

package/dist/ui/scroll-area.mjs

@@ -1 +1,2 @@
-"use client";import{n as e,t}from"../scroll-area-DrZOWroA.mjs";export{t as ScrollArea,e as ScrollBar};
+"use client";import{memo as e}from"react";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{ScrollArea as i}from"radix-ui";const a=e(({className:e,children:a,ref:s,onScroll:c,...l})=>r(i.Root,{"data-slot":`scroll-area`,className:t(`relative overflow-hidden`,e),...l,children:[n(i.Viewport,{ref:s,className:`size-full rounded-[inherit]`,onScroll:c,children:a}),n(o,{}),n(i.Corner,{})]}));a.displayName=`ScrollArea`;const o=e(({className:e,orientation:r=`vertical`,...a})=>n(i.ScrollAreaScrollbar,{"data-slot":`scroll-area-scrollbar`,orientation:r,className:t(`flex touch-none select-none border-border-weak p-px transition-colors`,r===`vertical`&&`h-full w-2.5 border-l border-l-transparent`,r===`horizontal`&&`h-2.5 flex-col border-t border-t-transparent`,e),...a,children:n(i.ScrollAreaThumb,{className:`relative flex-1 rounded-full bg-border-weak`})}));o.displayName=`ScrollBar`;export{a as ScrollArea,o as ScrollBar};
+//# sourceMappingURL=scroll-area.mjs.map

package/dist/ui/scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.mjs","names":["ScrollAreaPrimitive"],"sources":["../../packages/components/ui/scroll-area.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\n\n/**\n * A scrollable container with a styled, custom scrollbar that overlays the content.\n *\n * @example\n * ```tsx\n * import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area';\n *\n * <ScrollArea className=\"h-64 w-full\">\n *   <div className=\"p-4\">Long content goes here…</div>\n * </ScrollArea>\n * ```\n */\nconst ScrollArea = memo(({ className, children, ref, onScroll, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) => {\n  return (\n    <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" className={cn('relative overflow-hidden', className)} {...props}>\n      <ScrollAreaPrimitive.Viewport ref={ref} className=\"size-full rounded-[inherit]\" onScroll={onScroll}>\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\nScrollArea.displayName = 'ScrollArea';\n\n/**\n * The styled scrollbar track and thumb rendered inside a ScrollArea.\n *\n * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.\n */\nconst ScrollBar = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none border-border-weak p-px transition-colors',\n        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',\n        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border-weak\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"sLAmBA,MAAM,EAAa,GAAM,CAAE,YAAW,WAAU,MAAK,WAAU,GAAG,KAE9D,EAACA,EAAoB,KAArB,CAA0B,YAAU,cAAc,UAAW,EAAG,2BAA4B,CAAS,EAAG,GAAI,WAA5G,CACE,EAACA,EAAoB,SAArB,CAAmC,MAAK,UAAU,8BAAwC,WACvF,UAC2B,CAAA,EAC9B,EAAC,EAAD,CAAY,CAAA,EACZ,EAACA,EAAoB,OAArB,CAA6B,CAAA,CACL,GAE7B,EACD,EAAW,YAAc,aAOzB,MAAM,EAAY,GAAM,CAAE,YAAW,cAAc,WAAY,GAAG,KAE9D,EAACA,EAAoB,oBAArB,CACE,YAAU,wBACG,cACb,UAAW,EACT,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,CACF,EACA,GAAI,WAEJ,EAACA,EAAoB,gBAArB,CAAqC,UAAU,6CAA+C,CAAA,CACvD,CAAA,CAE5C,EACD,EAAU,YAAc"}