plass-ui 1.4.0 → 1.5.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 +372 -0
- package/README.md +18 -16
- package/dist/components/accordion/PlAccordion.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/anchor/PlAnchor.d.ts +14 -1
- package/dist/components/anchor/PlAnchor.js +1 -1
- package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
- package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-fade/PlAnimateFade.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-grow/PlAnimateGrow.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-marquee/PlAnimateMarquee.d.ts +13 -4
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-reveal/PlAnimateReveal.js +1 -1
- package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-shake/PlAnimateShake.js +1 -1
- package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.d.ts +7 -4
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
- package/dist/components/app-logo/PlAppLogo.js +1 -1
- package/dist/components/area-chart/PlAreaChart.d.ts +1 -1
- package/dist/components/area-chart/PlAreaChart.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +2 -1
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/bar-chart/PlBarChart.d.ts +1 -1
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +8 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.d.ts +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +6 -2
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/code-block/PlCodeBlock.d.ts +19 -2
- package/dist/components/code-block/PlCodeBlock.js +1 -1
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +6 -5
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +20 -6
- package/dist/components/data-table/PlDataTable.js +1 -1
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +4 -1
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/form/PlForm.js +1 -1
- package/dist/components/gallery/PlGallery.d.ts +40 -2
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gallery/PlGalleryViewer.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/hover-card/PlHoverCard.d.ts +5 -3
- package/dist/components/hover-card/PlHoverCard.js +1 -1
- package/dist/components/how-to-steps/PlHowToSteps.js +1 -1
- package/dist/components/image/PlImage.d.ts +195 -8
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/image/PlImagePreview.d.ts +58 -0
- package/dist/components/image/PlImagePreview.js +1 -0
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/menu/PlMenu.d.ts +14 -5
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/meter/PlMeter.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +6 -0
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.d.ts +12 -9
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.d.ts +5 -0
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popover/PlPopover.d.ts +5 -5
- 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.d.ts +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scatter-chart/PlScatterChart.js +1 -1
- package/dist/components/scroll-area/PlScrollArea.js +1 -1
- package/dist/components/scroll-zone/PlScrollZone.d.ts +19 -6
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/show/PlShow.d.ts +16 -0
- package/dist/components/show/PlShow.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.d.ts +13 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.js +1 -1
- package/dist/components/spoiler/PlSpoiler.d.ts +15 -8
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stat/PlStat.d.ts +4 -0
- package/dist/components/stat/PlStat.js +1 -1
- package/dist/components/stepper/PlStepper.d.ts +1 -1
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/table/PlTable.d.ts +5 -5
- package/dist/components/tabs/PlTabs.d.ts +26 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/timeline-chart/PlTimelineChart.js +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +10 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.js +1 -1
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/css/area-chart.css +1 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/bar-chart.css +1 -0
- package/dist/css/calendar.css +1 -0
- package/dist/css/carousel.css +2 -0
- package/dist/css/color-picker.css +1 -0
- package/dist/css/combobox.css +1 -0
- package/dist/css/command-palette.css +1 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/data-table.css +5 -0
- package/dist/css/date-picker.css +1 -0
- package/dist/css/date-range-picker.css +1 -0
- package/dist/css/date-time-picker.css +1 -0
- package/dist/css/floating-action-button.css +2 -0
- package/dist/css/gallery.css +5 -0
- package/dist/css/gauge-chart.css +1 -0
- package/dist/css/heatmap-chart.css +1 -0
- package/dist/css/icon-button.css +1 -0
- package/dist/css/image.css +2 -0
- package/dist/css/line-chart.css +1 -0
- package/dist/css/menubar.css +1 -0
- package/dist/css/pagination.css +1 -0
- package/dist/css/pie-chart.css +1 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/scatter-chart.css +1 -0
- package/dist/css/scroll-zone.css +2 -0
- package/dist/css/sidebar.css +3 -0
- package/dist/css/sparkline.css +1 -0
- package/dist/css/spoiler.css +1 -0
- package/dist/css/stat.css +1 -0
- package/dist/css/time-picker.css +1 -0
- package/dist/css/timeline-chart.css +1 -0
- package/dist/css/tour.css +1 -0
- package/dist/css/transfer.css +4 -0
- package/dist/css/tree-select.css +2 -0
- package/dist/hooks/usePlElementSize.d.ts +4 -1
- package/dist/hooks/usePlElementSize.js +1 -1
- package/dist/hooks/usePlHotKeys.d.ts +5 -1
- package/dist/hooks/usePlHotKeys.js +1 -1
- package/dist/hooks/usePlOnScreen.d.ts +4 -0
- package/dist/hooks/usePlOnScreen.js +1 -1
- package/dist/internal/animate.d.ts +30 -2
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +5 -1
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +81 -3
- package/dist/internal/chart.js +1 -1
- package/dist/internal/color-scheme.js +1 -1
- package/dist/internal/data-table.d.ts +5 -4
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/drag.d.ts +16 -0
- package/dist/internal/drag.js +1 -1
- package/dist/internal/focusable.d.ts +8 -0
- package/dist/internal/focusable.js +1 -0
- package/dist/internal/form.d.ts +61 -0
- package/dist/internal/form.js +1 -0
- package/dist/internal/gallery.d.ts +60 -14
- package/dist/internal/gallery.js +1 -1
- package/dist/internal/glow.d.ts +17 -0
- package/dist/internal/glow.js +1 -0
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/image.d.ts +94 -0
- package/dist/internal/image.js +1 -0
- package/dist/internal/inert.d.ts +19 -0
- package/dist/internal/inert.js +1 -0
- package/dist/internal/keys.d.ts +19 -0
- package/dist/internal/keys.js +1 -1
- package/dist/internal/labels.d.ts +45 -1
- package/dist/internal/labels.js +1 -1
- package/dist/internal/link.d.ts +17 -0
- package/dist/internal/link.js +1 -1
- package/dist/internal/page-layout.d.ts +14 -7
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +43 -6
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +16 -8
- package/dist/internal/progress.js +1 -1
- package/dist/internal/scramble.d.ts +4 -0
- package/dist/internal/scramble.js +1 -1
- package/dist/internal/scroll-target.d.ts +5 -0
- package/dist/internal/scroll-target.js +1 -0
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +66 -0
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +39 -0
- package/dist/internal/text.js +1 -0
- package/dist/internal/watermark.d.ts +44 -0
- package/dist/internal/watermark.js +1 -0
- package/dist/internal/wheel.d.ts +52 -0
- package/dist/internal/wheel.js +1 -0
- package/dist/internal/window.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/zh-Hans.js +1 -1
- package/dist/provider/PlColorSchemeScript.js +1 -1
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +258 -11
- package/dist/tokens.css +258 -11
- package/dist/types.d.ts +16 -29
- package/package.json +15 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as c,EllipsisIcon as i}from"../../internal/icons.js";import{textOf as o}from"../../internal/text.js";import{controlTextClasses as m,cx as u,focusRingClasses as d,gapClasses as p,hasContent as f,iconClasses as h,radiusClasses as x,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */a.createContext({size:"md",last:!1}),y={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:x.xs,sm:x.xs,md:x.xs,lg:x.sm,xl:x.sm},v=["chevron","arrow","slash","dot"];function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:o(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r,color:o,density:p,separator:f="chevron",maxItems:x,itemsBeforeCollapse:N=1,itemsAfterCollapse:k=1,expandable:w=!0,label:j,expandLabel:C,structuredData:L=!1,baseUrl:B,className:I,style:M,children:z,...P},R){const S=s(),A=n(),E=j??A.breadcrumb,D=C??A.breadcrumbExpand,H=r??S.size??"md",$=o??S.color??"primary",F=p??S.density??"default",[U,_]=a.useState(!1),q=a.useRef(null),J=a.useRef(!1);a.useEffect(()=>{if(!U||!J.current)return;J.current=!1;const e=Array.from(q.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const t of e.slice(Math.max(0,N))){const e=t.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,N]);const O=a.Children.toArray(z).filter(a.isValidElement),T=O.length,V=O.some(e=>!0===e.props.current),G=!U&&void 0!==x&&T>Math.max(x,1)&&T-N-k>1?[...O.slice(0,Math.max(0,N)),null,...O.slice(T-Math.max(0,k))]:O,K=function isSeparatorName(e){return"string"==typeof e&&v.includes(e)}(f)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(l,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=u("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",g,h,w?u("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",d):"");return t("nav",{ref:R,"aria-label":E,className:u("flex",m[H],h,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...P,children:[L&&T>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(O,B)}}):null,e("ol",{ref:q,role:"list",className:u("flex list-none flex-wrap items-center p-0",y[F][H]),children:G.map((r,s)=>t(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,r?e(b.Provider,{value:{size:H,last:!V&&s===G.length-1},children:r}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":D,onClick:()=>{J.current=!0,_(!0)},children:e(i,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(i,{})})})]},r?r.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:c,current:i,disabled:o=!1,className:m,children:h,...x},y){const{size:v,last:k}=a.useContext(b),w=i??k,j=Boolean(s||n)&&!w&&!o,C=u("inline-flex min-w-0 items-center px-1",p[v],N[v],g,o?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":w?"font-medium text-(--plass-fg)":j?u("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",d):"text-(--plass-muted-fg)"),L=t(r,{children:[f(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:h}),f(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return e("li",{ref:y,className:u("flex min-w-0 items-center",m),...x,children:j&&s?e("a",{href:s,className:C,onClick:n,children:L}):j?e("button",{type:"button",className:C,onClick:n,children:L}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":o||void 0,children:L})})});
|
|
@@ -21,6 +21,14 @@ export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentProp
|
|
|
21
21
|
loading?: boolean;
|
|
22
22
|
/** Inert but not dimmed — the action exists, it just is not available here. */
|
|
23
23
|
readOnly?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Keeps a `disabled` button in the tab order, announced as unavailable rather
|
|
26
|
+
* than taken out of it. For a control that can become unavailable while the
|
|
27
|
+
* reader's focus is on it, such as a stepper that reaches the end of a row,
|
|
28
|
+
* where a real `disabled` would drop the focus to the top of the page.
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
focusableWhenDisabled?: boolean;
|
|
24
32
|
/** Stretches to the width of the container. */
|
|
25
33
|
fullWidth?: boolean;
|
|
26
34
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as
|
|
1
|
+
"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{followPointer as n}from"../../internal/glow.js";import{Spinner as d}from"../../internal/icons.js";import{controlHeightClasses as p,controlSlots as c,controlSquareClasses as g,controlTextClasses as v,disabledClasses as m,focusRingClasses as b,forcedEdgeClasses as x,gapClasses as h,glassClasses as u,hasContent as f,iconClasses as $,paddingXClasses as j,radiusClasses as w,readOnlyFilterClasses as y,transitionClasses as k}from"../../internal/styles.js";const P={xs:`${p.xs} ${h.xs} ${w.xs} ${v.xs}`,sm:`${p.sm} ${h.sm} ${w.sm} ${v.sm}`,md:`${p.md} ${h.md} ${w.md} ${v.md}`,lg:`${p.lg} ${h.lg} ${w.lg} ${v.lg}`,xl:`${p.xl} ${h.xl} ${w.xl} ${v.xl}`},B={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,b,$].join(" "),C={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[u,"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-transparent"},D={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},W={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${y}`].join(" "),glass:/* @__PURE__ */[u,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${y}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${y}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:p,size:g,color:v,density:b,elevation:x,startIcon:h,endIcon:u,loading:$=!1,readOnly:w=!1,fullWidth:y=!1,disabled:k,focusableWhenDisabled:I=!1,render:M,className:N,style:F,children:O,onClick:R,onPointerMove:q,...A},E){const G=a(),H=r.useContext(i),J=p??H?.variant??"solid",K=g??H?.size??G.size??"md",L=v??H?.color??G.color??"primary",Q=b??H?.density??G.density??"default",S=x??H?.elevation??1,T=k??H?.disabled??!1,U=!f(O),V=$||w,X=!T&&!V,Y=[z,P[K],U?B[K]:j[Q][K],T?m[J]:w?W[J]:C[J],X?`${D[J]} cursor-pointer`:"",X?"plass-glow":"",$?"cursor-progress":"",y?"w-full":"",N??""].filter(Boolean).join(" ");return t({render:M??s(l,{disabled:T,focusableWhenDisabled:I}),ref:E,props:{className:Y,style:{...c(L,S,J),...F},"aria-disabled":V||T&&I||void 0,"aria-busy":$||void 0,"data-loading":$||void 0,"data-readonly":w||void 0,onClick:s=>{if(V)return s.preventDefault(),void s.stopPropagation();R?.(s)},onPointerMove:s=>{n(s),q?.(s)},...A,children:o(e,{children:[$?s(d,{}):h,O,u]})}})});
|
|
@@ -1 +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
|
|
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 n,usePickerLabels as l}from"../../internal/calendar.js";import{popupPaddingClasses as s}from"../../internal/picker.js";import{useFormReport as r}from"../../internal/form.js";import{inertProps as i}from"../../internal/inert.js";import{isValidDate as m,localeWeekStart as d,mergeDateAndTime as c,startOfDay as u,startOfMonth as f,today as p,toISODate as h,toISOMonth as j,toISOYear as y}from"../../internal/date.js";import{controlTextLeadingClasses as D,cx as v,disabledClasses as x,radiusClasses as b,sheetRestClasses as w,surfaceSlots as S}from"../../internal/styles.js";const C={day:h,month:j,year:y};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:h="glass",size:j,color:y,elevation:O=1,value:g,defaultValue:k,onValueChange:z,precision:M="day",month:F,defaultMonth:N,onMonthChange:P,minDate:V,maxDate:R,shouldDisableDate:q,locale:A,weekStartsOn:B,showOutsideDays:E=!0,autoFocus:G=!1,disabled:H=!1,name:I,labels:J,className:K,style:L,...Q},T){const U=o(),W=A??U.locale,X=j??U.size??"md",Y=y??U.color??"primary",Z=l(J),$=B??U.weekStartsOn??d(W),[_,ee]=t.useState(k??null),ae=void 0!==g?g:_,[te,oe]=t.useState(()=>f(m(ae)?ae:N??p())),ne=F??te,setMonth=e=>{void 0===F&&oe(e),P?.(e)},le=m(ae)?C[M](ae):"";return r(I,()=>le,!H),a("div",{ref:T,...i(H),className:v("inline-flex flex-col",w[h],b[X],s[X],D[X],H?x[h]:"",K),style:{...S(Y,O),...L},...Q,children:[e(n,{size:X,color:Y,locale:W,weekStartsOn:$,month:ne,onMonthChange:setMonth,precision:M,selected:[ae],onSelect:e=>{const a=m(ae)?c(e,ae):u(e);void 0===g&&ee(a),z?.(a),setMonth(f(a))},minDate:V,maxDate:R,shouldDisableDate:q,showOutsideDays:E,autoFocus:G,labels:Z}),I?e("input",{type:"hidden",name:I,value:le,disabled:H}):null]})});
|
|
@@ -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{useDefaults as
|
|
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 o}from"../../internal/defaults.js";import{useRender as l}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)]","motion-reduce:[transition-duration:0ms]"].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=o(),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 l({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))}})});
|
|
@@ -47,7 +47,7 @@ export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPr
|
|
|
47
47
|
nextLabel?: string;
|
|
48
48
|
/**
|
|
49
49
|
* How one slide is named to a screen reader, and how its dot is labelled.
|
|
50
|
-
* @default
|
|
50
|
+
* @default `Slide {index} of {count}`, from the label pack
|
|
51
51
|
*/
|
|
52
52
|
slideLabel?: (index: number, count: number) => string;
|
|
53
53
|
/** The slides. Every top-level child becomes one. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{cx as i,radiusClasses as c,sheetRestClasses as u,srOnlyClasses as d,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const p={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"},h={xs:{rest:"h-1 w-1",current:"h-1 w-3"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5"},xl:{rest:"h-2 w-2",current:"h-2 w-6"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:v="glass",size:b,color:w,density:x,elevation:g=0,value:y,defaultValue:N=0,onValueChange:j,loop:C=!0,autoPlay:k=!1,interval:R=5e3,arrows:M=!0,indicators:P=!0,label:L,previousLabel:E,nextLabel:z,slideLabel:B,className:I,style:S,children:_,...T},V){const W=s(),$=l(),A=L??$.carousel,F=E??$.carouselPrevious,q=z??$.carouselNext,D=b??W.size??"md",G=w??W.color??"primary",H=x??W.density??"default",J=B??$.carouselSlide,K=t.Children.toArray(_),O=K.length,[Q,U]=t.useState(N),X=Math.min(Math.max(y??Q,0),Math.max(O-1,0)),Y=t.useRef(null),Z=t.useRef([]),ee=t.useRef(!1),re=t.useRef(!1),te=t.useRef(!1),[ne,se]=t.useState(!1),le=t.useCallback((e,r=!1)=>{if(0===O)return;const t=C?(e%O+O)%O:Math.min(Math.max(e,0),O-1);ee.current=r,void 0===y&&U(t),t!==X&&j?.(t)},[O,C,y,X,j]);t.useEffect(()=>{if(ee.current)return void(ee.current=!1);if(!re.current)return void(re.current=!0);const e=Y.current,r=Z.current[X];e&&r&&e.scrollTo({left:e.scrollLeft+r.getBoundingClientRect().left-e.getBoundingClientRect().left}),te.current=!0;const t=window.setTimeout(()=>{te.current=!1},700);return()=>window.clearTimeout(t)},[X]);const ae=t.useRef(le);t.useEffect(()=>{ae.current=le}),t.useEffect(()=>{if(!k||ne||O<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||ae.current(X+1)},R);return()=>window.clearInterval(e)},[k,ne,O,R,X]);const oe=X<=0,ie=X>=O-1;return r("div",{ref:V,role:"region","aria-roledescription":$.carousel,"aria-label":A,className:i("flex flex-col",I),style:{...f(G,g),...S},...n(T,{onPointerEnter:()=>se(!0),onPointerLeave:()=>se(!1),onFocus:()=>se(!0),onBlur:()=>se(!1)}),children:[r("div",{className:i("relative min-w-0 overflow-hidden",c[D],u[v],m),children:[e("div",{ref:Y,tabIndex:0,role:"group","aria-label":A,className:i("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=Y.current;if(te.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==X&&r>=0&&r<O&&le(r,!0)},children:K.map((r,n)=>e("div",{ref:e=>{Z.current[n]=e},role:"group","aria-roledescription":$.slide,"aria-label":J(n+1,O),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t.isValidElement(r)?r.key??n:n))}),M&&O>1?r("div",{className:i("pointer-events-none absolute inset-y-0 flex items-center",p[D]),children:[e(a,{variant:"glass",size:D,color:G,density:H,elevation:1,label:F,disabled:!C&&oe,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(o,{})}),onClick:()=>le(X-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:D,color:G,density:H,elevation:1,label:q,disabled:!C&&ie,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(o,{})}),onClick:()=>le(X+1)})]}):null]}),P&&O>1?e("div",{className:"flex shrink-0 items-center justify-center",children:K.map((r,t)=>e("button",{type:"button","aria-label":J(t+1,O),"aria-current":t===X?"true":void 0,className:i("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>le(t),children:e("span",{"aria-hidden":"true",className:i("rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",t===X?`${h[D].current} bg-(--p-accent)`:`${h[D].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},t))}):null,e("span",{className:d,"aria-live":k?"off":"polite",children:O>0?J(X+1,O):""})]})});
|
|
@@ -19,7 +19,10 @@ export type PlChatBubbleSide = 'start' | 'end';
|
|
|
19
19
|
export type PlChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
|
|
20
20
|
/** What a link inside a message unfurls to. */
|
|
21
21
|
export interface PlChatBubbleLinkPreview {
|
|
22
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* Where the card goes. An `http`, `https`, `mailto` or relative address; given
|
|
24
|
+
* anything else the card is still drawn, with nothing to click.
|
|
25
|
+
*/
|
|
23
26
|
url: string;
|
|
24
27
|
/** The page's title. */
|
|
25
28
|
title?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{CheckIcon as i,ClockIcon as t,LinkIcon as o,severityIcon as d}from"../../internal/icons.js";import{safeHref as c}from"../../internal/link.js";import{controlSlots as p,focusRingClasses as m,forcedFieldEdgeClasses as u,glassClasses as g,hasContent as f,metaTextClasses as v,radiusClasses as h,sheetBodyClasses as x,sheetHeaderGapClasses as b,srOnlyClasses as y,transitionClasses as k}from"../../internal/styles.js";const w={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"}},N={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",u].join(" "),glass:/* @__PURE__ */[g,"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 s("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 _={sending:e(t,{}),sent:e(i,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */d("danger")};function statusWord(e,s){switch(e){case"sending":return s.messageSending;case"sent":return s.messageSent;case"delivered":return s.messageDelivered;case"read":return s.messageRead;case"failed":return s.messageFailed}}const C={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},L=/* @__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)]"].join(" "),z=/* @__PURE__ */[L,"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)]",m].join(" "),D=/* @__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__ */l.forwardRef(function PlChatBubble({side:a="start",name:l,time:i,avatar:t,status:o,statusLabel:d,typing:c=!1,typingLabel:m,media:u,preview:g,actions:L,variant:z="glass",size:B,color:P,density:W,elevation:I=0,className:T,style:F,children:R,...S},M){const $=r(),q=n(),A=m??q.typing,E=B??$.size??"md",G=P??$.color??"primary",H=W??$.density??"default",J="end"===a,K=f(l)||f(i),O=c||f(R)||Boolean(g),Q=["flex min-w-0 flex-col overflow-hidden",h[E],N[a],j[z],k].join(" ");return s("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",J?"flex-row-reverse":"",T??""].filter(Boolean).join(" "),style:{...p(G,I,z),...F},...S,children:[f(t)?e("div",{className:"shrink-0",children:t}):null,s("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",b[E],J?"items-end":"items-start"].join(" "),children:[K?s("div",{className:`flex items-baseline gap-2 ${v[E]}`,children:[f(l)?e("span",{className:"font-semibold",children:l}):null,f(i)?e("span",{className:"text-(--plass-muted-fg)",children:i}):null]}):null,s("div",{className:"flex min-w-0 items-center gap-1 "+(J?"flex-row-reverse":""),children:[s("div",{className:Q,children:[f(u)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:u}):null,O?s("div",{className:[w[H][E],"flex min-w-0 flex-col gap-2",x[E]].join(" "),children:[c?e(TypingDots,{label:A}):f(R)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:R}):null,g?e(LinkPreview,{preview:g}):null]}):null]}),f(L)?e("div",{className:D,children:L}):null]}),o?s("div",{className:["flex items-center gap-1",v[E],C[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[_[o],e("span",{className:y,children:d??statusWord(o,q)})]}):null]})]})});function TypingDots({label:a}){return s("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(s=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":s}},s)),e("span",{className:y,children:a})]})}function LinkPreview({preview:l}){const{url:r,title:n,description:i,image:t,site:d,newTab:p=!1}=l,m=c(r),u=s(a,{children:[t?e("img",{src:t,alt:"",loading:"lazy",decoding:"async",className:"block h-28 w-full object-cover"}):null,s("div",{className:"flex flex-col gap-0.5 p-2",children:[f(d)?s("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(o,{}),e("span",{className:"truncate",children:d})]}):null,f(n)?e("span",{className:"font-semibold",children:n}):null,f(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]});return void 0===m?e("div",{className:L,children:u}):e("a",{href:m,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,className:z,children:u})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
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 i,cx as n,focusRingClasses as l,forcedCheckedClasses as c,forcedDisabledCheckedClasses as d,glassClasses as h,hasContent as p,metaTextClasses as m,tickRadiusClasses as f,tickRowTextClasses as u,tickSizeClasses as k,transitionClasses as g}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]",g,l].join(" "),x=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),v=/* @__PURE__ */[h,"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]",c,x].join(" "),j=/* @__PURE__ */[h,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c,x].join(" "),N=/* @__PURE__ */[h,"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)",d,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),y=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].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",pathLength:1,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",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:l,label:c,description:d,error:h,invalid:g,disabled:x=!1,readOnly:C=!1,className:M,classNames:_,style:w,...L},z){const B=t(),D=a??B.size??"md",H=l??B.color??"primary",R=p(h),O=g??R,P=O?"danger":H,T=n(b,k[D],f[D],x?N:C?j:v,_?.control);return r(s.Root,{disabled:x,invalid:O,className:["inline-flex flex-col gap-1 align-top",M??""].filter(Boolean).join(" "),style:{...i(P,0,"solid"),...w},children:[r("div",{className:`flex items-start gap-2 ${u[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:z,className:T,disabled:x,readOnly:C,...L,children:e(o.Indicator,{keepMounted:!0,className:y,children:L.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||d?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:n(x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",_?.label),children:c}):null,d?e(s.Description,{className:n(m[D],"text-(--plass-muted-fg)",_?.description),children:d}):null]}):null]}),e(s.Error,R?{match:!0,className:n(m[D],"text-(--p-accent)",_?.error),children:h}:{className:n(m[D],"text-(--p-accent)",_?.error)})]})});
|
|
@@ -22,8 +22,12 @@ export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsW
|
|
|
22
22
|
*/
|
|
23
23
|
onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
24
24
|
/**
|
|
25
|
-
* Accessible name of the delete button. Never drawn.
|
|
26
|
-
*
|
|
25
|
+
* Accessible name of the delete button. Never drawn. Left out, it is the label
|
|
26
|
+
* pack's `removeItem` handed the chip's own text, so a row of tags does not
|
|
27
|
+
* read as the same "Remove" over and over, and each language puts the name
|
|
28
|
+
* where it goes. Words a component of their own draws cannot be read that
|
|
29
|
+
* way, and follow the pack's `remove` instead. Given, it is the whole name.
|
|
30
|
+
* @default `Remove {text}`, from the label pack
|
|
27
31
|
*/
|
|
28
32
|
deleteLabel?: string;
|
|
29
33
|
/**
|
|
@@ -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{useDefaults as o}from"../../internal/defaults.js";import{useLabels as
|
|
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{useLabels as r}from"../../internal/labels.js";import{CloseIcon as a}from"../../internal/icons.js";import{textOf as n}from"../../internal/text.js";import{chipRemoveClasses as i,controlHeightClasses as d,controlSlots as p,controlTextClasses as c,disabledClasses as m,focusRingClasses as g,forcedEdgeClasses as b,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as v,paddingXClasses as x,radiusClasses as j,transitionClasses as y}from"../../internal/styles.js";const w={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},k={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${b}`,glass:/* @__PURE__ */[h,"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)"},N={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)"},$={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)"},C=/* @__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]",y,v].join(" "),I=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",g].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:g="glass",size:b,color:h,density:v,elevation:y=0,startIcon:z,endIcon:B,count:P,onDelete:D,deleteLabel:F,selected:L=!1,disabled:R=!1,className:q,style:A,children:E,onClick:G,...H},J){const K=o(),M=r(),O=n(E).trim(),Q=F??(O?M.removeItem(O):M.remove),S=b??K.size??"md",T=h??K.color??"primary",U=v??K.density??"default",V=Boolean(G)&&!R,W=t.useId(),X=t.useId(),Y=w[S],Z=x[U][Y],_=[C,d[Y],c[Y],f[Y],j[Y],R?m[g]:k[g],!R&&L?N[g]:"",V?$[g]:"",V?"ps-0":Z,D?"pe-1":V?"pe-0":"",q??""].filter(Boolean).join(" "),ee=l(s,{children:[z,u(E)?e("span",{id:X,className:"min-w-0 truncate leading-[normal]",children:E}):null,B,u(P)?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"===g?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:P}):null]});return l("span",{ref:J,className:_,style:{...p(T,y,g),...A},"aria-disabled":!(!R||V)||void 0,...H,children:[V?e("button",{type:"button","aria-pressed":L,className:`${I} ${f[Y]} ${Z}`,onClick:G,children:ee}):ee,D?e("button",{type:"button",id:W,"aria-label":Q,"aria-labelledby":void 0===F&&!O&&u(E)?`${W} ${X}`:void 0,disabled:R,className:i,onClick:D,children:e(a,{})}):null]})});
|
|
@@ -136,15 +136,32 @@ export interface PlCodeBlockProps extends Omit<React.ComponentPropsWithoutRef<'d
|
|
|
136
136
|
copyLabel?: string;
|
|
137
137
|
/** And what it says once the code is on the clipboard. @default 'Copied' */
|
|
138
138
|
copiedLabel?: string;
|
|
139
|
-
/** And what it says when the clipboard refused. @default '
|
|
139
|
+
/** And what it says when the clipboard refused. @default 'Could not copy' */
|
|
140
140
|
copyFailedLabel?: string;
|
|
141
141
|
/** The raw toggle's label. @default 'Raw' */
|
|
142
142
|
rawLabel?: string;
|
|
143
|
-
/**
|
|
143
|
+
/**
|
|
144
|
+
* What the region is called when there is no language and no title to name
|
|
145
|
+
* it, which is also the case for a `title` that is an element while `toolbar`
|
|
146
|
+
* is off.
|
|
147
|
+
* @default 'Code'
|
|
148
|
+
*/
|
|
144
149
|
codeLabel?: string;
|
|
145
150
|
/** Fires with the copied text once the clipboard has taken it. */
|
|
146
151
|
onCopy?: (code: string) => void;
|
|
147
152
|
}
|
|
153
|
+
/**
|
|
154
|
+
* `4`, `'4-9'`, `'1,4-9,12'` or any array of those, as the set of numbers they
|
|
155
|
+
* name.
|
|
156
|
+
*
|
|
157
|
+
* A set rather than a sorted list of ranges because the only question ever
|
|
158
|
+
* asked of it is "is this line in it", once per line. Anything unparseable is
|
|
159
|
+
* dropped rather than thrown: a marked line is an annotation, and a typo in one
|
|
160
|
+
* should cost the annotation, not the code.
|
|
161
|
+
*
|
|
162
|
+
* Exported for its test; the barrel leaves it out.
|
|
163
|
+
*/
|
|
164
|
+
export declare function markedLines(spec: number | string | Array<number | string> | undefined, first: number, last: number): Set<number>;
|
|
148
165
|
/**
|
|
149
166
|
* A viewer for one line of code or a thousand.
|
|
150
167
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{CheckIcon as r,CodeIcon as a,CopyIcon as i}from"../../internal/icons.js";import{canonicalLanguage as s,highlight as c,plainLines as d}from"../../internal/highlight.js";import{cx as p,hasContent as m,metaTextClasses as u,radiusClasses as x,srOnlyClasses as f,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";export{registerLanguage}from"../../internal/highlight.js";const v={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},b={default:{xs:"py-2",sm:"py-3",md:"py-3.5",lg:"py-4",xl:"py-5"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-3.5"}},w={default:{xs:"px-2",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"}},N={default:{xs:"px-2.5 py-1",sm:"px-3.5 py-1",md:"px-4 py-1.5",lg:"px-4.5 py-2",xl:"px-5.5 py-2"},compact:{xs:"px-2 py-0.5",sm:"px-2.5 py-0.5",md:"px-3 py-1",lg:"px-3.5 py-1",xl:"px-4 py-1.5"}};export function markedLines(e,t,n){const l=new Set;if(void 0===e)return l;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const r=Number(o[1]),a=void 0===o[2]?r:Number(o[2]),i=Math.max(Math.min(r,a),t),s=Math.min(Math.max(r,a),n);for(let e=i;e<=s;e+=1)l.add(e)}else Number.isFinite(o)&&l.add(Math.trunc(o));return l}export const PlCodeBlock=/* @__PURE__ */n.forwardRef(function PlCodeBlock({code:k,language:L,theme:S="dark",size:j,color:M,density:C,elevation:T=0,highlight:_=!0,toolbar:F=!0,title:R,showLanguage:z=!0,copyable:A=!0,rawToggle:E=!1,highlightLines:H,lineNumbers:K=!1,startLine:B=1,prompt:D,wrap:I=!1,maxHeight:P,fontFamily:$,fontSize:q,lineHeight:G,letterSpacing:J,copyLabel:O,copiedLabel:Q,copyFailedLabel:U,rawLabel:V,codeLabel:W,onCopy:X,className:Y,style:Z,...ee},te){const ne=l(),le=j??ne.size??"md",oe=M??ne.color??"primary",re=C??ne.density??"default",ae=o(),ie=O??ae.copy,se=Q??ae.copied,ce=U??ae.copyFailed,de=V??ae.raw,pe=n.useMemo(()=>k.replace(/\r\n?/g,"\n").trimEnd(),[k]),me=s(L),[ue,xe]=n.useState(!1),[fe,ge]=n.useState(null),[he,ye]=n.useState(null),ve=_&&!ue&&null!==me;n.useEffect(()=>{if(!ve||!me)return void ye(null);let e=!1;return c(pe,me).then(t=>{e||ye(t?{source:pe,name:me,lines:t}:null)},()=>{e||ye(null)}),()=>{e=!0}},[pe,me,ve]);const be=n.useMemo(()=>ve&&he&&he.source===pe&&he.name===me?he.lines:d(pe),[ve,he,pe,me]),we=`${String(B+Math.max(be.length-1,0)).length}ch`,Ne=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(Ne.current),[]);const ke=n.useMemo(()=>markedLines(H,B,B+be.length-1),[H,B,be.length]),Le=n.useRef(null),Se=p("inline-flex shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent","px-1.5 py-1 text-(--p-code-dim) hover:text-(--p-code-fg) hover:bg-(--p-code-hover)",x.xs,u[le],"[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",y,"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),je=n.useId(),Me=F&&m(R),Ce="string"==typeof R&&R?R:me??W??ae.code;return t("div",{ref:te,className:p("plass-code flex min-w-0 flex-col overflow-hidden",x[le],"border bg-(--p-code-bg) text-(--p-code-fg) [border-color:var(--p-code-rule)]","[box-shadow:var(--p-elev)]",y,Y),"data-code-theme":S,"data-code-wrap":I?"true":void 0,style:{...g(oe,T),"--p-code-gutter":we,...$?{fontFamily:$}:null,...void 0===q?null:{fontSize:h(q)},...void 0===G?null:{lineHeight:G},...void 0===J?null:{letterSpacing:h(J)},...Z},...ee,children:[F&&(z||A||E||m(R))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--p-code-rule)]",N[re][le]),children:[m(R)?e("span",{id:je,className:p("min-w-0 truncate font-mono",u[le]),children:R}):null,z&&me?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--p-code-dim) uppercase select-none",u[le]),children:me}):null,e("span",{className:"flex-1"}),E&&_?e("button",{type:"button","aria-pressed":ue,"aria-label":de,title:de,onClick:()=>xe(e=>!e),className:p(Se,ue?"bg-(--p-code-hover) text-(--p-code-fg)":""),children:e(a,{})}):null,A?t("button",{type:"button",onClick:async()=>{const e=await async function writeToClipboard(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const n=document.execCommand("copy");return t.remove(),n}catch{return!1}}(pe);clearTimeout(Ne.current),ge(e),Ne.current=setTimeout(()=>ge(null),2e3),e&&X?.(pe)},className:Se,children:[e(fe?r:i,{}),e("span",{children:null===fe?ie:fe?se:ce})]}):null]}):null,e("div",{className:p("flex min-h-0 flex-col",v[le]),children:e("div",{role:"region","aria-labelledby":Me?je:void 0,"aria-label":Me?void 0:Ce,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=Le.current,n="undefined"==typeof window?null:window.getSelection();if(!t||!n)return;e.preventDefault();const l=document.createRange();l.selectNodeContents(t),n.removeAllRanges(),n.addRange(l)},className:p("min-h-0 overflow-auto",b[re][le],"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:-outline-offset-2"),style:void 0===P?void 0:{maxHeight:h(P)},children:e("pre",{ref:Le,className:p("m-0 bg-transparent p-0 font-mono",I?"w-full":"w-max min-w-full"),children:be.map((t,l)=>{const o=B+l;return e("div",{className:p("plass-code-line",w[re][le]),"data-line":K?o:void 0,"data-mark":ke.has(o)?"":void 0,"data-prompt":D&&t.length>0?D:void 0,children:e("code",{children:t.map((t,l)=>t.token?e("span",{className:t.token,children:t.text},l):e(n.Fragment,{children:t.text},l))})},l)})})})}),e("span",{"aria-live":"polite",className:f,children:null===fe?"":fe?se:ce})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as
|
|
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 o}from"../../internal/picker.js";import{useFieldsetDisabled as t,useFormReport as n}from"../../internal/form.js";import{CheckIcon as i}from"../../internal/icons.js";import{checkerBackground as d,clamp as c,cssColor as h,defaultSwatches as u,formatColor as f,parseColor as p,readableInk as m}from"../../internal/color.js";import{controlTextClasses as v,cx as b,focusRingClasses as g,metaTextClasses as x,radiusClasses as y,stackGapClasses as w,surfaceSlots as C}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 k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},j={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},S={xs:10,sm:12,md:14,lg:16,xl:18},_=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),O=/* @__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:c((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:c((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:o,onTextChange:t,withAlpha:n,swatches:u,editable:v,size:w,inert:C,invalid:$,labels:z}){const I=S[w],T=-I/2,D=h({h:r.h,s:100,v:100}),M=h(r),A=u?u.flatMap(e=>{const a=p(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{C||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!C&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:C?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{if(C)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:b("flex flex-col",k[w],P[w]),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:C?-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":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{const a=arrowStep(e);!C&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:c(r.s+a.x,0,100),v:c(r.v+a.y,0,100)},alpha:l}))},className:b(_,N[w],y[w],g,C?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:D,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:O,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:M}})}),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}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:b(_,j[w],"rounded-full",g,C?"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:O,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:D}})}),n?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:c(l+e/100,0,1)}),e=>s({hsv:r,alpha:e})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:d,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${M})`}}),e("span",{className:O,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",P[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...d},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:C,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>t(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",y.xs,x[w],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,A.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:A.map(({swatch:a,parsed:o})=>{const t=f(o.hsv,o.alpha,"hex")===f(r,l,"hex");return e("button",{type:"button",disabled:C,"aria-label":a,"aria-pressed":t,onClick:()=>s(o),className:b("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]",C?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:h(o.hsv,o.alpha)},children:t?e("span",{style:{color:m(o.hsv)},children:e(i,{})}):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 $={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:i,defaultValue:c="#1a58d1",onValueChange:m,format:g="hex",alpha:y=!1,swatches:k=u,inline:N=!1,editable:j=!0,label:P,description:S,error:_,invalid:O,required:z=!1,disabled:I=!1,readOnly:T=!1,fullWidth:D=!1,clearable:M=!1,name:A,open:L,defaultOpen:V=!1,onOpenChange:q,labels:B,variant:H="glass",size:K,color:R,density:E,elevation:W=0,className:U,style:X,...Y},F){const G=l(),J=K??G.size??"md",Q=R??G.color??"primary",Z=E??G.density??"default",ee=r.useMemo(()=>({...defaultColorPickerLabels,...B}),[B]),[ae,re]=r.useState(c),le=i??ae,[se,oe]=r.useState(V),te=L??se,[ne,ie]=r.useState(()=>p(le)??{hsv:$,alpha:1}),[de,ce]=r.useState(()=>le),he=f(ne.hsv,y?ne.alpha:1,g),ue=""===le;r.useEffect(()=>{const e=p(le);e?f(e.hsv,y?e.alpha:1,g)!==he&&(ce(le),ie(e)):ce(le)},[le,he,y,g]);const commit=(e,a)=>{ie(e);const r=f(e.hsv,y?e.alpha:1,g);ce(a??r),void 0===i&&re(r),m?.(r)},[fe,pe]=r.useState(null),me=r.useCallback(e=>{pe(e),"function"==typeof F?F(e):F&&(F.current=e)},[F]),ve=t(fe),be=I||ve,ge=be||T,xe=O??Boolean(_),ye=r.useId(),we=e(ColorPanel,{hsv:ne.hsv,alphaValue:ne.alpha,onChange:commit,text:de,onTextChange:e=>{ce(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:j,size:J,inert:ge,invalid:N&&xe,labels:ee});n(A,()=>ue?"":he,N&&!be);const Ce=A?e("input",{type:"hidden",name:A,value:ue?"":he,disabled:be}):null;if(N){const r=xe?"danger":Q,l=[S?`${ye}-description`:null,_?`${ye}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:me,role:"group","aria-labelledby":P?`${ye}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[J],U),style:{...C(r,W),...X},...Y,children:[P?e("span",{id:`${ye}-label`,className:b(x[J],"font-semibold",be?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,we,S?e("span",{id:`${ye}-description`,className:b(x[J],"text-(--plass-muted-fg)"),children:S}):null,_?e("span",{id:`${ye}-error`,className:b(x[J],"text-(--p-accent)"),children:_}):null,Ce]})}return e("div",{ref:F,className:D?"w-full":"inline-block",...Y,children:e(o,{variant:H,size:J,color:Q,density:Z,elevation:W,style:X,label:P,description:S,error:_,invalid:O,required:z,disabled:I,readOnly:T,fullWidth:D,className:U,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:d,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":h(ne.hsv,y?ne.alpha:1)}})}),display:ue?ee.empty:he,samples:widthSamples(g,y),empty:ue,clearable:M,onClear:()=>{void 0===i&&re(""),ce(""),m?.("")},open:te,onOpenChange:e=>{void 0===L&&oe(e),q?.(e)},labels:{...s,clear:ee.clear},name:A,formValue:ue?"":he,children:e("div",{className:v[J],children:we})})})});
|
|
@@ -66,7 +66,7 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
66
66
|
allowCustom?: boolean;
|
|
67
67
|
/**
|
|
68
68
|
* What that row says. Receives the trimmed query.
|
|
69
|
-
* @default
|
|
69
|
+
* @default `Add “{query}”`, from the label pack
|
|
70
70
|
*/
|
|
71
71
|
customLabel?: (query: string) => React.ReactNode;
|
|
72
72
|
/**
|
|
@@ -76,8 +76,9 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
76
76
|
*/
|
|
77
77
|
clearable?: boolean;
|
|
78
78
|
/**
|
|
79
|
-
* Shown in the popup when nothing matched and no value may be added.
|
|
80
|
-
*
|
|
79
|
+
* Shown in the popup when nothing matched and no value may be added. Falls
|
|
80
|
+
* back to the label pack's `empty`.
|
|
81
|
+
* @default 'Nothing here'
|
|
81
82
|
*/
|
|
82
83
|
emptyMessage?: React.ReactNode;
|
|
83
84
|
/** The most rows the list will show at once. `-1` is all of them. @default -1 */
|
|
@@ -122,7 +123,7 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
122
123
|
clearLabel?: string;
|
|
123
124
|
/**
|
|
124
125
|
* Accessible name of a chip's remove button. Receives the chip's label.
|
|
125
|
-
* @default
|
|
126
|
+
* @default `Remove {label}`, from the label pack
|
|
126
127
|
*/
|
|
127
128
|
removeLabel?: (label: string) => string;
|
|
128
129
|
/** A ref to the text input the user types into. */
|
|
@@ -147,5 +148,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
147
148
|
* navigation across both the list and the chips, and the hidden input that makes
|
|
148
149
|
* the whole thing submit with a form.
|
|
149
150
|
*/
|
|
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: openLabelProp, clearLabel: clearLabelProp, removeLabel, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
151
|
+
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: emptyMessageProp, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
151
152
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as r}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{PlChip as i}from"../chip/PlChip.js";import{CheckIcon as o,ChevronIcon as c,CloseIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{chipRemoveClasses as u,controlHeightClasses as h,controlTextLeadingClasses as b,cx as f,disabledClasses as g,fieldReadOnlyClasses as v,fieldRestClasses as x,focusWithinRingClasses as y,
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as r}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{PlChip as i}from"../chip/PlChip.js";import{CheckIcon as o,ChevronIcon as c,CloseIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{chipRemoveClasses as u,controlHeightClasses as h,controlTextLeadingClasses as b,cx as f,disabledClasses as g,fieldReadOnlyClasses as v,fieldRestClasses as x,focusWithinRingClasses as y,forcedHighlightedClasses as N,gapClasses as w,glassClasses as C,hasContent as j,iconClasses as L,metaTextClasses as I,paddingXClasses as S,radiusClasses as _,stackGapClasses as z,surfaceSlots as V,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,y,L].join(" "),k={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"},M=/* @__PURE__ */[C,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),P=/* @__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)",N,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),R=/* @__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:y="glass",size:N,color:C,density:L,elevation:A=0,items:T,multiple:q,value:E,defaultValue:F,onValueChange:$,onInputValueChange:D,allowCustom:K=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:B,placeholder:J,label:Q,description:U,error:X,invalid:Y,startIcon:Z,fullWidth:ee=!1,disabled:ae=!1,readOnly:le=!1,required:te=!1,name:se,open:re,defaultOpen:ne,onOpenChange:ie,openLabel:oe,clearLabel:ce,removeLabel:de,inputRef:me,id:pe,className:ue,hotKeys:he,classNames:be,style:fe,...ge}){const ve=t(),xe=s(),ye=oe??xe.open,Ne=ce??xe.clear,we=W??xe.empty,Ce=de??xe.removeItem,je=N??ve.size??"md",Le=C??ve.color??"primary",Ie=L??ve.density??"default",Se=j(X),_e=Y??Se,ze=_e?"danger":Le,Ve=!0===q,Ae=l.useMemo(()=>T.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[T]),[Oe,ke]=l.useState(()=>toArray(F)),Me=void 0===E?Oe:toArray(E),[Pe,Re]=l.useState(""),Te=l.useMemo(()=>new Map(Ae.map(e=>[e.value,e])),[Ae]),qe=l.useCallback(e=>Te.get(e)??{value:e,label:String(e),custom:!0},[Te]),Ee=Pe.trim(),Fe=Ee.toLocaleLowerCase(),$e=""===Ee||Ae.some(e=>e.label.toLocaleLowerCase()===Fe||String(e.value).toLocaleLowerCase()===Fe)||Me.some(e=>String(e).toLocaleLowerCase()===Fe),De=!K||le||ae||$e?null:Ee,Ke=l.useMemo(()=>null===De?Ae:[...Ae,{value:De,label:De,custom:!0}],[Ae,De]),Ge=Ve?Me.map(qe):Me.length>0?qe(Me[0]):null,He=f(O,b[je],_[je],w[je],Ve?k[je]:h[je],`${S[Ie][je]} pe-1.5`,ae?g[y]:le?v[y]:x[y]),We=/* @__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(r.Input,{ref:me,placeholder:J,onKeyDown:p(he,void 0),className:f(We,Ve&&"min-w-16",Ve&&a&&"ms-1.5")});return a(n.Root,{disabled:ae,invalid:_e,className:f("flex-col align-top",z[je],ee?"flex w-full":"inline-flex",ue),style:{...V(ze,A),...fe},...ge,children:[Q?e(n.Label,{className:f(I[je],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:Q}):null,a(r.Root,{id:pe,name:se,items:Ke,multiple:Ve,value:Ge,onValueChange:e=>{!function commit(e){void 0===E&&ke(e),$?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Re(e),D?.(e)},open:re,defaultOpen:ne,onOpenChange:e=>ie?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:B,disabled:ae,readOnly:le,required:te,children:[a(r.InputGroup,{className:f(He,be?.control),children:[Z?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Z}):null,Ve?e(r.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(r.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(r.Chip,{render:e(i,{variant:"glass",size:je,color:ze,density:"compact",disabled:ae,endIcon:le||ae?null:e(r.ChipRemove,{"aria-label":Ce(a.label),className:u,children:e(d,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),H&&!le?e(r.Clear,{"aria-label":Ne,className:R,children:e(d,{})}):null,e(r.Trigger,{"aria-label":ye,className:R,children:e(r.Icon,{className:f("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(c,{})})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(r.Popup,{className:f(M,_[je],b[je]),style:V(ze,3),children:[e(r.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:we}),e(r.List,{children:t=>e(r.Item,{value:t,disabled:t.disabled,className:P,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(m,{})}),e("span",{className:"truncate",children:G?G(t.label):xe.addCustom(t.label)})]}):a(l.Fragment,{children:[e(r.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),U?e(n.Description,{className:f(I[je],"text-(--plass-muted-fg)",be?.description),children:U}):null,e(n.Error,Se?{match:!0,className:f(I[je],"text-(--p-accent)",be?.error),children:X}:{className:f(I[je],"text-(--p-accent)",be?.error)})]})}
|
|
@@ -59,7 +59,11 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
|
|
|
59
59
|
maxHeight?: number | string;
|
|
60
60
|
/** The placeholder in the field. @default 'Search commands' */
|
|
61
61
|
placeholder?: string;
|
|
62
|
-
/**
|
|
62
|
+
/**
|
|
63
|
+
* The line where the rows would be, when nothing matched. Falls back to the
|
|
64
|
+
* label pack's `empty`.
|
|
65
|
+
* @default 'Nothing here'
|
|
66
|
+
*/
|
|
63
67
|
emptyMessage?: React.ReactNode;
|
|
64
68
|
/** The accessible name of the dialog, which has no visible title. @default 'Command palette' */
|
|
65
69
|
label?: string;
|
|
@@ -86,4 +90,4 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
|
|
|
86
90
|
* its Dialog owns the sheet, the scrim, the focus trap and returning the focus
|
|
87
91
|
* to wherever the reader was.
|
|
88
92
|
*/
|
|
89
|
-
export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder: placeholderProp, emptyMessage, label: labelProp, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
|
|
93
|
+
export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder: placeholderProp, emptyMessage: emptyMessageProp, label: labelProp, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults 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{useLabels as l}from"../../internal/labels.js";import{Autocomplete as o}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,toLength as b}from"../../internal/styles.js";const v=/* @__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-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=/* @__PURE__ */[h,"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-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},N={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},j={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},P={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},z=/* @__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)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:_,onSelect:C,shortcut:O="Mod+K",width:S,maxHeight:H=320,placeholder:M,emptyMessage:K,label:R,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=R??L.commandPalette,q=M??L.commandPalettePlaceholder,A=K??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=u??U,ee=a.useRef($);a.useEffect(()=>{ee.current&&!$&&Z(""),ee.current=$},[$]);const se=a.useCallback(e=>{void 0===u&&X(e),_?.(e)},[u,_]);n(!1===O?void 0:{[O]:()=>se(!0)},{whileTyping:!0});const ae=a.useMemo(()=>c.map(haystackOf),[c]),te=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>ae[a].includes(e))},[c,ae,Y]),le=b(S),oe=b(H);return e(r.Root,{open:$,onOpenChange:se,children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",v,T?.backdrop)}),e(r.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(r.Popup,{"aria-label":W,className:m(w,g[G],d[G],void 0===le?k[G]:"","self-start",I),style:{...y(J,3),...void 0===le?null:{maxWidth:le},...B},children:s(o.Root,{open:!0,mode:"list",items:te,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",P[G]),children:e(o.Input,{autoFocus:!0,placeholder:q,className:m("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)",N[G])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:oe},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==te[l-1]?.group?e("div",{role:"presentation",className:m(P[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",f[G]),children:t.group}):null,s(o.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),se(!1))})(t),className:m(z,g[G],P[G],j["compact"===Q?"xs":G]),children:[x(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}),x(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",f[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),e(o.Empty,{className:m(P[G],"py-6 text-center text-(--plass-muted-fg)",f[G]),children:A})]})})})]})})}
|