@customafk/lunas-ui 0.2.40 → 0.2.42

package/dist/ui/card.d.cts

@@ -1,4 +1,4 @@
-import * as react78 from "react";
+import * as react201 from "react";
 
 //#region packages/components/ui/card.d.ts
 
@@ -27,37 +27,37 @@ import * as react78 from "react";
 declare function Card({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Top section of the card that holds the title, description, and optional action slot. */
 declare function CardHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Primary heading for the card, styled with the h3 heading variant. */
 declare function CardTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Muted supporting text displayed beneath the card title. */
 declare function CardDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
 declare function CardAction({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Main body area of the card with horizontal padding for content alignment. */
 declare function CardContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 /** Bottom section of the card, typically used for supplementary text or secondary actions. */
 declare function CardFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react78.JSX.Element;
+}: React.ComponentProps<'div'>): react201.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
 //# sourceMappingURL=card.d.cts.map

package/dist/ui/card.d.ts

@@ -1,4 +1,4 @@
-import * as react50 from "react";
+import * as react71 from "react";
 
 //#region packages/components/ui/card.d.ts
 
@@ -27,37 +27,37 @@ import * as react50 from "react";
 declare function Card({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Top section of the card that holds the title, description, and optional action slot. */
 declare function CardHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Primary heading for the card, styled with the h3 heading variant. */
 declare function CardTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Muted supporting text displayed beneath the card title. */
 declare function CardDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
 declare function CardAction({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Main body area of the card with horizontal padding for content alignment. */
 declare function CardContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 /** Bottom section of the card, typically used for supplementary text or secondary actions. */
 declare function CardFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react50.JSX.Element;
+}: React.ComponentProps<'div'>): react71.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
 //# sourceMappingURL=card.d.ts.map

package/dist/ui/card.js

@@ -1,2 +1,2 @@
-"use client";import{t as e}from"../heading-Bz-hSatD.js";import{n as t}from"../paragraph-Cc13ZI4d.js";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";function i({className:e,...t}){return r(`div`,{"data-slot":`card`,className:n(`flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card`,`transition-[box-shadow,opacity] duration-150 ease-in-out`,`data-[interactive=true]:cursor-pointer`,`data-[interactive=true]:hover:shadow-dropdown`,`data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2`,`data-[interactive=true]:active:opacity-90`,e),...t})}function a({className:e,...t}){return r(`div`,{"data-slot":`card-header`,className:n(`@container/card-header`,`grid auto-rows-min grid-rows-[auto_auto]`,`items-start gap-1.5 px-6 text-text-positive-strong`,`has-data-[slot=card-action]:grid-cols-[1fr_auto]`,`[.border-b]:pb-6`,e),...t})}function o({className:t,...i}){return r(`div`,{"data-slot":`card-title`,className:n(e({level:`h3`}),t),...i})}function s({className:e,...i}){return r(`div`,{"data-slot":`card-description`,className:n(t({variant:`muted`}),e),...i})}function c({className:e,...t}){return r(`div`,{"data-slot":`card-action`,className:n(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...t})}function l({className:e,...t}){return r(`div`,{"data-slot":`card-content`,className:n(`px-6 text-sm`,e),...t})}function u({className:e,...t}){return r(`div`,{"data-slot":`card-footer`,className:n(`flex items-center px-6 text-sm [.border-t]:pt-6`,e),...t})}export{i as Card,c as CardAction,l as CardContent,s as CardDescription,u as CardFooter,a as CardHeader,o as CardTitle};
+"use client";import{t as e}from"../heading-Bw3eo6IT.js";import{n as t}from"../paragraph-ESjXXqHU.js";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";function i({className:e,...t}){return r(`div`,{"data-slot":`card`,className:n(`flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card`,`transition-[box-shadow,opacity] duration-150 ease-in-out`,`data-[interactive=true]:cursor-pointer`,`data-[interactive=true]:hover:shadow-dropdown`,`data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2`,`data-[interactive=true]:active:opacity-90`,e),...t})}function a({className:e,...t}){return r(`div`,{"data-slot":`card-header`,className:n(`@container/card-header`,`grid auto-rows-min grid-rows-[auto_auto]`,`items-start gap-1.5 px-6 text-text-positive-strong`,`has-data-[slot=card-action]:grid-cols-[1fr_auto]`,`[.border-b]:pb-6`,e),...t})}function o({className:t,...i}){return r(`div`,{"data-slot":`card-title`,className:n(e({level:`h3`}),t),...i})}function s({className:e,...i}){return r(`div`,{"data-slot":`card-description`,className:n(t({variant:`muted`}),e),...i})}function c({className:e,...t}){return r(`div`,{"data-slot":`card-action`,className:n(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...t})}function l({className:e,...t}){return r(`div`,{"data-slot":`card-content`,className:n(`px-6 text-sm`,e),...t})}function u({className:e,...t}){return r(`div`,{"data-slot":`card-footer`,className:n(`flex items-center px-6 text-sm [.border-t]:pt-6`,e),...t})}export{i as Card,c as CardAction,l as CardContent,s as CardDescription,u as CardFooter,a as CardHeader,o as CardTitle};
 //# sourceMappingURL=card.js.map

package/dist/ui/carousel.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`);require(`../button.variants-4kw6plrv.cjs`);const t=require(`../button-C--DAN1D.cjs`);let n=require(`lucide-react`),r=require(`react`),i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`),o=require(`embla-carousel-react`);o=e.n(o);const s=(0,r.createContext)(null);function c(){let e=(0,r.use)(s);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function l({orientation:e=`horizontal`,opts:t,setApi:n,plugins:c,className:l,children:u,...d}){let[f,p]=(0,o.default)({...t,axis:e===`horizontal`?`x`:`y`},c),[m,h]=(0,r.useState)(!1),[g,_]=(0,r.useState)(!1),v=(0,r.useCallback)(e=>{e&&(h(e.canScrollPrev()),_(e.canScrollNext()))},[]),y=(0,r.useCallback)(()=>{p?.scrollPrev()},[p]),b=(0,r.useCallback)(()=>{p?.scrollNext()},[p]),x=(0,r.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,r.useEffect)(()=>{!p||!n||n(p)},[p,n]),(0,r.useEffect)(()=>{if(p)return v(p),p.on(`reInit`,v),p.on(`select`,v),()=>{p?.off(`select`,v)}},[p,v]),(0,a.jsx)(s.Provider,{value:{carouselRef:f,api:p,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:m,canScrollNext:g},children:(0,a.jsx)(`div`,{onKeyDownCapture:x,className:(0,i.cn)(`relative`,l),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...d,children:u})})}function u({className:e,...t}){let{carouselRef:n,orientation:r}=c();return(0,a.jsx)(`div`,{ref:n,className:`overflow-hidden`,"data-slot":`carousel-content`,children:(0,a.jsx)(`div`,{className:(0,i.cn)(`flex`,r===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function d({className:e,...t}){let{orientation:n}=c();return(0,a.jsx)(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:(0,i.cn)(`min-w-0 shrink-0 grow-0 basis-full`,n===`horizontal`?`pl-4`:`pt-4`,e),...t})}function f({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollPrev:u,canScrollPrev:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-previous`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowLeft,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Previous slide`})]})}function p({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollNext:u,canScrollNext:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-next`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowRight,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Next slide`})]})}exports.Carousel=l,exports.CarouselContent=u,exports.CarouselItem=d,exports.CarouselNext=p,exports.CarouselPrevious=f;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`react`),a=require(`@/components/ui/button`),o=require(`embla-carousel-react`);o=e.t(o);const s=(0,i.createContext)(null);function c(){let e=(0,i.use)(s);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function l({orientation:e=`horizontal`,opts:t,setApi:a,plugins:c,className:l,children:u,...d}){let[f,p]=(0,o.default)({...t,axis:e===`horizontal`?`x`:`y`},c),[m,h]=(0,i.useState)(!1),[g,_]=(0,i.useState)(!1),v=(0,i.useCallback)(e=>{e&&(h(e.canScrollPrev()),_(e.canScrollNext()))},[]),y=(0,i.useCallback)(()=>{p?.scrollPrev()},[p]),b=(0,i.useCallback)(()=>{p?.scrollNext()},[p]),x=(0,i.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,i.useEffect)(()=>{!p||!a||a(p)},[p,a]),(0,i.useEffect)(()=>{if(p)return v(p),p.on(`reInit`,v),p.on(`select`,v),()=>{p?.off(`select`,v)}},[p,v]),(0,r.jsx)(s.Provider,{value:{carouselRef:f,api:p,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:m,canScrollNext:g},children:(0,r.jsx)(`div`,{onKeyDownCapture:x,className:(0,n.cn)(`relative`,l),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...d,children:u})})}function u({className:e,...t}){let{carouselRef:i,orientation:a}=c();return(0,r.jsx)(`div`,{ref:i,className:`overflow-hidden`,"data-slot":`carousel-content`,children:(0,r.jsx)(`div`,{className:(0,n.cn)(`flex`,a===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function d({className:e,...t}){let{orientation:i}=c();return(0,r.jsx)(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:(0,n.cn)(`min-w-0 shrink-0 grow-0 basis-full`,i===`horizontal`?`pl-4`:`pt-4`,e),...t})}function f({className:e,variant:i=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollPrev:u,canScrollPrev:d}=c();return(0,r.jsxs)(a.Button,{"data-slot":`carousel-previous`,variant:i,size:o,className:(0,n.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,r.jsx)(t.ArrowLeft,{}),(0,r.jsx)(`span`,{className:`sr-only`,children:`Previous slide`})]})}function p({className:e,variant:i=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollNext:u,canScrollNext:d}=c();return(0,r.jsxs)(a.Button,{"data-slot":`carousel-next`,variant:i,size:o,className:(0,n.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,r.jsx)(t.ArrowRight,{}),(0,r.jsx)(`span`,{className:`sr-only`,children:`Next slide`})]})}exports.Carousel=l,exports.CarouselContent=u,exports.CarouselItem=d,exports.CarouselNext=p,exports.CarouselPrevious=f;
 //# sourceMappingURL=carousel.cjs.map

package/dist/ui/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":["api","Button","ArrowLeft","ArrowRight"],"sources":["../../packages/components/ui/carousel.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useState } from 'react';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { Button } from '@/components/ui/button';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = use(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\n/**\n * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.\n *\n * @example\n * ```tsx\n * import {\n *   Carousel, CarouselContent, CarouselItem,\n *   CarouselPrevious, CarouselNext,\n * } from '@customafk/lunas-ui/ui/carousel';\n *\n * <Carousel>\n *   <CarouselContent>\n *     <CarouselItem>Slide 1</CarouselItem>\n *     <CarouselItem>Slide 2</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />\n *   <CarouselNext />\n * </Carousel>\n * ```\n */\nfunction Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api?.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role=\"region\" aria-roledescription=\"carousel\" data-slot=\"carousel\" {...props}>\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** The scrollable track that holds all CarouselItem elements. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n    </div>\n  );\n}\n\n/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */\nfunction CarouselPrevious({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */\nfunction CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };\n"],"mappings":"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"}
+{"version":3,"file":"carousel.cjs","names":["api","Button","ArrowLeft","ArrowRight"],"sources":["../../packages/components/ui/carousel.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useState } from 'react';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { Button } from '@/components/ui/button';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = use(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\n/**\n * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.\n *\n * @example\n * ```tsx\n * import {\n *   Carousel, CarouselContent, CarouselItem,\n *   CarouselPrevious, CarouselNext,\n * } from '@customafk/lunas-ui/ui/carousel';\n *\n * <Carousel>\n *   <CarouselContent>\n *     <CarouselItem>Slide 1</CarouselItem>\n *     <CarouselItem>Slide 2</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />\n *   <CarouselNext />\n * </Carousel>\n * ```\n */\nfunction Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api?.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role=\"region\" aria-roledescription=\"carousel\" data-slot=\"carousel\" {...props}>\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** The scrollable track that holds all CarouselItem elements. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n    </div>\n  );\n}\n\n/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */\nfunction CarouselPrevious({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */\nfunction CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };\n"],"mappings":"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"}

package/dist/ui/carousel.d.cts

@@ -1,5 +1,5 @@
-import { t as Button } from "../button-CRSezlCi.cjs";
-import * as react73 from "react";
+import * as react72 from "react";
+import { Button } from "@/components/ui/button";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region packages/components/ui/carousel.d.ts
@@ -41,31 +41,31 @@ declare function Carousel({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps): react73.JSX.Element;
+}: React.ComponentProps<'div'> & CarouselProps): react72.JSX.Element;
 /** The scrollable track that holds all CarouselItem elements. */
 declare function CarouselContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react73.JSX.Element;
+}: React.ComponentProps<'div'>): react72.JSX.Element;
 /** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
 declare function CarouselItem({
   className,
   ...props
-}: React.ComponentProps<'div'>): react73.JSX.Element;
+}: React.ComponentProps<'div'>): react72.JSX.Element;
 /** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
 declare function CarouselPrevious({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react73.JSX.Element;
+}: React.ComponentProps<typeof Button>): react72.JSX.Element;
 /** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
 declare function CarouselNext({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react73.JSX.Element;
+}: React.ComponentProps<typeof Button>): react72.JSX.Element;
 //#endregion
 export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
 //# sourceMappingURL=carousel.d.cts.map

package/dist/ui/carousel.d.ts

@@ -1,5 +1,5 @@
-import { t as Button } from "../button-DloFFxkz.js";
-import * as react65 from "react";
+import * as react107 from "react";
+import { Button } from "@/components/ui/button";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region packages/components/ui/carousel.d.ts
@@ -41,31 +41,31 @@ declare function Carousel({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps): react65.JSX.Element;
+}: React.ComponentProps<'div'> & CarouselProps): react107.JSX.Element;
 /** The scrollable track that holds all CarouselItem elements. */
 declare function CarouselContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react65.JSX.Element;
