plass-ui 1.5.0 → 1.7.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 +336 -0
- package/README.md +29 -7
- package/dist/components/accordion/PlAccordion.d.ts +13 -0
- package/dist/components/accordion/PlAccordion.js +1 -1
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.d.ts +10 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +11 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/app-logo/PlAppLogo.js +1 -1
- package/dist/components/area-chart/PlAreaChart.d.ts +35 -6
- package/dist/components/area-chart/PlAreaChart.js +1 -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 +6 -0
- 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 +54 -2
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/blockquote/PlBlockquote.d.ts +2 -2
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +7 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.d.ts +7 -4
- package/dist/components/carousel/PlCarousel.d.ts +14 -4
- 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.d.ts +2 -1
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/collapsible/PlCollapsible.d.ts +11 -0
- package/dist/components/collapsible/PlCollapsible.js +1 -1
- package/dist/components/color-picker/PlColorPicker.d.ts +21 -2
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +18 -6
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +13 -2
- 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/drawer/PlDrawer.js +1 -1
- package/dist/components/empty/PlEmpty.js +1 -1
- package/dist/components/fieldset/PlFieldset.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +20 -2
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-action-button/PlFloatingActionButton.d.ts +5 -0
- package/dist/components/floating-action-button/PlFloatingActionButton.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.d.ts +3 -1
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/header/PlHeader.d.ts +4 -2
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/highlight/PlHighlight.d.ts +10 -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.js +1 -1
- package/dist/components/line-chart/PlLineChart.d.ts +32 -6
- package/dist/components/line-chart/PlLineChart.js +1 -1
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/mockup/PlMockup.d.ts +5 -0
- package/dist/components/mockup/PlMockup.js +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +4 -3
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +14 -4
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +9 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.d.ts +14 -3
- 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/pie-chart/PlPieChart.d.ts +26 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popconfirm/PlPopconfirm.d.ts +8 -1
- package/dist/components/popconfirm/PlPopconfirm.js +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/scatter-chart/PlScatterChart.js +1 -1
- package/dist/components/scroll-area/PlScrollArea.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +11 -2
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.js +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 +11 -1
- package/dist/components/table/PlTable.js +1 -1
- package/dist/components/tabs/PlTabs.d.ts +18 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +13 -5
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/text-link/PlTextLink.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.d.ts +4 -0
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +5 -2
- 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.d.ts +16 -6
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/internal/animate.d.ts +0 -25
- package/dist/internal/animate.js +1 -1
- package/dist/internal/bottom-bar.d.ts +29 -0
- package/dist/internal/bottom-bar.js +1 -0
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +90 -27
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.d.ts +11 -6
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +158 -1
- package/dist/internal/chart.js +1 -1
- package/dist/internal/defaults.d.ts +14 -1
- package/dist/internal/focusable.d.ts +10 -0
- package/dist/internal/focusable.js +1 -1
- package/dist/internal/form.d.ts +29 -0
- package/dist/internal/form.js +1 -1
- package/dist/internal/glow.d.ts +47 -1
- package/dist/internal/glow.js +1 -1
- package/dist/internal/icons.d.ts +24 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/labels.d.ts +35 -0
- package/dist/internal/labels.js +1 -1
- package/dist/internal/loading.d.ts +13 -0
- package/dist/internal/loading.js +1 -0
- package/dist/internal/mockup.js +1 -1
- package/dist/internal/notch.d.ts +137 -0
- package/dist/internal/notch.js +1 -0
- package/dist/internal/picker.d.ts +15 -3
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +17 -6
- package/dist/internal/progress.js +1 -1
- package/dist/internal/sizer.d.ts +12 -11
- package/dist/internal/sizer.js +1 -1
- package/dist/internal/steps.d.ts +0 -15
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +135 -8
- package/dist/internal/styles.js +1 -1
- package/dist/internal/table-scroll.d.ts +42 -0
- package/dist/internal/table-scroll.js +1 -0
- package/dist/internal/table.js +1 -1
- package/dist/internal/text.d.ts +8 -5
- 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/PlassProvider.d.ts +4 -3
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +461 -46
- package/dist/tokens.css +461 -46
- package/dist/types.d.ts +270 -11
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{cx as o,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as a}from"../../internal/responsive.js";const l=/* @__PURE__ */r.createContext({basis:null,id:void 0}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:d,resizable:
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{cx as o,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as a}from"../../internal/responsive.js";const l=/* @__PURE__ */r.createContext({basis:null,id:void 0}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:d,resizable:f=!0,color:m,size:p,onResize:g,onResizeEnd:h,label:x,className:v,style:b,children:z,...w},y){const P=a(d,"horizontal"),S=n(),R=m??S.color??"primary",C=p??S.size??"md",M=r.Children.toArray(z).filter(r.isValidElement),N=M.length,$=r.useId(),paneId=e=>M[e]?.props.id??`${$}-pane-${e}`,j=r.useRef(null),k=r.useCallback(e=>{j.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),E=r.useRef([]);E.current=M.map(e=>e.props);const[A,D]=r.useState(null),F=A&&A.length===N?A:null,I=r.useRef(null);I.current=F;const B="horizontal"===P,T=u[C]*Math.max(0,N-1);function grip(e){const t=j.current,r=I.current;if(!f||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(B?n.width:n.height)-T;if(i<=0)return null;const o=E.current[e],s=E.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t));if(n===a)return r;const o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,D(o),g?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=j.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(B?t.width:t.height)-T;r<=0||D(t=>t&&t.length===N?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(E.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[N,B,T]);const X=r.useRef(null);r.useEffect(()=>()=>X.current?.(),[]);const Y=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",c[C],s,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",f?o(B?"cursor-col-resize":"cursor-row-resize","touch-none","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:o("flex h-full w-full",B?"flex-row":"flex-col","min-h-0 min-w-0",v),style:{"--p-accent":`var(--plass-${R}-accent)`,"--p-soft":`var(--plass-${R}-soft)`,"--p-ring":`var(--plass-${R}-ring)`,...b},...w,children:M.map((n,a)=>t(r.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":x,"aria-controls":paneId(a-1),"aria-orientation":B?"vertical":"horizontal","aria-valuenow":F?Math.round(100*F[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!f||void 0,tabIndex:f?0:-1,className:Y,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=B?t.clientX:t.clientY,o=B&&"rtl"===getComputedStyle(r.root).direction?-1:1;let s=r.current;const a=i({target:t.currentTarget,pointerId:t.pointerId,onMove:e=>{const t=B?e.clientX:e.clientY;s=r.resize((t-n)*o)},onEnd:()=>{X.current=null,h?.(s.map(e=>100*e))}});X.current=a}(a-1,e)},onKeyDown:e=>{const t=B?"ArrowLeft":"ArrowUp",r=B?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=B&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);n!==r.current&&h?.(n.map(e=>100*e))}(a-1,i*n)},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--plass-border)",s,B?"h-full w-px":"h-px w-full",f?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(l.Provider,{value:{basis:F?`calc((100% - ${T}px) * ${F[a].toFixed(6)})`:null,id:paneId(a)},children:n})]},n.key??a))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:i,className:s,style:a,children:c,...u},d){const{basis:f,id:m}=r.useContext(l);return e("div",{ref:d,id:m,className:o("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:f?`0 0 ${f}`:"1 1 0%",...a},...u,children:c})});
|
|
@@ -26,6 +26,31 @@ export interface PlPieChartProps extends ChartBaseProps {
|
|
|
26
26
|
* @default 0
|
|
27
27
|
*/
|
|
28
28
|
startAngle?: number;
|
|
29
|
+
/**
|
|
30
|
+
* How much of the middle is cut out, as a fraction of the radius: `0` is a
|
|
31
|
+
* filled disc and `0.8` is a thin band. Clamped to `0`–`0.95`.
|
|
32
|
+
*
|
|
33
|
+
* `shape` already picks one — nothing for a `pie`, and a little under two
|
|
34
|
+
* thirds for a `donut` and a `semi`, which is the proportion that leaves a
|
|
35
|
+
* ring thick enough to read a colour off and a hole big enough to put the
|
|
36
|
+
* total in. This is for when the hole has a particular job: a wider one for a
|
|
37
|
+
* two-line readout, a narrower one on a small dashboard tile. Setting it on a
|
|
38
|
+
* `pie` opens a hole in one, which is a `donut` by another name.
|
|
39
|
+
*/
|
|
40
|
+
innerRadius?: number;
|
|
41
|
+
/**
|
|
42
|
+
* The gap between two neighbouring slices, in degrees. Clamped to `0`–`10`.
|
|
43
|
+
*
|
|
44
|
+
* Left alone it is the 2px the library puts between any two marks, worked out
|
|
45
|
+
* at the rim — so the gap is a constant *on screen* rather than a constant in
|
|
46
|
+
* the data, and a small pie is not drawn with the same sliver of surface a
|
|
47
|
+
* large one gets. Widen it to make a ring read as separate segments; `0`
|
|
48
|
+
* closes it, which is what a pie of two or three slices usually wants.
|
|
49
|
+
*
|
|
50
|
+
* A slice narrower than twice the gap keeps none of it, or a one-degree
|
|
51
|
+
* sliver would invert and draw the whole circle instead of nothing.
|
|
52
|
+
*/
|
|
53
|
+
padAngle?: number;
|
|
29
54
|
/**
|
|
30
55
|
* What goes in the hole. A `donut` or a `semi` with nothing in the middle is
|
|
31
56
|
* a pie with a bite out of it; the total, or the one figure the chart is
|
|
@@ -55,4 +80,4 @@ export interface PlPieChartProps extends ChartBaseProps {
|
|
|
55
80
|
* A slice's colour follows the slice and not its size, so a chart that is
|
|
56
81
|
* refiltered or resorted keeps every category the colour it had.
|
|
57
82
|
*/
|
|
58
|
-
export declare function PlPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;
|
|
83
|
+
export declare function PlPieChart({ data, categories, shape, startAngle, innerRadius, padAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{ChartDataTable as a,ChartLegendBar as t,ChartStatus as i,ChartSurface as s,ChartTooltipPanel as r,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,dimmedByHover as p,formatCategory as f,markGap as x,plotHeights as g,seriesColor as b,toValue as y}from"../../internal/chart.js";import{useDefaults as M}from"../../internal/defaults.js";import{numberFormatter as N}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as I,metaTextClasses as w,srOnlyClasses as P}from"../../internal/styles.js";const k={pie:0,donut:.62,semi:.62},clamp=(e,l,n)=>Math.min(n,Math.max(l,e));export function PlPieChart({data:z,categories:$,shape:A="pie",startAngle:S=0,innerRadius:B,padAngle:E,center:L,valueLabels:R="none",height:D,format:O,locale:C,label:_,legend:F,tooltip:K,empty:V,size:W,variant:q="ghost",padded:G=!1,className:H,...J}){const Q=M(),T=W??Q.size??"md",U=C??Q.locale,X=n.useRef(null),Y=d(X),Z=j(),ee=n.useId(),le=n.useId(),ne=n.useId(),ae=n.useId(),te=n.useCallback(e=>O?N(U,O).format(e):v(e,U),[O,U]),ie=n.useMemo(()=>z.map(y),[z]),se=n.useMemo(()=>ie.map((e,l)=>({name:f(c(l,$,[ie]),U),data:[z[l]],color:e.color})),[ie,$,z,U]),re=!1===F?{interactive:!1}:!0===F||void 0===F?{}:F,oe=!1!==F&&se.length>1,de=re.side??"bottom",ue=u(se,oe&&!1!==re.interactive),[me,ce]=n.useState(null),setActive=e=>ce(null===e?null:ue.keys[e]??null),he=se.map((e,l)=>b(e,l)),ve=ie.reduce((e,l,n)=>ue.visible[n]&&null!==l.value?e+Math.abs(l.value):e,0),pe="semi"===A,fe="number"==typeof D?D:g[T],xe=h[T],ge=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,be="none"===ge.mode,ye=Y/2,Me=Math.max(0,Math.min(Y/2,pe?fe:fe/2)-2),Ne=pe?Math.min(fe,fe/2+Me/2):fe/2,je=Me*clamp(B??k[A],0,.95),Ie=ve<=0,we=!Ie&&Boolean(L)&&je>0,Pe=void 0===E?Me>0?Math.min(4,x/Me*(180/Math.PI)):0:clamp(E,0,10),ke=pe?180:360,ze=[];let $e=pe?-90:S;ie.forEach((e,l)=>{if(!ue.visible[l]||null===e.value||0===e.value)return;const n=Math.abs(e.value)/ve,a=n*ke;ze.push({index:l,start:$e,end:$e+a,value:e.value,share:n}),$e+=a});const Ae=null===me?-1:ue.keys.indexOf(me),Se=ze.some(e=>e.index===Ae)?Ae:null;null!==me&&null===Se&&ce(null);const share=e=>`${te(e)} · ${Math.round(10*(Math.abs(e)/ve*100+Number.EPSILON))/10}%`,Be=null===Se?[]:[{seriesIndex:Se,name:se[Se]?.name,color:ie[Se]?.color??he[Se],value:ie[Se]?.value??null,formatted:share(ie[Se]?.value??0),label:ie[Se]?.label}],Ee=Be.map(e=>({...e,name:void 0}));return l(s,{...J,size:T,variant:q,padded:G,className:H,legendSide:de,legend:oe?e(t,{series:se,colors:he,options:re,visibility:ue,size:T,values:re.showValue?ie.map(e=>null===e.value?void 0:te(e.value)):void 0}):null,table:Ie?null:e(a,{id:ee,caption:_,categories:se.map(e=>e.name??""),series:[{name:_,data:z}],values:[ie],format:te,locale:U}),children:[l("div",{ref:X,role:"img",tabIndex:Ie?void 0:0,"aria-label":_??Z.chart,"aria-describedby":Ie?ne:we?`${ae} ${le}`:le,onPointerLeave:()=>setActive(null),onBlur:()=>setActive(null),onKeyDown:e=>{if(be)return;if("Escape"===e.key&&null!==Se)return setActive(null),e.stopPropagation(),void e.preventDefault();if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const l=ze.map(e=>e.index);if(0===l.length)return;const n=null===Se?-1:l.indexOf(Se),a="ArrowRight"===e.key,t=-1===n?a?0:l.length-1:(n+(a?1:-1)+l.length)%l.length;setActive(l[t]),e.preventDefault()},className:I("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:fe},children:[Ie?e("div",{id:ne,className:I("flex h-full items-center justify-center text-(--plass-muted-fg)",w[T]),children:V??Z.empty}):Y>0&&Me>0?l("svg",{width:Y,height:fe,viewBox:`0 0 ${Y} ${fe}`,"aria-hidden":"true",className:"block",children:[ze.map(l=>{const n=p(ue.hovered,l.index,ue.visible)||null!==Se&&Se!==l.index,a=l.end-l.start>2*Pe?Pe/2:0;return e("path",{d:m(ye,Ne,Me,je,l.start+a,l.end-a),fill:ie[l.index].color??he[l.index],opacity:n?.32:1,onPointerEnter:be?void 0:()=>setActive(l.index),className:o},l.index)}),"all"===R?ze.map(l=>{const n=((l.start+l.end)/2-90)*(Math.PI/180),a=je>0?(je+Me)/2:.68*Me,t=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*a<2*xe||Me-je<1.6*xe?null:e("text",{x:ye+a*Math.cos(n),y:Ne+a*Math.sin(n),textAnchor:"middle",dominantBaseline:"central",fontSize:xe,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:t},l.index)}):null]}):null,we?e("div",{id:ae,className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:ye-je,top:Ne-je,width:2*je,height:pe?je:2*je},children:L}):null,null===Se||be?null:ge.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ge.render({index:Se,category:se[Se]?.name??Se,items:Be})}):e(r,{heading:se[Se]?.name,items:Ee,x:ye,y:8,flip:!1,size:T})]}),Ie?null:e("span",{id:le,className:P,children:ze.map((e,a)=>l(n.Fragment,{children:[a>0||we?", ":null,se[e.index]?.name," ",ie[e.index]?.label??share(e.value)]},e.index))}),be?null:e(i,{heading:null===Se?void 0:se[Se]?.name,items:Ee})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowPointerMove as o}from"../../internal/glow.js";import{useDefaults as r}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as u,iconClasses as x,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:L,style:S,children:q,onClick:A,onPointerMove:D,...G},J){const K=r(),Q=f??K.size??"md",T=_??K.color??"secondary",U=R??K.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(null),Z=u(O);l.useLayoutEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(A),se=g[U][Q],te=s(t,{children:[u(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,u(H)||u(M)||u(q)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[u(H)?e("span",{className:"max-w-full truncate",children:H}):null,u(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,q]}):null]});return s("div",{ref:J,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,x,ee?`plass-glow ${j[m]}`:"",P[E][F],L),style:{...i(T,C,m),...S},onPointerMove:o(ee,D),...G,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,u($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:A,children:te}):te,u($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X??"auto":0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});
|
|
@@ -21,6 +21,13 @@ export interface PlPopconfirmProps {
|
|
|
21
21
|
* the caller's, and `onConfirm` is where to report it from.
|
|
22
22
|
*/
|
|
23
23
|
onConfirm?: () => void | Promise<unknown>;
|
|
24
|
+
/**
|
|
25
|
+
* The word a screen reader hears after the confirming button's name while it
|
|
26
|
+
* waits on `onConfirm` — "Deleting", "Revoking". It takes the place of the
|
|
27
|
+
* label set's `loading` for that button.
|
|
28
|
+
* @default 'Loading'
|
|
29
|
+
*/
|
|
30
|
+
loadingLabel?: string;
|
|
24
31
|
/** What cancelling does, beyond closing. */
|
|
25
32
|
onCancel?: () => void;
|
|
26
33
|
/** @default 'danger' */
|
|
@@ -58,4 +65,4 @@ export interface PlPopconfirmProps {
|
|
|
58
65
|
* is not an inconsistency: nobody reaches for a popconfirm to ask whether to
|
|
59
66
|
* save.
|
|
60
67
|
*/
|
|
61
|
-
export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
|
|
68
|
+
export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, loadingLabel, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as i from"react";import{PlButton as n}from"../button/PlButton.js";import{PlPopover as t}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:d,cancelLabel:p,onConfirm:f,loadingLabel:g,onCancel:u,color:h,size:j,side:y="top",align:b="center",width:C=280,open:x,defaultOpen:P,onOpenChange:v,className:w}){const z=r(),L=s(),N=d??L.confirm,O=p??L.cancel,k=j??z.size??"md",S=h??"danger",[B,F]=i.useState(P??!1),q=x??B,[A,D]=i.useState(!1),setOpen=e=>{void 0===x&&F(e),v?.(e)};return e(t,{trigger:l,open:q,onOpenChange:e=>{A||(e||u?.(),setOpen(e))},title:c,description:m,side:y,align:b,width:C,color:S,size:k,showClose:!1,className:w,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(n,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:A,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(n,{color:S,size:k,density:"compact",loading:A,loadingLabel:g,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){D(!0);try{await e,setOpen(!1)}catch{}finally{D(!1)}}else setOpen(!1)},children:N})]})})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Popover as o}from"@base-ui/react/popover";import{CloseIcon as r}from"../../internal/icons.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as n,focusRingClasses as t,glassClasses as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Popover as o}from"@base-ui/react/popover";import{CloseIcon as r}from"../../internal/icons.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as n,focusRingClasses as t,glassClasses as d,hasContent as m,metaTextClasses as p,radiusClasses as c,sheetBodyClasses as u,sheetHeaderGapClasses as f,sheetPaddingXClasses as g,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as v,surfaceSlots as b,targetClasses as y}from"../../internal/styles.js";const w={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j=/* @__PURE__ */[d,"relative flex flex-col","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)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:8,sm:9,md:10,lg:11,xl:12},O=/* @__PURE__ */[y,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" ");export const PlPopoverClose=o.Close;export function PlPopover({size:t,color:d,density:y,trigger:P,title:_,description:z,children:k,side:C="bottom",align:T="center",sideOffset:A=6,alignOffset:D=0,arrow:L=!1,open:R,defaultOpen:W,onOpenChange:$,modal:q=!1,dismissible:B=!0,showClose:E=!1,closeLabel:F,width:G,className:H,style:I,...J}){const K=l(),M=a(),Q=F??M.close,S=t??K.size??"md",U=d??K.color??"primary",V=y??K.density??"default",X=g[V][S],Y=x[V][S],Z=N[S],ss=m(_)||m(z);return e(o.Root,{open:R,defaultOpen:W,modal:q,onOpenChange:(s,e)=>{B||s||"escape-key"!==e.reason&&"outside-press"!==e.reason&&"focus-out"!==e.reason?$?.(s):e.cancel()},children:[P?s(o.Trigger,{render:P}):null,s(o.Portal,{children:s(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:C,align:T,sideOffset:A,alignOffset:D,children:e(o.Popup,{className:n(j,c[S],u[S],h[S],X,Y,void 0===G?w[S]:"",H),style:{...b(U,3),...void 0===G?null:{maxWidth:"number"==typeof G?`${G}px`:G},...I},...J,children:[L?s(i,{as:o.Arrow,size:Z}):null,ss||E?e("div",{className:"flex shrink-0 items-start gap-3",children:[e("div",{className:n("flex min-w-0 flex-1 flex-col",f[S]),children:[m(_)?s(o.Title,{className:n("m-0 font-semibold",v[S]),children:_}):null,m(z)?s(o.Description,{className:n("m-0 text-(--plass-muted-fg)",p[S]),children:z}):null]}),E?s(o.Close,{"aria-label":Q,className:O,children:s(r,{})}):null]}):null,m(k)?s("div",{className:"min-w-0",children:k}):null]})})})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillClasses as t,fillTransitionClasses as o,plateGapClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillClasses as t,fillTransitionClasses as o,plateGapClasses as i,plateRadiusClasses as n,plateSizeClasses as m,progressAriaText as c,progressFraction as u,progressSlots as f,progressText as d,progressValue as p,trackClasses as x}from"../../internal/progress.js";import{cx as h,metaTextClasses as g,stackGapClasses as y}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */a.forwardRef(function PlProgressBox({size:a,color:j,count:w=4,value:N=null,min:b=0,max:v=100,label:M,showValue:P=!1,format:V,className:k,style:z,...A},B){const R=s(),T=a??R.size??"md",L=j??R.color??"primary",$=u(N,b,v),q=null===$,C=void 0!==V,D=Math.max(1,Math.floor(w));return l(r.Root,{ref:B,value:p(N,b,v),min:b,max:v,format:V,locale:R.locale,getAriaValueText:c($,C,R.locale),className:h("inline-flex flex-col",y[T],k),style:{...f(L),...z},...A,children:[M||P?l("div",{className:h("flex items-baseline gap-2",M?"justify-between":"justify-end",g[T]),children:[M?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:M}):null,P?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>d($,e,C,R.locale)}):null]}):null,e(r.Track,{className:h("flex",i[T]),children:Array.from({length:D},(l,a)=>e("span",{className:h("relative overflow-hidden",x,m[T],n[T]),children:e("span",{"aria-hidden":"true",className:h("absolute inset-y-0 start-0",t,q?"plass-plate-wave w-full":o),style:q?{"--p-i":a}:{width:`${Math.min(100,Math.max(0,100*($*D-a)))}%`}})},a))})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as
|
|
1
|
+
"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as t}from"@base-ui/react/progress";import{progressAriaText as l,progressFraction as o,progressSlots as i,progressText as n,progressValue as c,ringDiameters as m,ringStrokes as f}from"../../internal/progress.js";import{cx as u,gapClasses as d,metaTextClasses as p}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:h,color:x,value:k=null,min:g=0,max:v=100,label:y,showValue:$=!1,format:j,className:w,style:N,...P},b){const C=a(),V=h??C.size??"md",z=x??C.color??"primary",D=o(k,g,v),I=null===D,L=void 0!==j,R=`${e.useId()}-fill`,W=m[V],_=f[V],A=W/2,B=A-_/2,G=2*Math.PI*B,M=I?`${.28*G} ${G}`:`${G}`,T=I?0:G*(1-D);return s(t.Root,{ref:b,value:c(k,g,v),min:g,max:v,format:j,locale:C.locale,getAriaValueText:l(D,L,C.locale),className:u("inline-flex items-center",d[V],p[V],w),style:{...i(z),...N},...P,children:[s("svg",{className:u("shrink-0",I&&"plass-ring-spin"),width:W,height:W,viewBox:`0 0 ${W} ${W}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:R,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:A,cy:A,r:B,stroke:"var(--plass-track)",strokeWidth:_}),r("circle",{cx:A,cy:A,r:B,stroke:`url(#${R})`,strokeWidth:_,strokeLinecap:"round",strokeDasharray:M,strokeDashoffset:T,transform:`rotate(-90 ${A} ${A})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]"})]}),y?r(t.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:y}):null,$?r(t.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(D,r,L,C.locale)}):null]})});
|
|
@@ -1 +1 @@
|
|
|
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{Progress as a}from"@base-ui/react/progress";import{barThicknessClasses as o,fillClasses as t,fillTransitionClasses as n,progressAriaText as i,progressFraction as m,progressSlots 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{Progress as a}from"@base-ui/react/progress";import{barThicknessClasses as o,fillClasses as t,fillTransitionClasses as n,progressAriaText as i,progressFraction as m,progressSlots as c,progressText as u,progressValue as f,trackClasses as d}from"../../internal/progress.js";import{cx as p,metaTextClasses as x,stackGapClasses as g}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s,color:h,value:j=null,min:w=0,max:b=100,label:N,showValue:v=!1,format:y,className:P,style:L,...V},k){const z=r(),R=s??z.size??"md",T=h??z.color??"primary",A=m(j,w,b),I=null===A,$=void 0!==y;return l(a.Root,{ref:k,value:f(j,w,b),min:w,max:b,format:y,locale:z.locale,getAriaValueText:i(A,$,z.locale),className:p("flex w-full flex-col",g[R],P),style:{...c(T),...L},...V,children:[N||v?l("div",{className:p("flex items-baseline gap-2",N?"justify-between":"justify-end",x[R]),children:[N?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:N}):null,v?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(A,e,$,z.locale)}):null]}):null,e(a.Track,{className:p("relative w-full overflow-hidden rounded-full",d,o[R]),children:e(a.Indicator,{className:p("rounded-full",t,I?"plass-progress-sweep":`absolute top-0 ${n}`)})})]})});
|
|
@@ -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{useDisabled as l}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Radio as s}from"@base-ui/react/radio";import{RadioGroup as t}from"@base-ui/react/radio-group";import{Field as i}from"@base-ui/react/field";import{controlSlots as n,cx as d,fieldDescriptionClasses as c,focusRingClasses as p,forcedCheckedClasses as m,forcedDisabledCheckedClasses as f,glassClasses as u,hasContent as h,metaTextClasses as b,tickDotClasses as x,tickRowTextClasses as g,tickSizeClasses as v,transitionClasses as y}from"../../internal/styles.js";const N=/* @__PURE__ */a.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),j=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",y,p].join(" "),k=/* @__PURE__ */[u,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",m].join(" "),R=/* @__PURE__ */[u,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",m].join(" "),z=/* @__PURE__ */[u,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",f].join(" "),w=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */a.forwardRef(function PlRadio({label:l,description:o,disabled:t=!1,className:n,style:d,...c},p){const m=a.useContext(N),f=c.readOnly??m.readOnly,u=t||m.disabled;return e(i.Root,{disabled:t,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:r("div",{className:`flex items-start gap-2 ${g[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(s.Root,{ref:p,className:[j,v[m.size],u?z:f?R:k].join(" "),disabled:t,...c,children:e(s.Indicator,{keepMounted:!0,className:`${w} ${x[m.size]}`})})}),l||o?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(i.Label,{className:u?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,o?e(i.Description,{className:`m-0 ${b[m.size]} text-(--plass-muted-fg)`,children:o}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */a.forwardRef(function PlRadioGroup({size:s,color:p,orientation:m="vertical",label:f,description:u,error:x,invalid:g,disabled:v=!1,readOnly:y=!1,className:j,classNames:k,style:R,children:z,...w},O){const P=o(),$=l(v),G=s??P.size??"md",B=p??P.color??"primary",C=h(x),D=g??C,L=D?"danger":B,M=a.useMemo(()=>({size:G,color:L,readOnly:y,disabled:$}),[G,L,y,$]);return e(N.Provider,{value:M,children:r(i.Root,{disabled:$,invalid:D,className:["flex flex-col gap-1.5",j??""].filter(Boolean).join(" "),style:{...n(L,0,"solid"),...R},children:[f?e(i.Label,{className:d(b[G],"font-semibold",$?"text-(--plass-muted-fg)":"text-(--plass-fg)",k?.label),children:f}):null,u?e(i.Description,{className:d(c(G),k?.description),children:u}):null,e(t,{ref:O,disabled:$,readOnly:y,className:d("flex","horizontal"===m?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",k?.control),...w,children:z}),e(i.Error,C?{match:!0,className:d(b[G],"text-(--p-accent)",k?.error),children:x}:{className:d(b[G],"text-(--p-accent)",k?.error)})]})})});
|
|
@@ -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{useDisabled as t}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{StarIcon as i,StarOutlineIcon as s}from"../../internal/icons.js";import{controlSlots as o,cx as m,focusWithinRingClasses as c,gapClasses as d,iconSizeClasses as u,radiusClasses as p,srOnlyClasses as h,transitionClasses as f}from"../../internal/styles.js";const y="flex items-center justify-center";export const PlRating=/* @__PURE__ */r.forwardRef(function PlRating({value:x,defaultValue:b=0,onValueChange:g,count:v=5,precision:N=1,icon:j,emptyIcon:M,clearable:w=!0,readOnly:P=!1,disabled:k=!1,name:L,required:q=!1,size:C,color:I,label:R,valueLabel:S,className:V,style:z,onPointerLeave:A,...E},F){const O=n(),B=t(k),D=l(),G=R??D.rating,H=S??((e,a)=>e<=0?D.ratingNone:D.ratingValue(e,a)),J=C??O.size??"md",K=I??O.color??"warning",Q=r.useId(),T=L??Q,[U,W]=r.useState(b),X=void 0!==x,Y=X?x:U,[Z,$]=r.useState(null),_=Math.max(1,Math.floor(v)),ee=N>0&&N<=1?N:1,ae=Math.round(1/ee),re=Math.max(0,Math.min(_,Z??Y)),change=e=>{X||W(e),g?.(e)},te=Array.from({length:_},(r,t)=>{const n=Math.max(0,Math.min(1,re-t));return a("span",{className:m("relative inline-flex shrink-0",u[J],p.xs,P||B?"":c),children:[e("span",{className:m(y,u[J],"text-(--p-empty)"),children:M??e(s,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:m(y,u[J],"text-(--p-accent)",f),children:j??e(i,{})})}),P?null:Array.from({length:ae},(a,r)=>{const n=Number((t+(r+1)*ee).toFixed(4));return e("label",{className:m("absolute inset-y-0",B?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*r/ae+"%",width:100/ae+"%"},onPointerEnter:()=>{B||$(n)},children:e("input",{type:"radio",className:h,name:T,value:n,checked:Y===n,disabled:B,required:q,"aria-label":H(n,_),onChange:()=>change(n),onClick:()=>{w&&Y===n&&change(0)}})},n)})]},t)}),ne=m("inline-flex items-center align-middle",d[J],B?"cursor-not-allowed opacity-50 saturate-[0.35]":"",V),le={...o(K,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...z};return e("div",P?{ref:F,role:"img","aria-label":H(Math.max(0,Math.min(_,Y)),_),className:ne,style:le,onPointerLeave:A,...E,children:te}:{ref:F,role:"radiogroup","aria-label":G,"aria-disabled":B||void 0,"aria-required":q||void 0,className:ne,style:le,onPointerLeave:e=>{$(null),A?.(e)},...E,children:te})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as s,dimmedByHover as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as i,compactNumber as s,dimmedByHover as o,formatCategory as n,markerRadii as c,markGap as u,markPath as d,markShapes as m,plotHeights as h,pointX as x,seriesColor as f,toValues as p,writeChartValue as b}from"../../internal/chart.js";import{useDefaults as v}from"../../internal/defaults.js";import{cx as y,srOnlyClasses as k}from"../../internal/styles.js";import{textOf as z}from"../../internal/text.js";function writeX(e,r,a,t){return"number"!=typeof e?n(e,t):a?z(a(e,r)):s(e,t)}export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:s,series:o,categories:n,size:u,xAxis:y,...k}){const z=v(),g=u??z.size??"md",j=k.locale??z.locale,M=k.format,w=l??c[g],F=a.useMemo(()=>p(o),[o]),S=a.useMemo(()=>o.map((e,r)=>f(e,r)),[o]),$=s??Math.max(w+2,("number"==typeof k.height?k.height:h[g])/12),N=o.reduce((e,r)=>r.color?e:e+1,0),C="auto"===r||"varied"===r?"circle":r,E="varied"===r||"auto"===r&&N>3,L=a.useCallback(e=>E?m[e%m.length]:C,[E,C]),A=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((t,l)=>{e.visible[l]&&t.forEach((t,s)=>{if(null===t.value)return;const o=x(t,s,n);null!==o&&r.push({series:l,index:s,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?w:i(t.z,a,$,2)})})}),r},[n,w,$]),O=a.useCallback(e=>{const r=F[e.series]?.[e.index];if(!r||null===r.value)return null;const a=[{seriesIndex:e.series,name:o[e.series]?.name,color:r.color??S[e.series],value:r.value,formatted:b(r.value,M,j),label:r.label,aside:void 0===r.z?void 0:b(r.z,M,j)}];return{heading:writeX(r.x??n?.[e.index]??e.index,e.index,y?.tickFormat,j),items:a}},[F,o,S,n,y?.tickFormat,M,j]);return e(t,{...k,series:o,categories:n,size:g,xScale:"value",xAxis:y,marks:A,markTooltip:O,markInset:$,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:d(L(r),5,5,4),fill:a})}),table:r=>e(ScatterTable,{id:r,series:o,categories:n,label:k.label,xLabel:y?.label,yLabel:k.yAxis?.label,xFormat:y?.tickFormat,locale:j,format:M}),children:r=>e(ScatterMarks,{context:r,shapeOf:L})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:i,values:s,colors:n,visible:c,hovered:m,activeMark:h}=r,x=a.useMemo(()=>[...i].sort((e,r)=>r.r-e.r),[i]);return e("g",{children:x.map(r=>{const a=s[r.series]?.[r.index],i=o(m,r.series,c),x=h?.series===r.series&&h?.index===r.index;return e("path",{d:d(t(r.series),r.x,r.y,r.r),fill:a?.color??n[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:u,opacity:i?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:x&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}function ScatterTable({id:a,series:t,categories:l,label:i,xLabel:s,yLabel:o,xFormat:n,locale:c,format:u}){const d=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:a,className:y(k),children:[i?e("caption",{children:i}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:s??"x"}),e("th",{scope:"col",children:o??"y"}),d?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,t)=>a.data.map((i,s)=>{const o="object"==typeof i&&null!==i?i:null,m=o?o.y:"number"==typeof i?i:null,h=o?.x??l?.[s]??s;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:writeX(h,s,n,c)}),e("td",{children:void 0!==o?.label?o.label:null!==m&&Number.isFinite(m)?b(m,u,c):""}),d?e("td",{children:void 0===o?.z?"":b(o.z,u,c)}):null]},`${t}-${s}`)}))})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as
|
|
1
|
+
"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as i,focusRingInsetClasses as e,radiusClasses as n,toLength as s}from"../../internal/styles.js";const c={xs:"w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-auto",sm:"w-2.5 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:w-auto",md:"w-3 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-auto",lg:"w-3.5 data-[orientation=horizontal]:h-3.5 data-[orientation=horizontal]:w-auto",xl:"w-4 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-auto"},h="flex-1 rounded-full bg-(--plass-track) forced-colors:[background-color:CanvasText]";export const PlScrollArea=/* @__PURE__ */t.forwardRef(function PlScrollArea({orientation:t="vertical",height:d,maxHeight:m,width:u,maxWidth:w,scrollbars:f="auto",label:p,size:z,classNames:v,className:b,style:x,children:g,...y},N){const j=l(),S=z??j.size??"md",C="horizontal"!==t,T="vertical"!==t,k=i("flex touch-none select-none","p-[0.125rem]",c[S],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","always"===f?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",v?.scrollbar);return o(r.Root,{ref:N,className:i("plass-scroll-area relative overflow-hidden",n[S],b),style:{height:s(d),maxHeight:s(m),width:s(u),maxWidth:s(w),...x},...y,children:[a(r.Viewport,{role:p?"region":void 0,"aria-label":p,className:i("size-full overscroll-contain",n[S],e,v?.viewport),style:{overflowX:T?"scroll":"hidden",overflowY:C?"scroll":"hidden"},children:a(r.Content,{children:g})}),C?a(r.Scrollbar,{orientation:"vertical",className:k,children:a(r.Thumb,{className:i(h,v?.thumb)})}):null,T?a(r.Scrollbar,{orientation:"horizontal",className:k,children:a(r.Thumb,{className:i(h,v?.thumb)})}):null,C&&T?a(r.Corner,{}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDisabled as a}from"../../internal/form.js";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{controlHeightClasses as i,controlSlots as d,controlTextClasses as c,focusRingInsetClasses as u,forcedCheckedTextClasses as p,forcedFieldEdgeClasses as f,forcedFillClasses as h,gapClasses as g,glassClasses as m,hasContent as v,iconClasses as y,paddingXClasses as b,transitionClasses as x}from"../../internal/styles.js";const w=/* @__PURE__ */s.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1,disabled:!1,readOnly:!1}),k={solid:`${m} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${f}`,glass:`${m} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},j={solid:"plass-fill data-[placed]:[--p-fill-on:1] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${m} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${m} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},P={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */s.forwardRef(function PlSegment({value:l,startIcon:n,endIcon:d,disabled:f=!1,className:h,children:m,onPointerMove:k,...j},R){const{variant:$,size:z,density:N,fullWidth:C,disabled:O,readOnly:S}=s.useContext(w),W=a(f),A=!W&&!O&&!S;return t(o.Root,{ref:R,value:l,disabled:W,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",i[z],c[z],g[z],b[N][z],"rounded-full",x,y,A?"plass-glow":"","not-data-[checked]:[--p-glow:var(--p-soft)]","not-data-[checked]:[--p-flash:var(--p-soft-hover)]","text-(--plass-muted-fg) not-data-[checked]:not-data-[disabled]:not-data-[readonly]:hover:text-(--plass-fg)",P[$],p,u,"data-[disabled]:cursor-not-allowed",O?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",C?"flex-1":"",h??""].filter(Boolean).join(" "),onPointerMove:r(A,k),...j,children:[v(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,m,v(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const PlSegmentedButton=/* @__PURE__ */s.forwardRef(function PlSegmentedButton({variant:r="glass",size:o,color:i,density:c,elevation:u=0,value:p,defaultValue:f=null,onValueChange:g,disabled:m=!1,readOnly:v=!1,name:y,fullWidth:b=!1,className:P,style:R,children:$,...z},N){const C=l(),O=a(m),S=o??C.size??"md",W=i??C.color??"primary",A=c??C.density??"default",[B,E]=s.useState(f),M=void 0!==p,V=M?p:B,I=s.useRef(null),L=s.useRef(null),q=s.useRef(!1);s.useEffect(()=>{q.current=!0},[]);const G=s.useCallback(e=>{L.current=e,e&&!q.current&&e.setAttribute("data-placed","")},[]),H=s.useCallback(e=>{const t=I.current,s=L.current;if(!t||!s)return;const a=t.querySelector("[data-segment][data-checked]");if(!a)return;const r=!e||!s.hasAttribute("data-ready");r&&s.removeAttribute("data-ready"),s.style.setProperty("--p-seg-x",`${a.offsetLeft}px`),s.style.setProperty("--p-seg-y",`${a.offsetTop}px`),s.style.setProperty("--p-seg-w",`${a.offsetWidth}px`),s.style.setProperty("--p-seg-h",`${a.offsetHeight}px`),r&&s.offsetWidth,s.setAttribute("data-ready",""),s.setAttribute("data-placed","")},[]);s.useLayoutEffect(()=>{H(!0)},[H,V,r,S,A,b,$]),s.useEffect(()=>{const e=I.current;if(!e)return;const t=new ResizeObserver(()=>H(!1));return t.observe(e),()=>t.disconnect()},[H]);const T=s.useMemo(()=>({variant:r,size:S,density:A,fullWidth:b,disabled:O,readOnly:v}),[r,S,A,b,O,v]);return e(w.Provider,{value:T,children:t(n,{ref:e=>{I.current=e,"function"==typeof N?N(e):N&&(N.current=e)},value:V,onValueChange:e=>{const t=e??null;M||E(t),g?.(t)},disabled:O,readOnly:v,name:y,className:["relative inline-flex items-center rounded-full",k[r],x,v?"saturate-[0.55]":"",O?"opacity-50 saturate-[0.35]":"",b?"flex w-full":"",P??""].filter(Boolean).join(" "),style:{...d(W,u,r),...R},...z,children:[null!=V?e("span",{ref:G,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",j[r],h,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] motion-safe:data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,$]})})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
|
|
2
|
+
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* What a select's value may be.
|
|
5
5
|
*
|
|
@@ -51,8 +51,17 @@ export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentProp
|
|
|
51
51
|
* @default 0
|
|
52
52
|
*/
|
|
53
53
|
elevation?: PlassElevation;
|
|
54
|
-
/**
|
|
54
|
+
/** The name of what the select holds, wired to the trigger by Base UI's Field. */
|
|
55
55
|
label?: React.ReactNode;
|
|
56
|
+
/**
|
|
57
|
+
* Where the `label` goes — above the trigger, in its top edge, or inside it
|
|
58
|
+
* where the choice would be written until the select is focused, open or
|
|
59
|
+
* holds a value. With a `startIcon` a `float` label stays in the edge,
|
|
60
|
+
* because the icon is where it would rest.
|
|
61
|
+
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
62
|
+
* @default 'top'
|
|
63
|
+
*/
|
|
64
|
+
labelPlacement?: PlassFieldLabelPlacement;
|
|
56
65
|
/** Helper text below the trigger. */
|
|
57
66
|
description?: React.ReactNode;
|
|
58
67
|
/** Error message below. Its presence also turns the select invalid. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDisabled as l}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Select as r}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as o,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as c}from"../../internal/sizer.js";import{textOf as d}from"../../internal/text.js";import{glowPointerMove as m}from"../../internal/glow.js";import{FieldNotch as p,floatControlClassName as u,floatPlaceholderClassName as f,notchShellStyle as h,resolveNotch as g}from"../../internal/notch.js";import{hotKeyHandler as v}from"../../internal/keys.js";import{controlHeightClasses as b,controlTextLeadingClasses as x,cx as y,disabledClasses as j,fieldDescriptionClasses as N,fieldReadOnlyClasses as w,fieldRestClasses as P,fieldSlots as S,focusWithinRingClasses as z,forcedHighlightedClasses as I,gapClasses as O,glassClasses as V,hasContent as k,iconClasses as M,metaTextClasses as R,paddingXClasses as $,radiusClasses as _,stackGapClasses as C,surfaceSlots as D,transitionClasses as E}from"../../internal/styles.js";const T=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",E,M].join(" "),q=z,B=/* @__PURE__ */[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-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)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),K=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",E,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",I,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */t.forwardRef(function PlSelect({variant:z="glass",size:I,color:V,density:M,elevation:E=0,items:W,value:L,defaultValue:A,onValueChange:F,placeholder:G,label:H,labelPlacement:J,description:Q,error:U,invalid:X,startIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ae=!1,required:te=!1,name:le,id:se,className:re,hotKeys:ne,classNames:oe,style:ie,...ce},de){const me=s(),pe=l(ee),ue=I??me.size??"md",fe=V??me.color??"primary",he=M??me.density??"default",ge=J??me.labelPlacement??"top",{notched:ve,float:be}=g(ge,H,k(Y)),xe=k(U),ye=X??xe,je=ye?"danger":fe,Ne=!pe&&!ae,we=t.useMemo(()=>W.map(e=>({label:e.label??String(e.value),value:e.value})),[W]),[Pe,Se]=t.useState(!1);t.useEffect(()=>{ae&&Se(!1)},[ae]);const ze=t.useRef(null),Ie=be?d(H):"",Oe=t.useMemo(()=>Z?[]:[...W.map(e=>e.label??String(e.value)),G].map(d).concat(Ie).filter(e=>""!==e),[Z,W,G,Ie]),Ve=e(n.Label,{className:y(R[ue],"font-semibold",pe?"text-(--plass-muted-fg)":"text-(--plass-fg)",oe?.label),children:H});return a(n.Root,{disabled:pe,invalid:ye,className:["flex-col align-top",C[ue],Z?"flex w-full":"inline-flex",re??""].filter(Boolean).join(" "),style:{...S(je,E),...ie},...ce,children:[k(H)&&!ve?Ve:null,a(r.Root,{id:se,name:le,items:we,value:L,defaultValue:A,onValueChange:e=>F?.(e),disabled:pe,readOnly:ae,required:te,open:Pe&&!ae,onOpenChange:(e,a)=>Se(e&&!ae&&a.event!==ze.current),children:[e(p,{notched:ve,size:ue,density:he,variant:z,disabled:pe,readOnly:ae,float:be,label:Ve,children:a(r.Trigger,{ref:de,onKeyDown:v(ne,void 0),onMouseDown:e=>{ze.current=ae?e.nativeEvent:null},onPointerMove:m(Ne),style:ve?h:void 0,className:[T,ve?"":q,b[ue],x[ue],_[ue],O[ue],$[he][ue],pe?j[z]:ae?`${w[z]} cursor-default`:P[z],Ne?"plass-glow":"",be?u:"",oe?.control].filter(Boolean).join(" "),children:[Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Y}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(r.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)",be?f:""].join(" "),placeholder:G}),e(c,{samples:Oe})]}),e(r.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]})}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(r.Popup,{className:`${B} ${_[ue]} ${x[ue]}`,style:D(je,3),children:W.map(t=>a(r.Item,{value:t.value,disabled:t.disabled,className:K,children:[e(r.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e(r.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),Q?e(n.Description,{className:y(N(ue),oe?.description),children:Q}):null,e(n.Error,xe?{match:!0,className:y(R[ue],"text-(--p-accent)",oe?.error),children:U}:{className:y(R[ue],"text-(--p-accent)",oe?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=t.getBoundingClientRect().width,n=applyWidth(r+e);n!==r&&(j?.(n),N?.(n))})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
|
|
@@ -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{useDisabled as l}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Slider as s}from"@base-ui/react/slider";import{controlSlots as t,focusRingClasses as i,forcedFieldEdgeClasses as n,forcedFillClasses as d,metaTextClasses as c}from"../../internal/styles.js";const u={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},m={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},f={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},p={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},g={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},h=`rounded-full bg-(--plass-track) ${n}`,x=/* @__PURE__ */["[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","data-[dragging]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),b=/* @__PURE__ */["rounded-full [background-image:var(--p-fill)]",d,"forced-colors:data-[disabled]:[background-color:GrayText]","[transition-property:width,height,inset-inline-start,bottom,filter,opacity]",x].join(" "),v=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","forced-colors:[background-color:CanvasText] forced-colors:[border-color:Canvas]","forced-colors:data-[disabled]:[background-color:GrayText]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing","[transition-property:box-shadow,inset-inline-start,bottom,filter,opacity]",x,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",i,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */a.forwardRef(function PlSlider({size:i,color:n,elevation:d=1,orientation:x="horizontal",label:w,description:y,getAriaLabel:j,getAriaValueText:N,showValue:$=!1,disabled:_=!1,className:z,style:k,...A},T){const V=a.useId(),C=o(),L=l(_),S=i??C.size??"md",G=n??C.color??"primary",I="vertical"===x,P=A.value??A.defaultValue,R=Array.isArray(P)?P.length:1;return r(s.Root,{ref:T,orientation:x,disabled:L,className:["flex",I?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",L?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",z??""].filter(Boolean).join(" "),style:{...t(G,d,"solid"),...k},...A,children:[w||$?r("div",{className:`flex w-full items-baseline gap-2 ${c[S]}`,children:[w?e(s.Label,{className:"font-semibold text-(--plass-fg)",children:w}):null,$?e(s.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof $?$:null}):null]}):null,e(s.Control,{className:["flex touch-none items-center justify-center select-none",I?`${g[S]} h-40 flex-col`:`w-full ${p[S]}`].join(" "),children:r(s.Track,{className:[h,I?`${m[S]} h-full`:`${u[S]} w-full`].join(" "),children:[e(s.Indicator,{className:b}),Array.from({length:R},(r,a)=>e(s.Thumb,{index:a,getAriaLabel:j,getAriaValueText:N,"aria-describedby":y?V:void 0,className:`${v} ${f[S]}`},a))]})}),y?e("div",{id:V,className:`${c[S]} text-(--plass-muted-fg)`,children:y}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{areaPath as r,barMaxThickness as t,barPath as i,barRadius as n,extentOf as s,linePath as o,lineWidths as h,markerRadii as m,markGap as u,resolveColor as c,sparklineHeights as d,toValue as p,writeChartValue as f}from"../../internal/chart.js";import{useMeasuredWidth as v}from"../../internal/chart-frame.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */e.forwardRef(function PlSparkline({data:M,shape:g="line",curve:j="linear",size:w,color:$,endDot:N=!1,baseline:P,min:W,max:z,width:C,label:L,className:R,style:S,...B},D){const G=x(),I=w??G.size??"md",q=e.useRef(null),A=v(q),E=e.useId().replace(/:/g,""),F=e.useMemo(()=>M.map(p),[M]),H=d[I],J=h[I],K=m[I],O=s([F],!1),Q=W??(O?Math.min(O.min,P??O.min):0),T=z??(O?Math.max(O.max,P??O.max):1),U=T-Q||1,V="number"==typeof C?C:A,X=c($??"var(--plass-chart-1)"),Y="bar"===g?0:J/2+(N?K:0),Z=Math.max(1,H-2*Y),y=l=>Y+(1-(l-Q)/U)*Z,_=F.length>1?V/(F.length-1):V,ll=F.map((l,a)=>null===l.value?null:{x:a*_,y:y(l.value)}),al=(()=>{for(let l=F.length-1;l>=0;l--)if(null!==F[l].value)return l;return-1})(),el=al>=0?F[al].value:null,rl=null!==el&&el>=Q&&el<=T,tl=V/Math.max(1,F.length),il=Math.min(t[I]/2,Math.max(1,tl-u)),nl=y(Math.min(Math.max(Q,0),T)),barTop=l=>{const a=Math.min(y(l),nl);return Math.abs(y(l)-nl)<1?Math.min(a,H-1):a};return a("div",{ref:D,className:b("relative block",R??void 0),style:{width:C??"100%",height:H,...S},...B,children:[l("div",{ref:q,className:"absolute inset-0",children:V>0&&F.length>0?a("svg",{width:V,height:H,viewBox:`0 0 ${V} ${H}`,role:L?"img":"presentation","aria-label":L,"aria-hidden":!L||void 0,className:"block overflow-visible",children:[a("defs",{children:[l("clipPath",{id:`${E}-strip`,children:l("rect",{x:-V,y:0,width:3*V,height:H})}),"area"===g?a("linearGradient",{id:`${E}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${X} 32%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${X} 2%, transparent)`})]}):null]}),a("g",{clipPath:`url(#${E}-strip)`,children:["area"===g?l("path",{d:r(ll,H,j),fill:`url(#${E}-fill)`}):null,void 0!==P?l("line",{x1:0,x2:V,y1:y(P),y2:y(P),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===g?F.map((a,e)=>null===a.value?null:l("path",{d:i(e*tl+(tl-il)/2,barTop(a.value),il,Math.max(1,Math.abs(y(a.value)-nl)),n/2,a.value>=0?"up":"down"),fill:a.color??X},e)):l("path",{d:o(ll,j),fill:"none",stroke:X,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"})]}),N&&rl&&"bar"!==g?l("circle",{cx:ll[al].x,cy:ll[al].y,r:K,fill:X,stroke:"var(--plass-chart-gap)",strokeWidth:u}):null]}):null}),L?l("span",{className:k,children:F.map(l=>null===l.value?"—":f(l.value,void 0,G.locale)).join(", ")}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as p,focusRingClasses as m,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useLabels as w}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...y},w){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",$=m??C.color??"primary",P=f??C.density??"default",[I,A]=t.useState(s),L=n??I,R=t.useId(),T=t.useCallback(e=>{void 0===n&&A(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:P,orientation:k,color:$,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,P,k,$,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(g.Provider,{value:W,children:l("div",{ref:w,className:p("flex w-full flex-col",x),style:{...N($,0),...h},...y,children:[e("ol",{role:"list",className:p("m-0 flex w-full list-none p-0",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:p("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:$=!1,color:P,className:I,children:A,...L},R){const T=t.useContext(g),{index:B,last:M}=t.useContext(j),W=w(),q=T?.size??"md",D=T?.orientation??"horizontal",E=P??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!$&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:p("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],y,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:p("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:p("font-semibold",b[q],d[H],y),children:r}),u(z)?e("span",{className:p("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:p("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:p("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:p("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],m,y,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:p("flex items-center p-1",J?"flex-col":"flex-row",n[q],$?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:p("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",I),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:p("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:p(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],y)}):null]}),!J&&B===F&&u(A)?e("div",{role:"group","aria-labelledby":T?`${T.baseId}-${B}`:void 0,className:p("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:A}):null]})});
|