plass-ui 1.5.0 → 1.6.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/CHANGELOG.md +60 -0
- package/README.md +27 -7
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +3 -0
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +6 -0
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/color-picker/PlColorPicker.d.ts +19 -2
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +9 -3
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/empty/PlEmpty.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +18 -2
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/highlight/PlHighlight.d.ts +10 -3
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +12 -4
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +9 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +8 -2
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +15 -5
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.js +1 -1
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/window-pane/PlWindowPane.d.ts +3 -3
- package/dist/internal/animate.d.ts +0 -25
- package/dist/internal/animate.js +1 -1
- package/dist/internal/chart-frame.d.ts +2 -17
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +9 -0
- package/dist/internal/chart.js +1 -1
- package/dist/internal/defaults.d.ts +14 -1
- package/dist/internal/glow.d.ts +15 -0
- package/dist/internal/glow.js +1 -1
- package/dist/internal/labels.d.ts +13 -0
- package/dist/internal/labels.js +1 -1
- package/dist/internal/notch.d.ts +83 -0
- package/dist/internal/notch.js +1 -0
- package/dist/internal/picker.d.ts +9 -3
- package/dist/internal/picker.js +1 -1
- package/dist/internal/styles.d.ts +21 -0
- package/dist/internal/styles.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/zh-Hans.js +1 -1
- package/dist/provider/PlassProvider.d.ts +4 -3
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +55 -4
- package/dist/tokens.css +55 -4
- package/dist/types.d.ts +55 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as n}from"@base-ui/react/combobox";import{Field as r}from"@base-ui/react/field";import{PlChip as i}from"../chip/PlChip.js";import{CheckIcon as o,ChevronIcon as c,CloseIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{glowPointerMove as u}from"../../internal/glow.js";import{FieldNotch as h,notchShellStyle as b}from"../../internal/notch.js";import{chipRemoveClasses as f,controlHeightClasses as g,controlTextLeadingClasses as v,cx as x,disabledClasses as y,fieldReadOnlyClasses as w,fieldRestClasses as N,focusWithinRingClasses as C,forcedHighlightedClasses as j,gapClasses as L,glassClasses as I,hasContent as S,iconClasses as z,metaTextClasses as _,paddingXClasses as O,radiusClasses as P,stackGapClasses as V,surfaceSlots as A,transitionClasses as M}from"../../internal/styles.js";const k=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",M,z].join(" "),R=C,T={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},q=/* @__PURE__ */[I,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),E=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",M,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",j,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),F=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:C="glass",size:j,color:I,density:z,elevation:M=0,items:$,multiple:D,value:K,defaultValue:G,onValueChange:H,onInputValueChange:W,allowCustom:B=!0,customLabel:J,clearable:Q=!1,emptyMessage:U,limit:X,placeholder:Y,label:Z,labelPlacement:ee,description:ae,error:le,invalid:te,startIcon:se,fullWidth:ne=!1,disabled:re=!1,readOnly:ie=!1,required:oe=!1,name:ce,open:de,defaultOpen:me,onOpenChange:pe,openLabel:ue,clearLabel:he,removeLabel:be,inputRef:fe,id:ge,className:ve,hotKeys:xe,classNames:ye,style:we,...Ne}){const Ce=t(),je=s(),Le=ue??je.open,Ie=he??je.clear,Se=U??je.empty,ze=be??je.removeItem,_e=j??Ce.size??"md",Oe=I??Ce.color??"primary",Pe=z??Ce.density??"default",Ve="notch"===(ee??Ce.labelPlacement??"top")&&S(Z),Ae=S(le),Me=te??Ae,ke=Me?"danger":Oe,Re=!0===D,Te=l.useMemo(()=>$.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[$]),[qe,Ee]=l.useState(()=>toArray(G)),Fe=void 0===K?qe:toArray(K),[$e,De]=l.useState(""),Ke=l.useMemo(()=>new Map(Te.map(e=>[e.value,e])),[Te]),Ge=l.useCallback(e=>Ke.get(e)??{value:e,label:String(e),custom:!0},[Ke]),He=$e.trim(),We=He.toLocaleLowerCase(),Be=""===He||Te.some(e=>e.label.toLocaleLowerCase()===We||String(e.value).toLocaleLowerCase()===We)||Fe.some(e=>String(e).toLocaleLowerCase()===We),Je=!B||ie||re||Be?null:He,Qe=l.useMemo(()=>null===Je?Te:[...Te,{value:Je,label:Je,custom:!0}],[Te,Je]),Ue=Re?Fe.map(Ge):Fe.length>0?Ge(Fe[0]):null,Xe=!re&&!ie,Ye=x(k,Ve?"":R,v[_e],P[_e],L[_e],Re?T[_e]:g[_e],`${O[Pe][_e]} pe-1.5`,re?y[C]:ie?w[C]:N[C],Xe?"plass-glow":""),Ze=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(n.Input,{ref:fe,placeholder:Y,onKeyDown:p(xe,void 0),className:x(Ze,Re&&"min-w-16",Re&&a&&"ms-1.5")}),ea=e(r.Label,{className:x(_[_e],"font-semibold",re?"text-(--plass-muted-fg)":"text-(--plass-fg)",ye?.label),children:Z});return a(r.Root,{disabled:re,invalid:Me,className:x("flex-col align-top",V[_e],ne?"flex w-full":"inline-flex",ve),style:{...A(ke,M),...we},...Ne,children:[S(Z)&&!Ve?ea:null,a(n.Root,{id:ge,name:ce,items:Qe,multiple:Re,value:Ue,onValueChange:e=>{!function commit(e){void 0===K&&Ee(e),H?.(Re?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{De(e),W?.(e)},open:de,defaultOpen:me,onOpenChange:e=>pe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:X,disabled:re,readOnly:ie,required:oe,children:[e(h,{notched:Ve,size:_e,density:Pe,variant:C,disabled:re,readOnly:ie,label:ea,children:a(n.InputGroup,{style:Ve?b:void 0,onPointerMove:u(Xe),className:x(Ye,ye?.control),children:[se?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:se}):null,Re?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"glass",size:_e,color:ke,density:"compact",disabled:re,endIcon:ie||re?null:e(n.ChipRemove,{"aria-label":ze(a.label),className:f,children:e(d,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),Q&&!ie?e(n.Clear,{"aria-label":Ie,className:F,children:e(d,{})}):null,e(n.Trigger,{"aria-label":Le,className:F,children:e(n.Icon,{className:x("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(c,{})})})]})}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(n.Popup,{className:x(q,P[_e],v[_e]),style:A(ke,3),children:[e(n.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:Se}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:E,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(m,{})}),e("span",{className:"truncate",children:J?J(t.label):je.addCustom(t.label)})]}):a(l.Fragment,{children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),ae?e(r.Description,{className:x("m-0",_[_e],"text-(--plass-muted-fg)",ye?.description),children:ae}):null,e(r.Error,Ae?{match:!0,className:x(_[_e],"text-(--p-accent)",ye?.error),children:le}:{className:x(_[_e],"text-(--p-accent)",ye?.error)})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as l,usePickerLabels as r}from"../../internal/calendar.js";import{CalendarIcon as s}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as m,isDayOutside as u,isMonthOutside as h,isValidDate as p,isYearOutside as f,localeWeekStart as y,mergeDateAndTime as b,startOfDay as g,startOfMonth as j,startOfYear as D,toISODate as O,toISOMonth as S,toISOYear as k,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as z}from"../../internal/styles.js";const C={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},w={day:O,month:S,year:k};export const PlDatePicker=/* @__PURE__ */a.forwardRef(function PlDatePicker({value:O,defaultValue:S,onValueChange:k,precision:P="day",open:M,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:N,weekStartsOn:T,format:Y,placeholder:q,clearable:A=!1,showTodayButton:G=!0,closeOnSelect:H=!0,labels:J,name:K,size:L,color:Q,density:U,readOnly:W=!1,disabled:X=!1,startIcon:Z,...$},_){const ee=o(),te=N??ee.locale,ae=L??ee.size??"md",oe=Q??ee.color??"primary",ne=U??ee.density??"default",le=r(J),re=T??ee.weekStartsOn??y(te),se=Y??C[P],[ie,ce]=a.useState(S??null),de=void 0!==O?O:ie,[me,ue]=a.useState(V??!1),he=M??me,[pe,fe]=a.useState(()=>j(p(de)?de:I??x()));a.useEffect(()=>{he&&fe(j(p(de)?de:I??x()))},[he]);const setOpen=e=>{e&&(W||X)||(void 0===M&&ue(e),B?.(e))},commit=e=>{void 0===O&&ce(e),k?.(e)},select=e=>{const t=p(de)?b(e,de):g(e);commit(t),fe(j(t)),H&&setOpen(!1)},ye=x(),be="day"===P?ye:"month"===P?j(ye):D(ye),ge="day"===P?le.today:"month"===P?le.thisMonth:le.thisYear,je="day"===P?u(ye,R,E)||(F?.(ye)??!1):"month"===P?h(ye,R,E):f(ye,R,E),De=G||A,Oe=a.useMemo(()=>v(d(te,se),q),[te,se,q]);return e(c,{...$,size:ae,color:oe,density:ne,readOnly:W,disabled:X,triggerRef:_,startIcon:Z??e(s,{}),display:p(de)?m(de,te,se):q??"",samples:Oe,empty:!p(de),clearable:A,onClear:()=>commit(null),open:he,onOpenChange:setOpen,labels:le,name:K,formValue:p(de)?w[P](de):"",children:t("div",{className:z("flex flex-col",De&&"gap-1.5"),children:[e(l,{size:ae,color:oe,locale:te,weekStartsOn:re,month:pe,onMonthChange:fe,precision:P,selected:[de],onSelect:select,minDate:R,maxDate:E,shouldDisableDate:F,labels:le,autoFocus:!0}),De?t(i,{size:ae,children:[A?e(n,{variant:"ghost",size:ae,color:oe,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:le.clear}):null,G?e(n,{variant:"ghost",size:ae,color:oe,density:"compact",disabled:je,onClick:()=>select(be),children:ge}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{PlButton as a}from"../button/PlButton.js";import{Calendar as s,usePickerLabels as r}from"../../internal/calendar.js";import{ArrowRightIcon as o,CalendarIcon as i}from"../../internal/icons.js";import{PickerFooter as c,PickerShell as u}from"../../internal/picker.js";import{WidthSizer as d}from"../../internal/sizer.js";import{addMonths as m,compareDay as p,displaySamples as f,formatDate as h,isValidDate as x,localeWeekStart as g,startOfDay as v,startOfMonth as y,toISODate as w,today as b,withPlaceholder as N}from"../../internal/date.js";import{cx as j,gapClasses as S,metaTextClasses as D}from"../../internal/styles.js";const C={start:null,end:null};export const PlDateRangePicker=/* @__PURE__ */n.forwardRef(function PlDateRangePicker({value:O,defaultValue:k,onValueChange:P,open:z,defaultOpen:M,onOpenChange:R,defaultMonth:B,minDate:V,maxDate:E,shouldDisableDate:I,locale:F,weekStartsOn:W,format:q={dateStyle:"medium"},monthCount:A=2,startPlaceholder:G,endPlaceholder:H,presets:J,clearable:K=!1,closeOnSelect:L=!0,labels:Q,name:T,size:U,color:X,density:Y,readOnly:Z=!1,disabled:$=!1,startIcon:_,...ee},le){const ne=t(),te=F??ne.locale,ae=U??ne.size??"md",se=X??ne.color??"primary",re=Y??ne.density??"default",oe=r(Q),ie=W??ne.weekStartsOn??g(te),[ce,ue]=n.useState(k??C),de=void 0!==O?O??C:ce,me=x(de.start)?de.start:null,pe=x(de.end)?de.end:null,[fe,he]=n.useState(M??!1),xe=z??fe,[ge,ve]=n.useState(null),[ye,we]=n.useState(null),[be,Ne]=n.useState(()=>y(me??B??b()));n.useEffect(()=>{xe?Ne(y(me??B??b())):(ve(null),we(null))},[xe]);const setOpen=e=>{e&&(Z||$)||(void 0===z&&he(e),R?.(e))},commit=e=>{void 0===O&&ue(e),P?.(e)},je=ge??me,Se=null!==ge?ye:pe,write=(l,n)=>x(l)?h(l,te,q):e("span",{className:"text-(--plass-muted-fg)",children:n??""}),De=m(be,1),Ce=2===A,Oe=ee.fullWidth??!1,ke=n.useMemo(()=>Oe?[]:f(te,q),[Oe,te,q]),Pe=null!==ge?oe.end:null===me?oe.start:null,ze={size:ae,color:se,locale:te,weekStartsOn:ie,selected:[me,pe,ge],rangeStart:je,rangeEnd:Se,onSelect:e=>{const l=v(e);if(null===ge)return ve(l),we(l),void commit({start:l,end:null});const[n,t]=p(l,ge)<0?[l,ge]:[ge,l];ve(null),we(null),commit({start:n,end:t}),L&&setOpen(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:V,maxDate:E,shouldDisableDate:I,showOutsideDays:!1,labels:oe};return e(u,{...ee,size:ae,color:se,density:re,readOnly:Z,disabled:$,triggerRef:le,startIcon:_??e(i,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(me,G)}),Oe?null:e(d,{samples:N(ke,G)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) rtl:rotate-180",children:e(o,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(pe,H)}),Oe?null:e(d,{samples:N(ke,H)})]})]}),empty:null===me&&null===pe,clearable:K,onClear:()=>commit(C),open:xe,onOpenChange:setOpen,labels:oe,name:T,formValue:[me?w(me):"",pe?w(pe):""],children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:j("flex items-stretch",S[ae]),children:[J&&J.length>0?e("div",{className:j("flex max-h-[calc(var(--p-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--plass-divider)]"),children:J.map((l,n)=>e(a,{variant:"ghost",size:ae,color:se,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;ve(null),we(null),commit(l),x(l.start)&&Ne(y(l.start)),L&&setOpen(!1)})(l),children:l.label},n))}):null,e(s,{...ze,month:be,onMonthChange:Ne,showNextButton:!Ce,autoFocus:!0}),Ce?e(s,{...ze,month:De,onMonthChange:e=>Ne(m(e,-1)),showPreviousButton:!1}):null]}),K||null!==Pe?l(c,{size:ae,children:[null!==Pe?e("span",{className:j("me-auto text-(--plass-muted-fg)",D[ae]),children:Pe}):null,K?e(a,{variant:"ghost",size:ae,color:se,density:"compact",onClick:()=>{ve(null),we(null),commit(C),setOpen(!1)},children:oe.clear}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("m-0 font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("m-0 max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassElevation, PlassStyleProps } from '../../types.js';
|
|
2
|
+
import type { PlassElevation, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
|
|
3
3
|
/** Why a file was turned away. One reason per file, in the order they are checked. */
|
|
4
4
|
export type PlFileRejectionReason = 'type' | 'size' | 'count';
|
|
5
5
|
export interface PlFileRejection {
|
|
@@ -38,8 +38,14 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
|
|
|
38
38
|
* file disappears silently, which is the single worst thing a dropzone does.
|
|
39
39
|
*/
|
|
40
40
|
onReject?: (rejections: PlFileRejection[]) => void;
|
|
41
|
-
/**
|
|
41
|
+
/** The name of what the box collects. */
|
|
42
42
|
label?: React.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* Where the `label` goes — above the box, or in its top edge.
|
|
45
|
+
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
46
|
+
* @default 'top'
|
|
47
|
+
*/
|
|
48
|
+
labelPlacement?: PlassFieldLabelPlacement;
|
|
43
49
|
/** Helper text below the box. */
|
|
44
50
|
description?: React.ReactNode;
|
|
45
51
|
/** Error message below. Its presence also turns the picker invalid. */
|
|
@@ -60,6 +66,16 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
|
|
|
60
66
|
* @default true
|
|
61
67
|
*/
|
|
62
68
|
showList?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Says under the box why files were turned away, one line per reason.
|
|
71
|
+
*
|
|
72
|
+
* On, because a dropzone that swallows a file without a word is the single
|
|
73
|
+
* worst thing a dropzone does, and `onReject` alone leaves that to a caller
|
|
74
|
+
* who has to remember. Turn it off when the app shows the same thing
|
|
75
|
+
* somewhere of its own — `onReject` still fires either way.
|
|
76
|
+
* @default true
|
|
77
|
+
*/
|
|
78
|
+
showRejections?: boolean;
|
|
63
79
|
/**
|
|
64
80
|
* Accessible name of a file's remove button. Receives the file's name.
|
|
65
81
|
* @default `Remove {name}`, from the label pack
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Field as l}from"@base-ui/react/field";import{useDefaults as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Field as l}from"@base-ui/react/field";import{useDefaults as o}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as t,useFormReport as n}from"../../internal/form.js";import{glowPointerMove as i}from"../../internal/glow.js";import{CloseIcon as d}from"../../internal/icons.js";import{useLabels as c}from"../../internal/labels.js";import{FieldNotch as p,notchShellStyle as f}from"../../internal/notch.js";import{controlTextLeadingClasses as u,disabledClasses as m,focusRingClasses as h,gapClasses as b,glassClasses as v,hasContent as g,iconClasses as x,metaTextClasses as y,radiusClasses as j,readOnlyFilterClasses as $,sheetTitleClasses as k,stackGapClasses as w,surfaceSlots as N,transitionClasses as z}from"../../internal/styles.js";const _={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},C={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},I={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"},B=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line-hover)]","group-has-[:focus-visible]/field:[border-color:var(--p-ring)]"].join(" "),R=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),L={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),ghost:/* @__PURE__ */["border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:0_0_0_4px_var(--p-soft)]"].join(" ")};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:v="glass",size:T,color:D,density:M,elevation:P=0,accept:F,multiple:S=!1,maxSize:W,maxFiles:E,value:V,defaultValue:A,onFilesChange:O,onReject:q,label:G,labelPlacement:U,description:H,error:Y,invalid:J,title:K,hint:Q,icon:X,showList:Z=!0,showRejections:ee=!0,removeLabel:re,fullWidth:se=!0,disabled:le=!1,readOnly:oe=!1,required:ae=!1,name:te,id:ne,className:ie,style:de,...ce},pe){const fe=o(),ue=c(),me=re??ue.removeItem,he=T??fe.size??"md",be=D??fe.color??"primary",ve=M??fe.density??"default",ge="notch"===(U??fe.labelPlacement??"top")&&g(G),xe=s.useRef(null),ye=s.useRef(null),je=s.useRef(null);s.useImperativeHandle(pe,()=>xe.current);const[$e,ke]=s.useState(()=>[...A??[]]),we=s.useMemo(()=>V?[...V]:$e,[V,$e]),Ne=s.useRef(0),[ze,_e]=s.useState(!1),[Ce,Ie]=s.useState({type:0,size:0,count:0}),Be=g(Y),Re=J??Be,Le=Re?"danger":be,Te=le||oe,De=s.useId(),Me=`${De}-error`,Pe=`${De}-label`,Fe=ne??`${De}-zone`,Se=s.useCallback(e=>{const r=xe.current;if(!r||"undefined"==typeof DataTransfer)return;const s=new DataTransfer;for(const r of e)s.items.add(r);r.files=s.files},[]);s.useEffect(()=>{Se(we)},[we,Se]),n(te,()=>[...we],!le);const We=s.useCallback(e=>{V||ke(e),O?.(e)},[O,V]),Ee=s.useCallback(e=>{const r=[],s=[],l=S?E??Number.POSITIVE_INFINITY:1,o=S?we.length:0;for(const a of e)F&&!matchesAccept(a,F)?s.push({file:a,reason:"type"}):void 0!==W&&a.size>W?s.push({file:a,reason:"size"}):o+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[F,we.length,E,W,S]),Ve=s.useCallback(e=>{const{kept:r,rejections:s}=Ee(e),l={type:0,size:0,count:0};for(const e of s)l[e.reason]+=1;Ie(l),s.length>0&&q?.(s),r.length>0&&We(S?[...we,...r]:r)},[Ee,We,we,S,q]),Ae=s.useCallback(()=>{Ie(e=>e.type||e.size||e.count?{type:0,size:0,count:0}:e)},[]),Oe=[["type",ue.filesRejectedType],["size",ue.filesRejectedSize],["count",ue.filesRejectedCount]].filter(([e])=>Ce[e]>0),browse=()=>{Te||(Ae(),xe.current?.click())},qe=["relative flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",_[ve][he],j[he],b[he],z,x,ge?"":h,le?`${m[v]} border-2 border-dashed`:oe?`${C[v]} ${$} cursor-default`:ze?L[v]:C[v],Te||ze?"":I[v],Te?"":"plass-glow"].filter(Boolean).join(" "),Ge=e("span",{id:Pe,className:[y[he],"font-semibold",le?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:G});return r(l.Root,{name:te,disabled:le,invalid:Re,className:["flex-col align-top",w[he],se?"flex w-full":"inline-flex",ie??""].filter(Boolean).join(" "),style:{...N(Le,P),...de},...ce,children:[g(G)&&!ge?Ge:null,r("div",{className:`flex w-full flex-col ${w[he]}`,onDragEnter:e=>{Te||(e.preventDefault(),Ne.current+=1,_e(!0))},onDragOver:e=>{Te||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{Te||(Ne.current=Math.max(0,Ne.current-1),0===Ne.current&&_e(!1))},onDrop:e=>{Te||(e.preventDefault(),Ne.current=0,_e(!1),Ve(Array.from(e.dataTransfer.files)))},children:[e(l.Validity,{children:({validity:s})=>{const l=!1===s.valid,o=!Be&&l&&!le&&!0!==J,a=[g(H)||Be?De:null,o?Me:null].filter(Boolean).join(" ")||void 0;return e(p,{notched:ge,size:he,density:ve,variant:v,disabled:le,readOnly:oe,label:Ge,edgeClassName:le?R:Te?"border-2 border-dashed [border-color:var(--plass-border)]":ze?"border-2 border-dashed [border-color:var(--p-ring)]":B,children:r("button",{ref:ye,type:"button",id:Fe,"aria-labelledby":g(G)?`${Pe} ${Fe}`:void 0,disabled:le,"aria-describedby":a,"aria-invalid":Re||l||void 0,className:qe,style:ge?f:void 0,onPointerMove:i(!Te),onClick:browse,onBlur:()=>t(je.current),children:[void 0===X?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):g(X)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:X}):null,e("span",{className:`font-semibold ${k[he]}`,children:K??ue.filePickerTitle}),g(Q)?e("span",{className:`text-(--plass-muted-fg) ${y[he]}`,children:Q}):null]})})}}),e("input",{ref:xe,type:"file",name:te,accept:F,multiple:S,disabled:Te,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{Ve(Array.from(e.target.files??[])),Se(we)}}),Z&&we.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${w[he]} m-0 list-none p-0`,children:we.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",j.xs,u[he],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${y[he]}`,children:formatFileSize(s.size)}),Te?null:e("button",{type:"button","aria-label":me(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",h].join(" "),onClick:()=>{Ae(),We(we.filter((e,r)=>r!==l))},children:e(d,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null]}),ee&&Oe.length>0?e("div",{role:"status",className:`flex w-full flex-col ${y[he]} text-(--plass-danger-accent)`,children:Oe.map(([r,s])=>e("span",{children:s(Ce[r])},r))}):null,g(H)&&!Be?e("span",{id:De,className:`${y[he]} text-(--plass-muted-fg)`,children:H}):null,Be?e("span",{id:De,className:`${y[he]} text-(--p-accent)`,children:Y}):e(l.Error,{id:Me,className:`${y[he]} text-(--p-accent)`}),e(a,{ref:je,value:we.map(e=>e.name),required:ae&&!oe,disabled:le,standIn:()=>ye.current})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as $}from"../../internal/chart.js";import{numberFormatter as k}from"../../internal/format.js";import{cx as A,metaTextClasses as N,srOnlyClasses as j}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:S,categories:C,shape:D="grid",scale:I="sequential",midpoint:B=0,min:L,max:P,valueLabels:R="none",height:U,format:_,locale:q,label:F,legend:H,tooltip:K,empty:W,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),ne=t.useId(),[ie,re]=t.useState(null),ae=t.useCallback(e=>_?k(Y,_).format(e):c(e,Y),[_,Y]),oe=t.useMemo(()=>M(S),[S]),de=oe.reduce((e,l)=>Math.max(e,l.length),0),he=t.useMemo(()=>Array.from({length:de},(e,l)=>h(l,C,oe)),[de,C,oe]),se=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),ce=t.useMemo(()=>oe.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:se[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[oe,se]),me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of oe)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[oe]),ue=L??me?.min??0,xe=P??me?.max??1,fe=t.useCallback(e=>g(e,ue,xe,I,B),[ue,xe,I,B]),pe="number"==typeof U?U:x[X]??220,ge=s[X],we=!0===H||void 0===H||!1===H?{}:H,ve=!1!==H,ye=we.side??"bottom",be=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,Me="none"===be.mode,$e=null===me||0===de||0===S.length,ke=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=se.map(l=>$(l,e,ge));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,ge)),0)+10}},[D,se,ee,ge]),Ae="treemap"===D?0:ge+8,Ne={left:ke.band,width:Math.max(0,ee-ke.band),height:Math.max(0,pe-Ae)},je=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=he.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,ge)),0)}},[D,he,Y,ge]),ze=b(de,Ne.width,je.widest+8),Ee=t.useMemo(()=>{if(Ne.width<=0||Ne.height<=0)return[];if("treemap"===D){const e=[];return oe.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),Ne.width,Ne.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ne.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ne.height/Math.max(1,S.length),l=Ne.width/Math.max(1,de),t=[];return oe.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ne.left+r*l,y:i*e,width:l,height:e})})),t},[D,oe,S.length,de,Ne.left,Ne.width,Ne.height]),Se=t.useCallback((e,l)=>m(e.x??C?.[l]??he[l]??l,Y),[C,he,Y]),Ce=t.useCallback(e=>Se(e.cell,e.index),[Se]),De=null===ie?null:Ee.find(e=>e.row===ie.row&&e.index===ie.index)??null,Ie=null===De?[]:[{seriesIndex:De.row,color:De.cell.color??f(fe(De.cell.value??0),I),value:De.cell.value,formatted:ae(De.cell.value??0),label:De.cell.label}],Be=Array.from({length:w},(e,l)=>f(l,I));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:ye,legend:ve&&!$e?e(n,{steps:Be,from:ae("diverging"===I?-reach(ue,xe,B)+B:ue),to:ae("diverging"===I?reach(ue,xe,B)+B:xe),middle:"diverging"===I?ae(B):void 0,align:we.align??"center",vertical:"left"===ye||"right"===ye,size:X}):null,table:$e?null:l("table","treemap"===D?{id:te,className:j,children:[F?e("caption",{children:F}):null,oe.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:se[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:Se(t,n)}),e("td",{children:void 0!==t.label?t.label:ae(t.value)})]},n))]},n))]}:{id:te,className:j,children:[F?e("caption",{children:F}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),he.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:oe.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:se[n]}),he.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ae(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:$e?void 0:0,"aria-label":F??le.chart,"aria-describedby":$e?void 0:ne,onPointerLeave:()=>re(null),onBlur:()=>re(null),onKeyDown:e=>{if(Me||0===Ee.length)return;const l=null===ie?-1:Ee.findIndex(e=>e.row===ie.row&&e.index===ie.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ee[Math.min(Ee.length-1,l+1)];re({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ee[Math.max(0,(-1===l?Ee.length:l)-1)];re({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;re(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ee.length&&Ee[n].index!==Ee[l].index;)n+=t;n>=0&&n<Ee.length&&re({row:Ee[n].row,index:Ee[n].index})}e.preventDefault()},className:A("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:pe},children:[$e?e("div",{className:A("flex h-full items-center justify-center text-(--plass-muted-fg)",N[X]),children:W??le.empty}):ee>0?l("svg",{width:ee,height:pe,viewBox:`0 0 ${ee} ${pe}`,"aria-hidden":"true",className:"block",children:[Ee.map(t=>{const n=fe(t.cell.value??0),i=ie?.row===t.row&&ie?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=ae(t.cell.value??0),h="treemap"===D?"all"===R?[Ce(t),d]:[Ce(t)]:"all"===R?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,r,a/h.length,ge)),c=t.cell.color?"var(--plass-surface)":p(n,I);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,I),opacity:i?1:.94,onPointerEnter:Me?void 0:()=>re({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(ge+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ge,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===D?void 0:"tabular-nums",children:$(l,t.width-8,ge)},n))]},`${t.row}-${t.index}`)}),"grid"===D?ke.texts.map((l,t)=>e("text",{x:Ne.left-8,y:(t+.5)*Ne.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?je.texts.map((l,t)=>{const n=Ne.width/Math.max(1,de);return t%ze!==0?null:e("text",{x:Ne.left+(t+.5)*n,y:Ne.height+ge,textAnchor:"middle",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,De&&!Me?be.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:De.x+De.width/2,top:De.y},children:be.render({index:De.index,category:De.cell.x??he[De.index]??De.index,items:Ie})}):e(a,{heading:`${se[De.row]} · ${Ce(De)}`,items:Ie,x:De.x+De.width/2,y:De.y,flip:De.x+De.width/2>.6*ee,size:X}):null]}),$e?null:e("span",{id:ne,className:j,children:ce.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${ae(e.low)}`:`${e.name} ${ae(e.low)}–${ae(e.high)}`]},n))}),Me?null:e(i,{heading:De?`${se[De.row]} · ${Ce(De)}`:void 0,items:Ie})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}
|
|
@@ -7,9 +7,16 @@ export interface PlHighlightProps extends Omit<React.ComponentPropsWithoutRef<'s
|
|
|
7
7
|
*
|
|
8
8
|
* A string is one term, an array is several — the longest is tried first, so
|
|
9
9
|
* `['data', 'database']` marks the whole word rather than the first four
|
|
10
|
-
* letters of it.
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* letters of it. Every term in an array is taken as literal text, so a search
|
|
11
|
+
* box can be wired straight to it and a reader typing `1 + 1` looks for
|
|
12
|
+
* `1 + 1`. A pattern goes in on its own: `/error|\d+/` is what an array of
|
|
13
|
+
* expressions would have been, written the way a regular expression is read.
|
|
14
|
+
*
|
|
15
|
+
* A `RegExp` is used as written, with the global flag forced on, and
|
|
16
|
+
* `caseSensitive` is ignored for one because the expression carries its own
|
|
17
|
+
* flags. `wholeWord` still applies — it is tested against the text around
|
|
18
|
+
* each match rather than built into the expression, so it holds however the
|
|
19
|
+
* match was found.
|
|
13
20
|
*/
|
|
14
21
|
query: string | string[] | RegExp;
|
|
15
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["flex flex-col",f[j],v[s],h,d?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["m-0 flex list-none flex-col",f[j],v[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as r}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as c,controlTextLeadingClasses as d,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */s.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */s.forwardRef(function PlNavigationMenuLink({href:t,title:n,description:l,startIcon:o,className:c,children:u,target:m,rel:h,...v},b){const{size:w,density:P}=s.useContext(j);return a(r.Link,{ref:b,href:t,target:m,rel:i(m,h),className:p(k,N[w],f[w],y[P][w],"py-2",c),...v,children:[g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",d[w]),children:n}),g(l)?e("span",{className:p("text-(--plass-muted-fg)",x[w]),children:l}):null,u]})]})});export function PlNavigationMenuItem({label:n,href:d,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,active:b=!1,columns:w=1,children:z,className:k,style:C}){const{size:M,density:I}=s.useContext(j),L=void 0!==d&&!g(z),V=p(P,o[M],c[M],f[M],y[I][M],N[M],k);return e(r.Item,{value:v,children:L?a(r.Link,{href:d,target:u,rel:i(u,m),"aria-current":b?"page":void 0,className:V,style:C,children:[g(h)?h:null,n]}):a(t,{children:[a(r.Trigger,{disabled:x,className:V,style:C,children:[g(h)?h:null,n,e(r.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(r.Content,{className:p("grid gap-1",_[M]),style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:z})]})})}export const PlNavigationMenu=/* @__PURE__ */s.forwardRef(function PlNavigationMenu({size:t,color:l,density:i,orientation:o="horizontal",value:c,defaultValue:d,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=t??k.size??"md",C=l??k.color??"primary",M=i??k.density??"default",I=s.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(r.Root,{ref:P,orientation:o,value:c,defaultValue:d,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(r.List,{className:p("flex items-center","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(r.Popup,{className:p(z,N[_]),children:e(r.Viewport,{})})})})]})})});
|
|
1
|
+
"use client";import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as r}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as c,controlTextLeadingClasses as d,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */s.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */s.forwardRef(function PlNavigationMenuLink({href:t,title:n,description:l,startIcon:o,className:c,children:u,target:m,rel:h,...v},b){const{size:w,density:P}=s.useContext(j);return a(r.Link,{ref:b,href:t,target:m,rel:i(m,h),className:p(k,N[w],f[w],y[P][w],"py-2",c),...v,children:[g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",d[w]),children:n}),g(l)?e("span",{className:p("text-(--plass-muted-fg)",x[w]),children:l}):null,u]})]})});export function PlNavigationMenuItem({label:n,href:d,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,active:b=!1,columns:w=1,children:z,className:k,style:C}){const{size:M,density:I}=s.useContext(j),L=void 0!==d&&!g(z),V=p(P,o[M],c[M],f[M],y[I][M],N[M],k);return e(r.Item,{value:v,children:L?a(r.Link,{href:d,target:u,rel:i(u,m),"aria-current":b?"page":void 0,className:V,style:C,children:[g(h)?h:null,n]}):a(t,{children:[a(r.Trigger,{disabled:x,className:V,style:C,children:[g(h)?h:null,n,e(r.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(r.Content,{className:p("grid gap-1",_[M]),style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:z})]})})}export const PlNavigationMenu=/* @__PURE__ */s.forwardRef(function PlNavigationMenu({size:t,color:l,density:i,orientation:o="horizontal",value:c,defaultValue:d,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=t??k.size??"md",C=l??k.color??"primary",M=i??k.density??"default",I=s.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(r.Root,{ref:P,orientation:o,value:c,defaultValue:d,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(r.List,{className:p("m-0 flex list-none items-center p-0","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(r.Popup,{className:p(z,N[_]),children:e(r.Viewport,{})})})})]})})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
|
|
2
|
+
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* Where the two steppers sit.
|
|
5
5
|
*
|
|
@@ -98,10 +98,18 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
|
|
|
98
98
|
*/
|
|
99
99
|
decrementLabel?: string;
|
|
100
100
|
/**
|
|
101
|
-
*
|
|
102
|
-
*
|
|
101
|
+
* The name of what the field holds, wired to the control by Base UI's Field.
|
|
102
|
+
* `labelPlacement` decides whether it sits above the box or in its top edge.
|
|
103
|
+
* There is still no floating variant on purpose: a floating label needs a
|
|
104
|
+
* `transform` on the thing being typed into, and the notch does not move.
|
|
103
105
|
*/
|
|
104
106
|
label?: React.ReactNode;
|
|
107
|
+
/**
|
|
108
|
+
* Where the `label` goes — above the control, or in its top edge.
|
|
109
|
+
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
110
|
+
* @default 'top'
|
|
111
|
+
*/
|
|
112
|
+
labelPlacement?: PlassFieldLabelPlacement;
|
|
105
113
|
/** Helper text below the control. */
|
|
106
114
|
description?: React.ReactNode;
|
|
107
115
|
/** Error message below the control. Its presence also turns the field invalid. */
|
|
@@ -141,4 +149,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
|
|
|
141
149
|
* clamping, the press-and-hold repeat on the steppers, and the hidden input that
|
|
142
150
|
* submits with a form.
|
|
143
151
|
*/
|
|
144
|
-
export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
|
|
152
|
+
export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{glowPointerMove as c}from"../../internal/glow.js";import{FieldNotch as d,notchShellStyle as m}from"../../internal/notch.js";import{controlHeightClasses as p,controlTextLeadingClasses as u,cx as f,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusRingClasses as x,focusWithinRingClasses as v,gapClasses as y,hasContent as N,iconClasses as j,metaTextClasses as w,paddingXClasses as k,radiusClasses as S,stackGapClasses as _,surfaceSlots as V,transitionClasses as z}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",z,"focus-within:[transition-duration:0ms]",j].join(" "),C=v,I=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",x,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:x="glass",size:v,color:j,density:z,elevation:P=0,value:B,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:K,largeStep:R,smallStep:E,snapOnStep:G,allowWheelScrub:M=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:Q,label:T,labelPlacement:U,description:X,error:Y,invalid:Z,startIcon:ee,endIcon:le,fullWidth:ae=!1,disabled:te=!1,readOnly:se=!1,required:ne=!1,name:re,placeholder:ie,id:oe,className:ce,hotKeys:de,classNames:me,style:pe,...ue}){const fe=a(),he=t(),be=J??he.increase,ge=Q??he.decrease,xe=A??fe.locale,ve=v??fe.size??"md",ye=j??fe.color??"primary",Ne=z??fe.density??"default",je="notch"===(U??fe.labelPlacement??"top")&&N(T),we=N(Y),ke=Z??we,Se=ke?"danger":ye,_e=!te&&!se,Ve=k[Ne][ve],ze={end:`${Ve} pe-1`,split:"px-1",none:Ve},Oe=e(s.Decrement,{"aria-label":ge,className:I,children:e(r,{})}),Ce=e(s.Increment,{"aria-label":be,className:I,children:e(i,{})}),Ie="none"!==H&&!se,Pe=e(n.Label,{className:f(w[ve],"font-semibold",te?"text-(--plass-muted-fg)":"text-(--plass-fg)",me?.label),children:T});return l(n.Root,{disabled:te,invalid:ke,className:["flex-col align-top",_[ve],ae?"flex w-full":"inline-flex",ce??""].filter(Boolean).join(" "),style:{...V(Se,P),...pe},...ue,children:[N(T)&&!je?Pe:null,e(s.Root,{id:oe,name:re,className:"contents",value:B,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:K,largeStep:R,smallStep:E,snapOnStep:G,allowWheelScrub:M,format:$,locale:xe,disabled:te,readOnly:se,required:ne,children:e(d,{notched:je,size:ve,density:Ne,variant:x,disabled:te,readOnly:se,label:Pe,children:l(s.Group,{style:je?m:void 0,onPointerMove:c(_e),className:[O,je?"":C,p[ve],u[ve],S[ve],y[ve],Ie?ze[H]:Ve,te?h[x]:se?b[x]:g[x],_e?"plass-glow":"",me?.control].filter(Boolean).join(" "),children:[Ie&&"split"===H?Oe:null,ee?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ee}):null,e(s.Input,{placeholder:ie,onKeyDown:o(de,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&Ie?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:le}):null,Ie&&"end"===H?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[Oe,Ce]}):null,Ie&&"split"===H?Ce:null]})})}),X?e(n.Description,{className:f("m-0",w[ve],"text-(--plass-muted-fg)",me?.description),children:X}):null,e(n.Error,we?{match:!0,className:f(w[ve],"text-(--p-accent)",me?.error),children:Y}:{className:f(w[ve],"text-(--p-accent)",me?.error)})]})}
|
|
@@ -54,7 +54,15 @@ export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPr
|
|
|
54
54
|
onValueInvalid?: (value: string) => void;
|
|
55
55
|
/** Submits the owning form as soon as the code is complete. @default false */
|
|
56
56
|
autoSubmit?: boolean;
|
|
57
|
-
/**
|
|
57
|
+
/**
|
|
58
|
+
* The name of the code, above the row and wired to the slots by Base UI's
|
|
59
|
+
* Field.
|
|
60
|
+
*
|
|
61
|
+
* Above it and nowhere else: this is the one labelled field in the library
|
|
62
|
+
* that takes no `labelPlacement`, because a notch is a segment taken out of
|
|
63
|
+
* one continuous edge and a row of separate boxes has none. It keeps the
|
|
64
|
+
* label above the row under a `PlassProvider` that notches every other field.
|
|
65
|
+
*/
|
|
58
66
|
label?: React.ReactNode;
|
|
59
67
|
/** Helper text below the row. */
|
|
60
68
|
description?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Field as n}from"@base-ui/react/field";import{OTPField as s}from"@base-ui/react/otp-field";import{hotKeyHandler as o}from"../../internal/keys.js";import{cx as i,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as c,hasContent as u,metaTextClasses as p,stackGapClasses as f,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},b={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},v={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},N={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:$="glass",size:j,color:w,density:V,elevation:F=0,length:C=6,charset:I="numeric",mask:M=!1,groupSize:O,separator:S="–",value:k,defaultValue:z,onValueChange:R,onComplete:q,onValueInvalid:A,autoSubmit:D=!1,label:K,description:L,error:P,invalid:_,name:E,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,slotLabel:J,className:Q,hotKeys:U,classNames:W,style:X,...Y},Z){const ee=t(),ae=r(),le=J??ae.otpSlot,te=l.useId(),re=j??ee.size??"md",ne=w??ee.color??"primary",se=V??ee.density??"default",oe=Math.min(12,Math.max(2,Math.round(C))),ie=u(P),me=_??ie,de=me?"danger":ne,ce=i("text-center font-medium [font-family:inherit]",g[re],y[re],b[re],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?m[$]:G?d[$]:c[$]),ue=O&&O>0?Math.round(O):0;return a(n.Root,{disabled:B,invalid:me,className:i("inline-flex flex-col align-top",f[re],Q),style:{...h(de,F),...X},children:[u(K)?e(n.Label,{className:i(p[re],"font-
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Field as n}from"@base-ui/react/field";import{OTPField as s}from"@base-ui/react/otp-field";import{hotKeyHandler as o}from"../../internal/keys.js";import{cx as i,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as c,hasContent as u,metaTextClasses as p,stackGapClasses as f,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},b={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},v={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},N={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:$="glass",size:j,color:w,density:V,elevation:F=0,length:C=6,charset:I="numeric",mask:M=!1,groupSize:O,separator:S="–",value:k,defaultValue:z,onValueChange:R,onComplete:q,onValueInvalid:A,autoSubmit:D=!1,label:K,description:L,error:P,invalid:_,name:E,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,slotLabel:J,className:Q,hotKeys:U,classNames:W,style:X,...Y},Z){const ee=t(),ae=r(),le=J??ae.otpSlot,te=l.useId(),re=j??ee.size??"md",ne=w??ee.color??"primary",se=V??ee.density??"default",oe=Math.min(12,Math.max(2,Math.round(C))),ie=u(P),me=_??ie,de=me?"danger":ne,ce=i("text-center font-medium [font-family:inherit]",g[re],y[re],b[re],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?m[$]:G?d[$]:c[$]),ue=O&&O>0?Math.round(O):0;return a(n.Root,{disabled:B,invalid:me,className:i("inline-flex flex-col align-top",f[re],Q),style:{...h(de,F),...X},children:[u(K)?e(n.Label,{className:i(p[re],"font-semibold",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",W?.label),children:e("span",{id:`${te}-label`,children:K})}):null,e(s.Root,{ref:Z,onKeyDown:o(U,void 0),length:oe,validationType:N[I],mask:M,name:E,required:T,disabled:B,readOnly:G,autoSubmit:D,value:k,defaultValue:z,onValueChange:e=>R?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>A?.(e),className:i("flex items-center",v[se][re],W?.control),...Y,children:Array.from({length:oe},(t,r)=>a(l.Fragment,{children:[ue>0&&r>0&&r%ue===0?e("span",{"aria-hidden":"true",className:i("select-none px-0.5 text-(--plass-muted-fg)",y[re]),children:S}):null,e(s.Input,{className:ce,autoFocus:H&&0===r,"aria-labelledby":u(K)?`${te}-label ${te}-${r}`:`${te}-${r}`})]},r))}),Array.from({length:oe},(a,l)=>e("span",{id:`${te}-${l}`,hidden:!0,children:le(l+1,oe)},l)),u(L)?e(n.Description,{className:i("m-0",p[re],"text-(--plass-muted-fg)",W?.description),children:L}):null,e(n.Error,ie?{match:!0,className:i(p[re],"text-(--p-accent)",W?.error),children:P}:{className:i(p[re],"text-(--p-accent)",W?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as t,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,dimmedByHover as f,formatCategory as p,markGap as x,plotHeights as b,seriesColor as g,toValue as y}from"../../internal/chart.js";import{useDefaults as M}from"../../internal/defaults.js";import{numberFormatter as N}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as w,metaTextClasses as I,srOnlyClasses as P}from"../../internal/styles.js";const z={pie:0,donut:.62,semi:.62};export function PlPieChart({data:k,categories:A,shape:S="pie",startAngle:$=0,center:L,valueLabels:B="none",height:E,format:R,locale:C,label:D,legend:O,tooltip:_,empty:F,size:K,variant:V="ghost",padded:W=!1,className:q,...G}){const H=M(),J=K??H.size??"md",Q=C??H.locale,T=a.useRef(null),U=d(T),X=j(),Y=a.useId(),Z=a.useId(),ee=a.useCallback(e=>R?N(Q,R).format(e):v(e,Q),[R,Q]),le=a.useMemo(()=>k.map(y),[k]),ae=a.useMemo(()=>le.map((e,l)=>({name:p(c(l,A,[le]),Q),data:[k[l]],color:e.color})),[le,A,k,Q]),te=u(ae),[ne,ie]=a.useState(null),re=ae.map((e,l)=>g(e,l)),se=le.reduce((e,l,a)=>te.visible[a]&&null!==l.value?e+Math.abs(l.value):e,0),oe="semi"===S,de="number"==typeof E?E:b[J],ue=h[J],me=!1===O?{interactive:!1}:!0===O||void 0===O?{}:O,ce=!1!==O&&ae.length>1,he=me.side??"bottom",ve=!1===_?{mode:"none"}:!0===_||void 0===_?{}:_,fe="none"===ve.mode,pe=U/2,xe=Math.max(0,Math.min(U/2,oe?de:de/2)-2),be=oe?Math.min(de,de/2+xe/2):de/2,ge=xe*z[S],ye=se<=0,Me=xe>0?Math.min(4,x/xe*(180/Math.PI)):0,Ne=oe?180:360,je=[];let we=oe?-90:$;le.forEach((e,l)=>{if(!te.visible[l]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/se,t=a*Ne;je.push({index:l,start:we,end:we+t,value:e.value,share:a}),we+=t});const share=e=>`${ee(e)} · ${Math.round(10*(Math.abs(e)/se*100+Number.EPSILON))/10}%`,Ie=null===ne?[]:[{seriesIndex:ne,name:ae[ne]?.name,color:le[ne]?.color??re[ne],value:le[ne]?.value??null,formatted:share(le[ne]?.value??0),label:le[ne]?.label}];return l(r,{...G,size:J,variant:V,padded:W,className:q,legendSide:he,legend:ce?e(n,{series:ae,colors:re,options:me,visibility:te,size:J,values:me.showValue?le.map(e=>null===e.value?void 0:ee(e.value)):void 0}):null,table:ye?null:e(t,{id:Y,caption:D,categories:ae.map(e=>e.name??""),series:[{name:D,data:k}],values:[le],format:ee,locale:Q}),children:[l("div",{ref:T,role:"img",tabIndex:ye?void 0:0,"aria-label":D??X.chart,"aria-describedby":ye?void 0:Z,onPointerLeave:()=>ie(null),onBlur:()=>ie(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const l=je.map(e=>e.index);if(0===l.length)return;const a=null===ne?-1:l.indexOf(ne),t="ArrowRight"===e.key?a+1:a-1;ie(l[(t+l.length)%l.length]),e.preventDefault()},className:w("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:de},children:[ye?e("div",{className:w("flex h-full items-center justify-center text-(--plass-muted-fg)",I[J]),children:F??X.empty}):U>0&&xe>0?l("svg",{width:U,height:de,viewBox:`0 0 ${U} ${de}`,"aria-hidden":"true",className:"block",children:[je.map(l=>{const a=f(te.hovered,l.index,te.visible)||null!==ne&&ne!==l.index,t=l.end-l.start>2*Me?Me/2:0;return e("path",{d:m(pe,be,xe,ge,l.start+t,l.end-t),fill:le[l.index].color??re[l.index],opacity:a?.32:1,onPointerEnter:fe?void 0:()=>ie(l.index),className:o},l.index)}),"all"===B?je.map(l=>{const a=((l.start+l.end)/2-90)*(Math.PI/180),t=ge>0?(ge+xe)/2:.68*xe,n=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*t<2*ue||xe-ge<1.6*ue?null:e("text",{x:pe+t*Math.cos(a),y:be+t*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ue,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},l.index)}):null]}):null,L&&ge>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:pe-ge,top:be-ge,width:2*ge,height:oe?ge:2*ge},children:L}):null,null===ne||fe?null:ve.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ve.render({index:ne,category:ae[ne]?.name??ne,items:Ie})}):e(s,{heading:ae[ne]?.name,items:Ie,x:pe,y:8,flip:!1,size:J})]}),ye?null:e("span",{id:Z,className:P,children:je.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,ae[e.index]?.name," ",le[e.index]?.label??share(e.value)]},e.index))}),fe?null:e(i,{heading:null===ne?void 0:ae[ne]?.name,items:Ie})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as x,iconClasses as u,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:S,style:q,children:A,onClick:D,onPointerMove:G,...J},K){const L=o(),Q=f??L.size??"md",T=_??L.color??"secondary",U=R??L.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(0),Z=x(O);l.useEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(D),se=g[U][Q],te=s(t,{children:[x(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,x(H)||x(M)||x(A)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[x(H)?e("span",{className:"max-w-full truncate",children:H}):null,x(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,A]}):null]});return s("div",{ref:K,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,u,ee?`plass-glow ${j[m]}`:"",P[E][F],S),style:{...i(T,C,m),...q},onPointerMove:r(ee,G),...J,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,x($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:D,children:te}):te,x($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X:0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as d,forcedCheckedClasses as c,forcedDisabledCheckedClasses as p,glassClasses as m,hasContent as u,metaTextClasses as f,tickDotClasses as h,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),k=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,d].join(" "),y=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",c].join(" "),N=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c].join(" "),j=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",p].join(" "),R=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:d,...c},p){const m=r.useContext(v),u=c.readOnly??m.readOnly,x=i||m.disabled;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${b[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[k,g[m.size],x?j:u?N:y].join(" "),disabled:i,...c,children:e(o.Indicator,{keepMounted:!0,className:`${R} ${h[m.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as d,forcedCheckedClasses as c,forcedDisabledCheckedClasses as p,glassClasses as m,hasContent as u,metaTextClasses as f,tickDotClasses as h,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),k=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,d].join(" "),y=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",c].join(" "),N=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c].join(" "),j=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",p].join(" "),R=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:d,...c},p){const m=r.useContext(v),u=c.readOnly??m.readOnly,x=i||m.disabled;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${b[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[k,g[m.size],x?j:u?N:y].join(" "),disabled:i,...c,children:e(o.Indicator,{keepMounted:!0,className:`${R} ${h[m.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`m-0 ${f[m.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:o,color:d,orientation:c="vertical",label:p,description:m,error:h,invalid:b,disabled:g=!1,readOnly:x=!1,className:k,classNames:y,style:N,children:j,...R},z){const w=l(),O=o??w.size??"md",P=d??w.color??"primary",$=u(h),G=b??$,B=G?"danger":P,C=r.useMemo(()=>({size:O,color:B,readOnly:x,disabled:g}),[O,B,x,g]);return e(v.Provider,{value:C,children:a(t.Root,{disabled:g,invalid:G,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...N},children:[p?e(t.Label,{className:n(f[O],"font-semibold",g?"text-(--plass-muted-fg)":"text-(--plass-fg)",y?.label),children:p}):null,m?e(t.Description,{className:n("m-0",f[O],"text-(--plass-muted-fg)",y?.description),children:m}):null,e(s,{ref:z,disabled:g,readOnly:x,className:n("flex","horizontal"===c?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",y?.control),...R,children:j}),e(t.Error,$?{match:!0,className:n(f[O],"text-(--p-accent)",y?.error),children:h}:{className:n(f[O],"text-(--p-accent)",y?.error)})]})})});
|