+}: React.ComponentProps<'div'>): react107.JSX.Element;
 /** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
 declare function CarouselItem({
   className,
   ...props
-}: React.ComponentProps<'div'>): react65.JSX.Element;
+}: React.ComponentProps<'div'>): react107.JSX.Element;
 /** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
 declare function CarouselPrevious({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react65.JSX.Element;
+}: React.ComponentProps<typeof Button>): react107.JSX.Element;
 /** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
 declare function CarouselNext({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react65.JSX.Element;
+}: React.ComponentProps<typeof Button>): react107.JSX.Element;
 //#endregion
 export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
 //# sourceMappingURL=carousel.d.ts.map

package/dist/ui/carousel.js

@@ -1,2 +1,2 @@
-"use client";import"../button.variants-CoSpd71B.js";import{t as e}from"../button-LMMbL-uH.js";import{ArrowLeft as t,ArrowRight as n}from"lucide-react";import{createContext as r,use as i,useCallback as a,useEffect as o,useState as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import d from"embla-carousel-react";const f=r(null);function p(){let e=i(f);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function m({orientation:e=`horizontal`,opts:t,setApi:n,plugins:r,className:i,children:u,...p}){let[m,h]=d({...t,axis:e===`horizontal`?`x`:`y`},r),[g,_]=s(!1),[v,y]=s(!1),b=a(e=>{e&&(_(e.canScrollPrev()),y(e.canScrollNext()))},[]),x=a(()=>{h?.scrollPrev()},[h]),S=a(()=>{h?.scrollNext()},[h]),C=a(e=>{e.key===`ArrowLeft`?(e.preventDefault(),x()):e.key===`ArrowRight`&&(e.preventDefault(),S())},[x,S]);return o(()=>{!h||!n||n(h)},[h,n]),o(()=>{if(h)return b(h),h.on(`reInit`,b),h.on(`select`,b),()=>{h?.off(`select`,b)}},[h,b]),l(f.Provider,{value:{carouselRef:m,api:h,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:x,scrollNext:S,canScrollPrev:g,canScrollNext:v},children:l(`div`,{onKeyDownCapture:C,className:c(`relative`,i),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...p,children:u})})}function h({className:e,...t}){let{carouselRef:n,orientation:r}=p();return l(`div`,{ref:n,className:`overflow-hidden`,"data-slot":`carousel-content`,children:l(`div`,{className:c(`flex`,r===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function g({className:e,...t}){let{orientation:n}=p();return l(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:c(`min-w-0 shrink-0 grow-0 basis-full`,n===`horizontal`?`pl-4`:`pt-4`,e),...t})}function _({className:n,variant:r=`outline`,size:i=`icon`,...a}){let{orientation:o,scrollPrev:s,canScrollPrev:d}=p();return u(e,{"data-slot":`carousel-previous`,variant:r,size:i,className:c(`absolute size-8 rounded-full`,o===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,n),disabled:!d,onClick:s,...a,children:[l(t,{}),l(`span`,{className:`sr-only`,children:`Previous slide`})]})}function v({className:t,variant:r=`outline`,size:i=`icon`,...a}){let{orientation:o,scrollNext:s,canScrollNext:d}=p();return u(e,{"data-slot":`carousel-next`,variant:r,size:i,className:c(`absolute size-8 rounded-full`,o===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,t),disabled:!d,onClick:s,...a,children:[l(n,{}),l(`span`,{className:`sr-only`,children:`Next slide`})]})}export{m as Carousel,h as CarouselContent,g as CarouselItem,v as CarouselNext,_ as CarouselPrevious};
+"use client";import{ArrowLeft as e,ArrowRight as t}from"lucide-react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{createContext as a,use as o,useCallback as s,useEffect as c,useState as l}from"react";import{Button as u}from"@/components/ui/button";import d from"embla-carousel-react";const f=a(null);function p(){let e=o(f);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function m({orientation:e=`horizontal`,opts:t,setApi:i,plugins:a,className:o,children:u,...p}){let[m,h]=d({...t,axis:e===`horizontal`?`x`:`y`},a),[g,_]=l(!1),[v,y]=l(!1),b=s(e=>{e&&(_(e.canScrollPrev()),y(e.canScrollNext()))},[]),x=s(()=>{h?.scrollPrev()},[h]),S=s(()=>{h?.scrollNext()},[h]),C=s(e=>{e.key===`ArrowLeft`?(e.preventDefault(),x()):e.key===`ArrowRight`&&(e.preventDefault(),S())},[x,S]);return c(()=>{!h||!i||i(h)},[h,i]),c(()=>{if(h)return b(h),h.on(`reInit`,b),h.on(`select`,b),()=>{h?.off(`select`,b)}},[h,b]),r(f.Provider,{value:{carouselRef:m,api:h,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:x,scrollNext:S,canScrollPrev:g,canScrollNext:v},children:r(`div`,{onKeyDownCapture:C,className:n(`relative`,o),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...p,children:u})})}function h({className:e,...t}){let{carouselRef:i,orientation:a}=p();return r(`div`,{ref:i,className:`overflow-hidden`,"data-slot":`carousel-content`,children:r(`div`,{className:n(`flex`,a===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function g({className:e,...t}){let{orientation:i}=p();return r(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:n(`min-w-0 shrink-0 grow-0 basis-full`,i===`horizontal`?`pl-4`:`pt-4`,e),...t})}function _({className:t,variant:a=`outline`,size:o=`icon`,...s}){let{orientation:c,scrollPrev:l,canScrollPrev:d}=p();return i(u,{"data-slot":`carousel-previous`,variant:a,size:o,className:n(`absolute size-8 rounded-full`,c===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,t),disabled:!d,onClick:l,...s,children:[r(e,{}),r(`span`,{className:`sr-only`,children:`Previous slide`})]})}function v({className:e,variant:a=`outline`,size:o=`icon`,...s}){let{orientation:c,scrollNext:l,canScrollNext:d}=p();return i(u,{"data-slot":`carousel-next`,variant:a,size:o,className:n(`absolute size-8 rounded-full`,c===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:l,...s,children:[r(t,{}),r(`span`,{className:`sr-only`,children:`Next slide`})]})}export{m as Carousel,h as CarouselContent,g as CarouselItem,v as CarouselNext,_ as CarouselPrevious};
 //# sourceMappingURL=carousel.js.map

package/dist/ui/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":["api"],"sources":["../../packages/components/ui/carousel.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useState } from 'react';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { Button } from '@/components/ui/button';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = use(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\n/**\n * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.\n *\n * @example\n * ```tsx\n * import {\n *   Carousel, CarouselContent, CarouselItem,\n *   CarouselPrevious, CarouselNext,\n * } from '@customafk/lunas-ui/ui/carousel';\n *\n * <Carousel>\n *   <CarouselContent>\n *     <CarouselItem>Slide 1</CarouselItem>\n *     <CarouselItem>Slide 2</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />\n *   <CarouselNext />\n * </Carousel>\n * ```\n */\nfunction Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api?.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role=\"region\" aria-roledescription=\"carousel\" data-slot=\"carousel\" {...props}>\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** The scrollable track that holds all CarouselItem elements. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n    </div>\n  );\n}\n\n/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */\nfunction CarouselPrevious({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */\nfunction CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":["api"],"sources":["../../packages/components/ui/carousel.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useState } from 'react';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { Button } from '@/components/ui/button';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = use(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\n/**\n * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.\n *\n * @example\n * ```tsx\n * import {\n *   Carousel, CarouselContent, CarouselItem,\n *   CarouselPrevious, CarouselNext,\n * } from '@customafk/lunas-ui/ui/carousel';\n *\n * <Carousel>\n *   <CarouselContent>\n *     <CarouselItem>Slide 1</CarouselItem>\n *     <CarouselItem>Slide 2</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />\n *   <CarouselNext />\n * </Carousel>\n * ```\n */\nfunction Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on('reInit', onSelect);\n    api.on('select', onSelect);\n\n    return () => {\n      api?.off('select', onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role=\"region\" aria-roledescription=\"carousel\" data-slot=\"carousel\" {...props}>\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** The scrollable track that holds all CarouselItem elements. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n    </div>\n  );\n}\n\n/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */\nfunction CarouselPrevious({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */\nfunction CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };\n"],"mappings":"6VA+BA,MAAM,EAAkB,EAA2C,KAAK,CAExE,SAAS,GAAc,CACrB,IAAM,EAAU,EAAI,EAAgB,CAEpC,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,OAAO,EAuBT,SAAS,EAAS,CAAE,cAAc,aAAc,OAAM,SAAQ,UAAS,YAAW,WAAU,GAAG,GAAsD,CACnJ,GAAM,CAAC,EAAa,GAAO,EACzB,CACE,GAAG,EACH,KAAM,IAAgB,aAAe,IAAM,IAC5C,CACD,EACD,CACK,CAAC,EAAe,GAAoB,EAAS,GAAM,CACnD,CAAC,EAAe,GAAoB,EAAS,GAAM,CAEnD,EAAW,EAAa,GAAqB,CAC5CA,IACL,EAAiBA,EAAI,eAAe,CAAC,CACrC,EAAiBA,EAAI,eAAe,CAAC,GACpC,EAAE,CAAC,CAEA,EAAa,MAAkB,CACnC,GAAK,YAAY,EAChB,CAAC,EAAI,CAAC,CAEH,EAAa,MAAkB,CACnC,GAAK,YAAY,EAChB,CAAC,EAAI,CAAC,CAEH,EAAgB,EACnB,GAA+C,CAC1C,EAAM,MAAQ,aAChB,EAAM,gBAAgB,CACtB,GAAY,EACH,EAAM,MAAQ,eACvB,EAAM,gBAAgB,CACtB,GAAY,GAGhB,CAAC,EAAY,EAAW,CACzB,CAkBD,OAhBA,MAAgB,CACV,CAAC,GAAO,CAAC,GACb,EAAO,EAAI,EACV,CAAC,EAAK,EAAO,CAAC,CAEjB,MAAgB,CACT,KAKL,OAJA,EAAS,EAAI,CACb,EAAI,GAAG,SAAU,EAAS,CAC1B,EAAI,GAAG,SAAU,EAAS,KAEb,CACX,GAAK,IAAI,SAAU,EAAS,GAE7B,CAAC,EAAK,EAAS,CAAC,CAGjB,EAAC,EAAgB,SAAA,CACf,MAAO,CACL,cACK,MACL,OACA,YAAa,IAAgB,GAAM,OAAS,IAAM,WAAa,cAC/D,aACA,aACA,gBACA,gBACD,UAED,EAAC,MAAA,CAAI,iBAAkB,EAAe,UAAW,EAAG,WAAY,EAAU,CAAE,KAAK,SAAS,uBAAqB,WAAW,YAAU,WAAW,GAAI,EAChJ,YACG,EACmB,CAK/B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAsC,CAC7E,GAAM,CAAE,cAAa,eAAgB,GAAa,CAElD,OACE,EAAC,MAAA,CAAI,IAAK,EAAa,UAAU,kBAAkB,YAAU,4BAC3D,EAAC,MAAA,CAAI,UAAW,EAAG,OAAQ,IAAgB,aAAe,QAAU,iBAAkB,EAAU,CAAE,GAAI,GAAS,EAC3G,CAKV,SAAS,EAAa,CAAE,YAAW,GAAG,GAAsC,CAC1E,GAAM,CAAE,eAAgB,GAAa,CAErC,OACE,EAAC,MAAA,CACC,KAAK,QACL,uBAAqB,QACrB,YAAU,gBACV,UAAW,EAAG,qCAAsC,IAAgB,aAAe,OAAS,OAAQ,EAAU,CAC9G,GAAI,GACJ,CAKN,SAAS,EAAiB,CAAE,YAAW,UAAU,UAAW,OAAO,OAAQ,GAAG,GAA8C,CAC1H,GAAM,CAAE,cAAa,aAAY,iBAAkB,GAAa,CAEhE,OACE,EAAC,EAAA,CACC,YAAU,oBACD,UACH,OACN,UAAW,EACT,+BACA,IAAgB,aAAe,oCAAsC,8CACrE,EACD,CACD,SAAU,CAAC,EACX,QAAS,EACT,GAAI,YAEJ,EAAC,EAAA,EAAA,CAAY,CACb,EAAC,OAAA,CAAK,UAAU,mBAAU,kBAAqB,CAAA,EACxC,CAKb,SAAS,EAAa,CAAE,YAAW,UAAU,UAAW,OAAO,OAAQ,GAAG,GAA8C,CACtH,GAAM,CAAE,cAAa,aAAY,iBAAkB,GAAa,CAEhE,OACE,EAAC,EAAA,CACC,YAAU,gBACD,UACH,OACN,UAAW,EACT,+BACA,IAAgB,aAAe,qCAAuC,iDACtE,EACD,CACD,SAAU,CAAC,EACX,QAAS,EACT,GAAI,YAEJ,EAAC,EAAA,EAAA,CAAa,CACd,EAAC,OAAA,CAAK,UAAU,mBAAU,cAAiB,CAAA,EACpC"}

