plass-ui 1.2.0 → 1.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/CHANGELOG.md +78 -0
- package/dist/components/accordion/PlAccordion.js +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/avatar-group/PlAvatarGroup.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +55 -0
- package/dist/components/back-top/PlBackTop.js +1 -0
- package/dist/components/back-top/index.d.ts +2 -0
- package/dist/components/back-top/index.js +1 -0
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
- package/dist/components/box/PlBox.js +1 -1
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.d.ts +104 -0
- package/dist/components/calendar/PlCalendar.js +1 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/collapsible/PlCollapsible.js +1 -1
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +11 -2
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +1 -1
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.d.ts +100 -0
- package/dist/components/confirm/PlConfirmProvider.js +1 -0
- package/dist/components/confirm/index.d.ts +2 -0
- package/dist/components/confirm/index.js +1 -0
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/date-picker/PlDatePicker.d.ts +41 -2
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/divider/PlDivider.js +1 -1
- package/dist/components/drawer/PlDrawer.d.ts +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/empty/PlEmpty.d.ts +47 -0
- package/dist/components/empty/PlEmpty.js +1 -0
- package/dist/components/empty/index.d.ts +2 -0
- package/dist/components/empty/index.js +1 -0
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.js +1 -1
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/image/PlImage.d.ts +72 -0
- package/dist/components/image/PlImage.js +1 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/image/index.js +1 -0
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/menu/PlMenu.d.ts +2 -2
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/menubar/PlMenubar.js +1 -1
- package/dist/components/modal/PlModal.d.ts +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +11 -2
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +10 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.d.ts +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popconfirm/PlPopconfirm.d.ts +61 -0
- package/dist/components/popconfirm/PlPopconfirm.js +1 -0
- package/dist/components/popconfirm/index.d.ts +2 -0
- package/dist/components/popconfirm/index.js +1 -0
- package/dist/components/popover/PlPopover.d.ts +1 -1
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +10 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stat/PlStat.d.ts +66 -0
- package/dist/components/stat/PlStat.js +1 -0
- package/dist/components/stat/index.d.ts +2 -0
- package/dist/components/stat/index.js +1 -0
- package/dist/components/stepper/PlStepper.d.ts +86 -0
- package/dist/components/stepper/PlStepper.js +1 -0
- package/dist/components/stepper/index.d.ts +2 -0
- package/dist/components/stepper/index.js +1 -0
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +10 -1
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.d.ts +5 -8
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/toast/PlToast.d.ts +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/toolbar/PlToolbar.js +1 -1
- package/dist/components/tooltip/PlTooltip.d.ts +1 -1
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.d.ts +67 -0
- package/dist/components/tree/PlTree.js +1 -0
- package/dist/components/tree/index.d.ts +2 -0
- package/dist/components/tree/index.js +1 -0
- package/dist/components/visually-hidden/PlVisuallyHidden.d.ts +46 -0
- package/dist/components/visually-hidden/PlVisuallyHidden.js +1 -0
- package/dist/components/visually-hidden/index.d.ts +2 -0
- package/dist/components/visually-hidden/index.js +1 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/calendar.css +2 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/empty.css +2 -0
- package/dist/css/image.css +2 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/stat.css +2 -0
- package/dist/css/stepper.css +2 -0
- package/dist/css/tree.css +2 -0
- package/dist/css/visually-hidden.css +2 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/usePlBreakpoint.d.ts +38 -0
- package/dist/hooks/usePlBreakpoint.js +1 -0
- package/dist/hooks/usePlColorScheme.d.ts +66 -0
- package/dist/hooks/usePlColorScheme.js +1 -0
- package/dist/hooks/usePlHotKeys.d.ts +81 -0
- package/dist/hooks/usePlHotKeys.js +1 -0
- package/dist/hooks/usePlMediaQuery.d.ts +22 -0
- package/dist/hooks/usePlMediaQuery.js +1 -0
- package/dist/hooks/usePlReducedMotion.d.ts +22 -0
- package/dist/hooks/usePlReducedMotion.js +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +0 -1
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.d.ts +25 -3
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/color-scheme.d.ts +23 -0
- package/dist/internal/color-scheme.js +1 -0
- package/dist/internal/date.d.ts +21 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +69 -0
- package/dist/internal/defaults.js +1 -0
- package/dist/internal/direction.d.ts +4 -0
- package/dist/internal/direction.js +1 -0
- package/dist/internal/grid.d.ts +2 -0
- package/dist/internal/grid.js +1 -1
- package/dist/internal/keys.d.ts +93 -0
- package/dist/internal/keys.js +1 -0
- package/dist/internal/media.d.ts +26 -0
- package/dist/internal/media.js +1 -0
- package/dist/internal/page-layout.d.ts +6 -6
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/steps.d.ts +76 -0
- package/dist/internal/steps.js +1 -0
- package/dist/provider/PlColorSchemeScript.d.ts +40 -0
- package/dist/provider/PlColorSchemeScript.js +1 -0
- package/dist/provider/PlassProvider.d.ts +39 -0
- package/dist/provider/PlassProvider.js +1 -0
- package/dist/provider/index.d.ts +5 -0
- package/dist/provider/index.js +1 -0
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +29 -1
- package/dist/tokens.css +29 -1
- package/dist/types.d.ts +17 -0
- package/package.json +17 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as l}from"../button/PlButton.js";import{Calendar as n,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 v,toISOMonth as O,toISOYear as S,today as k,withPlaceholder as x}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:v,month:O,year:S};export const PlDatePicker=/* @__PURE__ */t.forwardRef(function PlDatePicker({value:v,defaultValue:O,onValueChange:S,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,readOnly:U=!1,disabled:W=!1,startIcon:X,...Z},$){const _=o(),ee=N??_.locale,ae=L??_.size??"md",te=Q??_.color??"primary",oe=r(J),le=T??_.weekStartsOn??y(ee),ne=Y??C[P],[re,se]=t.useState(O??null),ie=void 0!==v?v:re,[ce,de]=t.useState(V??!1),me=M??ce,[ue,he]=t.useState(()=>j(p(ie)?ie:I??k()));t.useEffect(()=>{me&&he(j(p(ie)?ie:I??k()))},[me]);const setOpen=e=>{e&&(U||W)||(void 0===M&&de(e),B?.(e))},commit=e=>{void 0===v&&se(e),S?.(e)},select=e=>{const a=p(ie)?b(e,ie):g(e);commit(a),he(j(a)),H&&setOpen(!1)},pe=k(),fe="day"===P?pe:"month"===P?j(pe):D(pe),ye="day"===P?oe.today:"month"===P?oe.thisMonth:oe.thisYear,be="day"===P?u(pe,R,E)||(F?.(pe)??!1):"month"===P?h(pe,R,E):f(pe,R,E),ge=G||A,je=t.useMemo(()=>x(d(ee,ne),q),[ee,ne,q]);return e(c,{...Z,size:ae,color:te,readOnly:U,disabled:W,triggerRef:$,startIcon:X??e(s,{}),display:p(ie)?m(ie,ee,ne):q??"",samples:je,empty:!p(ie),clearable:A,onClear:()=>commit(null),open:me,onOpenChange:setOpen,labels:oe,hiddenValues:K?[{name:K,value:p(ie)?w[P](ie):""}]:void 0,children:a("div",{className:z("flex flex-col",ge&&"gap-1.5"),children:[e(n,{size:ae,color:te,locale:ee,weekStartsOn:le,month:ue,onMonthChange:he,precision:P,selected:[ie],onSelect:select,minDate:R,maxDate:E,shouldDisableDate:F,labels:oe,autoFocus:!0}),ge?a(i,{size:ae,children:[A?e(l,{variant:"ghost",size:ae,color:te,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:oe.clear}):null,G?e(l,{variant:"ghost",size:ae,color:te,density:"compact",disabled:be,onClick:()=>select(fe),children:ye}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n}from"../../internal/defaults.js";import{PlButton as t}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 h,formatDate as f,isValidDate as v,localeWeekStart as x,startOfDay as g,startOfMonth as w,toISODate as b,today as y,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__ */a.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:q,format:A={dateStyle:"medium"},monthCount:G=2,startPlaceholder:H,endPlaceholder:J,presets:K,clearable:L=!1,closeOnSelect:Q=!0,labels:T,name:U,size:W,color:X,readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._},ee){const le=n(),ae=F??le.locale,ne=W??le.size??"md",te=X??le.color??"primary",se=r(T),re=q??le.weekStartsOn??x(ae),[oe,ie]=a.useState(k??C),ce=void 0!==O?O??C:oe,ue=v(ce.start)?ce.start:null,de=v(ce.end)?ce.end:null,[me,pe]=a.useState(M??!1),he=z??me,[fe,ve]=a.useState(null),[xe,ge]=a.useState(null),[we,be]=a.useState(()=>w(ue??B??y()));a.useEffect(()=>{he?be(w(ue??B??y())):(ve(null),ge(null))},[he]);const setOpen=e=>{e&&(Y||Z)||(void 0===z&&pe(e),R?.(e))},commit=e=>{void 0===O&&ie(e),P?.(e)},ye=fe??ue,Ne=null!==fe?xe:de,write=(l,a)=>v(l)?f(l,ae,A):e("span",{className:"text-(--plass-muted-fg)",children:a??""}),je=m(we,1),Se=2===G,De=a.useMemo(()=>h(ae,A),[ae,A]),Ce=null!==fe?se.end:null===ue?se.start:null,Oe={size:ne,color:te,locale:ae,weekStartsOn:re,selected:[ue,de,fe],rangeStart:ye,rangeEnd:Ne,onSelect:e=>{const l=g(e);if(null===fe)return ve(l),ge(l),void commit({start:l,end:null});const[a,n]=p(l,fe)<0?[l,fe]:[fe,l];ve(null),ge(null),commit({start:a,end:n}),Q&&setOpen(!1)},onPreviewChange:e=>{null!==fe&&ge(e??fe)},minDate:V,maxDate:E,shouldDisableDate:I,showOutsideDays:!1,labels:se};return e(u,{..._,size:ne,color:te,readOnly:Y,disabled:Z,triggerRef:ee,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(ue,H)}),e(d,{samples:N(De,H)})]}),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(de,J)}),e(d,{samples:N(De,J)})]})]}),empty:null===ue&&null===de,clearable:L,onClear:()=>commit(C),open:he,onOpenChange:setOpen,labels:se,hiddenValues:U?[{name:U,value:ue?b(ue):""},{name:U,value:de?b(de):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:j("flex items-stretch",S[ne]),children:[K&&K.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:K.map((l,a)=>e(t,{variant:"ghost",size:ne,color:te,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;ve(null),ge(null),commit(l),v(l.start)&&be(w(l.start)),Q&&setOpen(!1)})(l),children:l.label},a))}):null,e(s,{...Oe,month:we,onMonthChange:be,showNextButton:!Se,autoFocus:!0}),Se?e(s,{...Oe,month:je,onMonthChange:e=>be(m(e,-1)),showPreviousButton:!1}):null]}),L||null!==Ce?l(c,{size:ne,children:[null!==Ce?e("span",{className:j("me-auto text-(--plass-muted-fg)",D[ne]),children:Ce}):null,L?e(t,{variant:"ghost",size:ne,color:te,density:"compact",onClick:()=>{ve(null),ge(null),commit(C),setOpen(!1)},children:se.clear}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as a,TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerDivider as c,PickerFooter as d,PickerShell as m}from"../../internal/picker.js";import{displaySamples as u,formatDate as h,isDayOutside as p,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as g,startOfMonth as D,timeUnitSpan as v,toISODateTime as j,today as k,withPlaceholder as w,withTime as C}from"../../internal/date.js";import{cx as x,gapClasses as z}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */l.forwardRef(function PlDateTimePicker({value:O,defaultValue:T,onValueChange:P,open:M,defaultOpen:N,onOpenChange:V,defaultMonth:B,minDate:I,maxDate:R,shouldDisableDate:E,shouldDisableTime:F,locale:q,weekStartsOn:A,format:G={dateStyle:"medium",timeStyle:"short"},hour12:H,showSeconds:J=!1,hourStep:K=1,minuteStep:L=1,secondStep:Q=1,placeholder:U,clearable:W=!1,showNowButton:X=!0,closeOnSelect:Y=!1,labels:Z,name:$,size:_,color:ee,density:te,readOnly:le=!1,disabled:oe=!1,startIcon:ne,...ae},se){const ie=o(),re=q??ie.locale,ce=_??ie.size??"md",de=ee??ie.color??"primary",me=te??ie.density??"default",ue=i(Z),he=A??ie.weekStartsOn??b(re),pe=H??f(re),[fe,Se]=l.useState(T??null),be=void 0!==O?O:fe,[ye,ge]=l.useState(N??!1),De=M??ye,[ve,je]=l.useState(()=>D(S(be)?be:B??k()));l.useEffect(()=>{De&&je(D(S(be)?be:B??k()))},[De]);const setOpen=e=>{e&&(le||oe)||(void 0===M&&ge(e),V?.(e))},commit=e=>{void 0===O&&Se(e),P?.(e)},ke=l.useCallback((e,t)=>{const[l,o]=v(t,e),n=g(e).getTime();return!!(S(I)&&n+1e3*o<I.getTime())||!!(S(R)&&n+1e3*l>R.getTime())||(F?.(e,t)??!1)},[I,R,F]),we=new Date,Ce=C(we,{seconds:J?we.getSeconds():0}),xe=p(Ce,I,R)||(E?.(Ce)??!1)||ke(Ce,"second"),ze=l.useMemo(()=>w(u(re,G),U),[re,G,U]);return e(m,{...ae,size:ce,color:de,density:me,readOnly:le,disabled:oe,triggerRef:se,startIcon:ne??e(r,{}),display:S(be)?h(be,re,G):U??"",samples:ze,empty:!S(be),clearable:W,onClear:()=>commit(null),open:De,onOpenChange:setOpen,labels:ue,hiddenValues:$?[{name:$,value:S(be)?j(be,J):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:x("flex items-stretch",z[ce]),children:[e(a,{size:ce,color:de,locale:re,weekStartsOn:he,month:ve,onMonthChange:je,selected:[be],onSelect:e=>{const t=S(be)?y(e,be):g(e);commit(t),je(D(t)),Y&&setOpen(!1)},minDate:I,maxDate:R,shouldDisableDate:E,labels:ue,autoFocus:!0}),e(c,{}),e(s,{size:ce,density:me,locale:re,value:S(be)?be:null,referenceDate:S(be)?be:k(),onChange:commit,hour12:pe,showSeconds:J,hourStep:K,minuteStep:L,secondStep:Q,shouldDisableTime:ke,labels:ue})]}),t(d,{size:ce,children:[W?e(n,{variant:"ghost",size:ce,color:de,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ue.clear}):null,X?e(n,{variant:"ghost",size:ce,color:de,density:"compact",disabled:xe,onClick:()=>{commit(Ce),je(D(Ce))},children:ue.now}):null,e(n,{variant:"solid",size:ce,color:de,density:"compact",onClick:()=>setOpen(!1),children:ue.done})]})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Separator as i}from"@base-ui/react/separator";import{metaTextClasses as a,toLength as s}from"../../internal/styles.js";const o="[border-color:var(--p-rule-color)]",n={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},d={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:c,size:f,length:p,thickness:h,textAlign:m="center",className:u,style:x,children:v,...w},b){const g=l(),j=f??g.size??"md",$="vertical"===t,k=null!=v&&!1!==v&&""!==v,N={"--p-rule-color":c?`var(--plass-${c}-line)`:"var(--plass-border)","--p-rule":s(h)??"1px"},y=s(p),z={...N,...void 0===y?null:$?{height:y}:{width:y},...x};if(!k)return e(i,{ref:b,orientation:t,className:[$?"w-0 border-s [border-inline-start-width:var(--p-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",o,u??""].filter(Boolean).join(" "),style:z,...w});const[B,D]=n[t][m],P=$?"w-0 border-s [border-inline-start-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(i,{ref:b,orientation:t,"aria-label":"string"==typeof v?v:void 0,className:["flex items-center",$?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",d[j],u??""].filter(Boolean).join(" "),style:z,...w,children:[e("span",{"aria-hidden":"true",className:`${P} ${B} ${o}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[j],$?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${P} ${D} ${o}`})]})});
|
|
@@ -143,4 +143,4 @@ export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import(
|
|
|
143
143
|
* scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
|
|
144
144
|
* focus to the trigger, and the inert page behind.
|
|
145
145
|
*/
|
|
146
|
-
export declare function PlDrawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
|
|
146
|
+
export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{Dialog as a}from"@base-ui/react/dialog";import{CloseIcon as
|
|
1
|
+
"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{useDefaults as r}from"../../internal/defaults.js";import{Dialog as a}from"@base-ui/react/dialog";import{CloseIcon as o}from"../../internal/icons.js";import{cx as d,focusRingClasses as i,glassClasses as t,hasContent as n,metaTextClasses as p,sheetBodyClasses as u,sheetHeaderGapClasses as m,sheetLineClasses as c,sheetPaddingXClasses as f,sheetPaddingYClasses as x,sheetSectionGapClasses as g,sheetTitleClasses as h,surfaceSlots as b}from"../../internal/styles.js";const v={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},y={left:{xs:"rounded-r-(--plass-radius-xs)",sm:"rounded-r-(--plass-radius-sm)",md:"rounded-r-(--plass-radius-md)",lg:"rounded-r-(--plass-radius-lg)",xl:"rounded-r-(--plass-radius-xl)"},right:{xs:"rounded-l-(--plass-radius-xs)",sm:"rounded-l-(--plass-radius-sm)",md:"rounded-l-(--plass-radius-md)",lg:"rounded-l-(--plass-radius-lg)",xl:"rounded-l-(--plass-radius-xl)"},top:{xs:"rounded-b-(--plass-radius-xs)",sm:"rounded-b-(--plass-radius-sm)",md:"rounded-b-(--plass-radius-md)",lg:"rounded-b-(--plass-radius-lg)",xl:"rounded-b-(--plass-radius-xl)"},bottom:{xs:"rounded-t-(--plass-radius-xs)",sm:"rounded-t-(--plass-radius-sm)",md:"rounded-t-(--plass-radius-md)",lg:"rounded-t-(--plass-radius-lg)",xl:"rounded-t-(--plass-radius-xl)"}},w={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},N=/* @__PURE__ */[t,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),k=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),z=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",k].join(" "),C=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",i].join(" ");export const PlDrawerClose=a.Close;export function PlDrawer({side:i="left",mode:t="overlay",size:_,color:$,density:D,open:P,defaultOpen:O,onOpenChange:T,trigger:B,title:F,description:L,actions:R,dividers:V=!1,showClose:q,closeLabel:A="Close",extent:E,rounded:G=!0,modal:H=!0,dismissible:I=!0,className:J,classNames:K,style:M,children:Q,...S}){const U=r(),W=_??U.size??"md",X=$??U.color??"primary",Y=D??U.density??"default",Z="overlay"===t,ss="left"===i||"right"===i,ls=q??Z,es=f[Y][W],rs=x[Y][W],as=V?`${es} ${rs}`:es,os=n(F)||n(L),ds=n(R),is=void 0===E?null:{[ss?"width":"height"]:"number"==typeof E?`${E}px`:E},ts=d(N,u[W],w[i],G?y[i][W]:"",Z?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",Z?k:"",ss?`h-full max-w-full ${void 0===E?v[W]:""}`:"w-full "+(void 0===E?"max-h-[85%]":""),V?"":`${rs} ${g[W]}`,J),ns=Z?a.Title:"h2",ps=Z?a.Description:"p",us=l(e,{children:[os||ls?l("div",{className:d("flex shrink-0 items-start gap-3",as),children:[l("div",{className:d("flex min-w-0 flex-1 flex-col",m[W]),children:[n(F)?s(ns,{className:d("m-0 font-semibold",h[W]),children:F}):null,n(L)?s(ps,{className:d("m-0 text-(--plass-muted-fg)",p[W]),children:L}):null]}),ls?Z?s(a.Close,{"aria-label":A,className:C,children:s(o,{})}):s("button",{type:"button","aria-label":A,className:C,onClick:()=>T?.(!1),children:s(o,{})}):null]}):null,n(Q)?s("div",{className:d("min-h-0 flex-1 overflow-y-auto overscroll-contain",as,V&&(os||ls)?c:"",V?"":"-my-1 py-1"),children:Q}):null,ds?s("div",{className:d("flex shrink-0 flex-wrap items-center justify-end gap-2",as,V?c:""),children:R}):null]});return Z?l(a.Root,{open:P,defaultOpen:O,modal:H,disablePointerDismissal:!I,onOpenChange:(s,l)=>{I||s||"escape-key"!==l.reason?T?.(s):l.cancel()},children:[B?s(a.Trigger,{render:B}):null,l(a.Portal,{children:[s(a.Backdrop,{className:d("plass-portal",z,K?.backdrop)}),s(a.Viewport,{className:d("plass-portal fixed inset-0 z-(--plass-z-portal) flex",j[i]),children:s(a.Popup,{className:ts,style:{...b(X,3),...is,...M},...S,children:us})})]})]}):P??O??!0?s("div",{className:ts,style:{...b(X,0),...is,...M},...S,children:us}):null}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
|
|
3
|
+
export interface PlEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
|
|
4
|
+
/**
|
|
5
|
+
* The glyph or drawing above the words. Sized off `size`, so an icon set at
|
|
6
|
+
* `1em` fills it without being told a number.
|
|
7
|
+
*/
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
/** The one line that says what is not here. */
|
|
10
|
+
title?: React.ReactNode;
|
|
11
|
+
/** What to do about it. One or two sentences, never a paragraph. */
|
|
12
|
+
description?: React.ReactNode;
|
|
13
|
+
/** The way out — usually one `PlButton`. */
|
|
14
|
+
actions?: React.ReactNode;
|
|
15
|
+
/** @default 'md' */
|
|
16
|
+
size?: PlassSize;
|
|
17
|
+
/**
|
|
18
|
+
* The family the glyph takes.
|
|
19
|
+
*
|
|
20
|
+
* `secondary` by default, which is the whole difference between an empty
|
|
21
|
+
* state and an alert: nothing has gone wrong. Reach for `danger` when
|
|
22
|
+
* something has, and `success` for the end of a flow — which is what turns
|
|
23
|
+
* this into the "your order is confirmed" screen without a second component.
|
|
24
|
+
* @default 'secondary'
|
|
25
|
+
*/
|
|
26
|
+
color?: PlassColor;
|
|
27
|
+
/** @default 'default' */
|
|
28
|
+
density?: PlassDensity;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* The place where there is nothing.
|
|
32
|
+
*
|
|
33
|
+
* An empty list, a search that found nothing, a filter that excluded
|
|
34
|
+
* everything, a flow that has finished. All four are the same arrangement — a
|
|
35
|
+
* mark, a line, a sentence, a way out — which is why they are one component and
|
|
36
|
+
* not four, and why `color` is what tells them apart: `secondary` is "nothing
|
|
37
|
+
* here yet", `danger` is "something went wrong", `success` is "you are done".
|
|
38
|
+
*
|
|
39
|
+
* It **draws no surface**. An empty state is always inside something — a card,
|
|
40
|
+
* a table, a panel — and a sheet inside a sheet is two sheets. What it decides
|
|
41
|
+
* is the arrangement and the space around it.
|
|
42
|
+
*
|
|
43
|
+
* The one thing worth getting right is the **way out**. A screen that says
|
|
44
|
+
* "No projects" and stops is a dead end; the same screen with a "New project"
|
|
45
|
+
* button is the best moment in the whole flow to offer one.
|
|
46
|
+
*/
|
|
47
|
+
export declare const PlEmpty: React.ForwardRefExoticComponent<PlEmptyProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +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]})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlEmpty}from"./PlEmpty.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{CloseIcon as t}from"../../internal/icons.js";import{controlTextLeadingClasses as a,disabledClasses as o,focusRingClasses as n,gapClasses as i,glassClasses as c,hasContent as d,iconClasses as p,metaTextClasses as u,radiusClasses as f,readOnlyFilterClasses as m,sheetTitleClasses as h,stackGapClasses as v,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const x={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"}},y={solid:/* @__PURE__ */[c,"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__ */[c,"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)]"},k={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)]"};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:c="glass",size:N,color:j,density:$,elevation:w=0,accept:z,multiple:C=!1,maxSize:I,maxFiles:L,value:B,defaultValue:D,onFilesChange:F,onReject:M,label:_,description:W,error:S,invalid:P,title:R,hint:T,icon:A,showList:V=!0,removeLabel:E=e=>`Remove ${e}`,fullWidth:O=!0,disabled:q=!1,readOnly:U=!1,required:G=!1,name:H,id:Y,className:J,style:K,...Q},X){const Z=l(),ee=N??Z.size??"md",re=j??Z.color??"primary",se=$??Z.density??"default",le=s.useRef(null);s.useImperativeHandle(X,()=>le.current);const[te,ae]=s.useState(()=>[...D??[]]),oe=s.useMemo(()=>B?[...B]:te,[B,te]),ne=s.useRef(0),[ie,ce]=s.useState(!1),de=d(S),pe=P??de,ue=pe?"danger":re,fe=q||U,me=s.useId(),he=s.useCallback(e=>{B||ae(e),F?.(e)},[F,B]),ve=s.useCallback(e=>{const r=[],s=[],l=C?L??Number.POSITIVE_INFINITY:1,t=C?oe.length:0;for(const a of e)z&&!matchesAccept(a,z)?s.push({file:a,reason:"type"}):void 0!==I&&a.size>I?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[z,oe.length,L,I,C]),ge=s.useCallback(e=>{const{kept:r,rejections:s}=ve(e);s.length>0&&M?.(s),r.length>0&&he(C?[...oe,...r]:r)},[ve,he,oe,C,M]),be=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",x[se][ee],f[ee],i[ee],b,p,n,q?`${o[c]} border-2 border-dashed`:U?`${y[c]} ${m} cursor-default`:y[c],fe?"":k[c],ie&&!fe?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",v[ee],O?"flex w-full":"inline-flex",J??""].filter(Boolean).join(" "),style:{...g(ue,w),...K},...Q,children:[d(_)?e("span",{className:[u[ee],"font-semibold",q?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:_}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{fe||(e.preventDefault(),ne.current+=1,ce(!0))},onDragOver:e=>{fe||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{fe||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ce(!1))},onDrop:e=>{fe||(e.preventDefault(),ne.current=0,ce(!1),ge(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:Y,disabled:q,"aria-describedby":d(W)||de?me:void 0,"aria-invalid":pe||void 0,className:be,onClick:()=>{fe||le.current&&(le.current.value="",le.current.click())},children:[void 0===A?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):d(A)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:A}):null,e("span",{className:`font-semibold ${h[ee]}`,children:R??"Drop files here, or click to browse"}),d(T)?e("span",{className:`text-(--plass-muted-fg) ${u[ee]}`,children:T}):null]}),e("input",{ref:le,type:"file",name:H,accept:z,multiple:C,required:G&&0===oe.length,disabled:fe,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ge(Array.from(e.target.files??[]))})]}),V&&oe.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${v[ee]} m-0 list-none p-0`,children:oe.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",f.xs,a[ee],"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 ${u[ee]}`,children:formatFileSize(s.size)}),fe?null:e("button",{type:"button","aria-label":E(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",n].join(" "),onClick:()=>he(oe.filter((e,r)=>r!==l)),children:e(t,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null,d(W)&&!de?e("span",{id:me,className:`${u[ee]} text-(--plass-muted-fg)`,children:W}):null,de?e("span",{id:me,className:`${u[ee]} text-(--p-accent)`,children:S}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),b={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={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"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),I=l??E.size??"md",L=n??E.color??"primary",O=c??E.density??"default",[S,V]=s.useState(f),W=void 0!==u,D=W?u:S,H=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=H.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,D,a,I,O,P,q]),s.useEffect(()=>{const e=H.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{W||V(e),m?.(e)},[W,m]),J=s.useMemo(()=>({value:D??null,change:G,size:I,disabled:P}),[D,G,I,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[I]:b[I],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(L,p,"solid"),...F},children:e(v.Provider,{value:J,children:t("div",{ref:H,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[O][I],y[O][I],g),children:[null!=D?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(v),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as i,sheetPaddingYClasses as l,sheetRestClasses as m,surfaceSlots as n,transitionClasses as d}from"../../internal/styles.js";const c=m,f={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:m="static",variant:x="glass",size:p,color:y,density:w,elevation:b=0,divider:v=!0,maxWidth:j="none",padded:g=!0,label:h,render:z,className:k,style:N,children:C,...F},P){const R=t(),W=p??R.size??"md",q=y??R.color??"primary",A=w??R.density??"default",{register:B}=r.useContext(s),D=r.useCallback(e=>{B("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[B,P]),E=a("w-full min-w-0",c[x],v?"border-t [border-color:var(--plass-divider)]":"",f[m],d,k);return o({render:z??e("footer",{}),ref:D,props:{"aria-label":h,className:E,style:{...n(q,b),...N},children:e("div",{className:a("w-full",g?a(i[A][W],l[A][W]):"","none"===j?"":a(u[j],"mx-auto")),children:C}),...F}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as a}from"../../internal/page-layout.js";import{cx as n,hasContent as l,sheetPaddingXClasses as m,sheetRestClasses as d,sheetSectionGapClasses as c,surfaceSlots as o,transitionClasses as x}from"../../internal/styles.js";const f={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},p={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},u={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},y={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},h=d,w={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},g={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},v={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */s.forwardRef(function PlHeader({brand:d,actions:j,align:b="start",position:N="sticky",variant:k="glass",size:z,color:C,density:H,elevation:P=0,divider:R=!0,maxWidth:W="none",padded:q=!0,label:A,render:B,className:D,style:E,children:F,...G},I){const J=i(),K=z??J.size??"md",L=C??J.color??"primary",M=H??J.density??"default",{register:O}=s.useContext(a),Q=s.useCallback(e=>{O("header",e),"function"==typeof I?I(e):I&&(I.current=e)},[O,I]),S=n("w-full min-w-0",h[k],R?"border-b [border-color:var(--plass-divider)]":"",w[N],x,D);return t({render:B??e("header",{}),ref:Q,props:{"aria-label":A,className:S,style:{...o(L,P),...E},children:r("div",{className:n("flex w-full items-center",f[K],p[K],u[K],q?m[M][K]:"","none"===W?"":n(y[W],"mx-auto")),children:[l(d)?e("div",{className:n("flex min-w-0 items-center",g[b],c[K]),children:d}):"center"===b?e("div",{"aria-hidden":"true",className:g[b]}):null,l(F)?e("div",{className:n(v[b],c[K]),children:F}):null,l(j)?e("div",{className:n("flex min-w-0 items-center justify-end",g[b],c[K]),children:j}):"center"===b?e("div",{"aria-hidden":"true",className:g[b]}):null]}),...G}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{transitionClasses as t}from"../../internal/styles.js";const o={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},l={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!i.test(t)&&!i.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:i,variant:s="solid",color:a,caseSensitive:c=!1,wholeWord:p=!1,underline:u=!1,weight:d,className:f,style:m,children:g,...h},x){const b=r(),v=a??b.color??"warning",y=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(i,c),[i,c]),k=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",o[s],u?"underline decoration-2 underline-offset-2":"",d?l[d]:"",t].filter(Boolean).join(" "),$=y?markNode(g,y,p,(n,r)=>e("mark",{className:k,children:n},r)):g;return e("span",{ref:x,className:f,style:{"--p-fill":`var(--plass-${v}-fill)`,"--p-on-solid":`var(--plass-${v}-on-solid)`,"--p-accent":`var(--plass-${v}-accent)`,"--p-soft":`var(--plass-${v}-soft)`,"--p-line":`var(--plass-${v}-line)`,...m},...h,children:$})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n,Fragment as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n,Fragment as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{canonicalKey as r,detectOS as o}from"../../internal/keys.js";import{controlHeightClasses as t,controlSlots as i,controlTextClasses as m,glassClasses as c,paddingXClasses as d,radiusClasses as p,srOnlyClasses as u,transitionClasses as w}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),b={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},f={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function subscribe(){return()=>{}}function serverOS(){return"windows"}const y={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},h={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */a.forwardRef(function PlKbd({variant:n="glass",size:s="md",density:a="compact",className:l,children:r,...o},i){const c=y[s];return e("kbd",{ref:i,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",t[c],m[c],h[c],d[a][c],p[c],x[n],w,l??""].filter(Boolean).join(" "),...o,children:r})});export const PlHotKeys=/* @__PURE__ */a.forwardRef(function PlHotKeys({variant:t="glass",size:m,color:c,density:d,elevation:p=0,keys:w,cluster:y,os:x="auto",separator:h,className:g,style:v,...k},j){const A=l(),C=m??A.size??"md",K=c??A.color??"secondary",P=d??A.density??"compact",S=function useDetectedOS(){return a.useSyncExternalStore(subscribe,o,serverOS)}(),B="auto"===x?S:x,N={...i(K,p,t),...v},_={variant:t,size:C,density:P},E="xs"===C||"sm"===C?"gap-1":"gap-1.5";if(y)return n("span",{ref:j,className:["inline-flex flex-col items-center align-middle",E,g??""].filter(Boolean).join(" "),style:N,...k,children:[e(PlKbd,{..._,children:y.up}),n("span",{className:`inline-flex ${E}`,children:[e(PlKbd,{..._,children:y.left}),e(PlKbd,{..._,children:y.down}),e(PlKbd,{..._,children:y.right})]})]});const z=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(w??[]).map(e=>function labelFor(e,n){const s=r(e),a=f[s];if(a)return a;const l=b[s];return l?l[n]:word(1===e.length?e.toUpperCase():e)}(e,B)),D=void 0===h?"mac"===B?null:"+":h;return e("span",{ref:j,className:["inline-flex max-w-full items-center gap-1 align-middle",g??""].filter(Boolean).join(" "),style:N,...k,children:z.map((l,r)=>n(a.Fragment,{children:[r>0&&null!==D?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:D}):null,e(PlKbd,{..._,children:l.symbol===l.name?l.symbol:n(s,{children:[e("span",{"aria-hidden":"true",children:l.symbol}),e("span",{className:u,children:l.name})]})})]},r))})});
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { PlassColor, PlassSize } from '../../types.js';
|
|
3
|
+
/** How the picture is fitted to the box. `object-fit`'s own words. */
|
|
4
|
+
export type PlImageFit = 'cover' | 'contain' | 'fill' | 'none';
|
|
5
|
+
export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'color' | 'onError' | 'onLoad'> {
|
|
6
|
+
/**
|
|
7
|
+
* The description a screen reader reads. **Required**, and `""` is a real
|
|
8
|
+
* answer: it marks the picture decorative and takes it off the accessibility
|
|
9
|
+
* tree, which is the right call for a background or a texture and the wrong
|
|
10
|
+
* one for anything a reader would miss.
|
|
11
|
+
*/
|
|
12
|
+
alt: string;
|
|
13
|
+
/**
|
|
14
|
+
* The proportion the box holds while the picture is on its way, written the
|
|
15
|
+
* way CSS writes it — a number or `'16 / 9'`.
|
|
16
|
+
*
|
|
17
|
+
* This is what the component is really for. Without it the page has nothing
|
|
18
|
+
* to reserve, and every image that arrives late pushes the paragraph under it
|
|
19
|
+
* down the screen.
|
|
20
|
+
*/
|
|
21
|
+
ratio?: number | string;
|
|
22
|
+
/** @default 'cover' */
|
|
23
|
+
fit?: PlImageFit;
|
|
24
|
+
/** Rounds the corners to the `size` step of the house ladder. @default false */
|
|
25
|
+
rounded?: boolean;
|
|
26
|
+
/** Which step of the radius ladder `rounded` uses. @default 'md' */
|
|
27
|
+
size?: PlassSize;
|
|
28
|
+
/** The family the skeleton and the focus ring take. @default 'primary' */
|
|
29
|
+
color?: PlassColor;
|
|
30
|
+
/**
|
|
31
|
+
* What is drawn while the picture is loading. A `PlSkeleton` by default;
|
|
32
|
+
* `null` draws nothing and leaves the reserved box empty.
|
|
33
|
+
*/
|
|
34
|
+
placeholder?: React.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* What is drawn when the picture does not arrive — a wrong URL, a dead host,
|
|
37
|
+
* a file that is not an image.
|
|
38
|
+
*
|
|
39
|
+
* A muted panel with the `alt` text in it by default, which is the one thing
|
|
40
|
+
* that is certainly available and certainly describes what is missing.
|
|
41
|
+
*/
|
|
42
|
+
fallback?: React.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* Opens the picture over the page when it is pressed.
|
|
45
|
+
*
|
|
46
|
+
* Off by default. A picture that grows when you click it is a promise that
|
|
47
|
+
* there is more of it to see, and most pictures on a page are not making it.
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
50
|
+
preview?: boolean;
|
|
51
|
+
/** The accessible name of the preview overlay. @default 'Preview' */
|
|
52
|
+
previewLabel?: string;
|
|
53
|
+
/** Called when the picture has loaded, and when it has failed. */
|
|
54
|
+
onStatusChange?: (status: PlImageStatus) => void;
|
|
55
|
+
}
|
|
56
|
+
/** Where the picture has got to. */
|
|
57
|
+
export type PlImageStatus = 'loading' | 'loaded' | 'error';
|
|
58
|
+
/**
|
|
59
|
+
* A picture, and the two states a picture spends most of its life in.
|
|
60
|
+
*
|
|
61
|
+
* An `<img>` is one tag and it works, which is the reason to say what this adds
|
|
62
|
+
* rather than to assume it. Three things: the space is **reserved** before the
|
|
63
|
+
* picture arrives, so the paragraph under it does not move when it does; a
|
|
64
|
+
* failure is *drawn* rather than left as the browser's broken-image glyph and
|
|
65
|
+
* the alt text in a serif nobody chose; and the two are one state machine, so
|
|
66
|
+
* the placeholder is not still there behind a picture that has already loaded.
|
|
67
|
+
*
|
|
68
|
+
* `ratio` is what makes the first one work and is the prop worth reaching for
|
|
69
|
+
* every time. Without it there is nothing to reserve — the box is however tall
|
|
70
|
+
* the picture turns out to be, which is not known until it arrives.
|
|
71
|
+
*/
|
|
72
|
+
export declare const PlImage: React.ForwardRefExoticComponent<PlImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{PlOverlay as t}from"../overlay/PlOverlay.js";import{PlSkeleton as r}from"../skeleton/PlSkeleton.js";import{cx as n,focusRingClasses as i,radiusClasses as c,transitionClasses as d}from"../../internal/styles.js";const m={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:p,src:f,ratio:u,fit:b="cover",rounded:h=!1,size:g,color:j,placeholder:v,fallback:y,preview:x=!1,previewLabel:w="Preview",onStatusChange:N,className:k,style:z,loading:P="lazy",...C},S){const L=s(),E=g??L.size??"md",I=j??L.color??"primary",[O,R]=l.useState("loading"),[$,F]=l.useState(!1);l.useEffect(()=>{R("loading")},[f]);const settle=e=>{R(e),N?.(e)},q=h?c[E]:"",A=e("img",{ref:S,src:f,alt:p,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:n("block size-full",m[b],d,"loaded"===O?"opacity-100":"opacity-0","error"===O?"hidden":""),...C}),B=a(o,{children:[A,"loading"===O?e("span",{className:"absolute inset-0",children:void 0===v?e(r,{shape:"rect",color:I,size:E,width:"100%",height:"100%",className:q}):v}):null,"error"===O?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:y??p}):null]}),D=n("relative block overflow-hidden",q,k),G={aspectRatio:u,...z};return x?a(o,{children:[e("button",{type:"button","aria-label":p?`${p} — ${w.toLowerCase()}`:w,onClick:()=>F(!0),disabled:"loaded"!==O,className:n(D,"cursor-zoom-in p-0",i),style:G,children:B}),e(t,{open:$,onOpenChange:F,tone:"glass",dismissible:!0,color:I,label:w,children:e("img",{src:f,alt:p,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:D,style:G,children:B})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlImage}from"./PlImage.js";
|
|
@@ -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{
|
|
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]})});
|
|
@@ -197,7 +197,7 @@ export declare function PlMenuSubmenu({ label, startIcon, disabled, side, sideOf
|
|
|
197
197
|
* variant for every shape a row can take, which is a component tree spelled as a
|
|
198
198
|
* discriminated union.
|
|
199
199
|
*/
|
|
200
|
-
export declare function PlMenu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
|
|
200
|
+
export declare function PlMenu({ size: sizeProp, color: colorProp, density: densityProp, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
|
|
201
201
|
/**
|
|
202
202
|
* The same menu, opened by a right-click or a long press instead of by a button.
|
|
203
203
|
*
|
|
@@ -208,5 +208,5 @@ export declare function PlMenu({ size, color, density, trigger, open, defaultOpe
|
|
|
208
208
|
* against an anchor, and the long press is what makes it reachable on a touch
|
|
209
209
|
* screen at all.
|
|
210
210
|
*/
|
|
211
|
-
export declare function PlContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
|
|
211
|
+
export declare function PlContextMenu({ size: sizeProp, color: colorProp, density: densityProp, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
|
|
212
212
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Menu as t}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{MenuContext as r}from"../../internal/menu.js";import{CheckIcon as i,ChevronIcon as c,DotIcon as d}from"../../internal/icons.js";import{controlTextLeadingClasses as p,cx as u,gapClasses as m,glassClasses as h,hasContent as x,iconClasses as f,metaTextClasses as y,radiusClasses as g,surfaceSlots as b,transitionClasses as C}from"../../internal/styles.js";const N=/* @__PURE__ */[h,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","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(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},k={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function rowClasses(e,s,l,n){return u("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",v[s][e],k[e],m[e],p[e],C,f,"data-[highlighted]:bg-(--p-soft-hover)","data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const w="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return u("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",y[e])}function RowBody({children:l,description:n,size:a}){return x(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:u("truncate text-(--plass-muted-fg)",y[a]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:a,href:o,target:i,startIcon:c,endIcon:d,shortcut:p,description:m,color:h,closeOnClick:f=!0,disabled:y=!1,label:g,children:C,className:N,style:v}){const{size:k,density:z}=n.useContext(r),O=s(l,{children:[x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,e(RowBody,{description:m,size:k,children:C}),x(d)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:d}):null,x(p)?e("span",{className:shortcutClasses(k),children:p}):null]}),P=h?b(h,0):void 0,I=P||v?{...P,...v}:void 0;return void 0!==o?e(t.LinkItem,{href:o,target:i,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O}):e(t.Item,{disabled:y,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O})}export function PlMenuCheckboxItem({checked:l,defaultChecked:a,onCheckedChange:o,endIcon:c,shortcut:d,description:p,color:m,closeOnClick:h=!1,disabled:f=!1,label:y,children:g,className:C,style:N}){const{size:v,density:k}=n.useContext(r),z=m?b(m,0):void 0;return s(t.CheckboxItem,{checked:l,defaultChecked:a,onCheckedChange:e=>o?.(e),disabled:f,label:y,closeOnClick:h,className:rowClasses(v,k,Boolean(m),C),style:z||N?{...z,...N}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(i,{})})}),e(RowBody,{description:p,size:v,children:g}),x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,x(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:a=!1,children:o,className:r,style:i}){return e(t.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:a,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:a,shortcut:o,description:i,color:c,closeOnClick:p=!1,disabled:m=!1,label:h,children:f,className:y,style:g}){const{size:C,density:N}=n.useContext(r),v=c?b(c,0):void 0;return s(t.RadioItem,{value:l,disabled:m,label:h,closeOnClick:p,className:rowClasses(C,N,Boolean(c),y),style:v||g?{...v,...g}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.RadioItemIndicator,{className:"flex items-center justify-center",children:e(d,{})})}),e(RowBody,{description:i,size:C,children:f}),x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,x(o)?e("span",{className:shortcutClasses(C),children:o}):null]})}export function PlMenuGroup({label:l,children:a,className:o,style:i}){const{size:c,density:d}=n.useContext(r);return s(t.Group,{className:o,style:i,children:[x(l)?e(t.GroupLabel,{className:u(v[d][c],y[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,a]})}export function PlMenuSeparator({className:s,...l}){return e(t.Separator,{className:u("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:a,disabled:o=!1,side:i="right",sideOffset:d=4,children:m,className:h,style:f}){const{size:y,density:C,color:v}=n.useContext(r);return s(t.SubmenuRoot,{children:[s(t.SubmenuTrigger,{disabled:o,className:rowClasses(y,C,!1),children:[x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:u(w,"text-(--plass-muted-fg) -rotate-90"),children:e(c,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:i,sideOffset:d,align:"start",children:e(t.Popup,{className:u(N,g[y],p[y],h),style:{...b(v,3),...f},children:m})})})]})}export function PlMenu({size:l,color:o,density:i,trigger:c,open:d,defaultOpen:m,onOpenChange:h,side:x="bottom",align:f="start",sideOffset:y=6,modal:C=!0,openOnHover:v=!1,loopFocus:k=!0,disabled:w=!1,className:z,style:O,children:P}){const I=a(),M=l??I.size??"md",R=o??I.color??"primary",j=i??I.density??"default",B=n.useMemo(()=>({size:M,color:R,density:j}),[M,R,j]);return e(r.Provider,{value:B,children:s(t.Root,{open:d,defaultOpen:m,onOpenChange:e=>h?.(e),modal:C,loopFocus:k,disabled:w,children:[c?e(t.Trigger,{render:c,openOnHover:v,disabled:w}):null,e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:x,align:f,sideOffset:y,children:e(t.Popup,{className:u(N,g[M],p[M],z),style:{...b(R,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:t,density:i,content:c,children:d,open:m,defaultOpen:h,onOpenChange:x,loopFocus:f=!0,disabled:y=!1,className:C,style:v}){const k=a(),w=l??k.size??"md",z=t??k.color??"primary",O=i??k.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(r.Provider,{value:P,children:s(o.Root,{open:m,defaultOpen:h,onOpenChange:e=>x?.(e),loopFocus:f,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:u(N,g[w],p[w],C),style:{...b(z,3),...v},children:c})})})]})})}
|