@boxcustodia/library 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/components/calendar/calendar.cjs.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),w=require("date-fns/locale"),d=require("lucide-react"),C=require("react-day-picker"),f=require("../select/select.cjs.js"),o=require("../../lib/cn.cjs.js"),b=new Date().getFullYear(),N=new Date(b-100,0),j=new Date(b+100,11);function D({options:l=[],value:c,onChange:r}){const i=l.map(e=>({label:e.label??"",value:e.value??0})),u=i.find(e=>e.value===Number(c))??null;return s.jsx(f.Select,{items:i,value:u,icon:s.jsx(d.ChevronDownIcon,{className:f.selectTriggerIconClassName}),"aria-invalid":!1,className:"py-1 h-7 border-none font-medium! w-fit! [&>span]:capitalize",getLabel:e=>e.label,getId:e=>String(e.value),onValueChange:e=>{!r||e===null||r({target:{value:String(e.value)}})}})}const p="relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";function k({className:l,classNames:c,showOutsideDays:r=!0,components:i,mode:u="single",captionLayout:e="dropdown",startMonth:x=N,endMonth:v=j,...h}){const g={button_next:p,button_previous:p,caption_label:"text-base sm:text-sm font-medium flex items-center gap-2 h-full",day:"size-(--cell-size) text-sm py-px",day_button:o.cn(p,"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"),dropdown:"absolute bg-popover inset-0 opacity-0",dropdown_root:"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1",dropdowns:"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium",hidden:"invisible",month:"w-full",month_caption:"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2",months:"relative flex flex-col sm:flex-row gap-2",nav:"absolute top-0 flex w-full justify-between z-1",outside:"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",range_end:"range-end",range_middle:"range-middle",range_start:"range-start",today:"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",week_number:"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",weekday:"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72"},z=Object.keys(g).reduce((t,n)=>{const a=c?.[n],m=g[n];return t[n]=a?o.cn(m,a):m,t},{...g}),y={...{Dropdown:D,Chevron:({className:t,orientation:n,...a})=>n==="left"?s.jsx(d.ChevronLeftIcon,{className:o.cn(t,"rtl:rotate-180"),...a,"aria-hidden":"true"}):n==="right"?s.jsx(d.ChevronRightIcon,{className:o.cn(t,"rtl:rotate-180"),...a,"aria-hidden":"true"}):s.jsx(d.ChevronDownIcon,{className:t,...a,"aria-hidden":"true"})},...i},_={className:o.cn("w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]","rounded-xl border bg-background p-3","in-data-[slot=popover-popup]:rounded-none in-data-[slot=popover-popup]:border-0 in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:p-0",l),classNames:z,components:y,"data-slot":"calendar",formatters:{formatMonthDropdown:t=>t.toLocaleString("es",{month:"short"})},locale:w.es,weekStartsOn:1,captionLayout:e,startMonth:x,endMonth:v,mode:u,showOutsideDays:r,...h};return s.jsx(C.DayPicker,{..._})}exports.Calendar=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),w=require("date-fns/locale"),d=require("lucide-react"),C=require("react-day-picker"),f=require("../select/select.cjs.js"),o=require("../../lib/cn.cjs.js"),b=new Date().getFullYear(),N=new Date(b-100,0),j=new Date(b+100,11);function D({options:l=[],value:c,onChange:r}){const i=l.map(e=>({label:e.label??"",value:e.value??0})),u=i.find(e=>e.value===Number(c))??null;return s.jsx(f.Select,{items:i,value:u,icon:s.jsx(d.ChevronDownIcon,{className:f.selectTriggerIconClassName}),"aria-invalid":!1,className:"py-1 h-7 border-none font-medium! w-fit! [&>span]:capitalize",getLabel:e=>e.label,getId:e=>String(e.value),onValueChange:e=>{!r||e===null||r({target:{value:String(e.value)}})}})}const m="relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";function k({className:l,classNames:c,showOutsideDays:r=!0,components:i,mode:u="single",captionLayout:e="dropdown",startMonth:x=N,endMonth:v=j,...h}){const g={button_next:m,button_previous:m,caption_label:"text-base sm:text-sm font-medium flex items-center gap-2 h-full",day:"size-(--cell-size) text-sm py-px",day_button:o.cn(m,"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"),dropdown:"absolute bg-popover inset-0 opacity-0",dropdown_root:"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1",dropdowns:"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium",hidden:"invisible",month:"w-full",month_caption:"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2",months:"relative flex flex-col sm:flex-row gap-2",nav:"absolute top-0 flex w-full justify-between z-1",outside:"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",range_end:"range-end",range_middle:"range-middle",range_start:"range-start",today:"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",week_number:"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",weekday:"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72"},z=Object.keys(g).reduce((t,n)=>{const a=c?.[n],p=g[n];return t[n]=a?o.cn(p,a):p,t},{...g}),y={...{Dropdown:D,Chevron:({className:t,orientation:n,...a})=>n==="left"?s.jsx(d.ChevronLeftIcon,{className:o.cn(t,"rtl:rotate-180"),...a,"aria-hidden":"true"}):n==="right"?s.jsx(d.ChevronRightIcon,{className:o.cn(t,"rtl:rotate-180"),...a,"aria-hidden":"true"}):s.jsx(d.ChevronDownIcon,{className:t,...a,"aria-hidden":"true"})},...i},_={className:o.cn("w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]","rounded-xl border bg-background","in-data-[slot=popover-popup]:rounded-none in-data-[slot=popover-popup]:border-0 in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:p-0",l),classNames:z,components:y,"data-slot":"calendar",formatters:{formatMonthDropdown:t=>t.toLocaleString("es",{month:"short"})},locale:w.es,weekStartsOn:1,captionLayout:e,startMonth:x,endMonth:v,mode:u,showOutsideDays:r,...h};return s.jsx(C.DayPicker,{..._})}exports.Calendar=k;