package/dist/ui/checkbox.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../checkbox-Dsq-MSbH.cjs`);exports.Checkbox=e.t;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`radix-ui`);function a({className:e,...a}){return(0,r.jsx)(i.Checkbox.Root,{"data-slot":`checkbox`,className:(0,n.cn)(`peer border-border`,`size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-all`,`disabled:cursor-not-allowed disabled:opacity-50`,`focus-visible:border-primary-strong`,`focus-visible:ring-3`,`focus-visible:ring-primary-weak`,`aria-invalid:border-danger aria-invalid:ring-danger-weak`,`aria-readonly:bg-muted-muted`,`aria-readonly:pointer-events-none`,`data-[state=checked]:aria-readonly:bg-muted-muted`,`data-[state=checked]:aria-readonly:border-border`,`data-[state=checked]:aria-readonly:text-text-positive-strong`,`data-[state=checked]:bg-primary`,`data-[state=checked]:border-primary-strong`,`data-[state=checked]:text-text-negative-strong`,e),...a,children:(0,r.jsx)(i.Checkbox.Indicator,{"data-slot":`checkbox-indicator`,className:`flex items-center justify-center text-current transition-none`,children:(0,r.jsx)(t.CheckIcon,{size:14})})})}exports.Checkbox=a;
+//# sourceMappingURL=checkbox.cjs.map

package/dist/ui/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","names":["CheckboxPrimitive","CheckIcon"],"sources":["../../packages/components/ui/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\n\n/**\n * Accessible checkbox input built on Radix UI's Checkbox primitive with checked, indeterminate, focus, invalid, and read-only states.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@customafk/lunas-ui/ui/checkbox';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n * </div>\n * ```\n */\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer border-border',\n        'size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-all',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-3',\n        'focus-visible:ring-primary-weak',\n        'aria-invalid:border-danger aria-invalid:ring-danger-weak',\n        'aria-readonly:bg-muted-muted',\n        'aria-readonly:pointer-events-none',\n        'data-[state=checked]:aria-readonly:bg-muted-muted',\n        'data-[state=checked]:aria-readonly:border-border',\n        'data-[state=checked]:aria-readonly:text-text-positive-strong',\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:border-primary-strong',\n        'data-[state=checked]:text-text-negative-strong',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"flex items-center justify-center text-current transition-none\">\n        <CheckIcon size={14} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":"qLAsBA,SAAS,EAAS,CAAE,YAAW,GAAG,GAA8D,CAC9F,OACE,EAAA,EAAA,KAACA,EAAAA,SAAkB,KAAA,CACjB,YAAU,WACV,WAAA,EAAA,EAAA,IACE,qBACA,sFACA,kDACA,sCACA,uBACA,kCACA,2DACA,+BACA,oCACA,oDACA,mDACA,+DACA,kCACA,6CACA,iDACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACA,EAAAA,SAAkB,UAAA,CAAU,YAAU,qBAAqB,UAAU,0EACpE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,KAAM,GAAA,CAAM,EACK,EACP"}

