@customafk/lunas-ui 0.2.5 → 0.2.7

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

@@ -1,15 +1,37 @@
-import * as react_jsx_runtime210 from "react/jsx-runtime";
+import * as react_jsx_runtime197 from "react/jsx-runtime";
 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>): react_jsx_runtime210.JSX.Element;
+}: React.ComponentProps<typeof RadioGroup$1.Root>): react_jsx_runtime197.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>): react_jsx_runtime210.JSX.Element;
+}: React.ComponentProps<typeof RadioGroup$1.Item>): react_jsx_runtime197.JSX.Element;
 //#endregion
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.d.mts.map

package/dist/ui/radio-group.mjs

@@ -1 +1 @@
-"use client";import{n as e,t}from"../radio-group-Cem8O6BK.mjs";export{t as RadioGroup,e as RadioGroupItem};
+"use client";import{n as e,t}from"../radio-group-CAgfOr7-.mjs";export{t as RadioGroup,e as RadioGroupItem};

package/dist/ui/resizable.cjs

@@ -1 +1 @@
-"use client";const e=require(`../resizable-B8tRShQI.cjs`);exports.ResizableHandle=e.t,exports.ResizablePanel=e.n,exports.ResizablePanelGroup=e.r;
+"use client";const e=require(`../resizable-D6UKwvFa.cjs`);exports.ResizableHandle=e.t,exports.ResizablePanel=e.n,exports.ResizablePanelGroup=e.r;

package/dist/ui/resizable.d.cts

@@ -1,4 +1,4 @@
-import * as react18 from "react";
+import * as react13 from "react";
 import * as node_modules_react_resizable_panels_dist_declarations_src_types0 from "node_modules/react-resizable-panels/dist/declarations/src/types";
 import * as ResizablePrimitive from "react-resizable-panels";
 
@@ -6,7 +6,21 @@ import * as ResizablePrimitive from "react-resizable-panels";
 type TResizableHandle = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean;
 };
-declare const ResizablePanelGroup: react18.NamedExoticComponent<Omit<react18.HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
+/**
+ * Root container that manages a group of resizable panels; supports horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@customafk/lunas-ui/ui/resizable';
+ *
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={50}>Left</ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel defaultSize={50}>Right</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+declare const ResizablePanelGroup: react13.NamedExoticComponent<Omit<react13.HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
   autoSaveId?: string | null;
   className?: string;
   direction: node_modules_react_resizable_panels_dist_declarations_src_types0.Direction;
@@ -14,13 +28,14 @@ declare const ResizablePanelGroup: react18.NamedExoticComponent<Omit<react18.HTM
   keyboardResizeBy?: number | null;
   onLayout?: ResizablePrimitive.PanelGroupOnLayout | null;
   storage?: ResizablePrimitive.PanelGroupStorage;
-  style?: react18.CSSProperties;
+  style?: react13.CSSProperties;
   tagName?: keyof HTMLElementTagNameMap;
   dir?: "auto" | "ltr" | "rtl" | undefined;
 } & {
-  children?: react18.ReactNode | undefined;
-} & react18.RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
-declare const ResizablePanel: react18.NamedExoticComponent<Omit<react18.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLInputElement | HTMLDivElement | HTMLParagraphElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+  children?: react13.ReactNode | undefined;
+} & react13.RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
+/** An individual resizable panel within a ResizablePanelGroup. */
+declare const ResizablePanel: react13.NamedExoticComponent<Omit<react13.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLInputElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLDivElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -35,9 +50,14 @@ declare const ResizablePanel: react18.NamedExoticComponent<Omit<react18.HTMLAttr
   style?: object;
   tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-  children?: react18.ReactNode | undefined;
-} & react18.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: react18.NamedExoticComponent<TResizableHandle>;
+  children?: react13.ReactNode | undefined;
+} & react13.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+/**
+ * The drag handle placed between two ResizablePanels to resize them.
+ *
+ * @param withHandle - When true, renders a visible grip icon centered on the handle.
+ */
+declare const ResizableHandle: react13.NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
 //# sourceMappingURL=resizable.d.cts.map

