plass-ui 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +372 -0
- package/README.md +18 -16
- package/dist/components/accordion/PlAccordion.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/anchor/PlAnchor.d.ts +14 -1
- package/dist/components/anchor/PlAnchor.js +1 -1
- package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
- package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-fade/PlAnimateFade.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-grow/PlAnimateGrow.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +13 -4
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-reveal/PlAnimateReveal.js +1 -1
- package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-shake/PlAnimateShake.js +1 -1
- package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.d.ts +7 -4
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
- package/dist/components/app-logo/PlAppLogo.js +1 -1
- package/dist/components/area-chart/PlAreaChart.d.ts +1 -1
- package/dist/components/area-chart/PlAreaChart.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +2 -1
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/bar-chart/PlBarChart.d.ts +1 -1
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +8 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.d.ts +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +6 -2
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/code-block/PlCodeBlock.d.ts +19 -2
- package/dist/components/code-block/PlCodeBlock.js +1 -1
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +6 -5
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +20 -6
- package/dist/components/data-table/PlDataTable.js +1 -1
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +4 -1
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/form/PlForm.js +1 -1
- package/dist/components/gallery/PlGallery.d.ts +40 -2
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gallery/PlGalleryViewer.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/hover-card/PlHoverCard.d.ts +5 -3
- package/dist/components/hover-card/PlHoverCard.js +1 -1
- package/dist/components/how-to-steps/PlHowToSteps.js +1 -1
- package/dist/components/image/PlImage.d.ts +195 -8
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/image/PlImagePreview.d.ts +58 -0
- package/dist/components/image/PlImagePreview.js +1 -0
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/menu/PlMenu.d.ts +14 -5
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/meter/PlMeter.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +6 -0
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.d.ts +12 -9
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.d.ts +5 -0
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popover/PlPopover.d.ts +5 -5
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/rating/PlRating.d.ts +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scatter-chart/PlScatterChart.js +1 -1
- package/dist/components/scroll-area/PlScrollArea.js +1 -1
- package/dist/components/scroll-zone/PlScrollZone.d.ts +19 -6
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/show/PlShow.d.ts +16 -0
- package/dist/components/show/PlShow.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.d.ts +13 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.js +1 -1
- package/dist/components/spoiler/PlSpoiler.d.ts +15 -8
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stat/PlStat.d.ts +4 -0
- package/dist/components/stat/PlStat.js +1 -1
- package/dist/components/stepper/PlStepper.d.ts +1 -1
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/table/PlTable.d.ts +5 -5
- package/dist/components/tabs/PlTabs.d.ts +26 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/timeline-chart/PlTimelineChart.js +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +10 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.js +1 -1
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/css/area-chart.css +1 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/bar-chart.css +1 -0
- package/dist/css/calendar.css +1 -0
- package/dist/css/carousel.css +2 -0
- package/dist/css/color-picker.css +1 -0
- package/dist/css/combobox.css +1 -0
- package/dist/css/command-palette.css +1 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/data-table.css +5 -0
- package/dist/css/date-picker.css +1 -0
- package/dist/css/date-range-picker.css +1 -0
- package/dist/css/date-time-picker.css +1 -0
- package/dist/css/floating-action-button.css +2 -0
- package/dist/css/gallery.css +5 -0
- package/dist/css/gauge-chart.css +1 -0
- package/dist/css/heatmap-chart.css +1 -0
- package/dist/css/icon-button.css +1 -0
- package/dist/css/image.css +2 -0
- package/dist/css/line-chart.css +1 -0
- package/dist/css/menubar.css +1 -0
- package/dist/css/pagination.css +1 -0
- package/dist/css/pie-chart.css +1 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/scatter-chart.css +1 -0
- package/dist/css/scroll-zone.css +2 -0
- package/dist/css/sidebar.css +3 -0
- package/dist/css/sparkline.css +1 -0
- package/dist/css/spoiler.css +1 -0
- package/dist/css/stat.css +1 -0
- package/dist/css/time-picker.css +1 -0
- package/dist/css/timeline-chart.css +1 -0
- package/dist/css/tour.css +1 -0
- package/dist/css/transfer.css +4 -0
- package/dist/css/tree-select.css +2 -0
- package/dist/hooks/usePlElementSize.d.ts +4 -1
- package/dist/hooks/usePlElementSize.js +1 -1
- package/dist/hooks/usePlHotKeys.d.ts +5 -1
- package/dist/hooks/usePlHotKeys.js +1 -1
- package/dist/hooks/usePlOnScreen.d.ts +4 -0
- package/dist/hooks/usePlOnScreen.js +1 -1
- package/dist/internal/animate.d.ts +30 -2
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +5 -1
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +81 -3
- package/dist/internal/chart.js +1 -1
- package/dist/internal/color-scheme.js +1 -1
- package/dist/internal/data-table.d.ts +5 -4
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/drag.d.ts +16 -0
- package/dist/internal/drag.js +1 -1
- package/dist/internal/focusable.d.ts +8 -0
- package/dist/internal/focusable.js +1 -0
- package/dist/internal/form.d.ts +61 -0
- package/dist/internal/form.js +1 -0
- package/dist/internal/gallery.d.ts +60 -14
- package/dist/internal/gallery.js +1 -1
- package/dist/internal/glow.d.ts +17 -0
- package/dist/internal/glow.js +1 -0
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/image.d.ts +94 -0
- package/dist/internal/image.js +1 -0
- package/dist/internal/inert.d.ts +19 -0
- package/dist/internal/inert.js +1 -0
- package/dist/internal/keys.d.ts +19 -0
- package/dist/internal/keys.js +1 -1
- package/dist/internal/labels.d.ts +45 -1
- package/dist/internal/labels.js +1 -1
- package/dist/internal/link.d.ts +17 -0
- package/dist/internal/link.js +1 -1
- package/dist/internal/page-layout.d.ts +14 -7
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +43 -6
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +16 -8
- package/dist/internal/progress.js +1 -1
- package/dist/internal/scramble.d.ts +4 -0
- package/dist/internal/scramble.js +1 -1
- package/dist/internal/scroll-target.d.ts +5 -0
- package/dist/internal/scroll-target.js +1 -0
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +66 -0
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +39 -0
- package/dist/internal/text.js +1 -0
- package/dist/internal/watermark.d.ts +44 -0
- package/dist/internal/watermark.js +1 -0
- package/dist/internal/wheel.d.ts +52 -0
- package/dist/internal/wheel.js +1 -0
- package/dist/internal/window.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/zh-Hans.js +1 -1
- package/dist/provider/PlColorSchemeScript.js +1 -1
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +258 -11
- package/dist/tokens.css +258 -11
- package/dist/types.d.ts +16 -29
- package/package.json +15 -15
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import type { PlassDirection } from './direction.js';
|
|
2
3
|
import type { PlassBreakpoint, PlassSide } from '../types.js';
|
|
3
4
|
/**
|
|
4
5
|
* The vocabulary a page's structure is written in, and the context the four
|
|
@@ -129,12 +130,18 @@ export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
|
|
|
129
130
|
* question and a layout flips under RTL on its own. A drawer is attached to an
|
|
130
131
|
* edge of the *window*, which `PlassSide` names physically for the same reason
|
|
131
132
|
* a tooltip above a button is above it in every writing direction — so the two
|
|
132
|
-
* have to be translated
|
|
133
|
-
* them.
|
|
133
|
+
* have to be translated.
|
|
134
134
|
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
135
|
+
* `direction` is what the nearest `PlassProvider` was told, and it wins for the
|
|
136
|
+
* reason it wins there: a provider given a direction is describing a subtree
|
|
137
|
+
* that runs the other way from the page, and a drawer is portalled out of that
|
|
138
|
+
* subtree, so the document is the one place that cannot say which way it runs.
|
|
139
|
+
* Without one, the document's own direction is the answer, as it is for the
|
|
140
|
+
* provider.
|
|
141
|
+
*
|
|
142
|
+
* The document is read during render rather than in an effect, which is safe
|
|
143
|
+
* here for a narrower reason than it looks: the only caller is a sidebar that
|
|
144
|
+
* has already collapsed, and collapsing is a client-side answer. There is no
|
|
145
|
+
* server render of this to disagree with.
|
|
139
146
|
*/
|
|
140
|
-
export declare function drawerSide(side: PlassSidebarSide): PlassSide;
|
|
147
|
+
export declare function drawerSide(side: PlassSidebarSide, direction?: PlassDirection): PlassSide;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{belowQuery as
|
|
1
|
+
"use client";import*as e from"react";import{belowQuery as t}from"./breakpoints.js";import{useMediaQuery as n}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return n("none"===e?null:function collapseQuery(e){return"xs"===e?null:t(e)}(e))}export function drawerSide(e,t){const n=t?"rtl"===t:"undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}
|
|
@@ -41,6 +41,41 @@ export declare function popupSlots(color: PlassColor, elevation: PlassElevation)
|
|
|
41
41
|
export declare const pickerPopupClasses: string;
|
|
42
42
|
/** The popup's own padding, one track tighter than a control's. */
|
|
43
43
|
export declare const popupPaddingClasses: Record<PlassSize, string>;
|
|
44
|
+
export interface PopupArrowProps {
|
|
45
|
+
/**
|
|
46
|
+
* The `Arrow` part of whichever Base UI popup this is — `Popover.Arrow`,
|
|
47
|
+
* `PreviewCard.Arrow`, `Tooltip.Arrow`. Each of the three roots has its own,
|
|
48
|
+
* and only the primitive knows where to put it.
|
|
49
|
+
*/
|
|
50
|
+
as: React.ElementType<{
|
|
51
|
+
className?: string;
|
|
52
|
+
children?: React.ReactNode;
|
|
53
|
+
}>;
|
|
54
|
+
/** How wide the wedge is, in pixels. Its height is half of that. */
|
|
55
|
+
size: number;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* The wedge that points a floating sheet at what opened it.
|
|
59
|
+
*
|
|
60
|
+
* One drawing for all three, and it is the *stroked* one: a triangle filled
|
|
61
|
+
* with the sheet's own `--plass-glass-press`, with the hairline drawn along its
|
|
62
|
+
* two slanted sides only.
|
|
63
|
+
*
|
|
64
|
+
* Both of those are the glass rules rather than a preference. The fill is the
|
|
65
|
+
* same one declaration the plate carries, so the wedge stays on the plate's
|
|
66
|
+
* rung of the opacity ladder — a wedge stacked out of a line triangle and a
|
|
67
|
+
* fill triangle composites two translucent whites and comes out lighter than
|
|
68
|
+
* the sheet it grew from, which in the dark theme is 0.25 against the plate's
|
|
69
|
+
* 0.15. And `--plass-glass-line` is a cut edge rather than a colour to fill
|
|
70
|
+
* with, so it is stroked: on the two sides that are a cut edge, and not across
|
|
71
|
+
* the base, which is not one — the plate is on the other side of it.
|
|
72
|
+
*
|
|
73
|
+
* `non-scaling-stroke` is what keeps that hairline one pixel at every `size`.
|
|
74
|
+
* The path is written in a 10×5 viewBox and the box is drawn at whatever the
|
|
75
|
+
* component's ladder says, so a stroke that scaled would be thinner than the
|
|
76
|
+
* plate's border on a small sheet and thicker on a large one.
|
|
77
|
+
*/
|
|
78
|
+
export declare function PopupArrow({ as: Arrow, size }: PopupArrowProps): React.JSX.Element;
|
|
44
79
|
export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'defaultValue'> {
|
|
45
80
|
/**
|
|
46
81
|
* Drop shadow depth of the *trigger*. `0`, like a `PlTextField`: a field is
|
|
@@ -88,11 +123,13 @@ interface InternalShellProps extends PlassPickerShellProps {
|
|
|
88
123
|
open: boolean;
|
|
89
124
|
onOpenChange: (open: boolean) => void;
|
|
90
125
|
labels: PlassPickerLabels;
|
|
91
|
-
/**
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
126
|
+
/** The name the value submits under. */
|
|
127
|
+
name?: string;
|
|
128
|
+
/**
|
|
129
|
+
* The value as a form submits it: one string, or one row per entry. An empty
|
|
130
|
+
* string, a list with an empty entry and an empty list are no value.
|
|
131
|
+
*/
|
|
132
|
+
formValue: string | readonly string[];
|
|
96
133
|
children: React.ReactNode;
|
|
97
134
|
triggerRef?: React.Ref<HTMLButtonElement>;
|
|
98
135
|
}
|
|
@@ -104,7 +141,7 @@ interface InternalShellProps extends PlassPickerShellProps {
|
|
|
104
141
|
* and the way `invalid` re-points the whole colour family at `danger` so the
|
|
105
142
|
* edge, the ring and the message turn over together.
|
|
106
143
|
*/
|
|
107
|
-
export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels,
|
|
144
|
+
export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
|
|
108
145
|
/**
|
|
109
146
|
* The row of shortcuts under a picker's panel.
|
|
110
147
|
*
|
package/dist/internal/picker.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{FormControl as r,leaveFormControl as i}from"./form.js";import{CloseIcon as o}from"./icons.js";import{WidthSizer as n}from"./sizer.js";import{chipRemoveClasses as d,controlHeightClasses as p,controlTextLeadingClasses as c,cx as u,disabledClasses as m,fieldReadOnlyClasses as f,fieldRestClasses as h,focusWithinRingClasses as g,gapClasses as x,glassClasses as b,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as j,surfaceSlots as k,transitionClasses as P}from"./styles.js";export function popupSlots(e,s){return{...k(e,s),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const $=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,g,v].join(" ");export const pickerPopupClasses=/* @__PURE__ */[b,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};const C=/* @__PURE__ */["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" ");export function PopupArrow({as:a,size:t}){return e(a,{className:C,children:s("svg",{width:t,height:t/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})})}export function PickerShell({variant:g="glass",size:b="md",color:v="primary",density:P="default",elevation:C=0,label:z,description:B,error:I,invalid:O,startIcon:R,fullWidth:q=!1,disabled:D=!1,readOnly:E=!1,required:F=!1,id:S,className:L,classNames:M,style:V,display:W,samples:_,empty:A,clearable:T=!1,onClear:G,open:H,onOpenChange:J,labels:K,name:Q,formValue:U,children:X,triggerRef:Y,...Z}){const ee=a.useId(),se=S??`${ee}-trigger`,ae=`${ee}-label`,te=`${ee}-value`,le=`${ee}-description`,re=`${ee}-error`,ie=null!=I&&!1!==I&&""!==I,oe=O??ie,ne=oe?"danger":v,de=D||E,pe=a.useRef(null);return s(t.Root,{disabled:D,invalid:oe,className:u("flex-col align-top",j[b],q?"flex w-full":"inline-flex",L),style:{...k(ne,C),...V},...Z,children:[z?e(t.Label,{id:ae,htmlFor:se,className:u(y[b],"font-semibold",D?"text-(--plass-muted-fg)":"text-(--plass-fg)",M?.label),children:z}):null,s(l.Root,{open:H,onOpenChange:e=>J(e),children:[s("span",{className:u($,p[b],c[b],w[b],x[b],N[P][b],D?m[g]:E?f[g]:h[g],M?.control),children:[e(t.Validity,{children:({validity:a})=>{const t=!1===a.valid,r=[B?le:null,ie||t&&!D&&!0!==O?re:null].filter(Boolean).join(" ")||void 0;return s(l.Trigger,{id:se,ref:Y,disabled:D,"aria-labelledby":z?`${ae} ${te}`:void 0,"aria-describedby":r,"aria-required":F||void 0,"aria-invalid":oe||t||void 0,onBlur:()=>{H||i(pe.current)},className:u("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",x[b],"[outline:none]",de?"cursor-default":"cursor-pointer"),children:[R?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{id:te,className:u("w-full truncate",A?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:W}),q?null:e(n,{samples:_??[]})]})]})}}),!T||A||de?null:e("button",{type:"button","aria-label":K.clear,className:u(d,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),G()},children:e(o,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(l.Popup,{initialFocus:!1,className:u(pickerPopupClasses,w[b],popupPaddingClasses[b],c[b]),style:popupSlots(ne,3),children:X})})})]}),B?e(t.Description,{id:le,className:u(y[b],"text-(--plass-muted-fg)",M?.description),children:B}):null,e(t.Error,ie?{id:re,match:!0,className:u(y[b],"text-(--p-accent)",M?.error),children:I}:{id:re,className:u(y[b],"text-(--p-accent)",M?.error)}),e(r,{ref:pe,name:Q,value:U,required:F&&!E,disabled:D,standIn:()=>pe.current?.ownerDocument.getElementById(se)})]})}export function PickerFooter({size:s,children:a}){return e("div",{className:u("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",x[s]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}
|
|
@@ -120,7 +120,13 @@ export declare const plateGapClasses: Record<PlassSize, string>;
|
|
|
120
120
|
* also why the movement is on `width` and never on the paint: a gradient cannot
|
|
121
121
|
* be transitioned, and a length can.
|
|
122
122
|
*/
|
|
123
|
-
export declare const trackClasses = "bg-(--plass-track)";
|
|
123
|
+
export declare const trackClasses = "bg-(--plass-track) forced-colors:border forced-colors:[border-color:CanvasText]";
|
|
124
|
+
/**
|
|
125
|
+
* The filled part of a track. Forced-colours mode drops the gradient and
|
|
126
|
+
* repaints the groove in the page's colour, so there the track gets an edge and
|
|
127
|
+
* the fill the system's highlight.
|
|
128
|
+
*/
|
|
129
|
+
export declare const fillClasses = "[background-image:var(--p-fill)] forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
|
|
124
130
|
/** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
|
|
125
131
|
export declare const fillTransitionClasses = "[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";
|
|
126
132
|
/**
|
|
@@ -134,13 +140,15 @@ export declare function progressFraction(value: number | null | undefined, min:
|
|
|
134
140
|
/**
|
|
135
141
|
* What the value reads as, both on screen and to a screen reader.
|
|
136
142
|
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
139
|
-
*
|
|
140
|
-
*
|
|
141
|
-
*
|
|
143
|
+
* Without `format` it is a percentage of the range rather than of 100 — "3%"
|
|
144
|
+
* for step 3 of 4 is worse than saying nothing — written in `locale`, so a page
|
|
145
|
+
* in German reads "75 %". Base UI's own default is that percentage too, but it
|
|
146
|
+
* reads a value that is not finite as indeterminate where `progressFraction`
|
|
147
|
+
* clamps it, so the percentage is written here from the fraction. A caller who
|
|
148
|
+
* passed `format` gets Base UI's formatted string, in the same `locale`, because
|
|
149
|
+
* at that point they have said what the number means.
|
|
142
150
|
*/
|
|
143
|
-
export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
|
|
151
|
+
export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean, locale: string | undefined): string | null;
|
|
144
152
|
/**
|
|
145
153
|
* The same string, shaped for Base UI's `getAriaValueText`.
|
|
146
154
|
*
|
|
@@ -148,4 +156,4 @@ export declare function progressText(fraction: number | null, formatted: string
|
|
|
148
156
|
* to Base UI — it already announces indeterminate progress, and re-inventing
|
|
149
157
|
* that here would be one more English string the library has to own.
|
|
150
158
|
*/
|
|
151
|
-
export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;
|
|
159
|
+
export declare function progressAriaText(fraction: number | null, hasFormat: boolean, locale: string | undefined): ((formatted: string | null) => string) | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses
|
|
1
|
+
import{numberFormatter as s}from"./format.js";import{forcedFieldEdgeClasses as r,forcedFillClasses as e}from"./styles.js";export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses=`bg-(--plass-track) ${r}`;export const fillClasses=`[background-image:var(--p-fill)] ${e}`;export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}const t={style:"percent"};export function progressText(r,e,o,l){return null===r?null:o?e:s(l,t).format(r)}export function progressAriaText(s,r,e){if(null!==s)return t=>progressText(s,t,r,e)??""}
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
* of.
|
|
13
13
|
*
|
|
14
14
|
* `characters` overrides it for the caller who genuinely wants a terminal look.
|
|
15
|
+
*
|
|
16
|
+
* **A character is a grapheme**, what a reader counts as one: an emoji, a flag,
|
|
17
|
+
* a letter with its accent. Cut by code point instead, an emoji is halved into
|
|
18
|
+
* pieces that each draw as a broken glyph, and the noise flickers with them.
|
|
15
19
|
*/
|
|
16
20
|
/** Everything in the text that is worth scrambling: no spaces, no repeats. */
|
|
17
21
|
export declare function poolOf(text: string): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function poolOf(
|
|
1
|
+
import{graphemesOf as t}from"./text.js";export function poolOf(o){const n=new Set;for(const r of t(o))""!==r.trim()&&n.add(r);return Array.from(n).join("")}export function scrambleAt(o,n,r,e){const m=t(o),a=t(n),f=Math.floor(m.length*Math.max(0,Math.min(1,r)));return 0===a.length?o:m.map((t,o)=>o<f||""===t.trim()?t:a[(31*o+17*e)%a.length]).join("")}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
/** What a component scrolls, or follows the scroll of. */
|
|
3
|
+
export type PlassScrollTarget = Window | HTMLElement | React.RefObject<HTMLElement | null> | (() => Window | HTMLElement | null);
|
|
4
|
+
/** What `target` names, or the window when it names nothing. */
|
|
5
|
+
export declare function resolveScrollTarget(target: PlassScrollTarget | undefined): Window | HTMLElement | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function resolveScrollTarget(n){return void 0===n?"undefined"==typeof window?null:window:"function"==typeof n?n():"current"in n?n.current:n}
|
package/dist/internal/steps.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete
|
|
1
|
+
import{forcedFillClasses as e}from"./styles.js";export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:`[background-image:var(--p-fill)] text-(--p-on-solid) ${e}`,current:`[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)] ${e} forced-colors:[outline:2px_solid_Highlight] forced-colors:[outline-offset:2px]`,upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}
|
|
@@ -272,6 +272,13 @@ export declare const focusRingInsetClasses = "focus-visible:[outline:2px_solid_v
|
|
|
272
272
|
*
|
|
273
273
|
* Kept quiet until it is wanted: the glyph sits at 70% until the pointer or the
|
|
274
274
|
* keyboard arrives.
|
|
275
|
+
*
|
|
276
|
+
* Drawn at the size of the label, and pressed from a 24px square, the minimum
|
|
277
|
+
* target size of WCAG 2.5.8. The `::before` is that square, centred on the
|
|
278
|
+
* glyph whatever size the glyph is, and placed out of the flow so the chip and
|
|
279
|
+
* the trigger keep their size. It comes after the label or the trigger in the
|
|
280
|
+
* markup and is positioned, so where the square reaches over one of them the ×
|
|
281
|
+
* has the press, and the neighbour keeps everything outside the square.
|
|
275
282
|
*/
|
|
276
283
|
export declare const chipRemoveClasses: string;
|
|
277
284
|
/** Icons track their label rather than carrying a size of their own. */
|
|
@@ -309,6 +316,65 @@ export declare function controlSlots(color: PlassColor, elevation: PlassElevatio
|
|
|
309
316
|
* ring and the caret, and the glass stays clear.
|
|
310
317
|
*/
|
|
311
318
|
export declare function surfaceSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
|
|
319
|
+
/**
|
|
320
|
+
* The edge a surface that is only a fill gets back in forced-colours mode.
|
|
321
|
+
*
|
|
322
|
+
* Windows' contrast themes drop every background image and box shadow, so a
|
|
323
|
+
* `solid` button — a gradient with no border — is left as a label floating on
|
|
324
|
+
* the page, and a `solid` field as a caret with no box around it. A border in a
|
|
325
|
+
* system colour gives both their shape back. Nothing changes outside that mode.
|
|
326
|
+
*/
|
|
327
|
+
export declare const forcedEdgeClasses = "forced-colors:border forced-colors:[border-color:ButtonText]";
|
|
328
|
+
/**
|
|
329
|
+
* The same for a surface that is not a button — a field, a progress bar's
|
|
330
|
+
* track, a slider's rail, a badge, a message — in the colour the system draws
|
|
331
|
+
* text on the page.
|
|
332
|
+
*/
|
|
333
|
+
export declare const forcedFieldEdgeClasses = "forced-colors:border forced-colors:[border-color:CanvasText]";
|
|
334
|
+
/**
|
|
335
|
+
* A state that is shown by a fill, in forced-colours mode.
|
|
336
|
+
*
|
|
337
|
+
* The system drops the gradient and repaints the background in the page's own
|
|
338
|
+
* colour, so a ticked box, a chosen segment, a pressed toggle and the filled
|
|
339
|
+
* part of a progress bar would look exactly like the empty ones. A system colour
|
|
340
|
+
* written by the page is kept in that mode, so these paint the state in the pair
|
|
341
|
+
* the system uses for a selection, `Highlight` behind `HighlightText`.
|
|
342
|
+
*
|
|
343
|
+
* Never `forced-color-adjust: none` for this. It would keep the colours, and it
|
|
344
|
+
* would also keep the gradient over them and the tinted shadow under them.
|
|
345
|
+
*/
|
|
346
|
+
export declare const forcedFillClasses = "forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
|
|
347
|
+
/** The same, on a control Base UI marks `data-checked`. */
|
|
348
|
+
export declare const forcedCheckedClasses: string;
|
|
349
|
+
/**
|
|
350
|
+
* The same, on a control Base UI marks `data-pressed`.
|
|
351
|
+
*
|
|
352
|
+
* The attribute is what keeps the fill under the pointer. A pressed toggle's own
|
|
353
|
+
* `hover:` and `active:` washes are a class and a pseudo-class, which outrank
|
|
354
|
+
* `forcedFillClasses`' single class, and a wash that is not a system colour is
|
|
355
|
+
* repainted in the page's colour. Written as a class and an attribute, the fill
|
|
356
|
+
* ties with them and comes after them in the stylesheet.
|
|
357
|
+
*/
|
|
358
|
+
export declare const forcedPressedClasses: string;
|
|
359
|
+
/**
|
|
360
|
+
* The label over a highlight that is a separate element — the tile under a
|
|
361
|
+
* chosen segment — which has to be written in the colour drawn on a highlight,
|
|
362
|
+
* or it is the page's text on the system's selection colour.
|
|
363
|
+
*/
|
|
364
|
+
export declare const forcedCheckedTextClasses = "forced-colors:data-[checked]:[color:HighlightText]";
|
|
365
|
+
/**
|
|
366
|
+
* The row of a list or a menu that the pointer and the arrow keys have reached,
|
|
367
|
+
* in forced-colours mode. Its tint is the only thing that marks it, and the rows
|
|
368
|
+
* draw no focus ring because the tint is the focus indicator, so without this a
|
|
369
|
+
* keyboard reader in a contrast theme cannot see which row Enter would choose.
|
|
370
|
+
*
|
|
371
|
+
* The colour is written on everything inside the row as well: a description or
|
|
372
|
+
* a shortcut that sets a muted colour of its own is otherwise put back to the
|
|
373
|
+
* page's text colour, which is unreadable on the highlight.
|
|
374
|
+
*/
|
|
375
|
+
export declare const forcedHighlightedClasses: string;
|
|
376
|
+
/** A checked control that is disabled, in the system's colour for unavailable. */
|
|
377
|
+
export declare const forcedDisabledCheckedClasses: string;
|
|
312
378
|
/**
|
|
313
379
|
* Disabled is **the light going out.** The key keeps its shape, its colour and
|
|
314
380
|
* its place in the layout, and stops catching any light: no gloss, no tinted
|
package/dist/internal/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-0 data-[checked]:size-1.5",sm:"size-0 data-[checked]:size-1.5",md:"size-0 data-[checked]:size-2",lg:"size-0 data-[checked]:size-2",xl:"size-0 data-[checked]:size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,
|
|
1
|
+
export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-0 data-[checked]:size-1.5",sm:"size-0 data-[checked]:size-1.5",md:"size-0 data-[checked]:size-2",lg:"size-0 data-[checked]:size-2",xl:"size-0 data-[checked]:size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","before:absolute before:inset-[calc(50%-12px)]","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,o){const r="solid"===o;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":r?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":r?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const forcedEdgeClasses="forced-colors:border forced-colors:[border-color:ButtonText]";export const forcedFieldEdgeClasses="forced-colors:border forced-colors:[border-color:CanvasText]";export const forcedFillClasses="forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";export const forcedCheckedClasses=/* @__PURE__ */["forced-colors:data-[checked]:[background-color:Highlight]","forced-colors:data-[checked]:[border-color:Highlight]","forced-colors:data-[checked]:[color:HighlightText]"].join(" ");export const forcedPressedClasses=/* @__PURE__ */["forced-colors:data-[pressed]:[background-color:Highlight]","forced-colors:data-[pressed]:[border-color:Highlight]","forced-colors:data-[pressed]:[color:HighlightText]"].join(" ");export const forcedCheckedTextClasses="forced-colors:data-[checked]:[color:HighlightText]";export const forcedHighlightedClasses=/* @__PURE__ */["forced-colors:data-[highlighted]:[background-color:Highlight]","forced-colors:data-[highlighted]:[color:HighlightText]","forced-colors:data-[highlighted]:**:[color:HighlightText]"].join(" ");export const forcedDisabledCheckedClasses=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","forced-colors:data-[checked]:[background-color:GrayText]","forced-colors:data-[checked]:[color:Canvas]"].join(" ");export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none","forced-colors:border forced-colors:[border-color:GrayText]"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]",forcedFieldEdgeClasses,"hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)",forcedFieldEdgeClasses,"[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reading a node as the words it draws, and cutting those words the way a
|
|
3
|
+
* reader cuts them.
|
|
4
|
+
*
|
|
5
|
+
* Both halves exist because more than one component needs them and all of them
|
|
6
|
+
* have to arrive at the same answer as the Flutter build, which reads a widget
|
|
7
|
+
* with `plassTextOf` in `lib/src/internal/text.dart` and cuts with
|
|
8
|
+
* `String.characters`.
|
|
9
|
+
*/
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Everything in a node, flattened to its text.
|
|
13
|
+
*
|
|
14
|
+
* Strings and numbers are their own text, a list is its parts joined, and an
|
|
15
|
+
* element contributes the text of its `children` and nothing else — a walk in,
|
|
16
|
+
* not a render. What a component draws for itself is only decided when it
|
|
17
|
+
* renders and cannot be read here, so a `<PlIcon />` among the children adds
|
|
18
|
+
* nothing, which is exactly right for every caller: a picture of a thing is not
|
|
19
|
+
* its name.
|
|
20
|
+
*
|
|
21
|
+
* Three components need it, and all three need it for the same reason — a
|
|
22
|
+
* string where React would otherwise hand them a tree. `PlBreadcrumb` puts a
|
|
23
|
+
* step's `name` into structured data, `PlChip` hands a chip's words to the label
|
|
24
|
+
* pack so that a language can put a name where its own grammar puts it, and
|
|
25
|
+
* `PlAnimateTyping` types a string one grapheme at a time, because there is no
|
|
26
|
+
* honest way to reveal half of a `<strong>`.
|
|
27
|
+
*/
|
|
28
|
+
export declare function textOf(node: React.ReactNode): string;
|
|
29
|
+
/**
|
|
30
|
+
* The text cut the way a reader would cut it.
|
|
31
|
+
*
|
|
32
|
+
* Not `[...text]`, and not `text.split('')`. A code point is not a character:
|
|
33
|
+
* `👩👩👧` is seven of them, a flag is two, and `한` typed on a Korean keyboard
|
|
34
|
+
* can be three. Cut by code point, each of those comes back as pieces that
|
|
35
|
+
* mean nothing on their own and draw as broken glyphs. `Intl.Segmenter` knows
|
|
36
|
+
* where the boundaries actually are; the spread is the fallback for a runtime
|
|
37
|
+
* that does not have it.
|
|
38
|
+
*/
|
|
39
|
+
export declare function graphemesOf(text: string): string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import*as e from"react";export function textOf(t){return"string"==typeof t||"number"==typeof t?String(t):Array.isArray(t)?t.map(textOf).join(""):e.isValidElement(t)?textOf(t.props.children):""}let t;export function graphemesOf(e){const n=function segmenter(){return void 0===t&&(t="undefined"!=typeof Intl&&"Segmenter"in Intl?new Intl.Segmenter(void 0,{granularity:"grapheme"}):null),t}();return null===n?[...e]:[...n.segment(e)].map(e=>e.segment)}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/** Where a watermark sits on the picture. */
|
|
3
|
+
export type PlassWatermarkPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'tile';
|
|
4
|
+
/** A mark laid over a picture. A bare string is the text, in the usual corner. */
|
|
5
|
+
export interface PlassWatermarkOptions {
|
|
6
|
+
/** What it says. */
|
|
7
|
+
text: string;
|
|
8
|
+
/** One in a corner, or `'tile'` for the whole picture. @default 'bottom-end' */
|
|
9
|
+
placement?: PlassWatermarkPlacement;
|
|
10
|
+
/** How far through it the picture shows. @default 0.55 in a corner, 0.14 tiled */
|
|
11
|
+
opacity?: number;
|
|
12
|
+
/** The turn a tiled mark is set at, in degrees. @default -24 */
|
|
13
|
+
angle?: number;
|
|
14
|
+
/**
|
|
15
|
+
* The ink, as any CSS colour, a token or `currentColor` included. White is what
|
|
16
|
+
* reads on a photograph. @default 'white'
|
|
17
|
+
*/
|
|
18
|
+
color?: string;
|
|
19
|
+
/** The type size, in pixels. @default 13 in a corner, 15 tiled */
|
|
20
|
+
fontSize?: number;
|
|
21
|
+
}
|
|
22
|
+
/** Normalised, so a bare string and a full object are one thing downstream. */
|
|
23
|
+
export declare function watermarkOptions(watermark: string | PlassWatermarkOptions): Required<PlassWatermarkOptions>;
|
|
24
|
+
/**
|
|
25
|
+
* A mark over a picture, in a corner or across the whole of it.
|
|
26
|
+
*
|
|
27
|
+
* It is `aria-hidden` and takes no pointer: a watermark is a claim about the
|
|
28
|
+
* file rather than something the page is telling a reader, and a screen reader
|
|
29
|
+
* announcing "Ada & Co" between the picture and its caption is reading out a
|
|
30
|
+
* stamp. The `alt` text is where a picture says what it is.
|
|
31
|
+
*
|
|
32
|
+
* The tiled layer is **rotated as one layer** rather than each copy being turned
|
|
33
|
+
* on its own, which is what keeps the repeat seamless — turning the tiles inside
|
|
34
|
+
* a straight grid leaves the grid's own lines showing through. It is drawn
|
|
35
|
+
* oversized and centred so the corners the turn opens up are still covered.
|
|
36
|
+
*
|
|
37
|
+
* That rotation is a `transform`, and the house rule it sits beside is about
|
|
38
|
+
* *controls*: a surface under a finger must not resample the label being pressed.
|
|
39
|
+
* Nothing here is pressed and the angle never changes, so it is the same
|
|
40
|
+
* allowance the chevrons in `PlGalleryViewer` are drawn with.
|
|
41
|
+
*/
|
|
42
|
+
export declare function PlassWatermark({ watermark }: {
|
|
43
|
+
watermark: string | PlassWatermarkOptions;
|
|
44
|
+
}): React.JSX.Element | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";export function watermarkOptions(t){const e="string"==typeof t?{text:t}:t,o=e.placement??"bottom-end",a="tile"===o;return{text:e.text,placement:o,opacity:e.opacity??(a?.14:.55),angle:e.angle??-24,color:e.color??"white",fontSize:e.fontSize??(a?15:13)}}const e="calc(max(100cqw, 100cqh) * 1.415)",o={"top-start":"top-2 start-2","top-end":"top-2 end-2","bottom-start":"bottom-2 start-2","bottom-end":"bottom-2 end-2"};export function PlassWatermark({watermark:a}){const{text:n,placement:r,opacity:s,angle:i,color:l,fontSize:c}=watermarkOptions(a);if(""===n)return null;if("tile"===r){const o=function tileUri(t,e){const o=Math.max(120,Math.round(t.length*e*.68)+48),a=Math.round(4.6*e),n=`<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${a}"><text x="0" y="${Math.round(a/2)}" fill="white" font-family="system-ui, sans-serif" font-size="${e}" font-weight="600">${function escapeXml(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}(t)}</text></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(n)}")`}(n,c);return t("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0 overflow-hidden",style:{containerType:"size"},children:t("span",{className:"absolute block",style:{top:"50%",left:"50%",width:e,height:e,translate:"-50% -50%",opacity:s,transform:`rotate(${i}deg)`,backgroundColor:l,WebkitMaskImage:o,maskImage:o,WebkitMaskRepeat:"repeat",maskRepeat:"repeat"}})})}return t("span",{"aria-hidden":"true",className:`pointer-events-none absolute select-none font-semibold ${o[r]}`,style:{opacity:s,color:l,fontSize:c,textShadow:"0 1px 2px rgb(0 0 0 / 0.55)"},children:n})}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The wheel over a strip that runs the other way, and what happens when the
|
|
3
|
+
* strip runs out of room.
|
|
4
|
+
*
|
|
5
|
+
* Two components have the same problem and it is not the one it looks like. A
|
|
6
|
+
* mouse has one wheel, it points down the page, and a strip that runs across
|
|
7
|
+
* the box has no use for that direction — so what the wheel does over a shelf
|
|
8
|
+
* of cards or a bar of tabs is left to the browser, which is to say it is one
|
|
9
|
+
* thing on one machine and another on the next. The pointer being on the strip
|
|
10
|
+
* is the reader saying which of the two things under it they meant to move, and
|
|
11
|
+
* this is what acts on that.
|
|
12
|
+
*
|
|
13
|
+
* The second half is what happens at the end of the strip. A nested scroller
|
|
14
|
+
* that runs out hands the rest of the gesture to the page, and the reader who
|
|
15
|
+
* was flicking a shelf along gets the whole page moving instead, without having
|
|
16
|
+
* asked for it and usually without having noticed which pixel it happened at.
|
|
17
|
+
* `overscroll` is the choice between the two answers, and neither of them is
|
|
18
|
+
* "sometimes": see `PlassOverscroll`.
|
|
19
|
+
*
|
|
20
|
+
* Only the axis the browser has no answer for. A trackpad's two fingers, a tilt
|
|
21
|
+
* wheel and Shift held down all produce a horizontal gesture, which scrolls a
|
|
22
|
+
* horizontal strip on its own — and chains on its own, which is what
|
|
23
|
+
* `overscroll-behavior-x` is for. Nothing here touches those.
|
|
24
|
+
*/
|
|
25
|
+
import * as React from 'react';
|
|
26
|
+
import type { PlassOverscroll } from '../types.js';
|
|
27
|
+
export interface WheelScrollOptions {
|
|
28
|
+
/** Whether the wheel is read at all. A strip that runs down the page is not. */
|
|
29
|
+
enabled: boolean;
|
|
30
|
+
/** What happens once the strip has nowhere left to go. */
|
|
31
|
+
overscroll: PlassOverscroll;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Turns a vertical wheel over a horizontal scroller into travel along it.
|
|
35
|
+
*
|
|
36
|
+
* A native listener rather than `onWheel`, because React attaches its own wheel
|
|
37
|
+
* listener to the root passively, and `preventDefault` inside a passive
|
|
38
|
+
* listener does nothing but log.
|
|
39
|
+
*/
|
|
40
|
+
export declare function useWheelScroll(ref: React.RefObject<HTMLElement | null>, { enabled, overscroll }: WheelScrollOptions): void;
|
|
41
|
+
/**
|
|
42
|
+
* The class that keeps a scroller's *own* axis to itself.
|
|
43
|
+
*
|
|
44
|
+
* The other half of `overscroll`, and it is CSS rather than JavaScript because
|
|
45
|
+
* this axis is one the browser already scrolls: a two-finger swipe along the
|
|
46
|
+
* shelf, and on a Mac the swipe past the end of it that goes back a page.
|
|
47
|
+
*
|
|
48
|
+
* One axis, never both. A horizontal strip that also contained the vertical
|
|
49
|
+
* axis would be a box a finger cannot scroll the page from, which is most of
|
|
50
|
+
* the screen on a phone.
|
|
51
|
+
*/
|
|
52
|
+
export declare function overscrollClasses(overscroll: PlassOverscroll, horizontal: boolean): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import*as e from"react";export function useWheelScroll(t,{enabled:r,overscroll:l}){e.useEffect(()=>{const e=t.current;if(!e||!r)return;let n=Number.NEGATIVE_INFINITY;const onWheel=t=>{if(Math.abs(t.deltaY)<=Math.abs(t.deltaX))return;const r=e.scrollWidth-e.clientWidth;if(r<=1)return;const o=t.deltaMode===t.DOM_DELTA_LINE?16*t.deltaY:t.deltaMode===t.DOM_DELTA_PAGE?t.deltaY*e.clientWidth:t.deltaY,a=Math.abs(e.scrollLeft);if(!(o>0?r-a>1:a>1))return void(("contain"===l||t.timeStamp-n<250)&&t.preventDefault());const i="rtl"===getComputedStyle(e).direction?-1:1;n=t.timeStamp,t.preventDefault(),e.scrollBy({left:o*i,behavior:"instant"})};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[r,l,t])}export function overscrollClasses(e,t){return"contain"!==e?"":t?"overscroll-x-contain":"overscroll-y-contain"}
|
package/dist/internal/window.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const o={macos:{bar:38,radius:10,radiusBottom:10,padX:12,padEnd:12,gap:8,title:13,glyph:7,weight:500,frame:1,band:{side:0,bottom:0},control:{width:12,height:12},titleAlign:"center",controlsSide:"start",shape:"dot",rule:!1,stroke:1.4,boxRadius:0,tint:[6,3],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},macosx:{bar:26,radius:8,radiusBottom:0,padX:10,padEnd:10,gap:8,title:12,glyph:7,weight:700,frame:1,band:{side:0,bottom:0},control:{width:13,height:13},titleAlign:"center",controlsSide:"start",shape:"gloss-dot",rule:!0,stroke:1.5,boxRadius:0,tint:[0,0],accentBorder:!1,paint:{fill:"#e4e4e4",ink:"#333333",dark:!1},image:"repeating-linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 1px, rgb(0 0 0 / 0.035) 1px 2px), linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.07))",shadow:"0 1px 0 rgb(255 255 255 / 0.85)",glass:!1},windows11:{bar:32,radius:8,radiusBottom:8,padX:12,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:46,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[3,1],stroke:1,boxRadius:1.6,accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},windows10:{bar:30,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:45,height:30},titleAlign:"start",controlsSide:"end",shape:"square",rule:!0,tint:[0,0],stroke:.9,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows8:{bar:32,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:11,weight:400,frame:2,band:{side:0,bottom:0},control:{width:45,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[0,0],stroke:1,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows7:{bar:30,radius:7,radiusBottom:0,padX:10,padEnd:3,gap:2,title:12,glyph:10,weight:400,frame:1,band:{side:7,bottom:7},control:{width:29,height:20},closeWidth:45,titleAlign:"start",controlsSide:"end",shape:"aero",rule:!1,tint:[0,0],stroke:1.1,boxRadius:0,accentBorder:!1,paint:{fill:"rgb(198 218 242 / 0.45)",ink:"#12314f",dark:!1},image:"linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1) 46%, rgb(255 255 255 / 0.34) 88%, rgb(255 255 255 / 0.5))",shadow:"0 0 6px rgb(255 255 255 / 0.95), 0 0 3px rgb(255 255 255 / 0.95)",glass:!0},windowsxp:{bar:30,radius:8,radiusBottom:0,padX:6,padEnd:4,gap:2,title:13,glyph:9,weight:700,frame:1,band:{side:4,bottom:4},control:{width:21,height:21},closeWidth:26,titleAlign:"start",controlsSide:"end",shape:"plate",rule:!1,tint:[0,0],stroke:1.8,boxRadius:3,accentBorder:!1,paint:{fill:"#1f66d6",ink:"#ffffff",dark:!0},image:"linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.26) 7%, rgb(0 0 0 / 0.11) 42%, rgb(0 0 0 / 0.05) 56%, rgb(255 255 255 / 0.22) 76%, rgb(255 255 255 / 0.34) 88%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0.34))",shadow:"0 1px 1px rgb(0 0 0 / 0.45)",glass:!1},linux:{bar:44,radius:12,radiusBottom:12,padX:10,padEnd:10,gap:6,title:14,glyph:10,weight:600,frame:1,band:{side:0,bottom:0},control:{width:24,height:24},titleAlign:"center",controlsSide:"end",shape:"circle",rule:!1,stroke:1.2,boxRadius:0,tint:[11,5],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1}},r={xs:.8,sm:.9,md:1,lg:1.15,xl:1.3};export function windowMetrics(e,i){const t=o[e],a=r[i],round=e=>Math.round(e*a),n={width:round(t.control.width),height:round(t.control.height)},s=round(t.gap),l=void 0===t.closeWidth?n.width:round(t.closeWidth);return{bar:round(t.bar),radius:t.radius,radiusBottom:t.radiusBottom,frame:t.frame,band:{side:round(t.band.side),bottom:round(t.band.bottom)},padX:round(t.padX),padEnd:round(t.padEnd),gap:s,title:round(t.title),glyph:round(t.glyph),weight:t.weight,control:n,controlsWidth:e=>e<=0?0:l+(e-1)*n.width+(e-1)*s,closeWidth:l}}export function windowChrome(e){return o[e]}const a={macos:["close","minimize","maximize"],macosx:["close","minimize","maximize"],windows11:["minimize","maximize","close"],windows10:["minimize","maximize","close"],windows8:["minimize","maximize","close"],windows7:["minimize","maximize","close"],windowsxp:["minimize","maximize","close"],linux:["minimize","maximize","close"]};export function orderControls(e,i){return a[e].filter(e=>i.includes(e))}function veil(e,i){const t=Math.round(100*(1-i));return t>=100?e:`color-mix(in oklab, ${e} ${t}%, transparent)`}export function windowSlots(e){const{os:i,color:t,accent:r,transparency:a,active:n,elevation:s}=e,l=o[i],d=Math.min(Math.max(a,0),1),p="var(--plass-surface)",c=l.tint[n?0:1],g=0===c?p:`color-mix(in oklab, ${p} ${100-c}%, var(--plass-fg))`,h=r&&n,u=l.paint,m=u?n?u.fill:`color-mix(in oklab, ${u.fill} 45%, #c6c9ce)`:null,b=h?`var(--plass-${t}-solid)`:m??g,w=h?`var(--plass-${t}-on-solid)`:u?n?u.ink:`color-mix(in oklab, ${u.ink} 60%, transparent)`:n?"var(--plass-fg)":"var(--plass-muted-fg)",x=l.band.side>0,f=x?veil(h?`var(--plass-${t}-solid)`:m??g,d):"transparent",v=x?`color-mix(in oklab, ${h?`var(--plass-${t}-solid)`:m??"var(--plass-border)"} 72%, black)`:h&&l.accentBorder?`var(--plass-${t}-solid)`:n?"var(--plass-border)":"color-mix(in oklab, var(--plass-border) 55%, transparent)",k=h||(u?.dark??!1);return{"--p-window-bar":veil(b,d),"--p-window-bar-fg":w,"--p-window-bar-image":l.image??"none","--p-window-bar-shadow":l.shadow??"none","--p-window-body":veil(p,d),"--p-window-line":v,"--p-window-band":f,"--p-window-hover":k?"rgb(255 255 255 / 0.18)":"color-mix(in oklab, var(--plass-fg) 9%, transparent)","--p-window-press":k?"rgb(255 255 255 / 0.28)":"color-mix(in oklab, var(--plass-fg) 16%, transparent)","--p-window-shadow":`var(--plass-shadow-${n?s:Math.max(s-1,0)})`,"--p-accent":`var(--plass-${t}-accent)`,"--p-ring":`var(--plass-${t}-ring)`}}function Glyph({size:i,stroke:t,round:o,children:r}){return e("svg",{viewBox:"0 0 10 10",width:i,height:i,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:o?"round":"square",strokeLinejoin:o?"round":"miter","aria-hidden":"true",children:r})}function controlGlyph(t,o,r,a){const n=r.stroke,s=r.boxRadius>0||"square"!==r.shape,l=r.boxRadius;return"minimize"===t?e(Glyph,{size:a,stroke:n,round:s,children:e("path",{d:"plate"===r.shape?"M2 7.5h6":"M1.5 5h7"})}):"close"===t?e(Glyph,{size:a,stroke:n,round:s,children:e("path",{d:"m1.6 1.6 6.8 6.8M8.4 1.6 1.6 8.4"})}):o?i(Glyph,{size:a,stroke:n,round:s,children:[e("rect",{x:"1.4",y:"3.4",width:"5.2",height:"5.2",rx:l}),e("path",{d:"M3.6 3.4v-2h5v5h-2"})]}):e(Glyph,{size:a,stroke:n,round:s,children:e("rect",{x:"1.5",y:"1.5",width:"7",height:"7",rx:l})})}const n={close:"#ff5f57",minimize:"#febc2e",maximize:"#28c840"},s={close:"#cf4b36",minimize:"#4b85d4",maximize:"#4b85d4"},l={macos:null,macosx:null,windows11:"#c42b1c",windows10:"#e81123",windows8:"#e81123",windows7:"#e04a45",windowsxp:null,linux:null};export function PlWindowControls({os:i,metrics:r,controls:a,maximized:d,active:p,labels:c,onCommand:g}){const h=o[i],u=orderControls(i,a);if(0===u.length)return null;const m="dot"===h.shape||"gloss-dot"===h.shape,b="circle"===h.shape,w="plate"===h.shape,x="aero"===h.shape;return e("div",{className:t("group/controls flex shrink-0 items-center",x?"self-start":"self-stretch"),style:{gap:r.gap},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:u.map(o=>{const a="maximize"===o&&d?c.restore:c[o],u="close"===o?l[i]:null,{face:f,ink:v,image:k,plate:y}=function controlFace(e,i,t){switch(e.shape){case"dot":case"gloss-dot":return{face:t?n[i]:"color-mix(in oklab, var(--plass-fg) 22%, transparent)",ink:"rgb(0 0 0 / 0.55)",image:"gloss-dot"===e.shape?"radial-gradient(circle at 50% 26%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 62%)":void 0,plate:"gloss-dot"===e.shape?"inset 0 0 0 1px rgb(0 0 0 / 0.22), inset 0 -1px 1px rgb(0 0 0 / 0.15)":void 0};case"plate":return{face:t?s[i]:`color-mix(in oklab, ${s[i]} 45%, #c6c9ce)`,ink:"#ffffff",image:"linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.14))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.4)"};case"aero":return{face:"rgb(255 255 255 / 0.3)",image:"linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08) 52%, rgb(255 255 255 / 0.3))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.55)"};default:return{}}}(h,o,p);return e("button",{type:"button","aria-label":a,title:a,className:t("group/control relative flex shrink-0 cursor-pointer items-center justify-center","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",m||b?"rounded-full":"",b?"bg-(--p-window-hover)":"",f?"bg-(--p-window-face)":"",u?"hover:bg-(--p-window-danger) hover:text-white active:bg-(--p-window-danger)":m?"":w?"hover:brightness-110 active:brightness-95":b?"hover:bg-(--p-window-press) active:bg-(--p-window-press)":x?"hover:brightness-110 active:brightness-95":"hover:bg-(--p-window-hover) active:bg-(--p-window-press)"),style:{width:m?r.control.height:"close"===o?r.closeWidth:r.control.width,height:r.control.height,borderRadius:w?h.boxRadius+1:x?"0 0 3px 3px":void 0,backgroundImage:k,boxShadow:y,color:v,...f?{"--p-window-face":f}:{},...u?{"--p-window-danger":u}:{}},onClick:()=>g(o),children:e("span",{className:t("flex items-center justify-center",m?"opacity-0 [transition:opacity_var(--plass-duration)_var(--plass-ease)] group-hover/controls:opacity-100 group-focus-visible/control:opacity-100":""),children:controlGlyph(o,d,h,r.glyph)})},o)})})}
|
package/dist/locales/de.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const de={close:"Schließen",cancel:"Abbrechen",confirm:"Bestätigen",clear:"Leeren",done:"Fertig",skip:"Überspringen",search:"Suchen",selectAll:"Alle auswählen",selectRow:"Zeile auswählen",remove:"Entfernen",dismiss:"Ausblenden",open:"Öffnen",previous:"Zurück",next:"Weiter",reveal:"Anzeigen",hide:"Verbergen",increase:"Erhöhen",decrease:"Verringern",preview:"Vorschau",empty:"Nichts vorhanden",breadcrumb:"Navigationspfad",breadcrumbExpand:"Ausgeblendete Schritte anzeigen",carousel:"Karussell",carouselPrevious:"Vorheriges Bild",carouselNext:"Nächstes Bild",commandPalette:"Befehlspalette",commandPalettePlaceholder:"Befehle durchsuchen",gallery:"Galerie",chart:"Diagramm",minimize:"Minimieren",maximize:"Maximieren",restore:"Wiederherstellen",resizeWindow:"Fenstergröße ändern",overlay:"Overlay",pagination:"Seitennavigation",paginationPrevious:"Vorherige Seite",paginationNext:"Nächste Seite",paginationFirst:"Erste Seite",paginationLast:"Letzte Seite",rating:"Bewertung",sidebar:"Seitenleiste",sidebarClose:"Seitenleiste schließen",sidebarResize:"Breite der Seitenleiste ändern",skipToContent:"Zum Inhalt springen",backToTop:"Nach oben",onThisPage:"Auf dieser Seite",typing:"Schreibt …",newTab:"(wird in einem neuen Tab geöffnet)",transferAvailable:"Verfügbar",transferSelected:"Ausgewählt",transferToSelected:"Zu den ausgewählten verschieben",transferToAvailable:"Zu den verfügbaren verschieben",copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren nicht möglich",raw:"Unformatiert",code:"Code",previousMonth:"Vorheriger Monat",nextMonth:"Nächster Monat",previousYear:"Vorheriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorherige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat wählen",chooseYear:"Jahr wählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"};
|
|
1
|
+
export const de={close:"Schließen",cancel:"Abbrechen",confirm:"Bestätigen",acknowledge:"OK",clear:"Leeren",done:"Fertig",skip:"Überspringen",search:"Suchen",selectAll:"Alle auswählen",selectRow:"Zeile auswählen",remove:"Entfernen",dismiss:"Ausblenden",open:"Öffnen",previous:"Zurück",next:"Weiter",reveal:"Anzeigen",hide:"Verbergen",increase:"Erhöhen",decrease:"Verringern",preview:"Vorschau",empty:"Nichts vorhanden",optional:"Optional",breadcrumb:"Navigationspfad",breadcrumbExpand:"Ausgeblendete Schritte anzeigen",carousel:"Karussell",carouselPrevious:"Vorheriges Bild",carouselNext:"Nächstes Bild",slide:"Bild",commandPalette:"Befehlspalette",commandPalettePlaceholder:"Befehle durchsuchen",gallery:"Galerie",chart:"Diagramm",minimize:"Minimieren",maximize:"Maximieren",restore:"Wiederherstellen",resizeWindow:"Fenstergröße ändern",overlay:"Overlay",notifications:"Benachrichtigungen",pagination:"Seitennavigation",paginationPrevious:"Vorherige Seite",paginationNext:"Nächste Seite",paginationFirst:"Erste Seite",paginationLast:"Letzte Seite",rating:"Bewertung",sidebar:"Seitenleiste",sidebarOpen:"Seitenleiste öffnen",sidebarClose:"Seitenleiste schließen",sidebarResize:"Breite der Seitenleiste ändern",skipToContent:"Zum Inhalt springen",backToTop:"Nach oben",onThisPage:"Auf dieser Seite",typing:"Schreibt …",messageSending:"Wird gesendet",messageSent:"Gesendet",messageDelivered:"Zugestellt",messageRead:"Gelesen",messageFailed:"Nicht zugestellt",spoilerWarning:"Kann Spoiler enthalten",filePickerTitle:"Dateien hier ablegen oder zum Durchsuchen klicken",newTab:"(wird in einem neuen Tab geöffnet)",transferAvailable:"Verfügbar",transferSelected:"Ausgewählt",transferToSelected:"Zu den ausgewählten verschieben",transferToAvailable:"Zu den verfügbaren verschieben",copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren nicht möglich",raw:"Unformatiert",code:"Code",previousMonth:"Vorheriger Monat",nextMonth:"Nächster Monat",previousYear:"Vorheriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorherige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat wählen",chooseYear:"Jahr wählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende",paginationPage:e=>`Seite ${e}`,paginationStatus:(e,n)=>`Seite ${e} von ${n}`,ratingValue:(e,n)=>`${e.toLocaleString("de")} von ${n}`,ratingNone:"Keine Bewertung",carouselSlide:(e,n)=>`Bild ${e} von ${n}`,galleryItem:(e,n)=>`${e} von ${n}`,removeItem:e=>`${e} entfernen`,addCustom:e=>`„${e}“ hinzufügen`,otpSlot:(e,n)=>`Zeichen ${e} von ${n}`,transferMoved:(e,n)=>`${e} ${1===e?"Eintrag":"Einträge"} nach „${n}“ verschoben`};
|