package/dist/ui/checkbox.d.cts

@@ -1,4 +1,4 @@
-import * as react87 from "react";
+import * as react71 from "react";
 import { Checkbox as Checkbox$1 } from "radix-ui";
 
 //#region packages/components/ui/checkbox.d.ts
@@ -20,7 +20,7 @@ import { Checkbox as Checkbox$1 } from "radix-ui";
 declare function Checkbox({
   className,
   ...props
-}: React.ComponentProps<typeof Checkbox$1.Root>): react87.JSX.Element;
+}: React.ComponentProps<typeof Checkbox$1.Root>): react71.JSX.Element;
 //#endregion
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.cts.map

package/dist/ui/checkbox.js

@@ -1 +1,2 @@
-"use client";import{t as e}from"../checkbox-DLGDoU-1.js";export{e as Checkbox};
+"use client";import{CheckIcon as e}from"lucide-react";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n}from"react/jsx-runtime";import{Checkbox as r}from"radix-ui";function i({className:i,...a}){return n(r.Root,{"data-slot":`checkbox`,className:t(`peer border-border`,`size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-all`,`disabled:cursor-not-allowed disabled:opacity-50`,`focus-visible:border-primary-strong`,`focus-visible:ring-3`,`focus-visible:ring-primary-weak`,`aria-invalid:border-danger aria-invalid:ring-danger-weak`,`aria-readonly:bg-muted-muted`,`aria-readonly:pointer-events-none`,`data-[state=checked]:aria-readonly:bg-muted-muted`,`data-[state=checked]:aria-readonly:border-border`,`data-[state=checked]:aria-readonly:text-text-positive-strong`,`data-[state=checked]:bg-primary`,`data-[state=checked]:border-primary-strong`,`data-[state=checked]:text-text-negative-strong`,i),...a,children:n(r.Indicator,{"data-slot":`checkbox-indicator`,className:`flex items-center justify-center text-current transition-none`,children:n(e,{size:14})})})}export{i as Checkbox};
+//# sourceMappingURL=checkbox.js.map

