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
|
|
1
|
+
"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as l}from"@base-ui/react/switch";import{Field as c}from"@base-ui/react/field";import{controlSlots as i,cx as n,fieldDescriptionClasses as d,focusRingClasses as h,hasContent as m,metaTextClasses as p,tickRowTextClasses as f}from"../../internal/styles.js";const u={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",h].join(" "),x=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),k=/* @__PURE__ */[x,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),w=/* @__PURE__ */[x,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),j=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),v=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:h,label:x,description:N,error:y,invalid:_,labelPlacement:T="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,...B},C){const H=s(),O=o(P),q=t??H.size??"md",D=h??H.color??"primary",E=m(y),F=_??E,G=F?"danger":D,L=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:C,className:n(g,u[q],O?j:R?w:k,$?.control),disabled:O,readOnly:R,...B,children:e(l.Thumb,{className:`${v} ${b[q]}`})})}),A=x||N?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===T?"flex-1":""].filter(Boolean).join(" "),children:[x?e(c.Label,{className:n(O?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:x}):null,N?e(c.Description,{className:n(d(q),$?.description),children:N}):null]}):null;return a(c.Root,{disabled:O,invalid:F,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...i(G,0,"solid"),...z},children:[e("div",{className:`flex items-start gap-2.5 ${f[q]}`,children:a(r,"start"===T?{children:[A,L]}:{children:[L,A]})}),e(c.Error,E?{match:!0,className:n(p[q],"text-(--p-accent)",$?.error),children:y}:{className:n(p[q],"text-(--p-accent)",$?.error)})]})});
|
|
@@ -55,6 +55,16 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
|
|
|
55
55
|
getRowKey?: (row: Row, index: number) => React.Key;
|
|
56
56
|
/** Shown above the grid, and read out as the table's accessible name. */
|
|
57
57
|
caption?: React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* The table's accessible name when there is no `caption` — "Invoices",
|
|
60
|
+
* "Exchange rates".
|
|
61
|
+
*
|
|
62
|
+
* It names the `<table>`, and the box the grid scrolls in too: a grid wider
|
|
63
|
+
* than its sheet, or taller than `maxHeight`, is a tab stop while it
|
|
64
|
+
* scrolls, and a stop is announced by its name. A caption is that name when
|
|
65
|
+
* there is one, and this is not read then.
|
|
66
|
+
*/
|
|
67
|
+
label?: string;
|
|
58
68
|
/**
|
|
59
69
|
* What to show instead of rows when `rows` is empty.
|
|
60
70
|
* @default 'No data'
|
|
@@ -109,4 +119,4 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
|
|
|
109
119
|
* the API. `ref` is not offered rather than being offered with `Row` widened to
|
|
110
120
|
* `any`.
|
|
111
121
|
*/
|
|
112
|
-
export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;
|
|
122
|
+
export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, label, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as a,metaTextClasses as r,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,surfaceSlots as n}from"../../internal/styles.js";import{PlassTableScroll as i}from"../../internal/table-scroll.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:b="default",elevation:u=0,columns:x,rows:w,getRowKey:k,caption:j,label:N,empty:B="No data",striped:$=!1,hoverable:A=!1,stickyHeader:C=!1,maxHeight:H,onRowClick:S,className:T,style:z,...D}){const K=l[b][v],R=d[b][v],E=Boolean(S),I=A||E,P=void 0!==H,q={padding:`${R} ${K}`,border:0,background:"none"},F={...q,...C?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...C?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?q:{...q,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...n(f,u),...z},...D,children:[j?e("div",{"aria-hidden":"true",className:`${r[v]} font-semibold text-(--plass-muted-fg)`,style:{...q,borderBottom:h,textAlign:"start"},children:j}):null,t(i,{className:["overflow-x-auto",P?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:P?{maxHeight:H}:void 0,tableClassName:`text-start ${a[v]} text-(--plass-fg)`,tableStyle:g,caption:j,label:N,children:[e("colgroup",{children:x.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:x.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",C?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...F,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:x.length,className:"text-(--plass-muted-fg)",style:{...q,padding:`2rem ${K}`,textAlign:"center"},children:B})}):w.map((t,a)=>e("tr",{className:[m,$&&a%2==1?"[--p-row:var(--plass-stripe)]":"",I?"hover:[--p-row:var(--p-soft)]":"",E?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:E?0:void 0,onClick:S?()=>S(t,a):void 0,onKeyDown:S?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),S(t,a)))}:void 0,children:x.map(r=>e("td",{style:{...bodyCellStyle(a),textAlign:r.align??"start"},children:r.render?r.render(t,a):t[r.key]},r.key))},k?k(t,a):a))})]})]})}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
|
|
2
|
+
import type { PlassAlign, PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
|
|
3
3
|
/** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
|
|
4
4
|
export type PlTabValue = string | number;
|
|
5
5
|
export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
|
|
@@ -43,6 +43,23 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
|
|
|
43
43
|
* @default true
|
|
44
44
|
*/
|
|
45
45
|
loopFocus?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Where each tab's label sits inside the tab, once the tab is wider than the
|
|
48
|
+
* label is.
|
|
49
|
+
*
|
|
50
|
+
* Which is the part worth saying: this moves the words, never the tabs. A
|
|
51
|
+
* horizontal bar sizes every tab to its own label, so there is no room for a
|
|
52
|
+
* label to move in and nothing changes — it takes effect on a `vertical` bar,
|
|
53
|
+
* whose tabs are all as wide as the widest, and on a `fullWidth` one, whose
|
|
54
|
+
* tabs are all an equal share of the bar. `start` is what a bar down the side
|
|
55
|
+
* of a settings page usually wants, so the names line up as a list rather
|
|
56
|
+
* than drifting around a centre line.
|
|
57
|
+
*
|
|
58
|
+
* Logical, not physical: `start` is the left under `ltr` and the right under
|
|
59
|
+
* `rtl`, and an icon beside the label travels with it.
|
|
60
|
+
* @default 'center'
|
|
61
|
+
*/
|
|
62
|
+
align?: PlassAlign;
|
|
46
63
|
/** The tabs share the bar's full width, each taking an equal part of it. */
|
|
47
64
|
fullWidth?: boolean;
|
|
48
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as u,hasContent as h,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",align:"center",fullWidth:!1}),j={solid:{horizontal:`${u} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${u} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)",k={start:"justify-start",center:"justify-center",end:"justify-end"};export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:u,children:m,...x},w){const{variant:y,size:j,density:P,align:N,fullWidth:C}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none",k[N],"font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",C?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:u,orientation:h,align:p="center",activateOnFocus:v=!1,loopFocus:g=!0,fullWidth:T=!1,wheel:k=!0,overscroll:C="contain",className:R,style:S,children:V,...W},E){const F=x(h,"horizontal"),O=l(),$=r??O.size??"md",B=i??O.color??"primary",L=n??O.density??"default",M=a.useMemo(()=>({variant:s,size:$,density:L,orientation:F,align:p,fullWidth:T}),[s,$,L,F,p,T]),I=a.useRef(null),H="horizontal"===F,q=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(I,H);y(I,{enabled:k&&H,overscroll:C});const A=[],D=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?D.push(e):null!=e&&!1!==e&&A.push(e)})};return sort(V),e(z.Provider,{value:M,children:t(o.Root,{ref:E,value:c,defaultValue:f,onValueChange:e=>u?.(e),orientation:F,className:["flex min-w-0","vertical"===F?"flex-row gap-4":"flex-col gap-4",R??""].filter(Boolean).join(" "),style:{...m(B,0),...S},...W,children:[t(o.List,{ref:I,activateOnFocus:v,loopFocus:g,className:["relative shrink-0",j[s][F],"solid"===s?b[$]:"",T&&H?"w-full":"",H?"plass-fade-x overflow-x-auto overflow-y-hidden":"",H?w(C,!0):""].filter(Boolean).join(" "),style:q.style,onScroll:q.onScroll,"data-overflow":q.state,children:[A,e(o.Indicator,{className:["pointer-events-none",P[s][F],N[s],d,"solid"===s?b[$]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ")})]}),D]})})});
|
|
@@ -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
|
/** How the multiline control may be resized by the user. Ignored when single line. */
|
|
4
4
|
export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
5
5
|
/**
|
|
@@ -43,12 +43,20 @@ export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
|
|
|
43
43
|
*/
|
|
44
44
|
resize?: PlTextFieldResize;
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
* effect this library rules out on a control.
|
|
46
|
+
* The name of what the field holds, wired to the control by Base UI's Field.
|
|
47
|
+
* `labelPlacement` decides whether it sits above the box, in its top edge, or
|
|
48
|
+
* inside it until the field is focused or filled.
|
|
50
49
|
*/
|
|
51
50
|
label?: React.ReactNode;
|
|
51
|
+
/**
|
|
52
|
+
* Where the `label` goes — above the control, in its top edge, or inside it
|
|
53
|
+
* where the value would be written until the field is focused or filled, and
|
|
54
|
+
* in its top edge from then on. With a `startIcon` a `float` label stays in
|
|
55
|
+
* the edge, because the icon is where it would rest.
|
|
56
|
+
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
57
|
+
* @default 'top'
|
|
58
|
+
*/
|
|
59
|
+
labelPlacement?: PlassFieldLabelPlacement;
|
|
52
60
|
/** Helper text below the control. */
|
|
53
61
|
description?: React.ReactNode;
|
|
54
62
|
/** Error message below the control. Its presence also turns the field invalid. */
|
|
@@ -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 t from"react";import{useDisabled as r}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{Field as a}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{Spinner as o}from"../../internal/icons.js";import{useFieldLight as c}from"../../internal/glow.js";import{FieldNotch as m,floatControlClassName as d,notchShellStyle as p,resolveNotch as f}from"../../internal/notch.js";import{hotKeyHandler as x}from"../../internal/keys.js";import{controlHeightClasses as u,controlTextLeadingClasses as h,cx as y,disabledClasses as b,fieldDescriptionClasses as g,fieldReadOnlyClasses as $,fieldRestClasses as j,fieldSlots as w,focusWithinRingClasses as v,gapClasses as N,hasContent as z,iconClasses as k,metaTextClasses as D,paddingXClasses as P,radiusClasses as K,stackGapClasses as O,transitionClasses as R}from"../../internal/styles.js";const T={xs:`${N.xs} ${K.xs} ${h.xs}`,sm:`${N.sm} ${K.sm} ${h.sm}`,md:`${N.md} ${K.md} ${h.md}`,lg:`${N.lg} ${K.lg} ${h.lg}`,xl:`${N.xl} ${K.xl} ${h.xl}`},B={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=/* @__PURE__ */["relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",R,k].join(" "),C=v,E=j,L=$;export const PlTextField=/* @__PURE__ */t.forwardRef(function PlTextField({variant:h="glass",size:$,color:j,density:v,elevation:N=0,multiline:k=!1,rows:K=3,resize:R="vertical",label:W,labelPlacement:q,description:A,error:G,invalid:H,startIcon:J,endIcon:M,loading:Q=!1,fullWidth:S=!1,readOnly:U=!1,disabled:V=!1,type:X="text",placeholder:Y,hotKeys:Z,onKeyDown:_,className:ee,classNames:le,style:te,...re},ne){const se=n(),ae=r(V),ie=$??se.size??"md",oe=j??se.color??"primary",ce=v??se.density??"default",me=q??se.labelPlacement??"top",{notched:de,float:pe}=f(me,W,z(J)),fe=z(G),xe=H??fe,ue=xe?"danger":oe,he=t.useRef(null),ye=t.useCallback(e=>{he.current=e,"function"==typeof ne?ne(e):ne&&(ne.current=e)},[ne]),be=!ae&&!U,ge=c(be),$e=[I,de?"":C,T[ie],k?`${B[ie]} items-start`:`${u[ie]} items-center`,P[ce][ie],ae?b[h]:U?L[h]:E[h],be?"plass-glow":""].filter(Boolean).join(" "),je=["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)","disabled:cursor-not-allowed",k?`block ${F[R]}`:"self-stretch",pe?d:""].join(" "),we="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",ve=e(a.Label,{className:y(D[ie],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",le?.label),children:W});return l(a.Root,{disabled:ae,invalid:xe,className:["flex-col align-top",O[ie],S?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...w(ue,N),...te},children:[z(W)&&!de?ve:null,e(m,{notched:de,size:ie,density:ce,variant:h,disabled:ae,readOnly:U,float:pe,label:ve,children:l("span",{className:y($e,le?.control),style:de?p:void 0,...ge,onPointerDown:e=>{ae||s(e.target,e.currentTarget,he.current)||(e.preventDefault(),he.current?.focus())},children:[J?e("span",{className:we,children:J}):null,e(i,{ref:ye,className:je,disabled:ae,readOnly:U,"aria-busy":Q||void 0,"data-loading":Q||void 0,onKeyDown:x(Z,_),placeholder:pe?Y||" ":Y,...k?{render:e("textarea",{rows:K})}:{type:X},...re}),Q?e("span",{className:we,children:e(o,{})}):M?e("span",{className:we,children:M}):null]})}),A?e(a.Description,{className:y(g(ie),le?.description),children:A}):null,e(a.Error,fe?{match:!0,className:y(D[ie],"text-(--p-accent)",le?.error),children:G}:{className:y(D[ie],"text-(--p-accent)",le?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as
|
|
1
|
+
"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as i}from"../../internal/labels.js";import{useRender as l}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0 [&_svg]:align-middle",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:v,size:h,newTab:k=!1,icon:g,startIcon:b,newTabLabel:j,render:x,className:y,style:_,children:w,...N},T){const L=i(),z=j??L.newTab,C=g??k,P=!0===C?n(k?a:o,{}):C,$=[u,h?t[h]:"",d[f],v?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${v??"primary"}-ring)`,...v?{"--p-accent":`var(--plass-${v}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return l({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,..._},children:r(e,{children:[b?n("span",{className:"me-[0.25em]",children:b}):null,w,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});
|
|
@@ -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{useRender as s}from"@base-ui/react/use-render";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{useRender as s}from"@base-ui/react/use-render";import{cx as n,hasContent as a,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},w={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:N,status:P,color:C,connector:T="solid",className:_,children:k,...I},R){const $=t.useContext(g),{index:A,last:E}=t.useContext(j),M=$?.size??"md",V=$?.density??"default",q=$?.orientation??"vertical",B=C??$?.color??"primary",D=P??h(A,$?.active??null),F="horizontal"===q,G="none"!==T&&!E,H=e("span",{"aria-hidden":"true",className:n("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",x[D],d,i),children:N}),J=G?e("span",{"aria-hidden":"true",className:n("pointer-events-none absolute",F?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[D],d)}):null,K=l("div",{className:n("flex min-w-0 flex-col gap-0.5",F?"mt-2":""),children:[a(r)||a(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(r)?e("span",{className:n("font-semibold",p[M],y[D],d),children:r}):null,a(s)?e("span",{className:n("text-(--plass-muted-fg)",o[M]),children:s}):null]}):null,a(k)?e("div",{className:n("text-(--plass-muted-fg)",c[M]),children:k}):null]});return l("li",{ref:R,"aria-current":"current"===D?"step":void 0,"data-status":D,className:n("relative",F?n("flex min-w-0 flex-1 flex-col",E?"":w[V][M]):n("flex",u[M],E?"":z[V][M]),_),style:{"--p-bullet":f[M],...m(B,0),"--p-fill":`var(--plass-${B}-fill)`,"--p-on-solid":`var(--plass-${B}-on-solid)`},...I,children:[J,H,K]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:a,color:i,density:o,orientation:c,render:p,className:d,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=a??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:n("m-0 flex list-none p-0","horizontal"===v?"flex-row":"flex-col",d),style:{...m(z,0),...u},children:P.map((l,r)=>e(j.Provider,{value:{index:r,last:r===C-1},children:l},t.isValidElement(l)?l.key??r:r)),...x}});return e(g.Provider,{value:T,children:_})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,markTransitionClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,entryKeys as a,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as i,barRadius as l,formatTimeTicks as c,formatTimeValue as m,markGap as d,resolveColor as u,seriesColor as h,timeNeedsDate as x,timeScale as p,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as M}from"../../internal/styles.js";import{textOf as b}from"../../internal/text.js";import{useDefaults as y}from"../../internal/defaults.js";import{useLabels as k}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:u,rounded:M=!0,size:k,density:v,xAxis:w,yAxis:g,locale:j,...$}){const C=y(),T=k??C.size??"md",z=v??C.density??"default",A=j??C.locale,P=t.useMemo(()=>n.map(packRow),[n]),W=t.useMemo(()=>P.map(e=>e.spans),[P]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of W)for(const a of o)a&&(t=!0,e=Math.min(e,a.from),n=Math.max(n,a.to));return t?{min:e,max:n}:null},[W]),I=t.useMemo(()=>p(E,{min:f(r)??void 0,max:f(l)??void 0,tickCount:g?.tickCount}),[E,r,l,g?.tickCount]),R=t.useMemo(()=>c(I.ticks,I.unit,A),[I,A]),S=x(I.ticks,I.unit),B=t.useMemo(()=>n.map((e,n)=>h(e,n)),[n]),D=t.useMemo(()=>[{data:W.map(e=>e.some(Boolean)?1:null)}],[W]),N=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),F=t.useMemo(()=>a(n),[n]),q=u??i[T],G=t.useCallback(e=>{const n=[];return P.forEach((t,o)=>{const a=Math.min(q,Math.max(1,(e.band.band-d*(t.lanes-1))/t.lanes)),r=a*t.lanes+d*(t.lanes-1),s=e.plot.top+e.categoryPx(o)-r/2+a/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const i=e.valuePx(Math.max(t.from,e.scale.min)),l=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:o,index:r,key:F[o],x:(i+l)/2,y:s+t.lane*(a+d),r:a/2,rx:Math.max(0,(l-i)/2),ry:a/2})})}),n},[P,F,q]),H=t.useCallback(e=>{const n=W[e.series]?.[e.index];if(!n)return null;const t=n.span.label,o=null!=t,a={seriesIndex:e.series,color:n.color??B[e.series],value:n.to-n.from,formatted:`${m(n.from,I.unit,A,S)} – ${m(n.to,I.unit,A,S)}`};return{heading:o?t:N[e.series],items:[{...a,name:o?N[e.series]:void 0}],index:e.series,category:N[e.series],renderItems:[{...a,name:o&&b(t)||void 0}]}},[W,N,B,I.unit,A,S]);return e(o,{...$,series:D,categories:N,size:T,density:z,locale:A,horizontal:!0,scale:I,xAxis:w,yAxis:{tickFormat:(e,n)=>R[n]??"",...g},legend:!1,bandRatio:s[z],marks:G,markTooltip:H,table:t=>e(TimelineTable,{id:t,names:N,series:n,spans:W,scale:I,withDate:S,label:$.label,corner:w?.label,locale:A}),children:n=>e(Spans,{context:n,spans:W,colors:B,rounded:M})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?u(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:o,rounded:a}){const{marks:s,activeMark:i}=n,c=a?l:0;return e("g",{children:s.map(n=>{const a=t[n.series]?.[n.index];if(!a)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-m/2,width:d,height:m,rx:Math.min(c,d/2,m/2),fill:a.color??o[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:o,series:a,spans:r,scale:s,withDate:i,label:l,corner:c,locale:d}){const u=k(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==a[n].data[t]?.label));return n("table",{id:t,className:M,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:c??""}),h?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:u.start}),e("th",{scope:"col",children:u.end})]})}),e("tbody",{children:r.flatMap((t,r)=>t.map((t,l)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:o[r]}),h?e("td",{children:a[r].data[l]?.label??""}):null,e("td",{children:m(t.from,s.unit,d,i)}),e("td",{children:m(t.to,s.unit,d,i)})]},`${r}-${l}`):null))})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as d,glassClasses as p,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as v,sheetHeaderGapClasses as g,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w,targetClasses as j,transitionClasses as N}from"../../internal/styles.js";const T={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},M={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",d].join(" "),glass:/* @__PURE__ */[p,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[p,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},z={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:e,variant:s,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:o,color:a,size:d,density:p,closeLabel:T,swipeDirection:O}){const P=s.data?.variant??o??"glass",k=s.data?.color??a,$=void 0===s.data?.icon?n(k):s.data.icon,D=z[P],L=m(s.title);return e(i.Root,{toast:s,swipeDirection:O,className:["pointer-events-auto flex w-full items-start",x[p??"default"][d],b[p??"default"][d],h[d],y[d],v[d],M[P],f,N,"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction]:[transform:translate(var(--toast-swipe-movement-x),var(--toast-swipe-movement-y))]","data-[limited]:hidden",c,"[outline:none]",s.data?.className??""].filter(Boolean).join(" "),style:{...l(k,3,P),...s.data?.style},children:[m($)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${D}`,children:$}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${g[d]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[d]} ${D}`}),t(i.Description,{className:L&&"solid"!==P?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",D||"text-inherit","hover:underline",c,u[d]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":T,className:[j,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(e){const{toasts:s}=i.useToastManager(),o=a(),{position:r,width:n,...l}=e,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",T[r]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:e,swipeDirection:c,...l})},e.id))})})}export function PlToastProvider({variant:s="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:d=5e3,limit:p=3,width:m=380,closeLabel:f,children:u}){const h=o(),v=a(),g=f??v.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return e(i.Provider,{timeout:d,limit:p,children:[u,t(ToastViewport,{position:c,variant:s,size:x,color:b,density:y,width:m,closeLabel:g})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as l}from"../../internal/glow.js";import{useDefaults as a}from"../../internal/defaults.js";import{Toggle as r}from"@base-ui/react/toggle";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{useDisabled as i}from"../../internal/form.js";import{controlHeightClasses as p,controlSlots as n,controlSquareClasses as g,controlTextClasses as v,disabledClasses as d,focusRingClasses as h,forcedEdgeClasses as m,forcedPressedClasses as x,gapClasses as c,glassClasses as f,hasContent as b,iconClasses as $,paddingXClasses as u,radiusClasses as j,transitionClasses as w}from"../../internal/styles.js";const y={xs:`${p.xs} ${c.xs} ${j.xs} ${v.xs}`,sm:`${p.sm} ${c.sm} ${j.sm} ${v.sm}`,md:`${p.md} ${c.md} ${j.md} ${v.md}`,lg:`${p.lg} ${c.lg} ${j.lg} ${v.lg}`,xl:`${p.xl} ${c.xl} ${j.xl} ${v.xl}`},P={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]",w,h,$].join(" "),C={solid:/* @__PURE__ */[f,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",m].join(" "),glass:/* @__PURE__ */[f,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},N={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) 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-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},T={solid:/* @__PURE__ */["text-(--p-on-solid) [--p-fill-on:1]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",x].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${x}`},k={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:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */o.forwardRef(function PlToggle({variant:p,size:g,color:v,density:h,elevation:m,pressed:x,defaultPressed:c,onPressedChange:f,value:$,startIcon:j,endIcon:w,fullWidth:I=!1,disabled:M,className:B,style:R,children:W,onPointerMove:q,...A},D){const E=a(),F=o.useContext(t),G=p??F?.variant??"glass",H=g??F?.size??E.size??"md",J=v??F?.color??E.color??"primary",K=h??F?.density??E.density??"default",L=m??F?.elevation??0,O=i(M??F?.disabled),Q=!b(W);return e(r,{ref:D,value:$,pressed:x,defaultPressed:c,onPressedChange:s=>f?.(s),disabled:O,className:s=>[z,y[H],Q?P[H]:u[K][H],O?d[G]:s.pressed?`${T[G]} ${k[G]}`:`${C[G]} ${N[G]}`,O?"":"plass-glow cursor-pointer",I?"w-full":"",B??""].filter(Boolean).join(" "),style:{...n(J,L,G),...R},onPointerMove:l(!O,q),...A,children:["solid"===G?s("span",{"aria-hidden":"true",className:"plass-fill-layer"}):null,j,W,w]})});
|
|
@@ -55,6 +55,10 @@ export interface PlTooltipProps extends Pick<PlassStyleProps, 'size' | 'color' |
|
|
|
55
55
|
/**
|
|
56
56
|
* Stops the tooltip from opening at all, without disabling the trigger. For
|
|
57
57
|
* the tooltip that only exists while a label is truncated.
|
|
58
|
+
*
|
|
59
|
+
* One that is up when this turns on closes, and `onOpenChange` hears it
|
|
60
|
+
* close. A controlled `open` shows nothing while this is on, and is answered
|
|
61
|
+
* with `false`.
|
|
58
62
|
* @default false
|
|
59
63
|
*/
|
|
60
64
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as r}from"../../internal/picker.js";import{glassClasses as l,metaTextClasses as i,paddingXClasses as n,radiusClasses as d,surfaceSlots as p}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[l,"max-w-64 border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),m={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},y={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:l,children:u,size:f,color:g,density:x,side:b="top",align:h="center",sideOffset:j=6,delay:v,closeDelay:P,arrow:O=!0,open:w,defaultOpen:z,onOpenChange:T,disabled:N=!1,className:C,style:D,..._}){const k=a(),A=f??k.size??"sm",B=g??k.color??"secondary",I=x??k.density??"default",R=y[A],S=o.useId(),[q,E]=o.useState(z??!1),F=!N&&(w??q);return e(t.Root,{open:w,defaultOpen:z,disabled:N,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:u,delay:v,closeDelay:P,disabled:N,"aria-describedby":F?S:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:b,align:h,sideOffset:j,children:e(t.Popup,{id:S,role:"tooltip",className:[c,d[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...p(B,3),...D},..._,children:[O?s(r,{as:t.Arrow,size:R}):null,l]})})})]})}
|
|
@@ -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{Popover as n}from"@base-ui/react/popover";import{PlButton as i}from"../button/index.js";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as l}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as m,focusRingClasses as p,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as g,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z,targetClasses as j}from"../../internal/styles.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},C={xs:6,sm:8,md:10,lg:12,xl:14},L=/* @__PURE__ */[u,"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(" "),E=/* @__PURE__ */[j,"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)",p].join(" "),O={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:p,open:u,defaultOpen:j=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=o(),X=l(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,te]=s.useState(j),[se,ne]=s.useState(S),ie=u??ee,oe=Math.min(R??se,Math.max(0,p.length-1)),ae=p[oe],[le,re]=s.useState(null),setOpen=e=>{void 0===u&&te(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[me,pe]=s.useState(null);if(s.useLayoutEffect(()=>{pe(ie?resolve(ce):null)},[ie,ce,oe]),s.useEffect(()=>{if(!ie)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const t=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:t?"instant":"smooth"})}let t=0;const read=()=>{t=0;const s=e.getBoundingClientRect();re({at:oe,spot:c({top:s.top,left:s.left,width:s.width,height:s.height},de)})},schedule=()=>{0===t&&(t=requestAnimationFrame(read))};read();const s="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return s?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==t&&cancelAnimationFrame(t),s?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[ie,ce,de,oe,D]),0===p.length)return null;const ue=ie&&le?.at===oe?le.spot:null,fe=0===oe,he=oe===p.length-1,ge=b[$][Y],ve=w[$][Y],xe=_[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:ie,onOpenChange:(e,t)=>{(e||B||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?setOpen(e):t.cancel()},children:t(n.Portal,{children:[ie&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:m("plass-portal 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)]","motion-reduce:[transition-duration:0ms]",Q?.mask),style:{clipPath:d(ue,ae?.radius??C[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:me?ae?.side??"bottom":"bottom",align:me?ae?.align??"center":"center",sideOffset:me?10:centreOnAnchor,collisionPadding:12,anchor:me??O,children:t(n.Popup,{className:m(L,g[Y],v[Y],y[Y],N[Y],ge,ve,K),style:z(Z,3),children:[be?t("div",{className:"flex items-start gap-3",children:[t("div",{"aria-live":"polite","aria-atomic":"true",className:m("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:m("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:m("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:m(E,Q?.close),children:e(a,{})}):null]}):null,t("div",{className:m("flex items-center gap-2",Q?.footer),children:[t("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[oe+1," / ",p.length]}),t("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(i,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(i,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(oe-1),children:I??X.previous}),e(i,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(oe+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}
|
|
@@ -28,8 +28,11 @@ export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPr
|
|
|
28
28
|
/** What a list with nothing in it says. @default 'Nothing here' */
|
|
29
29
|
emptyLabel?: string;
|
|
30
30
|
/**
|
|
31
|
-
* What the tick in a list's heading is announced as, before the
|
|
32
|
-
*
|
|
31
|
+
* What the tick in a list's heading is announced as, before the name of its
|
|
32
|
+
* list, so the two ticks are told apart by ear. Left out, the label pack's
|
|
33
|
+
* `transferSelectAll` says the whole sentence and puts the name where each
|
|
34
|
+
* language puts it.
|
|
35
|
+
* @default `Select all in {list}`, from the label pack
|
|
33
36
|
*/
|
|
34
37
|
selectAllLabel?: string;
|
|
35
38
|
/** What the two arrows are announced as. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as n}from"../checkbox/PlCheckbox.js";import{PlIconButton as i}from"../icon-button/PlIconButton.js";import{PlTextField as o}from"../text-field/PlTextField.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{searchText as d}from"../../internal/search.js";import{textOf as f}from"../../internal/text.js";import{cx as u,fieldRestClasses as m,hasContent as h,metaTextClasses as b,paddingXClasses as v,radiusClasses as p,srOnlyClasses as g,surfaceSlots as y,toLength as x}from"../../internal/styles.js";const k={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},w={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},S=/* @__PURE__ */a.memo(function Row({value:l,label:t,checked:r,disabled:s,size:i,color:o,onTick:c,rowRef:d}){const f=a.useCallback(e=>d(l,e),[d,l]),u=a.useCallback(e=>c(l,!0===e),[c,l]);return e(n,{ref:f,size:i,color:o,className:w[i],label:t,checked:r,disabled:s,onCheckedChange:u})});function Panel({title:a,rows:t,ticked:r,onTick:s,onTickAll:i,search:c,onSearch:d,searchable:f,disabled:h,height:g,emptyLabel:x,searchLabel:N,selectAllName:T,style:L,titleId:j,listRef:R,rowRef:A}){const{variant:C,size:z,color:P,density:I}=L,M=t.filter(e=>!e.disabled),O=M.filter(e=>r.has(e.value)),_=M.length>0&&O.length===M.length,B=O.length>0&&!_,V=v[I][z];return l("div",{className:u("flex min-w-0 flex-col overflow-hidden",m[C],p[z]),style:y(P,0),children:[l("div",{className:u("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,k[z]),children:[e(n,{size:z,color:P,checked:_,indeterminate:B,disabled:h||0===M.length,"aria-label":T,onCheckedChange:e=>i(!0===e)}),e("span",{id:j,className:u("min-w-0 flex-1 truncate font-medium",b[z]),children:a}),l("span",{className:u("shrink-0 tabular-nums text-(--plass-muted-fg)",b[z]),children:[O.length,"/",t.length]})]}),f?e("div",{className:u(V,k[z]),children:e(o,{size:z,color:P,density:I,fullWidth:!0,variant:"ghost",disabled:h,placeholder:N,"aria-label":N,value:c,onChange:e=>d(e.target.value)})}):null,e("div",{ref:R,role:"group","aria-labelledby":j,tabIndex:-1,className:u("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===g?void 0:{height:g},children:e("div",{className:u("flex flex-col",V,k[z]),children:0===t.length?e("span",{className:u("text-(--plass-muted-fg)",b[z],w[z]),children:x}):t.map(l=>e(S,{value:l.value,label:l.label,checked:r.has(l.value),disabled:h||!0===l.disabled,size:z,color:P,onTick:s,rowRef:A},l.value))})})]})}function nameOf(e,l){const a=f(e).trim();return""===a?l:a}function narrow(e,l){const a=d(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||d(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:n,value:o,defaultValue:d,onValueChange:f,sourceLabel:m,targetLabel:b,searchable:v=!1,searchLabel:p,emptyLabel:y,selectAllLabel:k,toTargetLabel:w,toSourceLabel:S,movedLabel:N,height:T=220,disabled:L=!1,variant:j="glass",size:R,color:A,density:C,className:z,...P},I){const M=r(),O=t(L),_=s(),B=m??_.transferAvailable,V=b??_.transferSelected,$=p??_.search,E=y??_.empty,F=void 0===k?_.transferSelectAll:e=>[k,e].filter(Boolean).join(" "),W=w??_.transferToSelected,q=S??_.transferToAvailable,D=N??_.transferMoved,G=R??M.size??"md",H=A??M.color??"primary",J=C??M.density??"default",[K,Q]=a.useState(d??[]),U=o??K,[X,Y]=a.useState(()=>new Set),Z=a.useMemo(()=>new Set(n.map(e=>e.value)),[n]);[...X].some(e=>!Z.has(e))&&Y(new Set([...X].filter(e=>Z.has(e))));const[ee,le]=a.useState(""),[ae,te]=a.useState(""),re=a.useId(),se=a.useRef(new Map),ne=a.useRef(null),ie=a.useRef(null),oe=a.useRef(null),[ce,de]=a.useState(null),fe=a.useCallback((e,l)=>{l?se.current.set(e,l):se.current.delete(e)},[]),ue=a.useMemo(()=>new Set(U),[U]),me=a.useMemo(()=>n.filter(e=>!ue.has(e.value)),[n,ue]),he=a.useMemo(()=>n.filter(e=>ue.has(e.value)),[n,ue]),be=a.useCallback((e,l)=>{Y(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},[]),tickAll=(e,l)=>{Y(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&X.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),r=l?n.filter(e=>ue.has(e.value)||t.has(e.value)).map(e=>e.value):U.filter(e=>!t.has(e));oe.current={ids:a.map(e=>e.value),toTarget:l},Y(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===o&&Q(e),f?.(e)})(r)};a.useLayoutEffect(()=>{const e=oe.current;if(!e)return;oe.current=null;const l=e.ids.filter(l=>ue.has(l)===e.toTarget),a=e.toTarget?ie.current:ne.current;if(0===l.length)return void a?.focus();(se.current.get(l[0])??a)?.focus();const t=e.toTarget?nameOf(V,_.transferSelected):nameOf(B,_.transferAvailable);de(e=>({key:(e?.key??0)+1,text:D(l.length,t)}))},[ue,X,_,D,B,V]);const ve=narrow(me,ee),pe=narrow(he,ae),ge=ve.some(e=>!e.disabled&&X.has(e.value)),ye=pe.some(e=>!e.disabled&&X.has(e.value)),xe=x(T),ke={variant:j,size:G,color:H,density:J},we=h(B)?B:_.transferAvailable,Se=h(V)?V:_.transferSelected,Ne="ghost"===j?"ghost":"glass";return l("div",{ref:I,className:u("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),...P,children:[e(Panel,{title:we,titleId:`${re}-source`,listRef:ne,rowRef:fe,rows:ve,ticked:X,onTick:be,onTickAll:e=>tickAll(ve,e),search:ee,onSearch:le,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(we,_.transferAvailable)),style:ke}),l("div",{className:"flex flex-col gap-2",children:[e(i,{size:G,color:H,variant:Ne,label:W,disabled:O||!ge,onClick:()=>move(ve,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(c,{})})}),e(i,{size:G,color:H,variant:Ne,label:q,disabled:O||!ye,onClick:()=>move(pe,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(c,{})})})]}),e(Panel,{title:Se,titleId:`${re}-target`,listRef:ie,rowRef:fe,rows:pe,ticked:X,onTick:be,onTickAll:e=>tickAll(pe,e),search:ae,onSearch:te,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(Se,_.transferSelected)),style:ke}),e("div",{className:g,"aria-live":"polite",children:ce?e("span",{children:ce.text},ce.key):null})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{Collapsible as l}from"@base-ui/react/collapsible";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as o,focusRingClasses as d,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const i of e)s.push({node:i,level:n}),i.children&&t.has(i.id)&&visibleRows(i.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:i,parent:l,tabStop:r,expanded:a,selected:o}){const{parents:d}=s.useContext(b);let c=null;for(let e=r;null!==e&&d.has(e);e=d.get(e))if(d.get(e)===l){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:i,isOpen:a.has(t.id),isSelected:o.has(t.id),tabStop:t.id===c?r:null,expanded:n?a:void 0,selected:n?o:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:i,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:R,selection:C,idPrefix:j,focus:M,actions:N}=s.useContext(b),E=void 0!==i.children;return n(t,{children:[n("div",{id:`${j}-${i.id}`,role:"treeitem","aria-level":f,"aria-expanded":E?y:void 0,"aria-selected":"none"===C?void 0:g,"aria-disabled":i.disabled||void 0,tabIndex:i.disabled?void 0:w===i.id?0:-1,onFocus:()=>M(i.id),onKeyDown:e=>{i.disabled||N.current?.keyDown(e,i,f)},onClick:()=>{i.disabled||N.current?.press(i)},className:o("flex cursor-pointer items-center select-none",c[D],x[R][D],a[D],u[D],d,m,p,i.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:o("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",E?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(r,{})}),i.icon?e("span",{className:"flex shrink-0 items-center",children:i.icon}):null,e("span",{className:"truncate",children:i.label})]}),k&&S?e(l.Root,{open:y,children:e(l.Panel,{role:"group",className:h,children:e(TreeRows,{items:i.children,level:f+1,parent:i.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:l,onExpandedChange:r,selected:a,defaultSelected:d,onSelectedChange:c,selection:p="single",onItemClick:u,size:m,color:h,density:v,className:x,style:y,...g},w){const k=i(),S=m??k.size??"md",D=h??k.color??"primary",R=v??k.density??"default",[C,j]=s.useState(l??[]),M=n??C,N=s.useMemo(()=>new Set(M),[M]),[E,I]=s.useState(d??[]),P=a??E,T=s.useMemo(()=>new Set(P),[P]),O=s.useMemo(()=>visibleRows(t,N),[t,N]),z=s.useMemo(()=>parentsOf(t),[t]),[A,$]=s.useState(null),_=s.useMemo(()=>O.filter(e=>!e.node.disabled),[O]),F=A&&_.some(e=>e.node.id===A)?A:_[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!N.has(e)?[...M.filter(t=>t!==e),e]:M.filter(t=>t!==e),void 0===n&&j(s),r?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?T.has(e.id)?P.filter(t=>t!==e.id):[...P,e.id]:[e.id];void 0===a&&I(t),c?.(t)})(e),u?.(e)},L=s.useId(),focusRow=e=>{$(e),document.getElementById(`${L}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=_.findIndex(e=>e.node.id===t.id),i=void 0!==t.children,l=N.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),_[s+1]&&focusRow(_[s+1].node.id);break;case"ArrowUp":e.preventDefault(),_[s-1]&&focusRow(_[s-1].node.id);break;case"ArrowRight":e.preventDefault(),i&&!l?toggle(t.id,!0):i&&_[s+1]?.level===n+1&&focusRow(_[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),i&&l){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(_[e].level<n){focusRow(_[e].node.id);break}break;case"Home":e.preventDefault(),_[0]&&focusRow(_[0].node.id);break;case"End":e.preventDefault(),_.length&&focusRow(_[_.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},B=s.useRef(null);s.useLayoutEffect(()=>{B.current={press,keyDown:onKeyDown}});const H=s.useMemo(()=>({size:S,density:R,selection:p,idPrefix:L,parents:z,focus:$,actions:B}),[S,R,p,L,z]);return e("div",{ref:w,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:o("flex flex-col",x),style:{...f(D,0),...y},...g,children:e(b.Provider,{value:H,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:F,expanded:N,selected:T})})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as f}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}function haystackOf(e){return i([e.searchLabel??("string"==typeof e.label?e.label:e.id)])}function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=haystackOf(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:h,defaultValue:m,onValueChange:u,multiple:p=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:y,open:x,defaultOpen:j,onOpenChange:C,placeholder:O,clearable:S=!1,closeOnSelect:T,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:k,size:E,color:I,density:L,readOnly:N=!1,disabled:V=!1,...F},R){const B=n(),W=E??B.size??"md",q=I??B.color??"primary",A=L??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=h??J,[U,X]=t.useState(j??!1),Y=x??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(V||N)||(void 0===x&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===h&&K(e),u?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?O??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...F,size:W,color:q,density:A,readOnly:N,disabled:V,triggerRef:R,display:oe,empty:0===ie.length,clearable:S,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:k,formValue:p?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(f,{items:le,size:W,color:q,density:A,selection:p?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!p){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((T??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),T&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),y?.(e))}})})]})})});
|
|
1
|
+
"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as f}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}function haystackOf(e){return i([e.searchLabel??("string"==typeof e.label?e.label:e.id)])}function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=haystackOf(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:h,defaultValue:m,onValueChange:u,multiple:p=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:y,open:x,defaultOpen:j,onOpenChange:C,placeholder:O,clearable:S=!1,closeOnSelect:T,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:k,size:E,color:I,density:L,readOnly:N=!1,disabled:V=!1,...F},R){const B=n(),W=E??B.size??"md",q=I??B.color??"primary",A=L??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=h??J,[U,X]=t.useState(j??!1),Y=x??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(V||N)||(void 0===x&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===h&&K(e),u?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?O??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...F,size:W,color:q,density:A,readOnly:N,disabled:V,triggerRef:R,display:oe,empty:0===ie.length,clearable:S,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:k,formValue:p?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(f,{items:le,size:W,color:q,density:A,selection:p?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!p){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((T??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),T&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),y?.(e))}})})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};function clampClasses(e){return 1===e?"block truncate":"line-clamp-(--p-lines)"}export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:i="body",color:c,weight:h,align:d,lines:p,gutter:b=!1,render:u,className:x,style:f,children:g,...y},v){const k=p&&p>=1?Math.floor(p):void 0,j=[r[i],a[h??m[i]],d?s[d]:"",k?clampClasses(k):"",b?o[i]:"",c?"text-(--p-accent)":n.has(i)?"text-(--plass-muted-fg)":"text-(--plass-fg)",x??""].filter(Boolean).join(" ");return t({render:u??e.createElement(l[i]),ref:v,props:{className:j,style:c||k&&k>1?{...c?{"--p-accent":`var(--plass-${c}-accent)`}:null,...k&&k>1?{"--p-lines":k}:null,...f}:f,children:g,...y}})});
|
|
1
|
+
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};function clampClasses(e){return 1===e?"block truncate":"line-clamp-(--p-lines)"}export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:i="body",color:c,weight:h,align:d,lines:p,gutter:b=!1,render:u,className:x,style:f,children:g,...y},v){const k=p&&p>=1?Math.floor(p):void 0,j=["m-0",r[i],a[h??m[i]],d?s[d]:"",k?clampClasses(k):"",b?o[i]:"",c?"text-(--p-accent)":n.has(i)?"text-(--plass-muted-fg)":"text-(--plass-fg)",x??""].filter(Boolean).join(" ");return t({render:u??e.createElement(l[i]),ref:v,props:{className:j,style:c||k&&k>1?{...c?{"--p-accent":`var(--plass-${c}-accent)`}:null,...k&&k>1?{"--p-lines":k}:null,...f}:f,children:g,...y}})});
|