package/dist/ui/resizable.d.mts

@@ -1,4 +1,4 @@
-import * as react20 from "react";
+import * as react16 from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import * as node_modules_react_resizable_panels_dist_declarations_src_types0 from "node_modules/react-resizable-panels/dist/declarations/src/types";
 
@@ -6,7 +6,21 @@ import * as node_modules_react_resizable_panels_dist_declarations_src_types0 fro
 type TResizableHandle = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean;
 };
-declare const ResizablePanelGroup: react20.NamedExoticComponent<Omit<react20.HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
+/**
+ * Root container that manages a group of resizable panels; supports horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@customafk/lunas-ui/ui/resizable';
+ *
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={50}>Left</ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel defaultSize={50}>Right</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+declare const ResizablePanelGroup: react16.NamedExoticComponent<Omit<react16.HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
   autoSaveId?: string | null;
   className?: string;
   direction: node_modules_react_resizable_panels_dist_declarations_src_types0.Direction;
@@ -14,13 +28,14 @@ declare const ResizablePanelGroup: react20.NamedExoticComponent<Omit<react20.HTM
   keyboardResizeBy?: number | null;
   onLayout?: ResizablePrimitive.PanelGroupOnLayout | null;
   storage?: ResizablePrimitive.PanelGroupStorage;
-  style?: react20.CSSProperties;
+  style?: react16.CSSProperties;
   tagName?: keyof HTMLElementTagNameMap;
   dir?: "auto" | "ltr" | "rtl" | undefined;
 } & {
-  children?: react20.ReactNode | undefined;
-} & react20.RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
-declare const ResizablePanel: react20.NamedExoticComponent<Omit<react20.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLInputElement | HTMLDivElement | HTMLParagraphElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+  children?: react16.ReactNode | undefined;
+} & react16.RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
+/** An individual resizable panel within a ResizablePanelGroup. */
+declare const ResizablePanel: react16.NamedExoticComponent<Omit<react16.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLInputElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLDivElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -35,9 +50,14 @@ declare const ResizablePanel: react20.NamedExoticComponent<Omit<react20.HTMLAttr
   style?: object;
   tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-  children?: react20.ReactNode | undefined;
-} & react20.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: react20.NamedExoticComponent<TResizableHandle>;
+  children?: react16.ReactNode | undefined;
+} & react16.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+/**
+ * The drag handle placed between two ResizablePanels to resize them.
+ *
+ * @param withHandle - When true, renders a visible grip icon centered on the handle.
+ */
+declare const ResizableHandle: react16.NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
 //# sourceMappingURL=resizable.d.mts.map

package/dist/ui/resizable.mjs

@@ -1 +1 @@
-"use client";import{n as e,r as t,t as n}from"../resizable-RPObV6jc.mjs";export{n as ResizableHandle,e as ResizablePanel,t as ResizablePanelGroup};
+"use client";import{n as e,r as t,t as n}from"../resizable-DWh_mp5P.mjs";export{n as ResizableHandle,e as ResizablePanel,t as ResizablePanelGroup};

package/dist/ui/scroll-area.cjs

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

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