package/dist/ui/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive"],"sources":["../../packages/components/ui/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\n\n/**\n * Accessible checkbox input built on Radix UI's Checkbox primitive with checked, indeterminate, focus, invalid, and read-only states.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@customafk/lunas-ui/ui/checkbox';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n * </div>\n * ```\n */\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer border-border',\n        'size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-all',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-3',\n        'focus-visible:ring-primary-weak',\n        'aria-invalid:border-danger aria-invalid:ring-danger-weak',\n        'aria-readonly:bg-muted-muted',\n        'aria-readonly:pointer-events-none',\n        'data-[state=checked]:aria-readonly:bg-muted-muted',\n        'data-[state=checked]:aria-readonly:border-border',\n        'data-[state=checked]:aria-readonly:text-text-positive-strong',\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:border-primary-strong',\n        'data-[state=checked]:text-text-negative-strong',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"flex items-center justify-center text-current transition-none\">\n        <CheckIcon size={14} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":"sLAsBA,SAAS,EAAS,CAAE,YAAW,GAAG,GAA8D,CAC9F,OACE,EAACA,EAAkB,KAAA,CACjB,YAAU,WACV,UAAW,EACT,qBACA,sFACA,kDACA,sCACA,uBACA,kCACA,2DACA,+BACA,oCACA,oDACA,mDACA,+DACA,kCACA,6CACA,iDACA,EACD,CACD,GAAI,WAEJ,EAACA,EAAkB,UAAA,CAAU,YAAU,qBAAqB,UAAU,yEACpE,EAAC,EAAA,CAAU,KAAM,GAAA,CAAM,EACK,EACP"}