package/dist/components/calendar/calendar.es.js

@@ -107,7 +107,7 @@ function P({
       // Standalone container surface. Inside a popover (DatePicker) the
       // popup already paints border + background + padding, so strip ours
       // to avoid a double border.
-      "rounded-xl border bg-background p-3",
+      "rounded-xl border bg-background",
       "in-data-[slot=popover-popup]:rounded-none in-data-[slot=popover-popup]:border-0 in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:p-0",
       d
     ),

package/dist/components/popover/popover.cjs.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("@base-ui/react/popover"),s=require("../../lib/cn.cjs.js"),y=t.Popover.createHandle,P=t.Popover.Root;function x({className:e,children:r,...a}){return o.jsx(t.Popover.Trigger,{className:e,"data-slot":"popover-trigger",...a,children:r})}function h({children:e,className:r,side:a="bottom",align:i="center",sideOffset:d=4,alignOffset:l=0,tooltipStyle:n=!1,matchTriggerWidth:p=!1,anchor:c,portalProps:v,viewportClassName:u,...g}){return o.jsx(t.Popover.Portal,{...v,children:o.jsx(t.Popover.Positioner,{align:i,alignOffset:l,anchor:c,className:"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none","data-slot":"popover-positioner",side:a,sideOffset:d,style:p?{width:"var(--anchor-width)"}:void 0,children:o.jsx(t.Popover.Popup,{className:s.cn("relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",p?"w-full":"w-(--popup-width,auto) max-w-72",n&&"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",r),"data-slot":"popover-popup",...g,children:o.jsx(t.Popover.Viewport,{className:s.cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",n?"py-1 [--viewport-inline-padding:--spacing(2)]":"not-data-transitioning:overflow-y-auto",u),"data-slot":"popover-viewport",children:e})})})})}function j({...e}){return o.jsx(t.Popover.Close,{"data-slot":"popover-close",...e})}function w({className:e,...r}){return o.jsx(t.Popover.Title,{className:s.cn("font-semibold text-lg leading-none",e),"data-slot":"popover-title",...r})}function f({className:e,...r}){return o.jsx(t.Popover.Description,{className:s.cn("text-muted-foreground text-sm",e),"data-slot":"popover-description",...r})}function C({trigger:e,children:r,title:a,description:i,side:d,align:l,sideOffset:n,alignOffset:p,tooltipStyle:c,matchTriggerWidth:v,anchor:u,className:g,classNames:m,...b}){return o.jsxs(P,{...b,children:[e!==void 0&&o.jsx(x,{render:e}),o.jsxs(h,{side:d,align:l,sideOffset:n,alignOffset:p,tooltipStyle:c,matchTriggerWidth:v,anchor:u,className:g,viewportClassName:m?.viewport,children:[(a??i)&&o.jsxs("div",{className:"mb-2",children:[a&&o.jsx(w,{children:a}),i&&o.jsx(f,{children:i})]}),r]})]})}Object.defineProperty(exports,"PopoverPrimitive",{enumerable:!0,get:()=>t.Popover});exports.Popover=C;exports.PopoverClose=j;exports.PopoverContent=h;exports.PopoverCreateHandle=y;exports.PopoverDescription=f;exports.PopoverPopup=h;exports.PopoverRoot=P;exports.PopoverTitle=w;exports.PopoverTrigger=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("@base-ui/react/popover"),s=require("../../lib/cn.cjs.js"),y=t.Popover.createHandle,P=t.Popover.Root;function x({className:e,children:r,...a}){return o.jsx(t.Popover.Trigger,{className:e,"data-slot":"popover-trigger",...a,children:r})}function h({children:e,className:r,side:a="bottom",align:i="center",sideOffset:d=4,alignOffset:l=0,tooltipStyle:n=!1,matchTriggerWidth:p=!1,anchor:c,portalProps:v,viewportClassName:u,...g}){return o.jsx(t.Popover.Portal,{...v,children:o.jsx(t.Popover.Positioner,{align:i,alignOffset:l,anchor:c,className:"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none","data-slot":"popover-positioner",side:a,sideOffset:d,style:p?{width:"var(--anchor-width)"}:void 0,children:o.jsx(t.Popover.Popup,{className:s.cn("relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-md has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",p?"w-full":"w-(--popup-width,auto) max-w-72",n&&"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",r),"data-slot":"popover-popup",...g,children:o.jsx(t.Popover.Viewport,{className:s.cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",n?"py-1 [--viewport-inline-padding:--spacing(2)]":"not-data-transitioning:overflow-y-auto",u),"data-slot":"popover-viewport",children:e})})})})}function j({...e}){return o.jsx(t.Popover.Close,{"data-slot":"popover-close",...e})}function w({className:e,...r}){return o.jsx(t.Popover.Title,{className:s.cn("font-semibold text-lg leading-none",e),"data-slot":"popover-title",...r})}function f({className:e,...r}){return o.jsx(t.Popover.Description,{className:s.cn("text-muted-foreground text-sm",e),"data-slot":"popover-description",...r})}function C({trigger:e,children:r,title:a,description:i,side:d,align:l,sideOffset:n,alignOffset:p,tooltipStyle:c,matchTriggerWidth:v,anchor:u,className:g,classNames:m,...b}){return o.jsxs(P,{...b,children:[e!==void 0&&o.jsx(x,{render:e}),o.jsxs(h,{side:d,align:l,sideOffset:n,alignOffset:p,tooltipStyle:c,matchTriggerWidth:v,anchor:u,className:g,viewportClassName:m?.viewport,children:[(a??i)&&o.jsxs("div",{className:"mb-2",children:[a&&o.jsx(w,{children:a}),i&&o.jsx(f,{children:i})]}),r]})]})}Object.defineProperty(exports,"PopoverPrimitive",{enumerable:!0,get:()=>t.Popover});exports.Popover=C;exports.PopoverClose=j;exports.PopoverContent=h;exports.PopoverCreateHandle=y;exports.PopoverDescription=f;exports.PopoverPopup=h;exports.PopoverRoot=P;exports.PopoverTitle=w;exports.PopoverTrigger=x;

