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
|
@@ -0,0 +1 @@
|
|
|
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{Calendar as l,usePickerLabels as n}from"../../internal/calendar.js";import{popupPaddingClasses as s}from"../../internal/picker.js";import{isValidDate as r,localeWeekStart as i,mergeDateAndTime as m,startOfDay as c,startOfMonth as d,today as u,toISODate as f,toISOMonth as h,toISOYear as p}from"../../internal/date.js";import{controlTextLeadingClasses as y,cx as D,disabledClasses as v,radiusClasses as j,sheetRestClasses as x,surfaceSlots as w}from"../../internal/styles.js";const S={day:f,month:h,year:p};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:f="glass",size:h,color:p,elevation:b=1,value:C,defaultValue:O,onValueChange:g,precision:k="day",month:z,defaultMonth:M,onMonthChange:F,minDate:N,maxDate:P,shouldDisableDate:V,locale:R,weekStartsOn:q,showOutsideDays:A=!0,autoFocus:B=!1,disabled:E=!1,name:G,labels:H,className:I,style:J,...K},L){const Q=o(),T=R??Q.locale,U=h??Q.size??"md",W=p??Q.color??"primary",X=n(H),Y=q??Q.weekStartsOn??i(T),[Z,$]=t.useState(O??null),_=void 0!==C?C:Z,[ee,ae]=t.useState(()=>d(r(_)?_:M??u())),te=z??ee,setMonth=e=>{void 0===z&&ae(e),F?.(e)};return a("div",{ref:L,inert:E||void 0,className:D("inline-flex flex-col",x[f],j[U],s[U],y[U],E?v[f]:"",I),style:{...w(W,b),...J},...K,children:[e(l,{size:U,color:W,locale:T,weekStartsOn:Y,month:te,onMonthChange:setMonth,precision:k,selected:[_],onSelect:e=>{const a=r(_)?m(e,_):c(e);void 0===C&&$(a),g?.(a),setMonth(d(a))},minDate:N,maxDate:P,shouldDisableDate:V,showOutsideDays:A,autoFocus:B,labels:X}),G?e("input",{type:"hidden",name:G,value:r(_)?S[k](_):""}):null]})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlCalendar}from"./PlCalendar.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:j,density:$,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=l(),J=N??I.size??"md",K=j??I.color??"primary",L=$??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title font-semibold ${g[J]}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${i[J]}`,children:z}):null]}):null,n(B)?e("div",{className:"ms-auto shrink-0",children:B}):null]}),U=[S?{key:"header",className:"flex items-start gap-3",content:T}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),V=["flex flex-col",c[J],h[a],y,F?`${b[a]} ${t}`:"",P?"overflow-hidden":`${O} ${u[J]}`,q??""].filter(Boolean).join(" ");return o({render:R??e("div",{}),ref:H,props:{className:V,style:{...x(K,w),...D},...G,children:U.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});
|
|
@@ -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 a}from"../../internal/defaults.js";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{ChevronIcon as s}from"../../internal/icons.js";import{cx as l,radiusClasses as i,sheetRestClasses as o,srOnlyClasses as c,surfaceSlots as u,transitionClasses as d}from"../../internal/styles.js";const f={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},m={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:p="glass",size:h,color:v,density:b,elevation:w=0,value:g,defaultValue:x=0,onValueChange:y,loop:N=!0,autoPlay:k=!1,interval:C=5e3,arrows:j=!0,indicators:M=!0,label:P="Carousel",previousLabel:R="Previous slide",nextLabel:I="Next slide",slideLabel:L,className:z,style:S,children:$,..._},E){const V=a(),B=h??V.size??"md",T=v??V.color??"primary",W=b??V.density??"default",A=L??((e,r)=>`Slide ${e} of ${r}`),F=t.Children.toArray($),q=F.length,[D,G]=t.useState(x),H=Math.min(Math.max(g??D,0),Math.max(q-1,0)),J=t.useRef(null),K=t.useRef([]),O=t.useRef(!1),Q=t.useRef(!1),U=t.useRef(!1),[X,Y]=t.useState(!1),Z=t.useCallback((e,r=!1)=>{if(0===q)return;const t=N?(e%q+q)%q:Math.min(Math.max(e,0),q-1);O.current=r,void 0===g&&G(t),t!==H&&y?.(t)},[q,N,g,H,y]);t.useEffect(()=>{if(O.current)return void(O.current=!1);if(!Q.current)return void(Q.current=!0);K.current[H]?.scrollIntoView({block:"nearest",inline:"start"}),U.current=!0;const e=window.setTimeout(()=>{U.current=!1},700);return()=>window.clearTimeout(e)},[H]),t.useEffect(()=>{if(!k||X||q<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||Z(H+1)},C);return()=>window.clearInterval(e)},[k,X,q,C,H,Z]);const ee=H<=0,re=H>=q-1;return r("div",{ref:E,role:"region","aria-roledescription":"carousel","aria-label":P,className:l("flex flex-col",z),style:{...u(T,w),...S},onPointerEnter:()=>Y(!0),onPointerLeave:()=>Y(!1),onFocus:()=>Y(!0),onBlur:()=>Y(!1),..._,children:[r("div",{className:l("relative min-w-0 overflow-hidden",i[B],o[p],d),children:[e("div",{ref:J,tabIndex:0,role:"group","aria-label":P,className:l("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=J.current;if(U.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==H&&r>=0&&r<q&&Z(r,!0)},children:F.map((r,t)=>e("div",{ref:e=>{K.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":A(t+1,q),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),j&&q>1?r("div",{className:l("pointer-events-none absolute inset-y-0 flex items-center",f[B]),children:[e(n,{variant:"glass",size:B,color:T,density:W,elevation:1,label:R,disabled:!N&&ee,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(s,{})}),onClick:()=>Z(H-1)}),e("span",{className:"flex-1"}),e(n,{variant:"glass",size:B,color:T,density:W,elevation:1,label:I,disabled:!N&&re,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(s,{})}),onClick:()=>Z(H+1)})]}):null]}),M&&q>1?e("div",{className:l("flex shrink-0 items-center justify-center pt-2",m[B].gap),children:F.map((r,t)=>e("button",{type:"button","aria-label":A(t+1,q),"aria-current":t===H?"true":void 0,className:l("cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",t===H?`${m[B].current} bg-(--p-accent)`:`${m[B].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>Z(t)},t))}):null,e("span",{className:c,"aria-live":k?"off":"polite",children:q>0?A(H+1,q):""})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{CheckIcon as a,ClockIcon as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{CheckIcon as a,ClockIcon as n,LinkIcon as i,severityIcon as t}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as d,glassClasses as c,hasContent as p,metaTextClasses as m,radiusClasses as u,sheetBodyClasses as f,sheetHeaderGapClasses as v,srOnlyClasses as g,transitionClasses as x}from"../../internal/styles.js";const h={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},b={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[c,"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-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const k={sending:e(n,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */t("danger")},w={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},N={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},j=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",d].join(" "),_=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:n,avatar:i,status:t,statusLabel:d,typing:c=!1,typingLabel:j="Typing…",media:C,preview:L,actions:D,variant:z="glass",size:B,color:P,density:T,elevation:I=0,className:R,style:S,children:W,...M},$){const q=r(),A=B??q.size??"md",E=P??q.color??"primary",F=T??q.density??"default",G="end"===s,H=p(a)||p(n),J=c||p(W)||Boolean(L),K=["flex min-w-0 flex-col overflow-hidden",u[A],b[s],y[z],x].join(" ");return l("div",{ref:$,className:["group/bubble flex w-full items-start gap-2",G?"flex-row-reverse":"",R??""].filter(Boolean).join(" "),style:{...o(E,I,z),...S},...M,children:[p(i)?e("div",{className:"shrink-0",children:i}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[A],G?"items-end":"items-start"].join(" "),children:[H?l("div",{className:`flex items-baseline gap-2 ${m[A]}`,children:[p(a)?e("span",{className:"font-semibold",children:a}):null,p(n)?e("span",{className:"text-(--plass-muted-fg)",children:n}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+(G?"flex-row-reverse":""),children:[l("div",{className:K,children:[p(C)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:C}):null,J?l("div",{className:[h[F][A],"flex min-w-0 flex-col gap-2",f[A]].join(" "),children:[c?e(TypingDots,{label:j}):p(W)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:W}):null,L?e(LinkPreview,{preview:L}):null]}):null]}),p(D)?e("div",{className:_,children:D}):null]}),t?l("div",{className:["flex items-center gap-1",m[A],N[t],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[k[t],e("span",{className:g,children:d??w[t]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:g,children:s})]})}function LinkPreview({preview:s}){const{url:r,title:a,description:n,image:t,site:o,newTab:d=!1}=s;return l("a",{href:r,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:j,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[p(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(i,{}),e("span",{className:"truncate",children:o})]}):null,p(a)?e("span",{className:"font-semibold",children:a}):null,p(n)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:n}):null]})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Checkbox as o}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as l,cx as i,focusRingClasses as n,glassClasses as c,hasContent as d,metaTextClasses as p,tickRadiusClasses as h,tickRowTextClasses as m,tickSizeClasses as u,transitionClasses as f}from"../../internal/styles.js";const b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,n].join(" "),k=/* @__PURE__ */[c,"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","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),g=/* @__PURE__ */[c,"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]"].join(" "),x=/* @__PURE__ */[c,"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]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:n,label:c,description:f,error:v,invalid:N,disabled:j=!1,readOnly:y=!1,className:C,classNames:w,style:M,...z},L){const B=t(),D=a??B.size??"md",R=n??B.color??"primary",O=d(v),P=N??O,W=P?"danger":R,E=i(b,u[D],h[D],j?x:y?g:k,w?.control);return r(s.Root,{disabled:j,invalid:P,className:["inline-flex flex-col gap-1 align-top",C??""].filter(Boolean).join(" "),style:{...l(W,0,"solid"),...M},children:[r("div",{className:`flex items-start gap-2 ${m[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:L,className:E,disabled:j,readOnly:y,...z,children:e(o.Indicator,{className:"flex size-[70%] items-center justify-center",children:z.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||f?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:i(j?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",w?.label),children:c}):null,f?e(s.Description,{className:i(p[D],"text-(--plass-muted-fg)",w?.description),children:f}):null]}):null]}),e(s.Error,O?{match:!0,className:i(p[D],"text-(--p-accent)",w?.error),children:v}:{className:i(p[D],"text-(--p-accent)",w?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{
|
|
1
|
+
"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as n}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as r,controlSlots as i,controlTextClasses as c,disabledClasses as p,focusRingClasses as d,gapClasses as m,glassClasses as g,hasContent as h,iconClasses as b,paddingXClasses as f,radiusClasses as u,transitionClasses as v}from"../../internal/styles.js";const x={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},j={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[g,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},w={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},y={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)"},k=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",v,b].join(" "),N=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",d].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:d,color:g,density:b,elevation:v=0,startIcon:C,endIcon:$,count:z,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:D,style:F,children:L,onClick:q,...A},E){const G=o(),H=d??G.size??"md",J=g??G.color??"primary",K=b??G.density??"default",M=Boolean(q)&&!R,O=x[H],Q=f[K][O],S=[k,r[O],c[O],m[O],u[O],R?p[t]:j[t],!R&&P?w[t]:"",M?y[t]:"",M?"ps-0":Q,B?"pe-1":M?"pe-0":"",D??""].filter(Boolean).join(" "),T=l(s,{children:[C,h(L)?e("span",{className:"min-w-0 truncate",children:L}):null,$,h(z)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:z}):null]});return l("span",{ref:E,className:S,style:{...i(J,v,t),...F},"aria-disabled":!(!R||M)||void 0,...A,children:[M?e("button",{type:"button","aria-pressed":P,className:`${N} ${m[O]} ${Q}`,onClick:q,children:T}):T,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(n,{})}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as p,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as h,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:z,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:I=!1,padded:q=!0,hiddenUntilFound:A=!1,keepMounted:B=!1,className:D,style:E,children:G,...H},J){const K=s(),L=j??K.size??"md",Q=k??K.color??"primary",S=C??K.density??"default",V=u[S][L],W=x[S][L];return l(a.Root,{ref:J,open:_,defaultOpen:P,onOpenChange:e=>z?.(e),disabled:I,className:i("flex flex-col overflow-hidden",m[L],b[t],v,D),style:{...N(Q,O),...E},...H,children:[U?e(a.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",V,W,p[L],v,d,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[o(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:i("flex min-w-0 flex-1 flex-col",h[L]),children:[o(F)?e("span",{className:i("plass-title truncate font-semibold",g[L]),children:F}):null,o(M)?e("span",{className:i("truncate text-(--plass-muted-fg)",c[L]),children:M}):null]}),$?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),o(T)?e("span",{className:i("flex shrink-0 items-center",V),children:T}):null]}),e(a.Panel,{hiddenUntilFound:A,keepMounted:B,className:i("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[L],q?V:"",q?U?`${w[S][L]} ${y[S][L]}`:y[S][L]:""),children:G})})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{
|
|
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{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as t}from"../../internal/picker.js";import{CheckIcon as o}from"../../internal/icons.js";import{checkerBackground as n,clamp as i,cssColor as d,defaultSwatches as c,formatColor as h,parseColor as u,readableInk as f}from"../../internal/color.js";import{controlTextClasses as p,cx as m,focusRingClasses as g,metaTextClasses as v,radiusClasses as b,stackGapClasses as x,surfaceSlots as w}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const y={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},C={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},k={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},N={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},P={xs:10,sm:12,md:14,lg:16,xl:18},j=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),_=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:t,onTextChange:c,withAlpha:p,swatches:x,editable:w,size:O,inert:S,labels:z}){const I=P[O],T=-I/2,A=d({h:r.h,s:100,v:100}),D=d(r),track=e=>({onPointerDown:a=>{S||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!S&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l)=>({role:"slider",tabIndex:S?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":S||void 0,onKeyDown:e=>{const a=arrowStep(e);!S&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:m("flex flex-col",y[O],N[O]),children:[e("div",{...track(e=>{const{x:a,y:t}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:l})}),role:"slider",tabIndex:S?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":S||void 0,onKeyDown:e=>{const a=arrowStep(e);!S&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:m(j,C[O],b[O],g,S?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:A,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:_,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:D}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:m(j,k[O],"rounded-full",g,S?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:_,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:A}})}),p?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:i(l+e/100,0,1)})),className:m(j,k[O],"rounded-full",g,S?"cursor-default":"cursor-pointer touch-none"),style:n,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${D})`}}),e("span",{className:_,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:d(r,l)}})]}):null,w?a("div",{className:m("flex items-center",N[O]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...n},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:t,readOnly:S,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>c(e.target.value),className:m("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",b.xs,v[O],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const t=u(a),n=null!==t&&h(t.hsv,t.alpha,"hex")===h(r,l,"hex");return e("button",{type:"button",disabled:S,"aria-label":a,"aria-pressed":n,onClick:()=>{t&&s(t)},className:m("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",S?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:n&&t?e("span",{style:{color:f(t.hsv)},children:e(o,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const O={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:o,defaultValue:i="#1a58d1",onValueChange:f,format:g="hex",alpha:b=!1,swatches:y=c,inline:C=!1,editable:k=!0,label:N,description:P,error:j,invalid:_,required:S=!1,disabled:z=!1,readOnly:I=!1,fullWidth:T=!1,clearable:A=!1,name:D,open:L,defaultOpen:M=!1,onOpenChange:V,labels:$,variant:q="glass",size:K,color:R,density:B,elevation:W=0,className:E,style:H,...U},X){const Y=l(),F=K??Y.size??"md",G=R??Y.color??"primary",J=B??Y.density??"default",Q=r.useMemo(()=>({...defaultColorPickerLabels,...$}),[$]),[Z,ee]=r.useState(i),ae=o??Z,[re,le]=r.useState(M),se=L??re,[te,oe]=r.useState(()=>u(ae)??{hsv:O,alpha:1}),[ne,ie]=r.useState(()=>ae),de=h(te.hsv,b?te.alpha:1,g),ce=""===ae;r.useEffect(()=>{const e=u(ae);e?h(e.hsv,b?e.alpha:1,g)!==de&&(ie(ae),oe(e)):ie(ae)},[ae,de,b,g]);const commit=(e,a)=>{oe(e);const r=h(e.hsv,b?e.alpha:1,g);ie(a??r),void 0===o&&ee(r),f?.(r)},he=z||I,ue=e(ColorPanel,{hsv:te.hsv,alphaValue:te.alpha,onChange:commit,text:ne,onTextChange:e=>{ie(e);const a=u(e);a&&commit(a,e)},withAlpha:b,swatches:y,editable:k,size:F,inert:he,labels:Q}),fe=D?e("input",{type:"hidden",name:D,value:ce?"":de}):null;if(C){const r=_??Boolean(j)?"danger":G;return a("div",{ref:X,className:m("flex flex-col",x[F],E),style:{...w(r,W),...H},...U,children:[N?e("span",{className:m(v[F],"font-semibold",z?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:N}):null,ue,P?e("span",{className:m(v[F],"text-(--plass-muted-fg)"),children:P}):null,j?e("span",{className:m(v[F],"text-(--p-accent)"),children:j}):null,fe]})}return e("div",{ref:X,className:T?"w-full":"inline-block",...U,children:e(t,{variant:q,size:F,color:G,density:J,elevation:W,style:H,label:N,description:P,error:j,invalid:_,required:S,disabled:z,readOnly:I,fullWidth:T,className:E,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:n,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ce?"transparent":d(te.hsv,b?te.alpha:1)}})}),display:ce?Q.empty:de,samples:widthSamples(g,b),empty:ce,clearable:A,onClear:()=>{void 0===o&&ee(""),ie(""),f?.("")},open:se,onOpenChange:e=>{void 0===L&&le(e),V?.(e)},labels:{...s,clear:Q.clear},hiddenValues:D?[{name:D,value:ce?"":de}]:void 0,children:e("div",{className:p[F],children:ue})})})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
|
|
2
|
+
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* What a combobox's value may be — the same two types a PlSelect submits, and
|
|
5
5
|
* for the same reason: a form control's value is what a form sends, and every
|
|
@@ -27,6 +27,15 @@ type Selection<Multiple extends boolean | undefined> = Multiple extends true ? P
|
|
|
27
27
|
export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
|
|
28
28
|
/** Classes on the parts a `className` does not reach. */
|
|
29
29
|
classNames?: PlassFieldClassNames;
|
|
30
|
+
/**
|
|
31
|
+
* Chords this field answers to, in the vocabulary `PlHotKeys` draws.
|
|
32
|
+
*
|
|
33
|
+
* `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
|
|
34
|
+
* beside the field would print, so the cap and the binding cannot drift. A
|
|
35
|
+
* chord that matches is **consumed**: the handler runs and the key reaches
|
|
36
|
+
* neither the control's own behaviour nor the form around it.
|
|
37
|
+
*/
|
|
38
|
+
hotKeys?: PlassHotKeys;
|
|
30
39
|
/**
|
|
31
40
|
* The options, as data — the same shape PlSelect takes, and for the same
|
|
32
41
|
* reason: what a caller has is almost always an array already.
|
|
@@ -138,5 +147,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
138
147
|
* navigation across both the list and the chips, and the hidden input that makes
|
|
139
148
|
* the whole thing submit with a form.
|
|
140
149
|
*/
|
|
141
|
-
export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
150
|
+
export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
142
151
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{
|
|
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{Combobox as s}from"@base-ui/react/combobox";import{Field as r}from"@base-ui/react/field";import{PlChip as n}from"../chip/PlChip.js";import{CheckIcon as i,ChevronIcon as o,CloseIcon as c,PlusIcon as d}from"../../internal/icons.js";import{hotKeyHandler as m}from"../../internal/keys.js";import{chipRemoveClasses as p,controlHeightClasses as u,controlTextLeadingClasses as h,cx as b,disabledClasses as f,fieldReadOnlyClasses as g,fieldRestClasses as v,focusWithinRingClasses as x,gapClasses as y,glassClasses as N,hasContent as w,iconClasses as C,metaTextClasses as j,paddingXClasses as L,radiusClasses as I,stackGapClasses as S,surfaceSlots as z,transitionClasses as A}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",A,x,C].join(" "),V={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"},_=/* @__PURE__ */[N,"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]"].join(" "),k=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",A,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)","data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),M=/* @__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:x="glass",size:N,color:C,density:A,elevation:P=0,items:R,multiple:$,value:T,defaultValue:q,onValueChange:E,onInputValueChange:F,allowCustom:D=!0,customLabel:K,clearable:G=!1,emptyMessage:H="No matches",limit:W,placeholder:B,label:J,description:Q,error:U,invalid:X,startIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ae=!1,required:le=!1,name:te,open:se,defaultOpen:re,onOpenChange:ne,openLabel:ie="Open",clearLabel:oe="Clear",removeLabel:ce=e=>`Remove ${e}`,inputRef:de,id:me,className:pe,hotKeys:ue,classNames:he,style:be,...fe}){const ge=t(),ve=N??ge.size??"md",xe=C??ge.color??"primary",ye=A??ge.density??"default",Ne=w(U),we=X??Ne,Ce=we?"danger":xe,je=!0===$,Le=l.useMemo(()=>R.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[R]),[Ie,Se]=l.useState(()=>toArray(q)),ze=void 0===T?Ie:toArray(T),[Ae,Oe]=l.useState(""),Ve=l.useMemo(()=>new Map(Le.map(e=>[e.value,e])),[Le]),_e=l.useCallback(e=>Ve.get(e)??{value:e,label:String(e),custom:!0},[Ve]),ke=Ae.trim(),Me=ke.toLocaleLowerCase(),Pe=""===ke||Le.some(e=>e.label.toLocaleLowerCase()===Me||String(e.value).toLocaleLowerCase()===Me)||ze.some(e=>String(e).toLocaleLowerCase()===Me),Re=!D||ae||ee||Pe?null:ke,$e=l.useMemo(()=>null===Re?Le:[...Le,{value:Re,label:Re,custom:!0}],[Le,Re]),Te=je?ze.map(_e):ze.length>0?_e(ze[0]):null,qe=b(O,h[ve],I[ve],y[ve],je?V[ve]:u[ve],`${L[ye][ve]} pe-1.5`,ee?f[x]:ae?g[x]:v[x]),Ee=/* @__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(s.Input,{ref:de,placeholder:B,onKeyDown:m(ue,void 0),className:b(Ee,je&&"min-w-16",je&&a&&"ms-1.5")});return a(r.Root,{disabled:ee,invalid:we,className:b("flex-col align-top",S[ve],Z?"flex w-full":"inline-flex",pe),style:{...z(Ce,P),...be},...fe,children:[J?e(r.Label,{className:b(j[ve],"font-semibold",ee?"text-(--plass-muted-fg)":"text-(--plass-fg)",he?.label),children:J}):null,a(s.Root,{id:me,name:te,items:$e,multiple:je,value:Te,onValueChange:e=>{!function commit(e){void 0===T&&Se(e),E?.(je?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Oe(e),F?.(e)},open:se,defaultOpen:re,onOpenChange:e=>ne?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:W,disabled:ee,readOnly:ae,required:le,children:[a(s.InputGroup,{className:b(qe,he?.control),children:[Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Y}):null,je?e(s.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(s.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(s.Chip,{render:e(n,{variant:"glass",size:ve,color:Ce,density:"compact",disabled:ee,endIcon:ae||ee?null:e(s.ChipRemove,{"aria-label":ce(a.label),className:p,children:e(c,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),G&&!ae?e(s.Clear,{"aria-label":oe,className:M,children:e(c,{})}):null,e(s.Trigger,{"aria-label":ie,className:M,children:e(s.Icon,{className:b("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(o,{})})})]}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(s.Popup,{className:b(_,I[ve],h[ve]),style:z(Ce,3),children:[e(s.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:H}),e(s.List,{children:t=>e(s.Item,{value:t,disabled:t.disabled,className:k,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(d,{})}),e("span",{className:"truncate",children:K?K(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(s.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),Q?e(r.Description,{className:b(j[ve],"text-(--plass-muted-fg)",he?.description),children:Q}):null,e(r.Error,Ne?{match:!0,className:b(j[ve],"text-(--p-accent)",he?.error),children:U}:{className:b(j[ve],"text-(--p-accent)",he?.error)})]})}
|
|
@@ -86,4 +86,4 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
|
|
|
86
86
|
* its Dialog owns the sheet, the scrim, the focus trap and returning the focus
|
|
87
87
|
* to wherever the reader was.
|
|
88
88
|
*/
|
|
89
|
-
export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size, color, density, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
|
|
89
|
+
export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Autocomplete as l}from"@base-ui/react/autocomplete";import{Dialog as o}from"@base-ui/react/dialog";import{PlHotKeys as r}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as i}from"../../hooks/usePlHotKeys.js";import{searchHaystack as n,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as c,cx as d,glassClasses as m,hasContent as u,metaTextClasses as h,radiusClasses as x,surfaceSlots as f,toLength as g}from"../../internal/styles.js";const y=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),b=/* @__PURE__ */[m,"relative flex w-full flex-col overflow-hidden","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]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},k={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},N={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},j=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--plass-duration)_var(--plass-ease)]","data-[highlighted]:bg-(--p-soft) data-[highlighted]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return n([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:n,open:m,defaultOpen:z=!1,onOpenChange:C,onSelect:_,shortcut:P="Mod+K",width:S,maxHeight:O=320,placeholder:H="Search commands",emptyMessage:M="No commands found",label:K="Command palette",size:V,color:F,density:I,className:R,classNames:T,style:B}){const D=t(),E=V??D.size??"md",L=F??D.color??"primary",W=I??D.density??"default",[q,A]=a.useState(z),[G,J]=a.useState(""),Q=m??q,U=a.useCallback(e=>{void 0===m&&A(e),C?.(e)},[m,C]);i(!1===P?void 0:{[P]:()=>U(!0)},{whileTyping:!0});const X=a.useMemo(()=>n.map(haystackOf),[n]),Y=a.useMemo(()=>{const e=p(G);return""===e?n:n.filter((s,a)=>X[a].includes(e))},[n,X,G]),Z=g(S),$=g(O);return e(o.Root,{open:Q,onOpenChange:e=>{e||J(""),U(e)},children:s(o.Portal,{children:[e(o.Backdrop,{className:d("plass-portal",y,T?.backdrop)}),e(o.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(o.Popup,{"aria-label":K,className:d(b,x[E],c[E],void 0===Z?v[E]:"","self-start",R),style:{...f(L,3),...void 0===Z?null:{maxWidth:Z},...B},children:s(l.Root,{open:!0,mode:"list",items:Y,filter:null,value:G,onValueChange:e=>J(e),itemToStringValue:e=>e.label,children:[e("div",{className:d("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",N[E]),children:e(l.Input,{autoFocus:!0,placeholder:H,className:d("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",w[E])})}),e(l.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:$},children:(t,o)=>s(a.Fragment,{children:[t.group&&t.group!==Y[o-1]?.group?e("div",{role:"presentation",className:d(N[E],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",h[E]),children:t.group}):null,s(l.Item,{index:o,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),_?.(e),U(!1))})(t),className:d(j,x[E],N[E],k["compact"===W?"xs":E]),children:[u(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),u(t.description)?e("span",{className:d("truncate text-(--plass-muted-fg)",h[E]),children:t.description}):null]}),t.shortcut?e(r,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),e(l.Empty,{className:d(N[E],"py-6 text-center text-(--plass-muted-fg)",h[E]),children:M})]})})})]})})}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { PlassColor, PlassSize } from '../../types.js';
|
|
3
|
+
/** What one question looks like. Every field is optional but `title`. */
|
|
4
|
+
export interface PlConfirmOptions {
|
|
5
|
+
/** The question, as the `<h2>` that names the dialog. */
|
|
6
|
+
title?: React.ReactNode;
|
|
7
|
+
/** A line under it, and the dialog's accessible description. Say what happens. */
|
|
8
|
+
description?: React.ReactNode;
|
|
9
|
+
/** Anything more that belongs in the body — a list of what is about to go. */
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
/** The word on the button that answers yes. @default 'Confirm' (`'OK'` on an alert) */
|
|
12
|
+
confirmLabel?: React.ReactNode;
|
|
13
|
+
/** The word on the button that answers no. Not drawn by `alert`. @default 'Cancel' */
|
|
14
|
+
cancelLabel?: React.ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* The family the confirming button takes. `danger` for anything that removes
|
|
17
|
+
* something.
|
|
18
|
+
* @default 'primary'
|
|
19
|
+
*/
|
|
20
|
+
color?: PlassColor;
|
|
21
|
+
/** @default 'md' */
|
|
22
|
+
size?: PlassSize;
|
|
23
|
+
/**
|
|
24
|
+
* Which button holds the focus when the dialog opens.
|
|
25
|
+
*
|
|
26
|
+
* **`cancel` by default**, and that is the decision worth stating: a confirm
|
|
27
|
+
* dialog exists to make somebody stop, and an Enter key that lands on the
|
|
28
|
+
* destructive action defeats the whole thing. Move it for a question whose
|
|
29
|
+
* yes is the harmless answer — "Save before closing?" — where making somebody
|
|
30
|
+
* reach for the mouse to agree is its own kind of rude.
|
|
31
|
+
* @default 'cancel'
|
|
32
|
+
*/
|
|
33
|
+
initialFocus?: 'confirm' | 'cancel';
|
|
34
|
+
/**
|
|
35
|
+
* Whether Escape and a click outside answer **no**.
|
|
36
|
+
*
|
|
37
|
+
* On, because Escape is the universal "no" and a question that cannot be
|
|
38
|
+
* escaped is a trap. Turn it off for the one that has to be answered.
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
dismissible?: boolean;
|
|
42
|
+
/** How wide the sheet may get. A number of pixels or any CSS length. */
|
|
43
|
+
width?: number | string;
|
|
44
|
+
}
|
|
45
|
+
export interface PlConfirmValue {
|
|
46
|
+
/**
|
|
47
|
+
* Asks the question and resolves with the answer.
|
|
48
|
+
*
|
|
49
|
+
* ```tsx
|
|
50
|
+
* if (await confirm({ title: 'Delete this project?', color: 'danger' })) {
|
|
51
|
+
* await remove(project);
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
confirm: (options: PlConfirmOptions) => Promise<boolean>;
|
|
56
|
+
/** Says something and resolves when it has been acknowledged. One button. */
|
|
57
|
+
alert: (options: PlConfirmOptions) => Promise<void>;
|
|
58
|
+
}
|
|
59
|
+
export interface PlConfirmProviderProps extends Pick<PlConfirmOptions, 'size' | 'color' | 'confirmLabel' | 'cancelLabel' | 'width'> {
|
|
60
|
+
/** The word an `alert`'s single button says. @default 'OK' */
|
|
61
|
+
acknowledgeLabel?: React.ReactNode;
|
|
62
|
+
children?: React.ReactNode;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* One dialog, asked for from anywhere under it.
|
|
66
|
+
*
|
|
67
|
+
* The thing a caller has at the moment a question is warranted is a click
|
|
68
|
+
* handler, not a place in the tree — `onClick={async () => { if (await
|
|
69
|
+
* confirm(…)) remove() }}` is the shape this exists to make possible. The
|
|
70
|
+
* alternative, and what every application writes without it, is a piece of
|
|
71
|
+
* state per question plus a `<PlModal>` kept mounted beside every button that
|
|
72
|
+
* might need one, and the branch after the answer torn in half across a
|
|
73
|
+
* callback.
|
|
74
|
+
*
|
|
75
|
+
* It is `PlToastProvider`'s arrangement for the same reason and with the same
|
|
76
|
+
* trade: one component near the root, and a hook everywhere else.
|
|
77
|
+
*
|
|
78
|
+
* **Questions asked while one is open are queued**, in the order they were
|
|
79
|
+
* asked. The alternative is a promise nobody ever resolves, which is a hung
|
|
80
|
+
* button rather than a visible bug.
|
|
81
|
+
*/
|
|
82
|
+
export declare function PlConfirmProvider({ size, color, confirmLabel, cancelLabel, acknowledgeLabel, width, children }: PlConfirmProviderProps): React.JSX.Element;
|
|
83
|
+
/**
|
|
84
|
+
* Asks a question from a click handler, and waits for the answer.
|
|
85
|
+
*
|
|
86
|
+
* ```tsx
|
|
87
|
+
* const { confirm } = usePlConfirm();
|
|
88
|
+
*
|
|
89
|
+
* <PlButton color="danger" onClick={async () => {
|
|
90
|
+
* if (await confirm({ title: 'Delete this project?', color: 'danger', confirmLabel: 'Delete' })) {
|
|
91
|
+
* await remove(project);
|
|
92
|
+
* }
|
|
93
|
+
* }}>Delete</PlButton>
|
|
94
|
+
* ```
|
|
95
|
+
*
|
|
96
|
+
* Throws outside a `PlConfirmProvider`, rather than resolving `false`. A silent
|
|
97
|
+
* `false` is a delete button that quietly does nothing, which is worse than a
|
|
98
|
+
* missing provider that says so on the first press.
|
|
99
|
+
*/
|
|
100
|
+
export declare function usePlConfirm(): PlConfirmValue;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{PlButton as t}from"../button/PlButton.js";import{PlModal as i}from"../modal/PlModal.js";const l=/* @__PURE__ */o.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const[h,p]=o.useState(!1),[C,b]=o.useState(null),v=o.useRef(null),P=o.useRef([]),w=o.useCallback(e=>{const r=v.current;if(!r)return;r.resolve(e);const n=P.current.shift();if(n)return v.current=n,void b(n);v.current=null,p(!1)},[]),k=o.useCallback((e,r)=>new Promise(n=>{const o={kind:e,options:r,resolve:n};v.current?P.current.push(o):(v.current=o,b(o),p(!0))}),[]),x=o.useMemo(()=>({confirm:e=>k("confirm",e),alert:e=>k("alert",e).then(()=>{})}),[k]);o.useEffect(()=>()=>{v.current?.resolve(!1),P.current.forEach(e=>e.resolve(!1)),v.current=null,P.current=[]},[]);const z=C?.options,j="alert"===C?.kind,L="confirm"===(z?.initialFocus??"cancel")||j;return n(l.Provider,{value:x,children:[m,e(i,{open:h,onOpenChange:e=>{e||w(!1)},size:z?.size??c,color:z?.color??s,width:z?.width??f,dismissible:z?.dismissible??!0,title:z?.title,description:z?.description,actions:n(r,{children:[j?null:e(t,{variant:"ghost",color:"secondary",size:z?.size??c,autoFocus:!L,onClick:()=>w(!1),children:z?.cancelLabel??a??"Cancel"}),e(t,{color:z?.color??s,size:z?.size??c,autoFocus:L,onClick:()=>w(!0),children:z?.confirmLabel??(j?d??"OK":u??"Confirm")})]}),children:z?.children})]})}export function usePlConfirm(){const e=o.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlConfirmProvider,usePlConfirm}from"./PlConfirmProvider.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{
|
|
1
|
+
"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as n}from"@base-ui/react/use-render";import{cx as m,sheetPaddingXClasses as t}from"../../internal/styles.js";const a={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e="none",padded:s=!0,size:o,density:i,centered:d=!0,render:l,className:c,children:f,...x},u){const p=r(),w=o??p.size??"md",h=i??p.density??"default",y=m("block w-full","none"===e?"":a[e],d?"mx-auto":"",s?t[h][w]:"",c);return n({render:l,ref:u,props:{className:y,children:f,...x}})});
|
|
@@ -4,12 +4,36 @@ import { type PlassPickerShellProps } from '../../internal/picker.js';
|
|
|
4
4
|
import type { PlassWeekday } from '../../types.js';
|
|
5
5
|
/** The strings a picker says that `Intl` has no opinion about. */
|
|
6
6
|
export type PlPickerLabels = PlassPickerLabels;
|
|
7
|
+
/**
|
|
8
|
+
* The smallest unit the picker asks for.
|
|
9
|
+
*
|
|
10
|
+
* A birthday is a day, an expiry is a month and a model year is a year, and a
|
|
11
|
+
* control that makes someone answer a question it did not need the answer to —
|
|
12
|
+
* *which* day of December 2027 does this card expire? — is a control that will
|
|
13
|
+
* be answered wrongly.
|
|
14
|
+
*/
|
|
15
|
+
export type PlDatePickerPrecision = 'day' | 'month' | 'year';
|
|
7
16
|
export interface PlDatePickerProps extends PlassPickerShellProps {
|
|
8
17
|
/** The chosen day. Use with `onValueChange` for a controlled picker. */
|
|
9
18
|
value?: Date | null;
|
|
10
19
|
/** The day the picker starts on, for an uncontrolled one. */
|
|
11
20
|
defaultValue?: Date | null;
|
|
12
21
|
onValueChange?: (value: Date | null) => void;
|
|
22
|
+
/**
|
|
23
|
+
* How far down the picker goes: a day, a month or a year.
|
|
24
|
+
*
|
|
25
|
+
* The calendar opens on the grid for that unit and pressing a cell in it
|
|
26
|
+
* answers — a `month` picker never shows a day grid at all. The value is
|
|
27
|
+
* always a `Date`, normalised to the start of whatever was chosen: the 1st of
|
|
28
|
+
* the month, or the 1st of January.
|
|
29
|
+
*
|
|
30
|
+
* `minDate` and `maxDate` are then read at the same precision. A `minDate` of
|
|
31
|
+
* 15 July leaves July pickable on a `month` picker and hands back 1 July,
|
|
32
|
+
* because a bound on a control that returns a month is a bound on months.
|
|
33
|
+
* `shouldDisableDate` is day-granular and is not consulted at all.
|
|
34
|
+
* @default 'day'
|
|
35
|
+
*/
|
|
36
|
+
precision?: PlDatePickerPrecision;
|
|
13
37
|
/** Whether the calendar is open. Use with `onOpenChange` to control it. */
|
|
14
38
|
open?: boolean;
|
|
15
39
|
defaultOpen?: boolean;
|
|
@@ -35,6 +59,9 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
|
|
|
35
59
|
/**
|
|
36
60
|
* How the trigger writes the chosen date. Passed straight to `Intl`, so
|
|
37
61
|
* `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
|
|
62
|
+
*
|
|
63
|
+
* The default follows `precision`: a medium date, a long month and year, or a
|
|
64
|
+
* bare year.
|
|
38
65
|
* @default { dateStyle: 'medium' }
|
|
39
66
|
*/
|
|
40
67
|
format?: Intl.DateTimeFormatOptions;
|
|
@@ -42,13 +69,20 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
|
|
|
42
69
|
placeholder?: React.ReactNode;
|
|
43
70
|
/** Offers the × that empties the control. @default false */
|
|
44
71
|
clearable?: boolean;
|
|
45
|
-
/**
|
|
72
|
+
/**
|
|
73
|
+
* Offers the shortcut to today in the footer — to this month or this year on
|
|
74
|
+
* a picker whose `precision` says so. @default true
|
|
75
|
+
*/
|
|
46
76
|
showTodayButton?: boolean;
|
|
47
77
|
/** Closes the popup as soon as a day is chosen. @default true */
|
|
48
78
|
closeOnSelect?: boolean;
|
|
49
79
|
/** The strings the picker says. Every one has an English default. */
|
|
50
80
|
labels?: Partial<PlassPickerLabels>;
|
|
51
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* Identifies the field when a form is submitted, as `YYYY-MM-DD` — or as
|
|
83
|
+
* `YYYY-MM` and `YYYY` at the two shorter precisions, which is what a native
|
|
84
|
+
* `<input type="month">` submits.
|
|
85
|
+
*/
|
|
52
86
|
name?: string;
|
|
53
87
|
}
|
|
54
88
|
/**
|
|
@@ -65,6 +99,11 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
|
|
|
65
99
|
* its own — twelve months, then twelve years at a time. Any month of the year on
|
|
66
100
|
* screen is two clicks; any year at all is three.
|
|
67
101
|
*
|
|
102
|
+
* `precision` stops the drilling short. A card's expiry is a month and a model
|
|
103
|
+
* year is a year, and a control that makes someone answer a question it did not
|
|
104
|
+
* need the answer to is a control that will be answered wrongly — so a `month`
|
|
105
|
+
* picker's month grid is the last grid, and it has no day grid under it at all.
|
|
106
|
+
*
|
|
68
107
|
* There is no typing into the trigger. Parsing a date out of free text is
|
|
69
108
|
* locale-dependent in a way that cannot be done honestly without a date library,
|
|
70
109
|
* and a field that understands `27/7/26` in one browser and not in the next is
|