package/dist/ui/collapsible.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`);let t=require(`react/jsx-runtime`),n=require(`radix-ui`);function r({...e}){return(0,t.jsx)(n.Collapsible.Root,{"data-slot":`collapsible`,...e})}function i({...e}){return(0,t.jsx)(n.Collapsible.CollapsibleTrigger,{"data-slot":`collapsible-trigger`,...e})}function a({...e}){return(0,t.jsx)(n.Collapsible.CollapsibleContent,{"data-slot":`collapsible-content`,...e})}exports.Collapsible=r,exports.CollapsibleContent=a,exports.CollapsibleTrigger=i;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`radix-ui`);function r({...e}){return(0,t.jsx)(n.Collapsible.Root,{"data-slot":`collapsible`,...e})}function i({...e}){return(0,t.jsx)(n.Collapsible.CollapsibleTrigger,{"data-slot":`collapsible-trigger`,...e})}function a({...e}){return(0,t.jsx)(n.Collapsible.CollapsibleContent,{"data-slot":`collapsible-content`,...e})}exports.Collapsible=r,exports.CollapsibleContent=a,exports.CollapsibleTrigger=i;
 //# sourceMappingURL=collapsible.cjs.map

package/dist/ui/collapsible.d.cts

@@ -1,4 +1,4 @@
-import * as react94 from "react";
+import * as react68 from "react";
 import { Collapsible as Collapsible$1 } from "radix-ui";
 
 //#region packages/components/ui/collapsible.d.ts
@@ -20,15 +20,15 @@ import { Collapsible as Collapsible$1 } from "radix-ui";
  */
 declare function Collapsible({
   ...props
-}: React.ComponentProps<typeof Collapsible$1.Root>): react94.JSX.Element;
+}: React.ComponentProps<typeof Collapsible$1.Root>): react68.JSX.Element;
 /** Button or element that expands or collapses the CollapsibleContent. */
 declare function CollapsibleTrigger({
   ...props
-}: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react94.JSX.Element;
+}: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react68.JSX.Element;
 /** The section that is shown or hidden based on the Collapsible open state. */
 declare function CollapsibleContent({
   ...props
-}: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react94.JSX.Element;
+}: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react68.JSX.Element;
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
 //# sourceMappingURL=collapsible.d.cts.map

package/dist/ui/command.cjs

@@ -1 +1,2 @@
-"use client";require(`../heading-tGTqk3pA.cjs`),require(`../paragraph-DvTZvbzw.cjs`),require(`../close-Dlo1bI8x.cjs`),require(`../dialog-BigPrWIj.cjs`);const e=require(`../command-CsP8a1Un.cjs`);exports.Command=e.t,exports.CommandDialog=e.n,exports.CommandEmpty=e.r,exports.CommandGroup=e.i,exports.CommandInput=e.a,exports.CommandItem=e.o,exports.CommandList=e.s,exports.CommandSeparator=e.c,exports.CommandShortcut=e.l;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`@/components/ui/dialog`),a=require(`cmdk`);function o({className:e,...t}){return(0,r.jsx)(a.Command,{"data-slot":`command`,className:(0,n.cn)(`flex size-full flex-col overflow-hidden rounded-md border-border-weak bg-popover text-text-positive`,e),...t})}function s({title:e=`Command Palette`,description:t=`Search for a command to run...`,children:a,className:s,showCloseButton:c=!0,...l}){return(0,r.jsxs)(i.Dialog,{...l,children:[(0,r.jsxs)(i.DialogHeader,{className:`sr-only`,children:[(0,r.jsx)(i.DialogTitle,{children:e}),(0,r.jsx)(i.DialogDescription,{children:t})]}),(0,r.jsx)(i.DialogContent,{className:(0,n.cn)(`overflow-hidden p-0`,s),showCloseButton:c,children:(0,r.jsx)(o,{className:(0,n.cn)(`**:[[cmdk-group-heading]]:text-text-positive-muted`,`**:data-[slot=command-input-wrapper]:h-12`,`**:[[cmdk-group-heading]]:px-2`,`**:[[cmdk-group-heading]]:font-medium`,`**:[[cmdk-group]]:px-2`,`[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0`,`[&_[cmdk-input-wrapper]_svg]:size-5`,`**:[[cmdk-input]]:h-12`,`**:[[cmdk-item]]:px-2`,`**:[[cmdk-item]]:py-3`,`[&_[cmdk-item]_svg]:size-5`),children:a})})]})}function c({className:e,...i}){return(0,r.jsxs)(`div`,{"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-border-weak border-b px-3`,children:[(0,r.jsx)(t.SearchIcon,{className:`size-4 shrink-0 opacity-50`}),(0,r.jsx)(a.Command.Input,{"data-slot":`command-input`,className:(0,n.cn)(`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden`,`placeholder:text-text-positive-muted`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,e),...i})]})}function l({className:e,...t}){return(0,r.jsx)(a.Command.List,{"data-slot":`command-list`,className:(0,n.cn)(`max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden`,e),...t})}function u({...e}){return(0,r.jsx)(a.Command.Empty,{"data-slot":`command-empty`,className:`py-6 text-center text-sm`,...e})}function d({className:e,...t}){return(0,r.jsx)(a.Command.Group,{"data-slot":`command-group`,className:(0,n.cn)(`text-text-positive`,`overflow-hidden p-1`,`**:[[cmdk-group-heading]]:text-text-positive-weak`,`**:[[cmdk-group-heading]]:px-2`,`**:[[cmdk-group-heading]]:py-1.5`,`**:[[cmdk-group-heading]]:text-xs`,`**:[[cmdk-group-heading]]:font-medium`,e),...t})}function f({className:e,...t}){return(0,r.jsx)(a.Command.Separator,{"data-slot":`command-separator`,className:(0,n.cn)(`-mx-1 h-px bg-border-weak`,e),...t})}function p({className:e,...t}){return(0,r.jsx)(a.Command.Item,{"data-slot":`command-item`,className:(0,n.cn)(`relative flex cursor-pointer select-none items-center gap-2 rounded-md p-2.5 text-sm outline-hidden transition-all duration-300`,`active:ring-border`,`active:opacity-60`,`active:ring-4`,`data-[selected=true]:bg-muted-muted`,`data-[selected=true]:text-text-positive-strong`,`data-[disabled=true]:opacity-50`,`data-[disabled=true]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg]:pointer-events-none`,`[&_svg:not([class*='size-'])]:size-4`,`[&_svg:not([class*='text-'])]:text-text-positive-muted`,e),...t})}function m({className:e,...t}){return(0,r.jsx)(`span`,{"data-slot":`command-shortcut`,className:(0,n.cn)(`ml-auto text-text-positive-muted text-xs tracking-widest`,e),...t})}exports.Command=o,exports.CommandDialog=s,exports.CommandEmpty=u,exports.CommandGroup=d,exports.CommandInput=c,exports.CommandItem=p,exports.CommandList=l,exports.CommandSeparator=f,exports.CommandShortcut=m;
+//# sourceMappingURL=command.cjs.map