package/dist/components/popover/popover.es.js

@@ -48,7 +48,7 @@ function b({
         e.Popup,
         {
           className: d(
-            "relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-md has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             p ? "w-full" : "w-(--popup-width,auto) max-w-72",
             n && "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",
             a

package/dist/components/tag/tag.cjs.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@base-ui/react/merge-props"),o=require("@base-ui/react/use-render"),t=require("class-variance-authority"),g=require("../../lib/cn.cjs.js"),e=t.cva("group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",{variants:{variant:{default:"bg-primary text-primary-foreground [a]:hover:bg-primary/80",secondary:"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",error:"bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",success:"bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/20",warning:"bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning/20",outline:"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",ghost:"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",link:"text-primary underline-offset-4 hover:underline"}},defaultVariants:{variant:"default"}});function u({className:i,variant:r="default",render:n,...a}){return o.useRender({defaultTagName:"span",props:s.mergeProps({className:g.cn(e({variant:r}),i)},a),render:n,state:{slot:"tag",variant:r}})}exports.Tag=u;exports.tagVariants=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@base-ui/react/merge-props"),g=require("@base-ui/react/use-render"),u=require("class-variance-authority"),b=require("../../lib/cn.cjs.js"),t=u.cva("group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",{variants:{variant:{default:"bg-primary text-primary-foreground [a]:hover:bg-primary/80",secondary:"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",error:"bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",success:"bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/20",warning:"bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning/20",outline:"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",ghost:"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",link:"text-primary underline-offset-4 hover:underline"},color:{gray:"bg-gray-100 text-gray-600",red:"bg-red-100 text-red-600",orange:"bg-orange-100 text-orange-600",amber:"bg-amber-100 text-amber-600",green:"bg-green-100 text-green-600",teal:"bg-teal-100 text-teal-600",cyan:"bg-cyan-100 text-cyan-600",sky:"bg-sky-100 text-sky-600",blue:"bg-blue-100 text-blue-600",indigo:"bg-indigo-100 text-indigo-600",violet:"bg-violet-100 text-violet-600",purple:"bg-purple-100 text-purple-600",pink:"bg-pink-100 text-pink-600",rose:"bg-rose-100 text-rose-600"}}});function d({className:n,variant:i,color:e,render:a,...o}){const r=e?void 0:i??"default";return g.useRender({defaultTagName:"span",props:s.mergeProps({className:b.cn(t({variant:r,color:e}),n)},o),render:a,state:{slot:"tag",variant:r,color:e}})}exports.Tag=d;exports.tagVariants=t;

package/dist/components/tag/tag.es.js

@@ -1,9 +1,9 @@
 "use client";
-import { mergeProps as n } from "@base-ui/react/merge-props";
-import { useRender as a } from "@base-ui/react/use-render";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as g } from "@base-ui/react/use-render";
 import { cva as s } from "class-variance-authority";
-import { cn as t } from "../../lib/cn.es.js";
-const g = s(
+import { cn as b } from "../../lib/cn.es.js";
+const d = s(
   "group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
@@ -16,35 +16,54 @@ const g = s(
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline"
+      },
+      color: {
+        gray: "bg-gray-100 text-gray-600",
+        red: "bg-red-100 text-red-600",
+        orange: "bg-orange-100 text-orange-600",
+        amber: "bg-amber-100 text-amber-600",
+        green: "bg-green-100 text-green-600",
+        teal: "bg-teal-100 text-teal-600",
+        cyan: "bg-cyan-100 text-cyan-600",
+        sky: "bg-sky-100 text-sky-600",
+        blue: "bg-blue-100 text-blue-600",
+        indigo: "bg-indigo-100 text-indigo-600",
+        violet: "bg-violet-100 text-violet-600",
+        purple: "bg-purple-100 text-purple-600",
+        pink: "bg-pink-100 text-pink-600",
+        rose: "bg-rose-100 text-rose-600"
       }
-    },
-    defaultVariants: {
-      variant: "default"
     }
   }
 );
-function f({
-  className: e,
-  variant: r = "default",
-  render: i,
+function p({
+  className: t,
+  variant: i,
+  color: r,
+  render: n,
   ...o
 }) {
-  return a({
+  const e = r ? void 0 : i ?? "default";
+  return g({
     defaultTagName: "span",
-    props: n(
+    props: a(
       {
-        className: t(g({ variant: r }), e)
+        className: b(
+          d({ variant: e, color: r }),
+          t
+        )
       },
       o
     ),
-    render: i,
+    render: n,
     state: {
       slot: "tag",
-      variant: r
+      variant: e,
+      color: r
     }
   });
 }
 export {
-  f as Tag,
-  g as tagVariants
+  p as Tag,
+  d as tagVariants
 };

package/dist/src/components/tag/tag.d.ts

@@ -2,6 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 declare const tagVariants: (props?: ({
     variant?: "default" | "link" | "error" | "success" | "warning" | "outline" | "secondary" | "ghost" | null | undefined;
+    color?: "blue" | "cyan" | "gray" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "violet" | "amber" | "sky" | "rose" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Tag({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof tagVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function Tag({ className, variant, color, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof tagVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export { Tag, tagVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.23",
+  "version": "2.0.0-alpha.24",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/calendar/calendar.tsx

@@ -162,7 +162,7 @@ export function Calendar({
       // Standalone container surface. Inside a popover (DatePicker) the
       // popup already paints border + background + padding, so strip ours
       // to avoid a double border.
-      "rounded-xl border bg-background p-3",
+      "rounded-xl border bg-background",
       "in-data-[slot=popover-popup]:rounded-none in-data-[slot=popover-popup]:border-0 in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:p-0",
       className,
     ),

package/src/components/popover/popover.tsx

@@ -66,7 +66,7 @@ export function PopoverPopup({
       >
         <PopoverPrimitive.Popup
           className={cn(
-            "relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative flex h-(--popup-height,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-md has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             matchTriggerWidth ? "w-full" : "w-(--popup-width,auto) max-w-72",
             tooltipStyle &&
               "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",

package/src/components/tag/tag.stories.tsx

@@ -43,6 +43,49 @@ export const Variants: Story = {
   ),
 };
 
+const PALETTE = [
+  "gray",
+  "red",
+  "orange",
+  "amber",
+  "green",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "pink",
+  "rose",
+] as const;
+
+/**
+ * Use the `color` prop to pick from a curated palette when `variant` semantics
+ * (error/success/warning) don't fit — e.g. mapping many domain states to a
+ * stable set of visual treatments.
+ *
+ * Each color applies the same recipe (tinted background + saturated text), so
+ * the look stays consistent without hand-picking hex values.
+ *
+ * `color` takes precedence over `variant`: when both are set, the palette wins.
+ *
+ * ```tsx
+ * <Tag color="blue">In review</Tag>
+ * ```
+ */
+export const Colors: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {PALETTE.map((color) => (
+        <Tag key={color} color={color}>
+          {color}
+        </Tag>
+      ))}
+    </div>
+  ),
+};
+
 /**
  * Compose icons directly as children — JSX order determines position.
  *
@@ -178,8 +221,10 @@ export const Closable: Story = {
 };
 
 /**
- * Override colors with custom Tailwind classes via `className`.
- * Classes merge with the variant defaults through `cn` (tailwind-merge).
+ * Escape hatch for colors outside the curated `color` palette: override with
+ * custom Tailwind classes via `className`. Classes merge with the variant
+ * defaults through `cn` (tailwind-merge). Prefer the `color` prop when the hue
+ * exists in the palette — it guarantees the accessible recipe and dark mode.
  */
 export const CustomColors: Story = {
   render: () => (

package/src/components/tag/tag.tsx

@@ -25,31 +25,53 @@ const tagVariants = cva(
           "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
-    },
-    defaultVariants: {
-      variant: "default",
+      color: {
+        gray: "bg-gray-100 text-gray-600",
+        red: "bg-red-100 text-red-600",
+        orange: "bg-orange-100 text-orange-600",
+        amber: "bg-amber-100 text-amber-600",
+        green: "bg-green-100 text-green-600",
+        teal: "bg-teal-100 text-teal-600",
+        cyan: "bg-cyan-100 text-cyan-600",
+        sky: "bg-sky-100 text-sky-600",
+        blue: "bg-blue-100 text-blue-600",
+        indigo: "bg-indigo-100 text-indigo-600",
+        violet: "bg-violet-100 text-violet-600",
+        purple: "bg-purple-100 text-purple-600",
+        pink: "bg-pink-100 text-pink-600",
+        rose: "bg-rose-100 text-rose-600",
+      },
     },
   },
 );
 
 function Tag({
   className,
-  variant = "default",
+  variant,
+  color,
   render,
   ...props
 }: useRender.ComponentProps<"span"> & VariantProps<typeof tagVariants>) {
+  // `color` (curated palette) takes precedence over `variant`. When no color is
+  // set we fall back to the default variant so bare <Tag> keeps working.
+  const resolvedVariant = color ? undefined : (variant ?? "default");
+
   return useRender({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(tagVariants({ variant }), className),
+        className: cn(
+          tagVariants({ variant: resolvedVariant, color }),
+          className,
+        ),
       },
       props,
     ),
     render,
     state: {
       slot: "tag",
-      variant,
+      variant: resolvedVariant,
+      color,
     },
   });
 }