@@ -1 +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\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\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":"8KAOA,MAAM,GAAA,EAAA,EAAA,OAAmB,CAAE,YAAW,WAAU,MAAK,WAAU,GAAG,MAE9D,EAAA,EAAA,MAACA,EAAAA,WAAoB,KAAA,CAAK,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,2BAA4B,EAAU,CAAE,GAAI,aAC1G,EAAA,EAAA,KAACA,EAAAA,WAAoB,SAAA,CAAc,MAAK,UAAU,8BAAwC,WACvF,YAC4B,EAC/B,EAAA,EAAA,KAAC,EAAA,EAAA,CAAY,EACb,EAAA,EAAA,KAACA,EAAAA,WAAoB,OAAA,EAAA,CAAS,GACL,CAE7B,CACF,EAAW,YAAc,aAEzB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,cAAc,WAAY,GAAG,MAE9D,EAAA,EAAA,KAACA,EAAAA,WAAoB,oBAAA,CACnB,YAAU,wBACG,cACb,WAAA,EAAA,EAAA,IACE,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACA,EAAAA,WAAoB,gBAAA,CAAgB,UAAU,8CAAA,CAAgD,EACvD,CAE5C,CACF,EAAU,YAAc"}
+{"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":"8KAmBA,MAAM,GAAA,EAAA,EAAA,OAAmB,CAAE,YAAW,WAAU,MAAK,WAAU,GAAG,MAE9D,EAAA,EAAA,MAACA,EAAAA,WAAoB,KAAA,CAAK,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,2BAA4B,EAAU,CAAE,GAAI,aAC1G,EAAA,EAAA,KAACA,EAAAA,WAAoB,SAAA,CAAc,MAAK,UAAU,8BAAwC,WACvF,YAC4B,EAC/B,EAAA,EAAA,KAAC,EAAA,EAAA,CAAY,EACb,EAAA,EAAA,KAACA,EAAAA,WAAoB,OAAA,EAAA,CAAS,GACL,CAE7B,CACF,EAAW,YAAc,aAOzB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,YAAW,cAAc,WAAY,GAAG,MAE9D,EAAA,EAAA,KAACA,EAAAA,WAAoB,oBAAA,CACnB,YAAU,wBACG,cACb,WAAA,EAAA,EAAA,IACE,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACA,EAAAA,WAAoB,gBAAA,CAAgB,UAAU,8CAAA,CAAgD,EACvD,CAE5C,CACF,EAAU,YAAc"}

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

@@ -1,20 +1,38 @@
-import * as react_jsx_runtime141 from "react/jsx-runtime";
-import * as react14 from "react";
+import * as react_jsx_runtime164 from "react/jsx-runtime";
+import * as react11 from "react";
 import { ScrollArea as ScrollArea$1 } from "radix-ui";
 
 //#region packages/components/ui/scroll-area.d.ts