package/dist/ui/command.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.cjs","names":["CommandPrimitive","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","SearchIcon"],"sources":["../../packages/components/ui/command.tsx"],"sourcesContent":["'use client';\n\nimport { SearchIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';\n\nimport { Command as CommandPrimitive } from 'cmdk';\n\n/**\n * A cmdk-powered command palette for searching and executing commands.\n *\n * @example\n * ```tsx\n * import {\n *   Command, CommandInput, CommandList, CommandEmpty,\n *   CommandGroup, CommandItem,\n * } from '@customafk/lunas-ui/ui/command';\n *\n * <Command>\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>No results found.</CommandEmpty>\n *     <CommandGroup heading=\"Suggestions\">\n *       <CommandItem>Calendar</CommandItem>\n *       <CommandItem>Search</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n * ```\n */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('flex size-full flex-col overflow-hidden rounded-md border-border-weak bg-popover text-text-positive', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * A Command palette rendered inside a Dialog overlay.\n *\n * @param title - Accessible title for the dialog (screen-reader only).\n * @param description - Accessible description for the dialog (screen-reader only).\n * @param showCloseButton - Whether to show the built-in close button on the dialog.\n */\nfunction CommandDialog({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>\n        <Command\n          className={cn(\n            '**:[[cmdk-group-heading]]:text-text-positive-muted',\n            '**:data-[slot=command-input-wrapper]:h-12',\n            '**:[[cmdk-group-heading]]:px-2',\n            '**:[[cmdk-group-heading]]:font-medium',\n            '**:[[cmdk-group]]:px-2',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0',\n            '[&_[cmdk-input-wrapper]_svg]:size-5',\n            '**:[[cmdk-input]]:h-12',\n            '**:[[cmdk-item]]:px-2',\n            '**:[[cmdk-item]]:py-3',\n            '[&_[cmdk-item]_svg]:size-5'\n          )}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** Search input with a leading search icon that filters CommandItems in real time. */\nfunction CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-border-weak border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden',\n          'placeholder:text-text-positive-muted',\n          'disabled:cursor-not-allowed',\n          'disabled:opacity-50',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable list that renders filtered CommandGroups and CommandItems. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return <CommandPrimitive.List data-slot=\"command-list\" className={cn('max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden', className)} {...props} />;\n}\n\n/** Fallback message displayed when no CommandItems match the current search query. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className=\"py-6 text-center text-sm\" {...props} />;\n}\n\n/** Groups CommandItems under an optional heading label. */\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'text-text-positive',\n        'overflow-hidden p-1',\n        '**:[[cmdk-group-heading]]:text-text-positive-weak',\n        '**:[[cmdk-group-heading]]:px-2',\n        '**:[[cmdk-group-heading]]:py-1.5',\n        '**:[[cmdk-group-heading]]:text-xs',\n        '**:[[cmdk-group-heading]]:font-medium',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal dividing line between groups in a CommandList. */\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn('-mx-1 h-px bg-border-weak', className)} {...props} />;\n}\n\n/** A selectable row inside a CommandGroup that is highlighted when active or hovered. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        'relative flex cursor-pointer select-none items-center gap-2 rounded-md p-2.5 text-sm outline-hidden transition-all duration-300',\n        'active:ring-border',\n        'active:opacity-60',\n        'active:ring-4',\n        'data-[selected=true]:bg-muted-muted',\n        'data-[selected=true]:text-text-positive-strong',\n        'data-[disabled=true]:opacity-50',\n        'data-[disabled=true]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        '[&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        \"[&_svg:not([class*='text-'])]:text-text-positive-muted\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span data-slot=\"command-shortcut\" className={cn('ml-auto text-text-positive-muted text-xs tracking-widest', className)} {...props} />;\n}\n\nexport { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };\n"],"mappings":"qNAgCA,SAAS,EAAQ,CAAE,YAAW,GAAG,GAAwD,CACvF,OACE,EAAA,EAAA,KAACA,EAAAA,QAAAA,CACC,YAAU,UACV,WAAA,EAAA,EAAA,IAAc,sGAAuG,EAAU,CAC/H,GAAI,GACJ,CAWN,SAAS,EAAc,CACrB,QAAQ,kBACR,cAAc,iCACd,WACA,YACA,kBAAkB,GAClB,GAAG,GAMF,CACD,OACE,EAAA,EAAA,MAACC,EAAAA,OAAAA,CAAO,GAAI,aACV,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAa,UAAU,qBACtB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,SAAa,EAAA,CAAoB,EAClC,EAAA,EAAA,KAACC,EAAAA,kBAAAA,CAAAA,SAAmB,EAAA,CAAgC,CAAA,EACvC,EACf,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAmB,4BAC/E,EAAA,EAAA,KAAC,EAAA,CACC,WAAA,EAAA,EAAA,IACE,qDACA,4CACA,iCACA,wCACA,yBACA,oDACA,sCACA,yBACA,wBACA,wBACA,6BACD,CAEA,YACO,EACI,CAAA,EACT,CAKb,SAAS,EAAa,CAAE,YAAW,GAAG,GAA8D,CAClG,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,YAAU,wBAAwB,UAAU,0EAC/C,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,UAAU,6BAAA,CAA+B,EACrD,EAAA,EAAA,KAACN,EAAAA,QAAiB,MAAA,CAChB,YAAU,gBACV,WAAA,EAAA,EAAA,IACE,yEACA,uCACA,8BACA,sBACA,EACD,CACD,GAAI,GACJ,CAAA,EACE,CAKV,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAAA,EAAA,KAACA,EAAAA,QAAiB,KAAA,CAAK,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,yDAA0D,EAAU,CAAE,GAAI,GAAS,CAI1J,SAAS,EAAa,CAAE,GAAG,GAA8D,CACvF,OAAO,EAAA,EAAA,KAACA,EAAAA,QAAiB,MAAA,CAAM,YAAU,gBAAgB,UAAU,2BAA2B,GAAI,GAAS,CAI7G,SAAS,EAAa,CAAE,YAAW,GAAG,GAA8D,CAClG,OACE,EAAA,EAAA,KAACA,EAAAA,QAAiB,MAAA,CAChB,YAAU,gBACV,WAAA,EAAA,EAAA,IACE,qBACA,sBACA,oDACA,iCACA,mCACA,oCACA,wCACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAkE,CAC1G,OAAO,EAAA,EAAA,KAACA,EAAAA,QAAiB,UAAA,CAAU,YAAU,oBAAoB,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,CAAE,GAAI,GAAS,CAIvI,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OACE,EAAA,EAAA,KAACA,EAAAA,QAAiB,KAAA,CAChB,YAAU,eACV,WAAA,EAAA,EAAA,IACE,kIACA,qBACA,oBACA,gBACA,sCACA,iDACA,kCACA,2CACA,mBACA,8BACA,uCACA,yDACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAuC,CAC9E,OAAO,EAAA,EAAA,KAAC,OAAA,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,IAAc,2DAA4D,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/command.d.cts

