@spark-ui/components 17.2.5 → 17.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{FormFieldRequiredIndicator-CtgkvPZo.js → FormFieldRequiredIndicator-CEB8Ez-q.js} +2 -2
- package/dist/{FormFieldRequiredIndicator-CtgkvPZo.js.map → FormFieldRequiredIndicator-CEB8Ez-q.js.map} +1 -1
- package/dist/{FormFieldRequiredIndicator-DOGQ_HxO.mjs → FormFieldRequiredIndicator-CzdpinIz.mjs} +2 -2
- package/dist/{FormFieldRequiredIndicator-DOGQ_HxO.mjs.map → FormFieldRequiredIndicator-CzdpinIz.mjs.map} +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/{button-BTDRzvpB.js → button-B-sMnDc_.js} +2 -2
- package/dist/{button-BTDRzvpB.js.map → button-B-sMnDc_.js.map} +1 -1
- package/dist/{button-_YZ_4J42.mjs → button-C6nlNPdv.mjs} +26 -25
- package/dist/{button-_YZ_4J42.mjs.map → button-C6nlNPdv.mjs.map} +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.mjs +1 -1
- package/dist/checkbox/index.js +1 -2
- package/dist/checkbox/index.mjs +2 -216
- package/dist/checkbox-DjwbAH09.js +2 -0
- package/dist/checkbox-DjwbAH09.js.map +1 -0
- package/dist/checkbox-xsURzANi.mjs +216 -0
- package/dist/checkbox-xsURzANi.mjs.map +1 -0
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.mjs +2 -2
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +2 -2
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +2 -2
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.mjs +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.mjs +3 -3
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/{form-field-Bu_0E9tb.js → form-field-81wzFxM0.js} +2 -2
- package/dist/{form-field-Bu_0E9tb.js.map → form-field-81wzFxM0.js.map} +1 -1
- package/dist/{form-field-B8QzM655.mjs → form-field-GTAuK_nO.mjs} +3 -3
- package/dist/{form-field-B8QzM655.mjs.map → form-field-GTAuK_nO.mjs.map} +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/{icon-button-CykysbgJ.js → icon-button-CYz_Fitz.js} +2 -2
- package/dist/{icon-button-CykysbgJ.js.map → icon-button-CYz_Fitz.js.map} +1 -1
- package/dist/{icon-button-6p3O7NIm.mjs → icon-button-DpucUC_L.mjs} +2 -2
- package/dist/{icon-button-6p3O7NIm.mjs.map → icon-button-DpucUC_L.mjs.map} +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/{input-DNr40G2Z.js → input-BUSYZ_VO.js} +1 -1
- package/dist/{input-DNr40G2Z.js.map → input-BUSYZ_VO.js.map} +1 -1
- package/dist/{input-CmYeHYWQ.mjs → input-CiWFuTs_.mjs} +1 -1
- package/dist/{input-CmYeHYWQ.mjs.map → input-CiWFuTs_.mjs.map} +1 -1
- package/dist/label/index.js +1 -1
- package/dist/label/index.mjs +1 -1
- package/dist/{label-DU0p0d-f.js → label-BCSEss4U.js} +1 -1
- package/dist/{label-DU0p0d-f.js.map → label-BCSEss4U.js.map} +1 -1
- package/dist/{label-BqRlrca0.mjs → label-DDBRKLUX.mjs} +1 -1
- package/dist/{label-BqRlrca0.mjs.map → label-DDBRKLUX.mjs.map} +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +14 -14
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.mjs +1 -1
- package/dist/{popover-GOovJ27J.js → popover-CrKp_TKk.js} +2 -2
- package/dist/{popover-GOovJ27J.js.map → popover-CrKp_TKk.js.map} +1 -1
- package/dist/{popover-CxZAQmw6.mjs → popover-DsBY8eYl.mjs} +2 -2
- package/dist/{popover-CxZAQmw6.mjs.map → popover-DsBY8eYl.mjs.map} +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/{progress-rJZcPJsZ.js → progress-BjqJSRnK.js} +1 -1
- package/dist/{progress-rJZcPJsZ.js.map → progress-BjqJSRnK.js.map} +1 -1
- package/dist/{progress-cEf3tFbn.mjs → progress-C3w4PmxY.mjs} +1 -1
- package/dist/{progress-cEf3tFbn.mjs.map → progress-C3w4PmxY.mjs.map} +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +2 -2
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.mjs +2 -2
- package/dist/src/button/Button.d.ts +7 -1
- package/dist/src/table/ResizableTableContainer.d.ts +9 -0
- package/dist/src/table/Table.d.ts +45 -0
- package/dist/src/table/Table.styles.d.ts +11 -0
- package/dist/src/table/TableBody.d.ts +8 -0
- package/dist/src/table/TableBulkBar.d.ts +27 -0
- package/dist/src/table/TableCell.d.ts +10 -0
- package/dist/src/table/TableColumn.d.ts +12 -0
- package/dist/src/table/TableContext.d.ts +28 -0
- package/dist/src/table/TableHeader.d.ts +10 -0
- package/dist/src/table/TableHeaderSelectionCheckbox.d.ts +13 -0
- package/dist/src/table/TableRow.d.ts +8 -0
- package/dist/src/table/TableSelectionCheckbox.d.ts +7 -0
- package/dist/src/table/index.d.mts +31 -0
- package/dist/src/table/index.d.ts +31 -0
- package/dist/src/table/table-utils.d.ts +2 -0
- package/dist/src/table/useTablePagination.d.ts +76 -0
- package/dist/src/table/useTableSort.d.ts +38 -0
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.mjs +2 -2
- package/dist/table/index.js +2 -0
- package/dist/table/index.js.map +1 -0
- package/dist/table/index.mjs +529 -0
- package/dist/table/index.mjs.map +1 -0
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.mjs +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.mjs +2 -2
- package/dist/{useRenderSlot-Xxf_s88b.js → useRenderSlot-C4UVWhDN.js} +1 -1
- package/dist/{useRenderSlot-Xxf_s88b.js.map → useRenderSlot-C4UVWhDN.js.map} +1 -1
- package/dist/{useRenderSlot-DP4fYerF.mjs → useRenderSlot-DKIwoqpO.mjs} +1 -1
- package/dist/{useRenderSlot-DP4fYerF.mjs.map → useRenderSlot-DKIwoqpO.mjs.map} +1 -1
- package/package.json +5 -4
- package/dist/checkbox/index.js.map +0 -1
- package/dist/checkbox/index.mjs.map +0 -1
package/dist/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-B-sMnDc_.js`),r=require(`../icon-button-CYz_Fitz.js`),i=require(`../popover-CrKp_TKk.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/internal-utils`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/icons/ArrowVerticalRight`),d=require(`@spark-ui/icons/ArrowVerticalLeft`),f=require(`@base-ui/react/tabs`),p=require(`@spark-ui/icons/MoreMenuHorizontal`);var m=(0,o.createContext)({}),h=()=>{let e=(0,o.useContext)(m);if(!e)throw Error(`useTabsContext must be used within a TabsContext Provider`);return e},g=(0,a.cva)([`flex`,`data-[orientation=horizontal]:flex-col`,`data-[orientation=vertical]:flex-row`,`max-w-full`]);function _(t){return t?({...t})=>(0,s.jsx)(e.Slot,{...t}):void 0}var v=({intent:e=`support`,size:t=`md`,asChild:n=!1,forceMount:r=!1,orientation:i=`horizontal`,children:a,className:o,ref:c,...l})=>{let u=_(n);return(0,s.jsx)(m.Provider,{value:{intent:e,size:t,orientation:i,forceMount:r},children:(0,s.jsx)(f.Tabs.Root,{ref:c,orientation:i,className:g({className:o}),"data-spark-component":`tabs`,render:u,...l,children:a})})};v.displayName=`Tabs`;var y=(0,a.cva)([`w-full p-lg`,`focus-visible:u-outline-inset`],{variants:{forceMount:{true:`data-[hidden]:hidden`,false:``}}}),b=({children:e,asChild:t=!1,className:n,ref:r,forceMount:i,...a})=>{let{forceMount:o}=h(),c=_(t),l=o||i;return(0,s.jsx)(f.Tabs.Panel,{"data-spark-component":`tabs-content`,ref:r,keepMounted:l,className:y({className:n,forceMount:l}),render:c,...a,children:e})};b.displayName=`Tabs.Content`;var x=(0,a.cva)([`relative flex`]),S=(0,a.cva)([`flex w-full`,`data-[orientation=horizontal]:flex-row`,`data-[orientation=vertical]:flex-col`,`overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden`,`after:flex after:shrink after:grow after:border-outline`,`data-[orientation=horizontal]:after:border-b-sm`,`data-[orientation=vertical]:after:border-r-sm`]),C=(0,a.cva)([`h-auto! flex-none`,`border-b-sm border-outline`,`outline-hidden`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!`]),w=(e,t)=>{let[n,r]=(0,o.useState)({width:void 0,height:void 0}),i=(0,o.useRef)(null),a=(0,o.useRef)(t);return(0,o.useEffect)(()=>{a.current=t},[t]),(0,o.useEffect)(()=>{let t=e&&`current`in e?e.current:e;if(!(!t||i.current))return i.current=new ResizeObserver(([e])=>{let{inlineSize:t,blockSize:n}=e?.borderBoxSize?.[0]??{};a.current?.(e),r({width:t,height:n})}),i.current.observe(t),()=>{i.current&&i.current.unobserve(t)}},[e,i,a]),n},T=({asChild:e=!1,loop:r=!1,children:i,className:a,ref:c,...l})=>{let p=(0,o.useRef)(null),m=(0,o.useRef)(null),g=c||m,{orientation:v}=h(),y=_(e),{width:b}=w(p),[T,E]=(0,o.useState)({prev:`hidden`,next:`hidden`});(0,o.useEffect)(()=>{typeof g==`function`||!g.current||E(v===`horizontal`?{prev:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`,next:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`}:{prev:`hidden`,next:`hidden`})},[v,g,b]),(0,o.useEffect)(()=>{if(typeof g==`function`||!g.current||T.prev===`hidden`||r)return;let e=e=>{E({prev:e.scrollLeft>0?`visible`:`disabled`,next:e.scrollLeft+e.clientWidth<e.scrollWidth?`visible`:`disabled`})},t=g.current;return e(t),t.addEventListener(`scroll`,({target:t})=>e(t)),()=>t.removeEventListener(`scroll`,({target:t})=>e(t))},[g,T.prev,r]);let D=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft<=0;g.current.scrollTo({left:e?g.current.scrollLeft+g.current.scrollWidth-g.current.clientWidth:g.current.scrollLeft-g.current.clientWidth,behavior:`smooth`})},O=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft+g.current.clientWidth>=g.current.scrollWidth;g.current.scrollTo({left:e?0:g.current.scrollLeft+g.current.clientWidth,behavior:`smooth`})};return(0,s.jsxs)(`div`,{className:x({className:a}),ref:p,children:[T.prev!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:D,disabled:T.prev===`disabled`,"aria-label":`Scroll left`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(d.ArrowVerticalLeft,{})})}),(0,s.jsx)(f.Tabs.List,{"data-spark-component":`tabs-list`,ref:g,className:S(),render:y,loopFocus:r,activateOnFocus:!0,...l,children:i}),T.next!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:O,disabled:T.next===`disabled`,"aria-label":`Scroll right`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(u.ArrowVerticalRight,{})})})]})};T.displayName=`Tabs.List`;var E=(0,o.createContext)(void 0),D=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`TabsPopover components must be used within TabsPopover`);return e},O=(0,o.forwardRef)(({"aria-label":e,children:n,...a},o)=>{let{popoverTriggerRef:c}=D(),u=(0,l.useMergeRefs)(o,c);return(0,s.jsx)(i.t.Trigger,{asChild:!0,...a,children:(0,s.jsx)(r.t,{ref:u,size:`sm`,intent:`surfaceInverse`,design:`ghost`,"aria-label":e,tabIndex:-1,children:(0,s.jsx)(t.t,{children:n||(0,s.jsx)(p.MoreMenuHorizontal,{})})})})});O.displayName=`Popover.Trigger`;var k=(0,o.forwardRef)(({side:e,align:t=`start`,className:n,...r},o)=>{let{popoverSide:c}=D(),l=(0,a.cx)(`gap-sm flex flex-col`,n);return(0,s.jsx)(i.t.Content,{ref:o,...r,side:e??c,align:t,className:l})});k.displayName=`Popover.Content`;var A=({popoverSide:e,popoverTriggerRef:t,children:n})=>{let r=(0,o.useMemo)(()=>({popoverSide:e,popoverTriggerRef:t}),[e,t]),a=Object.assign((e=>(0,s.jsx)(E.Provider,{value:r,children:(0,s.jsx)(i.t,{...e,children:e.children})})),i.t,{Content:k,Trigger:O});return(0,s.jsx)(E.Provider,{value:r,children:n(a)})};A.displayName=`Popover`;var j=(0,a.cva)([`px-md`,`relative flex flex-none items-center`,`border-outline`,`hover:not-disabled:bg-surface-hovered`,`after:absolute`,`data-[active]:font-bold`,`not-data-[active]:not-disabled:cursor-pointer`,`data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2`,`data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,`gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md`,`[&>svg:last-child:first-child]:mx-auto`],{variants:{intent:(0,c.makeVariants)({main:[`data-[active]:text-main data-[active]:after:bg-main`],support:[`data-[active]:text-support data-[active]:after:bg-support`]}),size:{xs:[`h-sz-32 min-w-sz-32 text-caption`],sm:[`h-sz-36 min-w-sz-36 text-body-2`],md:[`h-sz-40 min-w-sz-40 text-body-1`]},hasMenu:{true:`pr-3xl`},orientation:{horizontal:``,vertical:``}},compoundVariants:[{hasMenu:!0,orientation:`vertical`,class:`w-full`}],defaultVariants:{intent:`support`,size:`md`,hasMenu:!1,orientation:`horizontal`}}),M=({asChild:e=!1,value:t,disabled:n=!1,children:r,className:i,ref:a,onKeyDown:c,renderMenu:u,...d})=>{let{intent:p,size:m,orientation:g}=h(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=_(e),x=(0,l.useMergeRefs)(a,y),S=e=>{e.key===`F10`&&e.shiftKey&&u&&v.current&&(e.preventDefault(),v.current.click()),c?.(e)},C=!!u,w=g===`vertical`?`right`:`bottom`,T=(0,s.jsx)(f.Tabs.Tab,{"data-spark-component":`tabs-trigger`,ref:x,className:j({intent:p,size:m,hasMenu:C,orientation:g??`horizontal`,className:i}),render:b,disabled:n,value:t,onFocus:({target:e})=>e.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`}),onKeyDown:S,"aria-haspopup":C?`true`:void 0,...d,children:r});return C?(0,s.jsxs)(`div`,{className:g===`vertical`?`relative w-full`:`relative`,children:[T,(0,s.jsx)(`div`,{className:`right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2`,children:(0,s.jsx)(A,{popoverSide:w,popoverTriggerRef:v,children:e=>u?.({Popover:e})})})]}):T};M.displayName=`Tabs.Trigger`;var N=Object.assign(v,{List:T,Trigger:M,Content:b});N.displayName=`Tabs`,T.displayName=`Tabs.List`,M.displayName=`Tabs.Trigger`,b.displayName=`Tabs.Content`,exports.Tabs=N;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/tabs/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Slot as e } from "../slot/index.mjs";
|
|
2
2
|
import { t } from "../icon-D05Uqh8_.mjs";
|
|
3
|
-
import { t as n } from "../button-
|
|
4
|
-
import { t as r } from "../icon-button-
|
|
5
|
-
import { t as i } from "../popover-
|
|
3
|
+
import { t as n } from "../button-C6nlNPdv.mjs";
|
|
4
|
+
import { t as r } from "../icon-button-DpucUC_L.mjs";
|
|
5
|
+
import { t as i } from "../popover-DsBY8eYl.mjs";
|
|
6
6
|
import { cva as a, cx as o } from "class-variance-authority";
|
|
7
7
|
import { createContext as s, forwardRef as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
|
|
8
8
|
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
package/dist/textarea/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-BUSYZ_VO.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-[var(--spacing-sz-10)]`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/textarea/index.mjs
CHANGED
package/dist/toast/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../button-B-sMnDc_.js`),i=require(`../icon-button-CYz_Fitz.js`);let a=require(`class-variance-authority`),o=require(`react`);o=e.t(o);let s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/toast`),u=require(`@spark-ui/icons/AlertFill`),d=require(`@spark-ui/icons/InfoFill`),f=require(`@spark-ui/icons/ValidFill`),p=require(`@spark-ui/icons/WarningFill`);var m=(0,a.cva)([`gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md`,`absolute right-0 bottom-0 left-auto mr-0`,`bg-clip-padding shadow-md select-none`,`focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none`,`z-[calc(1000-var(--toast-index))]`,`after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']`,`[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]`,`ease-standard [transition-property:opacity,transform]`,`duration-400`,`data-[starting-style]:[transform:translateY(150%)]`,`data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]`,`data-[ending-style]:duration-250`,`data-[ending-style]:opacity-0`,`data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]`,`data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[limited]:opacity-0`],{variants:{design:{filled:``,tinted:``},intent:{success:``,alert:``,error:``,info:``,neutral:``,main:``,support:``,accent:``,surface:``,surfaceInverse:``}},compoundVariants:[{design:`filled`,intent:`success`,class:[`bg-success text-on-success border-success`]},{design:`filled`,intent:`alert`,class:[`bg-alert text-on-alert border-alert`]},{design:`filled`,intent:`error`,class:[`bg-error text-on-error border-error`]},{design:`filled`,intent:`info`,class:[`bg-info text-on-info border-info`]},{design:`filled`,intent:`neutral`,class:[`bg-neutral text-on-neutral border-neutral`]},{design:`filled`,intent:`main`,class:[`bg-main text-on-main border-main`]},{design:`filled`,intent:`support`,class:[`bg-support text-on-support border-support`]},{design:`filled`,intent:`accent`,class:[`bg-accent text-on-accent border-accent`]},{design:`filled`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`filled`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]},{design:`tinted`,intent:`success`,class:[`bg-success-container text-on-success-container border-success`]},{design:`tinted`,intent:`alert`,class:[`bg-alert-container text-on-alert-container border-alert`]},{design:`tinted`,intent:`error`,class:[`bg-error-container text-on-error-container border-error`]},{design:`tinted`,intent:`info`,class:[`bg-info-container text-on-info-container border-info`]},{design:`tinted`,intent:`neutral`,class:[`bg-neutral-container text-on-neutral-container border-neutral`]},{design:`tinted`,intent:`main`,class:[`bg-main-container text-on-main-container border-main`]},{design:`tinted`,intent:`support`,class:[`bg-support-container text-on-support-container border-support`]},{design:`tinted`,intent:`accent`,class:[`bg-accent-container text-on-accent-container border-accent`]},{design:`tinted`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`tinted`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]}],defaultVariants:{design:`filled`,intent:`neutral`}});function h(e){return e===`surfaceInverse`?`surface`:e===`surface`?`surfaceInverse`:e===`error`?`danger`:e}function g(e){return e===`surfaceInverse`?`surfaceInverse`:e===`surface`?`surface`:e===`error`?`danger`:e}var _=(e,{toastDesign:t,toastIntent:n})=>{if(!e)return{};let{design:r,intent:i,className:o,onClick:s,...c}=e;return{design:r??t,intent:i??h(n),className:(0,a.cx)(`ml-auto`,o),onClick:s,...c}},v=(e,t,n)=>({swipeDirection:[`down`,`right`],toast:e,className:(0,a.cx)(m({design:t,intent:n})),style:{"--gap":`var(--spacing-md)`,"--offset-y":`calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))`}});function y(e){switch(e){case`info`:return(0,s.jsx)(d.InfoFill,{});case`success`:return(0,s.jsx)(f.ValidFill,{});case`alert`:return(0,s.jsx)(p.WarningFill,{});case`error`:return(0,s.jsx)(u.AlertFill,{});default:return(0,s.jsx)(d.InfoFill,{})}}function b({toast:e}){let{icon:t,intent:o=`info`,design:u,action:d,isClosable:f,closeLabel:p=`Close`,compact:m=!1}=e.data??{},h=`tinted`,b=d?.close?l.Toast.Close:l.Toast.Action,x=_(d,{toastDesign:h,toastIntent:o}),S=v(e,h,o),C=t??y(o),w=e=>f?(0,s.jsx)(l.Toast.Close,{className:e,render:(0,s.jsx)(i.t,{"aria-label":p,design:h,intent:g(o),size:`md`}),children:(0,s.jsx)(n.t,{children:(0,s.jsx)(c.Close,{})})}):null,T=()=>{let t=e.data?.title??e.title,n=!!(e.data?.description??e.description);return typeof t!=`string`&&t!==void 0?(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`})},E=()=>{let t=e.data?.description??e.description;return t?typeof t==`string`?(0,s.jsx)(l.Toast.Description,{className:`text-body-1`}):(0,s.jsx)(l.Toast.Description,{className:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):null};return(0,s.jsx)(l.Toast.Root,{...S,children:(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`,m?`gap-lg items-center`:`gap-md flex-col`),children:[(0,s.jsxs)(`div`,{className:`gap-lg p-md flex grow items-center`,children:[(0,s.jsx)(n.t,{size:`md`,children:C}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`gap-sm flex flex-col`,m&&`flex-1`,!m&&f&&`pr-3xl`),children:[T(),E()]})]}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`),children:[d&&(0,s.jsx)(b,{render:(0,s.jsx)(r.t,{...x}),children:d.label}),m&&w()]}),!m&&w(`top-md right-md absolute`)]})},e.id)}function x(){let e=l.Toast.useToastManager(),t=o.useCallback(()=>{e.toasts.forEach(({id:t})=>e.close(t))},[e]);return{...e,closeAll:t}}function S(){let{toasts:e}=x();return e.map(e=>(0,s.jsx)(b,{toast:e},e.id))}function C({children:e,limit:t=3,...n}){return(0,s.jsxs)(l.Toast.Provider,{limit:t,...n,children:[(0,s.jsx)(l.Toast.Portal,{children:(0,s.jsx)(l.Toast.Viewport,{className:(0,a.cx)(`z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end`),children:(0,s.jsx)(S,{})})}),e]})}function w({children:e,onClick:n,asChild:r=!1,title:i,description:a,timeout:o=5e3,design:c=`filled`,intent:l=`neutral`,isClosable:u=!0,icon:d,action:f,compact:p,priority:m=`low`}){let h=x(),g=r?t.Slot:`button`;function _(e){n?.(e),h.add({title:i,description:a,timeout:o,priority:m,data:{design:c,intent:l,isClosable:u,...d&&{icon:d},action:f,...p!==void 0&&{compact:p}}})}return(0,s.jsx)(g,{...!r&&{type:`button`},onClick:_,children:e})}var T=l.Toast.createToastManager;exports.ToastProvider=C,exports.ToastTrigger=w,exports.createToastManager=T,exports.useToastManager=x;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/toast/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slot as e } from "../slot/index.mjs";
|
|
2
2
|
import { t } from "../icon-D05Uqh8_.mjs";
|
|
3
|
-
import { t as n } from "../button-
|
|
4
|
-
import { t as r } from "../icon-button-
|
|
3
|
+
import { t as n } from "../button-C6nlNPdv.mjs";
|
|
4
|
+
import { t as r } from "../icon-button-DpucUC_L.mjs";
|
|
5
5
|
import { cva as i, cx as a } from "class-variance-authority";
|
|
6
6
|
import * as o from "react";
|
|
7
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`);let t=require(`react/jsx-runtime`);function n(n,r){let i=n?e.Slot:r;return n?({...e})=>(0,t.jsx)(i,{...e}):void 0}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});
|
|
2
|
-
//# sourceMappingURL=useRenderSlot-
|
|
2
|
+
//# sourceMappingURL=useRenderSlot-C4UVWhDN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRenderSlot-
|
|
1
|
+
{"version":3,"file":"useRenderSlot-C4UVWhDN.js","names":[],"sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n"],"mappings":"qGAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRenderSlot-
|
|
1
|
+
{"version":3,"file":"useRenderSlot-DKIwoqpO.mjs","names":[],"sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n"],"mappings":";;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;AAEnC,QAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,GAAG,KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.3.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@react-aria/toast": "^3.0.0-beta.18",
|
|
54
54
|
"@react-stately/numberfield": "3.9.11",
|
|
55
55
|
"@react-stately/toast": "^3.0.0-beta.7",
|
|
56
|
-
"@spark-ui/hooks": "^17.
|
|
57
|
-
"@spark-ui/icons": "^17.
|
|
58
|
-
"@spark-ui/internal-utils": "^17.
|
|
56
|
+
"@spark-ui/hooks": "^17.3.0",
|
|
57
|
+
"@spark-ui/icons": "^17.3.0",
|
|
58
|
+
"@spark-ui/internal-utils": "^17.3.0",
|
|
59
59
|
"@zag-js/pagination": "1.30.0",
|
|
60
60
|
"@zag-js/react": "1.30.0",
|
|
61
61
|
"class-variance-authority": "0.7.1",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
"emulate-tab": "^1.2.1",
|
|
64
64
|
"motion": "^12.34.3",
|
|
65
65
|
"radix-ui": "1.4.3",
|
|
66
|
+
"react-aria-components": "^1.15.0",
|
|
66
67
|
"react-snap-carousel": "^0.5.1"
|
|
67
68
|
},
|
|
68
69
|
"peerDependencies": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n /**\n * The id of the checkbox group.\n */\n id: string\n /**\n * The name of the group. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value of the checkbox group.\n */\n value?: string[]\n /**\n * A set of ids separated by a space used to describe the input component given by a set of messages.\n */\n description?: string\n /**\n * The validation state of the checkbox group.\n */\n state?: 'error' | 'success' | 'alert'\n /**\n * If true, the checkbox group will be invalid.\n */\n isInvalid?: boolean\n /**\n * If true, the checkbox group will be required.\n */\n isRequired?: boolean\n /**\n * Callback used to update or notify the value of the checkbox group.\n */\n onCheckedChange?: (checked: boolean, changed: string) => void\n /**\n * When true, the label will be placed on the left side of the Checkbox\n */\n reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n const context = useContext(CheckboxGroupContext)\n\n return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n [\n 'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n 'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n 'focus-visible:u-outline',\n 'hover:ring-4 hover:cursor-pointer',\n 'u-shadow-border-transition',\n ],\n {\n variants: {\n /**\n * Color scheme of the checkbox.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n >({\n main: [\n 'text-on-main',\n 'hover:ring-main-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n 'data-[state=checked]:border-main data-[state=checked]:bg-main',\n ],\n support: [\n 'text-on-support',\n 'hover:ring-support-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n 'data-[state=checked]:border-support data-[state=checked]:bg-support',\n ],\n accent: [\n 'text-on-accent',\n 'hover:ring-accent-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n 'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n ],\n success: [\n 'text-on-success',\n 'hover:ring-success-container',\n 'data-[state=unchecked]:border-success',\n 'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n 'data-[state=checked]:border-success data-[state=checked]:bg-success',\n ],\n alert: [\n 'text-on-alert',\n 'hover:ring-alert-container',\n 'data-[state=unchecked]:border-alert',\n 'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n 'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n ],\n error: [\n 'text-on-error',\n 'hover:ring-error-container',\n 'data-[state=unchecked]:border-error',\n 'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n 'data-[state=checked]:border-error data-[state=checked]:bg-error',\n ],\n info: [\n 'text-on-info',\n 'hover:ring-info-container',\n 'data-[state=unchecked]:border-info',\n 'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n 'data-[state=checked]:border-info data-[state=checked]:bg-info',\n ],\n neutral: [\n 'text-on-neutral',\n 'hover:ring-neutral-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n 'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n ],\n }),\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n extends\n CheckboxInputStylesProps,\n Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n /**\n * The checked icon to use.\n */\n icon?: ReactNode\n /**\n * The indeterminate icon to use.\n */\n indeterminateIcon?: ReactNode\n /**\n * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n */\n defaultChecked?: boolean\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n */\n checked?: CheckedStatus\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n /**\n * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n */\n required?: boolean\n /**\n * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n /**\n * Event handler called when the checked state of the checkbox changes.\n */\n onCheckedChange?: (checked: boolean) => void\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n className,\n icon = <Check />,\n indeterminateIcon = <Minus />,\n intent,\n checked,\n ref,\n ...others\n}: CheckboxInputProps) => (\n <CheckboxPrimitive\n ref={ref}\n className={checkboxInputStyles({ intent, className })}\n checked={checked}\n {...others}\n >\n <CheckboxIndicator>\n <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n </CheckboxIndicator>\n </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n variants: {\n disabled: {\n true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n /**\n * When true, prevents the user from interacting with the checkbox item.\n */\n disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n Pick<CheckboxGroupContextState, 'reverse'> & {\n ref?: Ref<HTMLButtonElement>\n }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\nexport const Checkbox = ({\n id: idProp,\n className,\n intent: intentProp,\n checked: checkedProp,\n value,\n disabled,\n reverse = false,\n onCheckedChange,\n children,\n ref: forwardedRef,\n ...others\n}: CheckboxProps) => {\n const checkboxId = `${ID_PREFIX}-${useId()}`\n const innerId = idProp || checkboxId\n\n const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n const field = useFormFieldControl()\n const group = useCheckboxGroup()\n\n const rootRef = useRef<HTMLButtonElement | undefined>(null)\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n const getCheckboxAttributes = ({\n fieldState,\n groupState,\n checkboxIntent,\n }: {\n fieldState: ReturnType<typeof useFormFieldControl>\n groupState: ReturnType<typeof useCheckboxGroup>\n checkboxIntent: CheckboxInputProps['intent']\n }) => {\n const name = fieldState.name ?? groupState.name\n const isRequired = fieldState.isRequired ?? groupState.isRequired\n const state = fieldState.state ?? groupState.state\n const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n const isFieldEnclosed = fieldState.id !== groupState.id\n const id = isFieldEnclosed ? fieldState.id : undefined\n const description = isFieldEnclosed ? fieldState.description : undefined\n\n const intent = state ?? checkboxIntent ?? groupState.intent\n\n return { name, isRequired, isInvalid, id, description, intent }\n }\n\n const checked = value ? group.value?.includes(value) : checkedProp\n\n const handleCheckedChange = (isChecked: boolean) => {\n onCheckedChange?.(isChecked)\n\n const rootRefValue = rootRef.current?.value\n if (rootRefValue && group.onCheckedChange) {\n group.onCheckedChange(isChecked, rootRefValue)\n }\n }\n\n const {\n id,\n name,\n isInvalid,\n description,\n intent,\n isRequired: isRequiredAttr,\n } = getCheckboxAttributes({\n fieldState: field,\n groupState: group,\n checkboxIntent: intentProp,\n })\n\n const isRequired = useMemo(() => {\n if (!group) return isRequiredAttr\n\n return isRequiredAttr ? !group.value?.length : false\n }, [group, isRequiredAttr])\n\n const checkboxLabel = children && (\n <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n {children}\n </CheckboxLabel>\n )\n\n const checkboxInput = (\n <CheckboxInput\n ref={ref}\n id={id || innerId}\n name={name}\n value={value}\n intent={intent}\n checked={checked}\n disabled={disabled}\n required={isRequired}\n aria-describedby={description}\n aria-invalid={isInvalid}\n onCheckedChange={handleCheckedChange}\n aria-labelledby={children ? innerLabelId : field.labelId}\n {...others}\n />\n )\n\n const content =\n group.reverse || reverse ? (\n <>\n {checkboxLabel}\n {checkboxInput}\n </>\n ) : (\n <>\n {checkboxInput}\n {checkboxLabel}\n </>\n )\n\n return (\n <span\n data-spark-component=\"checkbox\"\n className={cx('gap-md text-body-1 relative flex items-start', className)}\n >\n {content}\n </span>\n )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n variants: {\n /**\n * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n */\n orientation: {\n vertical: ['flex-col', 'gap-lg'],\n horizontal: ['gap-xl'],\n },\n },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n extends\n Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n CheckboxGroupStylesProps,\n Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n /**\n * The initial value of the checkbox group\n */\n defaultValue?: string[]\n /**\n * The callback fired when any children Checkbox is checked or unchecked\n */\n onCheckedChange?: (value: string[]) => void\n ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n name: nameProp,\n value: valueProp,\n defaultValue,\n className,\n intent,\n orientation = 'vertical',\n onCheckedChange: onCheckedChangeProp,\n reverse = false,\n children,\n ref,\n ...others\n}: CheckboxGroupProps) => {\n const [value, setValue] = useCombinedState(valueProp, defaultValue)\n const field = useFormFieldControl()\n const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n const { id, labelId, description, state, isInvalid, isRequired } = field\n const name = nameProp ?? field.name\n\n const current = useMemo(() => {\n const handleCheckedChange = (checked: boolean, changed: string) => {\n const values = value || []\n const modified = checked\n ? [...values, changed]\n : values.filter((val: string) => val !== changed)\n\n setValue(modified)\n\n if (onCheckedChangeRef.current) {\n onCheckedChangeRef.current(modified)\n }\n }\n\n return {\n id,\n name,\n value,\n intent,\n state,\n isInvalid,\n description,\n isRequired,\n reverse,\n onCheckedChange: handleCheckedChange,\n }\n }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n useEffect(() => {\n onCheckedChangeRef.current = onCheckedChangeProp\n }, [onCheckedChangeProp])\n\n return (\n <CheckboxGroupContext.Provider value={current}>\n <div\n ref={ref}\n className={checkboxGroupStyles({ className, orientation })}\n role=\"group\"\n aria-labelledby={labelId}\n aria-describedby={description}\n {...others}\n >\n {children}\n </div>\n </CheckboxGroupContext.Provider>\n )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n /**\n * The id of the checkbox group.\n */\n id: string\n /**\n * The name of the group. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value of the checkbox group.\n */\n value?: string[]\n /**\n * A set of ids separated by a space used to describe the input component given by a set of messages.\n */\n description?: string\n /**\n * The validation state of the checkbox group.\n */\n state?: 'error' | 'success' | 'alert'\n /**\n * If true, the checkbox group will be invalid.\n */\n isInvalid?: boolean\n /**\n * If true, the checkbox group will be required.\n */\n isRequired?: boolean\n /**\n * Callback used to update or notify the value of the checkbox group.\n */\n onCheckedChange?: (checked: boolean, changed: string) => void\n /**\n * When true, the label will be placed on the left side of the Checkbox\n */\n reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n const context = useContext(CheckboxGroupContext)\n\n return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n [\n 'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n 'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n 'focus-visible:u-outline',\n 'hover:ring-4 hover:cursor-pointer',\n 'u-shadow-border-transition',\n ],\n {\n variants: {\n /**\n * Color scheme of the checkbox.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n >({\n main: [\n 'text-on-main',\n 'hover:ring-main-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n 'data-[state=checked]:border-main data-[state=checked]:bg-main',\n ],\n support: [\n 'text-on-support',\n 'hover:ring-support-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n 'data-[state=checked]:border-support data-[state=checked]:bg-support',\n ],\n accent: [\n 'text-on-accent',\n 'hover:ring-accent-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n 'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n ],\n success: [\n 'text-on-success',\n 'hover:ring-success-container',\n 'data-[state=unchecked]:border-success',\n 'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n 'data-[state=checked]:border-success data-[state=checked]:bg-success',\n ],\n alert: [\n 'text-on-alert',\n 'hover:ring-alert-container',\n 'data-[state=unchecked]:border-alert',\n 'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n 'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n ],\n error: [\n 'text-on-error',\n 'hover:ring-error-container',\n 'data-[state=unchecked]:border-error',\n 'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n 'data-[state=checked]:border-error data-[state=checked]:bg-error',\n ],\n info: [\n 'text-on-info',\n 'hover:ring-info-container',\n 'data-[state=unchecked]:border-info',\n 'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n 'data-[state=checked]:border-info data-[state=checked]:bg-info',\n ],\n neutral: [\n 'text-on-neutral',\n 'hover:ring-neutral-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n 'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n ],\n }),\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n extends\n CheckboxInputStylesProps,\n Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n /**\n * The checked icon to use.\n */\n icon?: ReactNode\n /**\n * The indeterminate icon to use.\n */\n indeterminateIcon?: ReactNode\n /**\n * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n */\n defaultChecked?: boolean\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n */\n checked?: CheckedStatus\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n /**\n * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n */\n required?: boolean\n /**\n * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n /**\n * Event handler called when the checked state of the checkbox changes.\n */\n onCheckedChange?: (checked: boolean) => void\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n className,\n icon = <Check />,\n indeterminateIcon = <Minus />,\n intent,\n checked,\n ref,\n ...others\n}: CheckboxInputProps) => (\n <CheckboxPrimitive\n ref={ref}\n className={checkboxInputStyles({ intent, className })}\n checked={checked}\n {...others}\n >\n <CheckboxIndicator>\n <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n </CheckboxIndicator>\n </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n variants: {\n disabled: {\n true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n /**\n * When true, prevents the user from interacting with the checkbox item.\n */\n disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n Pick<CheckboxGroupContextState, 'reverse'> & {\n ref?: Ref<HTMLButtonElement>\n }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\nexport const Checkbox = ({\n id: idProp,\n className,\n intent: intentProp,\n checked: checkedProp,\n value,\n disabled,\n reverse = false,\n onCheckedChange,\n children,\n ref: forwardedRef,\n ...others\n}: CheckboxProps) => {\n const checkboxId = `${ID_PREFIX}-${useId()}`\n const innerId = idProp || checkboxId\n\n const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n const field = useFormFieldControl()\n const group = useCheckboxGroup()\n\n const rootRef = useRef<HTMLButtonElement | undefined>(null)\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n const getCheckboxAttributes = ({\n fieldState,\n groupState,\n checkboxIntent,\n }: {\n fieldState: ReturnType<typeof useFormFieldControl>\n groupState: ReturnType<typeof useCheckboxGroup>\n checkboxIntent: CheckboxInputProps['intent']\n }) => {\n const name = fieldState.name ?? groupState.name\n const isRequired = fieldState.isRequired ?? groupState.isRequired\n const state = fieldState.state ?? groupState.state\n const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n const isFieldEnclosed = fieldState.id !== groupState.id\n const id = isFieldEnclosed ? fieldState.id : undefined\n const description = isFieldEnclosed ? fieldState.description : undefined\n\n const intent = state ?? checkboxIntent ?? groupState.intent\n\n return { name, isRequired, isInvalid, id, description, intent }\n }\n\n const checked = value ? group.value?.includes(value) : checkedProp\n\n const handleCheckedChange = (isChecked: boolean) => {\n onCheckedChange?.(isChecked)\n\n const rootRefValue = rootRef.current?.value\n if (rootRefValue && group.onCheckedChange) {\n group.onCheckedChange(isChecked, rootRefValue)\n }\n }\n\n const {\n id,\n name,\n isInvalid,\n description,\n intent,\n isRequired: isRequiredAttr,\n } = getCheckboxAttributes({\n fieldState: field,\n groupState: group,\n checkboxIntent: intentProp,\n })\n\n const isRequired = useMemo(() => {\n if (!group) return isRequiredAttr\n\n return isRequiredAttr ? !group.value?.length : false\n }, [group, isRequiredAttr])\n\n const checkboxLabel = children && (\n <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n {children}\n </CheckboxLabel>\n )\n\n const checkboxInput = (\n <CheckboxInput\n ref={ref}\n id={id || innerId}\n name={name}\n value={value}\n intent={intent}\n checked={checked}\n disabled={disabled}\n required={isRequired}\n aria-describedby={description}\n aria-invalid={isInvalid}\n onCheckedChange={handleCheckedChange}\n aria-labelledby={children ? innerLabelId : field.labelId}\n {...others}\n />\n )\n\n const content =\n group.reverse || reverse ? (\n <>\n {checkboxLabel}\n {checkboxInput}\n </>\n ) : (\n <>\n {checkboxInput}\n {checkboxLabel}\n </>\n )\n\n return (\n <span\n data-spark-component=\"checkbox\"\n className={cx('gap-md text-body-1 relative flex items-start', className)}\n >\n {content}\n </span>\n )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n variants: {\n /**\n * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n */\n orientation: {\n vertical: ['flex-col', 'gap-lg'],\n horizontal: ['gap-xl'],\n },\n },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n extends\n Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n CheckboxGroupStylesProps,\n Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n /**\n * The initial value of the checkbox group\n */\n defaultValue?: string[]\n /**\n * The callback fired when any children Checkbox is checked or unchecked\n */\n onCheckedChange?: (value: string[]) => void\n ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n name: nameProp,\n value: valueProp,\n defaultValue,\n className,\n intent,\n orientation = 'vertical',\n onCheckedChange: onCheckedChangeProp,\n reverse = false,\n children,\n ref,\n ...others\n}: CheckboxGroupProps) => {\n const [value, setValue] = useCombinedState(valueProp, defaultValue)\n const field = useFormFieldControl()\n const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n const { id, labelId, description, state, isInvalid, isRequired } = field\n const name = nameProp ?? field.name\n\n const current = useMemo(() => {\n const handleCheckedChange = (checked: boolean, changed: string) => {\n const values = value || []\n const modified = checked\n ? [...values, changed]\n : values.filter((val: string) => val !== changed)\n\n setValue(modified)\n\n if (onCheckedChangeRef.current) {\n onCheckedChangeRef.current(modified)\n }\n }\n\n return {\n id,\n name,\n value,\n intent,\n state,\n isInvalid,\n description,\n isRequired,\n reverse,\n onCheckedChange: handleCheckedChange,\n }\n }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n useEffect(() => {\n onCheckedChangeRef.current = onCheckedChangeProp\n }, [onCheckedChangeProp])\n\n return (\n <CheckboxGroupContext.Provider value={current}>\n <div\n ref={ref}\n className={checkboxGroupStyles({ className, orientation })}\n role=\"group\"\n aria-labelledby={labelId}\n aria-describedby={description}\n {...others}\n >\n {children}\n </div>\n </CheckboxGroupContext.Provider>\n )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":";;;;;;;;;;;;;AA2CA,IAAa,IAAuB,EAAkD,EAAE,CAAC,EAE5E,UACK,EAAW,EAAqB,EC3C5C,IAA6B,EAAS,mBAM/B,KAAqB,MAChC,kBAAC,GAAD;CAA4B,WAAU;CAA6C,GAAI;CAAS,CAAA;AAGlG,EAAkB,cAAc;;;ACVhC,IAAa,IAAsB,EACjC;CACE;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EAIR,QAAQ,EAGN;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD;EACD,SAAS;GACP;GACA;GACA;GACA;GACA;GACD;EACD,QAAQ;GACN;GACA;GACA;GACA;GACA;GACD;EACD,SAAS;GACP;GACA;GACA;GACA;GACA;GACD;EACD,OAAO;GACL;GACA;GACA;GACA;GACA;GACD;EACD,OAAO;GACL;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD;EACD,SAAS;GACP;GACA;GACA;GACA;GACA;GACD;EACF,CAAC,EACH;CACD,iBAAiB,EACf,QAAQ,WACT;CACF,CACF,ECvEK,IAAoB,EAAS,UA6CtB,KAAiB,EAC5B,cACA,UAAO,kBAAC,GAAD,EAAS,CAAA,EAChB,uBAAoB,kBAAC,GAAD,EAAS,CAAA,EAC7B,WACA,YACA,QACA,GAAG,QAEH,kBAAC,GAAD;CACO;CACL,WAAW,EAAoB;EAAE;EAAQ;EAAW,CAAC;CAC5C;CACT,GAAI;WAEJ,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAM,MAAK;YAAM,MAAY,kBAAkB,IAAoB;EAAY,CAAA,EAC7D,CAAA;CACF,CAAA;AAGtB,EAAc,cAAc;;;AC3E5B,IAAa,IAAc,EAAI,QAAQ;CACrC,UAAU,EACR,UAAU;EACR,MAAM,CAAC,sBAAsB,qBAAqB;EAClD,OAAO,CAAC,iBAAiB;EAC1B,EACF;CACD,iBAAiB,EACf,UAAU,IACX;CACF,CAAC,ECFW,KAAiB,EAAE,aAAU,GAAG,QAC3C,kBAAC,GAAD;CAAO,WAAW,EAAY,EAAE,aAAU,CAAC;CAAE,GAAI;CAAU,CAAA;AAG7D,EAAc,cAAc;;;ACA5B,IAAM,IAAY,aAGL,KAAY,EACvB,IAAI,GACJ,cACA,QAAQ,GACR,SAAS,GACT,UACA,aACA,aAAU,IACV,oBACA,aACA,KAAK,GACL,GAAG,QACgB;CACnB,IAAM,IAAa,GAAG,EAAU,GAAG,GAAO,IACpC,IAAU,KAAU,GAEpB,IAAe,GAAG,EAAU,GAAG,GAAO,IAEtC,IAAQ,GAAqB,EAC7B,IAAQ,GAAkB,EAE1B,IAAU,EAAsC,KAAK,EACrD,IAAM,EAAa,GAAc,EAAQ,EAEzC,KAAyB,EAC7B,eACA,eACA,wBAKI;EACJ,IAAM,IAAO,EAAW,QAAQ,EAAW,MACrC,IAAa,EAAW,cAAc,EAAW,YACjD,IAAQ,EAAW,SAAS,EAAW,OACvC,IAAY,EAAW,aAAa,EAAW,WAE/C,IAAkB,EAAW,OAAO,EAAW;AAMrD,SAAO;GAAE;GAAM;GAAY;GAAW,IAL3B,IAAkB,EAAW,KAAK,KAAA;GAKH,aAJtB,IAAkB,EAAW,cAAc,KAAA;GAIR,QAFxC,KAAS,KAAkB,EAAW;GAEU;IAG3D,IAAU,IAAQ,EAAM,OAAO,SAAS,EAAM,GAAG,GAEjD,KAAuB,MAAuB;AAClD,MAAkB,EAAU;EAE5B,IAAM,IAAe,EAAQ,SAAS;AACtC,EAAI,KAAgB,EAAM,mBACxB,EAAM,gBAAgB,GAAW,EAAa;IAI5C,EACJ,OACA,SACA,cACA,gBACA,WACA,YAAY,MACV,EAAsB;EACxB,YAAY;EACZ,YAAY;EACZ,gBAAgB;EACjB,CAAC,EAEI,IAAa,QACZ,IAEE,IAAiB,CAAC,EAAM,OAAO,SAAS,KAF5B,GAGlB,CAAC,GAAO,EAAe,CAAC,EAErB,IAAgB,KACpB,kBAAC,GAAD;EAAyB;EAAU,SAAS,KAAM;EAAS,IAAI;EAC5D;EACa,CAAA,EAGZ,IACJ,kBAAC,GAAD;EACO;EACL,IAAI,KAAM;EACJ;EACC;EACC;EACC;EACC;EACV,UAAU;EACV,oBAAkB;EAClB,gBAAc;EACd,iBAAiB;EACjB,mBAAiB,IAAW,IAAe,EAAM;EACjD,GAAI;EACJ,CAAA,EAGE,IACJ,EAAM,WAAW,IACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;AAGP,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,WAAW,EAAG,gDAAgD,EAAU;YAEvE;EACI,CAAA;;AAIX,EAAS,cAAc;;;AC3IvB,IAAa,IAAsB,EAAI,CAAC,OAAO,EAAE,EAC/C,UAAU,EAIR,aAAa;CACX,UAAU,CAAC,YAAY,SAAS;CAChC,YAAY,CAAC,SAAS;CACvB,EACF,EACF,CAAC,ECWW,KAAiB,EAC5B,MAAM,GACN,OAAO,GACP,iBACA,cACA,WACA,iBAAc,YACd,iBAAiB,GACjB,aAAU,IACV,aACA,QACA,GAAG,QACqB;CACxB,IAAM,CAAC,GAAO,KAAY,EAAiB,GAAW,EAAa,EAC7D,IAAQ,GAAqB,EAC7B,IAAqB,EAAO,EAAoB,EAEhD,EAAE,OAAI,YAAS,gBAAa,UAAO,cAAW,kBAAe,GAC7D,IAAO,KAAY,EAAM,MAEzB,IAAU,SAcP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAvB2B,GAAkB,MAAoB;GACjE,IAAM,IAAS,KAAS,EAAE,EACpB,IAAW,IACb,CAAC,GAAG,GAAQ,EAAQ,GACpB,EAAO,QAAQ,MAAgB,MAAQ,EAAQ;AAInD,GAFA,EAAS,EAAS,EAEd,EAAmB,WACrB,EAAmB,QAAQ,EAAS;;EAevC,GACA;EAAC;EAAI;EAAM;EAAO;EAAQ;EAAO;EAAW;EAAa;EAAY;EAAU;EAAQ,CAAC;AAM3F,QAJA,QAAgB;AACd,IAAmB,UAAU;IAC5B,CAAC,EAAoB,CAAC,EAGvB,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,OAAD;GACO;GACL,WAAW,EAAoB;IAAE;IAAW;IAAa,CAAC;GAC1D,MAAK;GACL,mBAAiB;GACjB,oBAAkB;GAClB,GAAI;GAEH;GACG,CAAA;EACwB,CAAA;;AAIpC,EAAc,cAAc"}
|