-declare const ScrollArea: react14.MemoExoticComponent<({
+
+/**
+ * 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: react11.MemoExoticComponent<({
   className,
   children,
   ref,
   onScroll,
   ...props
-}: React.ComponentProps<typeof ScrollArea$1.Root>) => react_jsx_runtime141.JSX.Element>;
-declare const ScrollBar: react14.MemoExoticComponent<({
+}: React.ComponentProps<typeof ScrollArea$1.Root>) => react_jsx_runtime164.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: react11.MemoExoticComponent<({
   className,
   orientation,
   ...props
-}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => react_jsx_runtime141.JSX.Element>;
+}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => react_jsx_runtime164.JSX.Element>;
 //#endregion
 export { ScrollArea, ScrollBar };
 //# sourceMappingURL=scroll-area.d.cts.map

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

@@ -1,20 +1,38 @@
-import * as react_jsx_runtime276 from "react/jsx-runtime";
-import * as react34 from "react";
+import * as react14 from "react";
+import * as react_jsx_runtime220 from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "radix-ui";
 
 //#region packages/components/ui/scroll-area.d.ts
-declare const ScrollArea: react34.MemoExoticComponent<({
+
+/**
+ * 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: react14.MemoExoticComponent<({
   className,
   children,
   ref,
   onScroll,
   ...props
-}: React.ComponentProps<typeof ScrollArea$1.Root>) => react_jsx_runtime276.JSX.Element>;
-declare const ScrollBar: react34.MemoExoticComponent<({
+}: React.ComponentProps<typeof ScrollArea$1.Root>) => react_jsx_runtime220.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: react14.MemoExoticComponent<({
   className,
   orientation,
   ...props
-}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => react_jsx_runtime276.JSX.Element>;
+}: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>) => react_jsx_runtime220.JSX.Element>;
 //#endregion
 export { ScrollArea, ScrollBar };
 //# sourceMappingURL=scroll-area.d.mts.map

package/dist/ui/scroll-area.mjs

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

@@ -1 +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\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\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":"sLAOA,MAAM,EAAa,GAAM,CAAE,YAAW,WAAU,MAAK,WAAU,GAAG,KAE9D,EAACA,EAAoB,KAAA,CAAK,YAAU,cAAc,UAAW,EAAG,2BAA4B,EAAU,CAAE,GAAI,YAC1G,EAACA,EAAoB,SAAA,CAAc,MAAK,UAAU,8BAAwC,WACvF,YAC4B,CAC/B,EAAC,EAAA,EAAA,CAAY,CACb,EAACA,EAAoB,OAAA,EAAA,CAAS,GACL,CAE7B,CACF,EAAW,YAAc,aAEzB,MAAM,EAAY,GAAM,CAAE,YAAW,cAAc,WAAY,GAAG,KAE9D,EAACA,EAAoB,oBAAA,CACnB,YAAU,wBACG,cACb,UAAW,EACT,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,EACD,CACD,GAAI,WAEJ,EAACA,EAAoB,gBAAA,CAAgB,UAAU,8CAAA,CAAgD,EACvD,CAE5C,CACF,EAAU,YAAc"}
+{"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,KAAA,CAAK,YAAU,cAAc,UAAW,EAAG,2BAA4B,EAAU,CAAE,GAAI,YAC1G,EAACA,EAAoB,SAAA,CAAc,MAAK,UAAU,8BAAwC,WACvF,YAC4B,CAC/B,EAAC,EAAA,EAAA,CAAY,CACb,EAACA,EAAoB,OAAA,EAAA,CAAS,GACL,CAE7B,CACF,EAAW,YAAc,aAOzB,MAAM,EAAY,GAAM,CAAE,YAAW,cAAc,WAAY,GAAG,KAE9D,EAACA,EAAoB,oBAAA,CACnB,YAAU,wBACG,cACb,UAAW,EACT,wEACA,IAAgB,YAAc,6CAC9B,IAAgB,cAAgB,+CAChC,EACD,CACD,GAAI,WAEJ,EAACA,EAAoB,gBAAA,CAAgB,UAAU,8CAAA,CAAgD,EACvD,CAE5C,CACF,EAAU,YAAc"}

package/dist/ui/select.cjs

@@ -1 +1 @@
-"use client";const e=require(`../select-2CgwiefV.cjs`);exports.Select=e.t,exports.SelectContent=e.n,exports.SelectGroup=e.r,exports.SelectItem=e.i,exports.SelectLabel=e.a,exports.SelectSeparator=e.o,exports.SelectTrigger=e.s,exports.SelectValue=e.c;
+"use client";const e=require(`../select-Py_t2nX1.cjs`);exports.Select=e.t,exports.SelectContent=e.n,exports.SelectGroup=e.r,exports.SelectItem=e.i,exports.SelectLabel=e.a,exports.SelectSeparator=e.o,exports.SelectTrigger=e.s,exports.SelectValue=e.c;

package/dist/ui/select.d.cts

@@ -1,43 +1,77 @@
-import * as react_jsx_runtime217 from "react/jsx-runtime";
+import * as react_jsx_runtime246 from "react/jsx-runtime";
 import { Select as Select$1 } from "radix-ui";
 
 //#region packages/components/ui/select.d.ts
+
+/**
+ * Accessible dropdown select built on Radix UI's Select primitives, composed from `Select`, `SelectTrigger`, `SelectContent`, and `SelectItem`.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Select, SelectTrigger, SelectValue,
+ *   SelectContent, SelectItem,
+ * } from '@customafk/lunas-ui/ui/select';
+ *
+ * <Select>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Pick a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
 declare function Select({
   ...props
-}: React.ComponentProps<typeof Select$1.Root>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Root>): react_jsx_runtime246.JSX.Element;
+/** Groups related `SelectItem` elements with an optional `SelectLabel` header. */
 declare function SelectGroup({
   ...props
-}: React.ComponentProps<typeof Select$1.Group>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Group>): react_jsx_runtime246.JSX.Element;
+/** Renders the currently selected value (or a placeholder) inside `SelectTrigger`. */
 declare function SelectValue({
   ...props
-}: React.ComponentProps<typeof Select$1.Value>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Value>): react_jsx_runtime246.JSX.Element;
+/**
+ * The button that opens the select dropdown; renders the current value and a chevron icon.
+ *
+ * @param size - `'default'` (standard padding) or `'sm'` (compact).
+ */
 declare function SelectTrigger({
   className,
   size,
   children,
   ...props
 }: React.ComponentProps<typeof Select$1.Trigger> & {
+  /** Controls the trigger's padding — `'default'` or `'sm'`. */
   size?: 'sm' | 'default';
-}): react_jsx_runtime217.JSX.Element;
+}): react_jsx_runtime246.JSX.Element;
+/** Floating dropdown panel that renders inside a portal with enter/exit animations. */
 declare function SelectContent({
   className,
   children,
   position,
   ...props
-}: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime246.JSX.Element;
+/** Non-interactive label displayed above a `SelectGroup` to describe its options. */
 declare function SelectLabel({
   className,
   ...props
-}: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime246.JSX.Element;
+/** A selectable option within `SelectContent`; shows a check icon when chosen. */
 declare function SelectItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime246.JSX.Element;
+/** Thin horizontal rule used to visually separate groups of `SelectItem` elements. */
 declare function SelectSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime217.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime246.JSX.Element;
 //#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
 //# sourceMappingURL=select.d.cts.map

package/dist/ui/select.d.mts

@@ -1,43 +1,77 @@
-import * as react_jsx_runtime279 from "react/jsx-runtime";
+import * as react_jsx_runtime246 from "react/jsx-runtime";
 import { Select as Select$1 } from "radix-ui";
 
 //#region packages/components/ui/select.d.ts
+
+/**
+ * Accessible dropdown select built on Radix UI's Select primitives, composed from `Select`, `SelectTrigger`, `SelectContent`, and `SelectItem`.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Select, SelectTrigger, SelectValue,
+ *   SelectContent, SelectItem,
+ * } from '@customafk/lunas-ui/ui/select';
+ *
+ * <Select>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Pick a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
 declare function Select({
   ...props
-}: React.ComponentProps<typeof Select$1.Root>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Root>): react_jsx_runtime246.JSX.Element;
+/** Groups related `SelectItem` elements with an optional `SelectLabel` header. */
 declare function SelectGroup({
   ...props
-}: React.ComponentProps<typeof Select$1.Group>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Group>): react_jsx_runtime246.JSX.Element;
+/** Renders the currently selected value (or a placeholder) inside `SelectTrigger`. */
 declare function SelectValue({
   ...props
-}: React.ComponentProps<typeof Select$1.Value>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Value>): react_jsx_runtime246.JSX.Element;
+/**
+ * The button that opens the select dropdown; renders the current value and a chevron icon.
+ *
+ * @param size - `'default'` (standard padding) or `'sm'` (compact).
+ */
 declare function SelectTrigger({
   className,
   size,
   children,
   ...props
 }: React.ComponentProps<typeof Select$1.Trigger> & {
+  /** Controls the trigger's padding — `'default'` or `'sm'`. */
   size?: 'sm' | 'default';
-}): react_jsx_runtime279.JSX.Element;
+}): react_jsx_runtime246.JSX.Element;
+/** Floating dropdown panel that renders inside a portal with enter/exit animations. */
 declare function SelectContent({
   className,
   children,
   position,
   ...props
-}: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime246.JSX.Element;
+/** Non-interactive label displayed above a `SelectGroup` to describe its options. */
 declare function SelectLabel({
   className,
   ...props
-}: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime246.JSX.Element;
+/** A selectable option within `SelectContent`; shows a check icon when chosen. */
 declare function SelectItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime246.JSX.Element;
+/** Thin horizontal rule used to visually separate groups of `SelectItem` elements. */
 declare function SelectSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime279.JSX.Element;
+}: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime246.JSX.Element;
 //#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
 //# sourceMappingURL=select.d.mts.map

package/dist/ui/select.mjs

@@ -1 +1 @@
-"use client";import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"../select-CivtMKTM.mjs";export{s as Select,r as SelectContent,a as SelectGroup,n as SelectItem,e as SelectLabel,i as SelectSeparator,o as SelectTrigger,t as SelectValue};
+"use client";import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"../select-Ze8Fq88G.mjs";export{s as Select,r as SelectContent,a as SelectGroup,n as SelectItem,e as SelectLabel,i as SelectSeparator,o as SelectTrigger,t as SelectValue};

package/dist/ui/separator.cjs

@@ -1 +1 @@
-"use client";const e=require(`../separator-C3ip6sbh.cjs`);exports.Separator=e.t;
+"use client";const e=require(`../separator-BwZb12bh.cjs`);exports.Separator=e.t;

package/dist/ui/separator.d.cts

@@ -1,13 +1,34 @@
-import * as react_jsx_runtime216 from "react/jsx-runtime";
+import * as react_jsx_runtime232 from "react/jsx-runtime";
 import { Separator as Separator$1 } from "radix-ui";
 
 //#region packages/components/ui/separator.d.ts
+
+/**
+ * Thin visual divider built on Radix UI's Separator primitive, supporting horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { Separator } from '@customafk/lunas-ui/ui/separator';
+ *
+ * <div className="space-y-4">
+ *   <p>Section one</p>
+ *   <Separator />
+ *   <p>Section two</p>
+ * </div>
+ *
+ * <div className="flex h-8 items-center gap-4">
+ *   <span>Left</span>
+ *   <Separator orientation="vertical" />
+ *   <span>Right</span>
+ * </div>
+ * ```
+ */
 declare function Separator({
   className,
   orientation,
   decorative,
   ...props
-}: React.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime216.JSX.Element;
+}: React.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime232.JSX.Element;
 //#endregion
 export { Separator };
 //# sourceMappingURL=separator.d.cts.map

package/dist/ui/separator.d.mts

@@ -1,13 +1,34 @@
-import * as react_jsx_runtime113 from "react/jsx-runtime";
+import * as react_jsx_runtime223 from "react/jsx-runtime";
 import { Separator as Separator$1 } from "radix-ui";
 
 //#region packages/components/ui/separator.d.ts
+
+/**
+ * Thin visual divider built on Radix UI's Separator primitive, supporting horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { Separator } from '@customafk/lunas-ui/ui/separator';
+ *
+ * <div className="space-y-4">
+ *   <p>Section one</p>
+ *   <Separator />
+ *   <p>Section two</p>
+ * </div>
+ *
+ * <div className="flex h-8 items-center gap-4">
+ *   <span>Left</span>
+ *   <Separator orientation="vertical" />
+ *   <span>Right</span>
+ * </div>
+ * ```
+ */
 declare function Separator({
   className,
   orientation,
   decorative,
   ...props
-}: React.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime113.JSX.Element;
+}: React.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime223.JSX.Element;
 //#endregion
 export { Separator };
 //# sourceMappingURL=separator.d.mts.map

package/dist/ui/separator.mjs

@@ -1 +1 @@
-"use client";import{t as e}from"../separator-Bf0gymN4.mjs";export{e as Separator};
+"use client";import{t as e}from"../separator-BMsbHAVt.mjs";export{e as Separator};

package/dist/ui/sheet.cjs

@@ -1 +1 @@
-"use client";const e=require(`../sheet-5MJRtrfG.cjs`);exports.Sheet=e.t,exports.SheetClose=e.n,exports.SheetContent=e.r,exports.SheetDescription=e.i,exports.SheetFooter=e.a,exports.SheetHeader=e.o,exports.SheetTitle=e.s,exports.SheetTrigger=e.c;
+"use client";const e=require(`../sheet-CaDXTx7n.cjs`);exports.Sheet=e.t,exports.SheetClose=e.n,exports.SheetContent=e.r,exports.SheetDescription=e.i,exports.SheetFooter=e.a,exports.SheetHeader=e.o,exports.SheetTitle=e.s,exports.SheetTrigger=e.c;