@@ -1,5 +1,5 @@
-import { t as Dialog } from "../dialog-DAl7wicp.cjs";
-import * as react97 from "react";
+import * as react91 from "react";
+import { Dialog } from "@/components/ui/dialog";
 import { Command as Command$1 } from "cmdk";
 
 //#region packages/components/ui/command.d.ts
@@ -29,7 +29,7 @@ import { Command as Command$1 } from "cmdk";
 declare function Command({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1>): react91.JSX.Element;
 /**
  * A Command palette rendered inside a Dialog overlay.
  *
@@ -49,41 +49,41 @@ declare function CommandDialog({
   description?: string;
   className?: string;
   showCloseButton?: boolean;
-}): react97.JSX.Element;
+}): react91.JSX.Element;
 /** Search input with a leading search icon that filters CommandItems in real time. */
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Input>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Input>): react91.JSX.Element;
 /** Scrollable list that renders filtered CommandGroups and CommandItems. */
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.List>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.List>): react91.JSX.Element;
 /** Fallback message displayed when no CommandItems match the current search query. */
 declare function CommandEmpty({
   ...props
-}: React.ComponentProps<typeof Command$1.Empty>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Empty>): react91.JSX.Element;
 /** Groups CommandItems under an optional heading label. */
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Group>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Group>): react91.JSX.Element;
 /** Horizontal dividing line between groups in a CommandList. */
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Separator>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Separator>): react91.JSX.Element;
 /** A selectable row inside a CommandGroup that is highlighted when active or hovered. */
 declare function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Item>): react97.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Item>): react91.JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */
 declare function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react97.JSX.Element;
+}: React.ComponentProps<'span'>): react91.JSX.Element;
 //#endregion
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
 //# sourceMappingURL=command.d.cts.map

package/dist/ui/command.d.ts

@@ -1,5 +1,5 @@
-import { t as Dialog } from "../dialog-BXkm3_Bk.js";
-import * as react201 from "react";
+import * as react98 from "react";
+import { Dialog } from "@/components/ui/dialog";
 import { Command as Command$1 } from "cmdk";
 
 //#region packages/components/ui/command.d.ts
@@ -29,7 +29,7 @@ import { Command as Command$1 } from "cmdk";
 declare function Command({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1>): react98.JSX.Element;
 /**
  * A Command palette rendered inside a Dialog overlay.
  *
@@ -49,41 +49,41 @@ declare function CommandDialog({
   description?: string;
   className?: string;
   showCloseButton?: boolean;
-}): react201.JSX.Element;
+}): react98.JSX.Element;
 /** Search input with a leading search icon that filters CommandItems in real time. */
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Input>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Input>): react98.JSX.Element;
 /** Scrollable list that renders filtered CommandGroups and CommandItems. */
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.List>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.List>): react98.JSX.Element;
 /** Fallback message displayed when no CommandItems match the current search query. */
 declare function CommandEmpty({
   ...props
-}: React.ComponentProps<typeof Command$1.Empty>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Empty>): react98.JSX.Element;
 /** Groups CommandItems under an optional heading label. */
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Group>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Group>): react98.JSX.Element;
 /** Horizontal dividing line between groups in a CommandList. */
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Separator>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Separator>): react98.JSX.Element;
 /** A selectable row inside a CommandGroup that is highlighted when active or hovered. */
 declare function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Item>): react201.JSX.Element;
+}: React.ComponentProps<typeof Command$1.Item>): react98.JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */
 declare function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react201.JSX.Element;
+}: React.ComponentProps<'span'>): react98.JSX.Element;
 //#endregion
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
 //# sourceMappingURL=command.d.ts.map