@surflane/ui 0.3.0 → 0.4.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/README.md +17 -7
- package/dist/advanced-forms.js +24 -24
- package/dist/app-shell.js +8 -8
- package/dist/avatar.d.ts +24 -0
- package/dist/avatar.js +26 -0
- package/dist/button.js +3 -3
- package/dist/chart.js +6 -3
- package/dist/chevron.d.ts +3 -0
- package/dist/chevron.js +6 -0
- package/dist/commands.js +9 -9
- package/dist/content.js +11 -8
- package/dist/context-overlays.js +6 -6
- package/dist/data.js +21 -21
- package/dist/dialog.js +8 -7
- package/dist/disclosure.d.ts +42 -0
- package/dist/disclosure.js +41 -0
- package/dist/feedback.js +14 -14
- package/dist/file-upload.js +1 -1
- package/dist/filter-bar.js +5 -5
- package/dist/forms.js +17 -17
- package/dist/foundations.js +7 -7
- package/dist/icon.js +4 -2
- package/dist/index.d.ts +4 -5
- package/dist/index.js +7 -5
- package/dist/input-extensions.js +11 -11
- package/dist/input.js +1 -1
- package/dist/markdown.js +3 -2
- package/dist/menu.js +14 -14
- package/dist/messages.js +11 -11
- package/dist/navigation-menu.js +9 -9
- package/dist/navigation.d.ts +1 -91
- package/dist/navigation.js +8 -75
- package/dist/otp-field.js +4 -4
- package/dist/pagination.js +1 -1
- package/dist/panels.js +12 -11
- package/dist/parts.d.ts +3 -0
- package/dist/parts.js +8 -1
- package/dist/popover.js +2 -2
- package/dist/scroll-area.js +1 -1
- package/dist/select.js +3 -2
- package/dist/sizing.js +1 -1
- package/dist/status.js +2 -2
- package/dist/syntax-context.d.ts +7 -0
- package/dist/syntax-context.js +4 -0
- package/dist/syntax-highlighter.d.ts +4 -1
- package/dist/syntax-highlighter.js +11 -5
- package/dist/syntax-highlighting.d.ts +8 -0
- package/dist/syntax-highlighting.js +12 -0
- package/dist/tabs.d.ts +29 -0
- package/dist/tabs.js +13 -0
- package/dist/toast.js +14 -14
- package/package.json +57 -8
- package/src/all.css +8 -0
- package/src/styles.css +3571 -3623
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
|
|
3
|
+
declare function AccordionRoot<Value = string>({ className, ...props }: BaseAccordion.Root.Props<Value>): React.JSX.Element;
|
|
4
|
+
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
|
|
5
|
+
indicator?: React.ReactNode;
|
|
6
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
7
|
+
declare const AccordionPanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export declare const Accordion: {
|
|
9
|
+
Root: typeof AccordionRoot;
|
|
10
|
+
Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
|
|
11
|
+
size?: import("./sizing.js").ComponentSize;
|
|
12
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
Header: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
|
|
14
|
+
size?: import("./sizing.js").ComponentSize;
|
|
15
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
16
|
+
Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
|
|
17
|
+
indicator?: React.ReactNode;
|
|
18
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
19
|
+
Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
};
|
|
21
|
+
declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
22
|
+
indicator?: React.ReactNode;
|
|
23
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export declare const Collapsible: {
|
|
26
|
+
Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
|
|
27
|
+
size?: import("./sizing.js").ComponentSize;
|
|
28
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
30
|
+
indicator?: React.ReactNode;
|
|
31
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
+
Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
+
};
|
|
34
|
+
export { AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleTrigger, };
|
|
35
|
+
export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
|
|
36
|
+
size?: import("./sizing.js").ComponentSize;
|
|
37
|
+
} & React.RefAttributes<HTMLHeadingElement>>, AccordionItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
|
|
38
|
+
size?: import("./sizing.js").ComponentSize;
|
|
39
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
|
|
41
|
+
size?: import("./sizing.js").ComponentSize;
|
|
42
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
|
|
5
|
+
import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
|
|
6
|
+
import { Chevron } from './chevron.js';
|
|
7
|
+
import { skin, part } from './parts.js';
|
|
8
|
+
function AccordionRoot({ className, ...props }) {
|
|
9
|
+
return (_jsx(BaseAccordion.Root, { ...props, className: skin('pui-accordion', className) }));
|
|
10
|
+
}
|
|
11
|
+
const AccordionTrigger = /* @__PURE__ */ React.forwardRef(function AccordionTrigger({ className, children, indicator, ...props }, ref) {
|
|
12
|
+
return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
|
|
13
|
+
});
|
|
14
|
+
const AccordionPanel = /* @__PURE__ */ React.forwardRef(function AccordionPanel({ className, children, render, ...props }, ref) {
|
|
15
|
+
return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin('pui-accordion-panel', className), render: render ??
|
|
16
|
+
((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === 'ending' || undefined, "aria-hidden": state.transitionStatus === 'ending' || undefined }))), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
|
|
17
|
+
});
|
|
18
|
+
export const Accordion = {
|
|
19
|
+
...BaseAccordion,
|
|
20
|
+
Root: AccordionRoot,
|
|
21
|
+
Item: /* @__PURE__ */ part(BaseAccordion.Item, 'pui-accordion-item'),
|
|
22
|
+
Header: /* @__PURE__ */ part(BaseAccordion.Header, 'pui-accordion-header'),
|
|
23
|
+
Trigger: AccordionTrigger,
|
|
24
|
+
Panel: AccordionPanel,
|
|
25
|
+
};
|
|
26
|
+
const CollapsibleTrigger = /* @__PURE__ */ React.forwardRef(function CollapsibleTrigger({ className, children, indicator, ...props }, ref) {
|
|
27
|
+
return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
|
|
28
|
+
});
|
|
29
|
+
const CollapsiblePanel = /* @__PURE__ */ React.forwardRef(function CollapsiblePanel({ className, children, ...props }, ref) {
|
|
30
|
+
return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('pui-collapsible-panel', className), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
|
|
31
|
+
});
|
|
32
|
+
export const Collapsible = {
|
|
33
|
+
...BaseCollapsible,
|
|
34
|
+
Root: /* @__PURE__ */ part(BaseCollapsible.Root, 'pui-collapsible'),
|
|
35
|
+
Trigger: CollapsibleTrigger,
|
|
36
|
+
Panel: CollapsiblePanel,
|
|
37
|
+
};
|
|
38
|
+
// Flat names for React Server Components, which cannot dot into client exports.
|
|
39
|
+
export { AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleTrigger, };
|
|
40
|
+
export const { Header: AccordionHeader, Item: AccordionItem } = Accordion;
|
|
41
|
+
export const { Root: CollapsibleRoot } = Collapsible;
|
package/dist/feedback.js
CHANGED
|
@@ -4,30 +4,30 @@ import * as React from 'react';
|
|
|
4
4
|
import { useComponentSize } from './sizing.js';
|
|
5
5
|
import { Progress as BaseProgress } from '@base-ui/react/progress';
|
|
6
6
|
import { Meter as BaseMeter } from '@base-ui/react/meter';
|
|
7
|
-
import { part } from './parts.js';
|
|
7
|
+
import { part, sizeName } from './parts.js';
|
|
8
8
|
export const Progress = {
|
|
9
9
|
...BaseProgress,
|
|
10
|
-
Root: part(BaseProgress.Root, 'pui-gauge pui-progress'),
|
|
11
|
-
Label: part(BaseProgress.Label, 'pui-gauge-label'),
|
|
12
|
-
Value: part(BaseProgress.Value, 'pui-gauge-value'),
|
|
13
|
-
Track: part(BaseProgress.Track, 'pui-gauge-track'),
|
|
14
|
-
Indicator: part(BaseProgress.Indicator, 'pui-gauge-indicator'),
|
|
10
|
+
Root: /* @__PURE__ */ part(BaseProgress.Root, 'pui-gauge pui-progress'),
|
|
11
|
+
Label: /* @__PURE__ */ part(BaseProgress.Label, 'pui-gauge-label'),
|
|
12
|
+
Value: /* @__PURE__ */ part(BaseProgress.Value, 'pui-gauge-value'),
|
|
13
|
+
Track: /* @__PURE__ */ part(BaseProgress.Track, 'pui-gauge-track'),
|
|
14
|
+
Indicator: /* @__PURE__ */ part(BaseProgress.Indicator, 'pui-gauge-indicator'),
|
|
15
15
|
};
|
|
16
16
|
export const Meter = {
|
|
17
17
|
...BaseMeter,
|
|
18
|
-
Root: part(BaseMeter.Root, 'pui-gauge pui-meter'),
|
|
19
|
-
Label: part(BaseMeter.Label, 'pui-gauge-label'),
|
|
20
|
-
Value: part(BaseMeter.Value, 'pui-gauge-value'),
|
|
21
|
-
Track: part(BaseMeter.Track, 'pui-gauge-track'),
|
|
22
|
-
Indicator: part(BaseMeter.Indicator, 'pui-gauge-indicator'),
|
|
18
|
+
Root: /* @__PURE__ */ part(BaseMeter.Root, 'pui-gauge pui-meter'),
|
|
19
|
+
Label: /* @__PURE__ */ part(BaseMeter.Label, 'pui-gauge-label'),
|
|
20
|
+
Value: /* @__PURE__ */ part(BaseMeter.Value, 'pui-gauge-value'),
|
|
21
|
+
Track: /* @__PURE__ */ part(BaseMeter.Track, 'pui-gauge-track'),
|
|
22
|
+
Indicator: /* @__PURE__ */ part(BaseMeter.Indicator, 'pui-gauge-indicator'),
|
|
23
23
|
};
|
|
24
24
|
/** Use decorative within a loading region that already owns the announcement. */
|
|
25
|
-
export const Spinner = React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
|
|
25
|
+
export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
|
|
26
26
|
const scheme = useComponentSize(size);
|
|
27
|
-
return (_jsxs("span", { ...props, ref: ref, className: ['pui-spinner', className].filter(Boolean).join(' '), "data-size": size, "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
|
|
27
|
+
return (_jsxs("span", { ...props, ref: ref, className: ['pui-spinner', className].filter(Boolean).join(' '), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
|
|
28
28
|
});
|
|
29
29
|
/** Decorative placeholder; the owning region provides aria-busy and loading text. */
|
|
30
|
-
export const Skeleton = React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
|
|
30
|
+
export const Skeleton = /* @__PURE__ */ React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
|
|
31
31
|
return (_jsx("span", { ...props, ref: ref, className: ['pui-skeleton', className].filter(Boolean).join(' '), "data-shape": shape, "aria-hidden": 'true' }));
|
|
32
32
|
});
|
|
33
33
|
// Flat names for React Server Components, which cannot dot into client exports.
|
package/dist/file-upload.js
CHANGED
|
@@ -49,7 +49,7 @@ function sizeLabel(bytes) {
|
|
|
49
49
|
return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(bytes / (unit === 'MB' ? 1024 * 1024 : unit === 'KB' ? 1024 : 1))} ${unit}`;
|
|
50
50
|
}
|
|
51
51
|
/** Native selection/validation and a cancellable transport adapter; no network request is built in. */
|
|
52
|
-
export const FileUpload = React.forwardRef(function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }, forwardedRef) {
|
|
52
|
+
export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }, forwardedRef) {
|
|
53
53
|
const labels = {
|
|
54
54
|
...labelsDefault,
|
|
55
55
|
...customLabels,
|
package/dist/filter-bar.js
CHANGED
|
@@ -3,19 +3,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
const cx = (base, extra) => [base, extra].filter(Boolean).join(' ');
|
|
5
5
|
/** Layout only: filtering, routing and async results remain controlled by the caller. */
|
|
6
|
-
const Root = React.forwardRef(function FilterBarRoot({ label, className, ...props }, ref) {
|
|
6
|
+
const Root = /* @__PURE__ */ React.forwardRef(function FilterBarRoot({ label, className, ...props }, ref) {
|
|
7
7
|
return (_jsx("form", { ...props, ref: ref, role: 'search', "aria-label": label, className: cx('pui-filter-bar', className) }));
|
|
8
8
|
});
|
|
9
|
-
const Controls = React.forwardRef(function FilterBarControls({ className, ...props }, ref) {
|
|
9
|
+
const Controls = /* @__PURE__ */ React.forwardRef(function FilterBarControls({ className, ...props }, ref) {
|
|
10
10
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-controls', className) }));
|
|
11
11
|
});
|
|
12
|
-
const Field = React.forwardRef(function FilterBarField({ width = 'filter', className, ...props }, ref) {
|
|
12
|
+
const Field = /* @__PURE__ */ React.forwardRef(function FilterBarField({ width = 'filter', className, ...props }, ref) {
|
|
13
13
|
return (_jsx("label", { ...props, ref: ref, "data-width": width, className: cx('pui-filter-bar-field', className) }));
|
|
14
14
|
});
|
|
15
|
-
const Actions = React.forwardRef(function FilterBarActions({ className, ...props }, ref) {
|
|
15
|
+
const Actions = /* @__PURE__ */ React.forwardRef(function FilterBarActions({ className, ...props }, ref) {
|
|
16
16
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-actions', className) }));
|
|
17
17
|
});
|
|
18
|
-
const Summary = React.forwardRef(function FilterBarSummary({ className, ...props }, ref) {
|
|
18
|
+
const Summary = /* @__PURE__ */ React.forwardRef(function FilterBarSummary({ className, ...props }, ref) {
|
|
19
19
|
return (_jsx("div", { role: 'status', "aria-atomic": 'true', ...props, ref: ref, className: cx('pui-filter-bar-summary', className) }));
|
|
20
20
|
});
|
|
21
21
|
export const FilterBar = { Root, Controls, Field, Actions, Summary };
|
package/dist/forms.js
CHANGED
|
@@ -10,14 +10,14 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-grou
|
|
|
10
10
|
import { Radio as BaseRadio } from '@base-ui/react/radio';
|
|
11
11
|
import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
|
|
12
12
|
import { Switch as BaseSwitch } from '@base-ui/react/switch';
|
|
13
|
-
const ChoiceResetPaint = React.createContext(0);
|
|
13
|
+
const ChoiceResetPaint = /* @__PURE__ */ React.createContext(0);
|
|
14
14
|
import { skin, part } from './parts.js';
|
|
15
|
-
const FieldRoot = part(BaseField.Root, 'pui-field');
|
|
16
|
-
const FieldLabel = part(BaseField.Label, 'pui-field-label');
|
|
17
|
-
const FieldControl = part(BaseField.Control, 'pui-input');
|
|
18
|
-
const FieldDescription = part(BaseField.Description, 'pui-field-description');
|
|
19
|
-
const FieldError = part(BaseField.Error, 'pui-field-error');
|
|
20
|
-
const FieldItem = part(BaseField.Item, 'pui-field-item');
|
|
15
|
+
const FieldRoot = /* @__PURE__ */ part(BaseField.Root, 'pui-field');
|
|
16
|
+
const FieldLabel = /* @__PURE__ */ part(BaseField.Label, 'pui-field-label');
|
|
17
|
+
const FieldControl = /* @__PURE__ */ part(BaseField.Control, 'pui-input');
|
|
18
|
+
const FieldDescription = /* @__PURE__ */ part(BaseField.Description, 'pui-field-description');
|
|
19
|
+
const FieldError = /* @__PURE__ */ part(BaseField.Error, 'pui-field-error');
|
|
20
|
+
const FieldItem = /* @__PURE__ */ part(BaseField.Item, 'pui-field-item');
|
|
21
21
|
export const Field = {
|
|
22
22
|
...BaseField,
|
|
23
23
|
Root: FieldRoot,
|
|
@@ -29,20 +29,20 @@ export const Field = {
|
|
|
29
29
|
};
|
|
30
30
|
export const Fieldset = {
|
|
31
31
|
...BaseFieldset,
|
|
32
|
-
Root: part(BaseFieldset.Root, 'pui-fieldset'),
|
|
33
|
-
Legend: part(BaseFieldset.Legend, 'pui-fieldset-legend'),
|
|
32
|
+
Root: /* @__PURE__ */ part(BaseFieldset.Root, 'pui-fieldset'),
|
|
33
|
+
Legend: /* @__PURE__ */ part(BaseFieldset.Legend, 'pui-fieldset-legend'),
|
|
34
34
|
};
|
|
35
35
|
export function Form({ className, ...props }) {
|
|
36
36
|
return _jsx(BaseForm, { ...props, className: skin('pui-form', className) });
|
|
37
37
|
}
|
|
38
|
-
export const Textarea = React.forwardRef(function Textarea({ className, size, ...props }, ref) {
|
|
38
|
+
export const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ className, size, ...props }, ref) {
|
|
39
39
|
const scheme = useComponentSize(size);
|
|
40
40
|
return (_jsx("textarea", { "data-ui-size": scheme, ...props, ref: ref, className: ['pui-input pui-textarea', className]
|
|
41
41
|
.filter(Boolean)
|
|
42
42
|
.join(' ') }));
|
|
43
43
|
});
|
|
44
44
|
import { useRootRef, useResetValue } from './form-state.js';
|
|
45
|
-
const CheckboxRoot = React.forwardRef(function CheckboxRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
|
|
45
|
+
const CheckboxRoot = /* @__PURE__ */ React.forwardRef(function CheckboxRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
|
|
46
46
|
React.useContext(ChoiceResetPaint);
|
|
47
47
|
const [element, attach] = useRootRef(ref);
|
|
48
48
|
const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
|
|
@@ -52,7 +52,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot({ checked, defaultCh
|
|
|
52
52
|
setSelected(next);
|
|
53
53
|
} }));
|
|
54
54
|
});
|
|
55
|
-
const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
|
|
55
|
+
const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
|
|
56
56
|
return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin('pui-checkbox-indicator', className), children: children ?? (_jsxs("svg", { width: '14', height: '14', viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("path", { className: 'pui-checkbox-check', d: 'm4 10 4 4 8-8' }), _jsx("path", { className: 'pui-checkbox-mixed', d: 'M4 10h12' })] })) }));
|
|
57
57
|
});
|
|
58
58
|
export const Checkbox = {
|
|
@@ -60,7 +60,7 @@ export const Checkbox = {
|
|
|
60
60
|
Root: CheckboxRoot,
|
|
61
61
|
Indicator: CheckboxIndicator,
|
|
62
62
|
};
|
|
63
|
-
export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
|
|
63
|
+
export const CheckboxGroup = /* @__PURE__ */ React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
|
|
64
64
|
const [element, attach] = useRootRef(ref);
|
|
65
65
|
const [selected, setSelected, revision] = useResetValue(value, defaultValue, element);
|
|
66
66
|
return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
|
|
@@ -78,16 +78,16 @@ export function RadioGroup({ value, defaultValue, onValueChange, className, form
|
|
|
78
78
|
setSelected(next);
|
|
79
79
|
} }) }));
|
|
80
80
|
}
|
|
81
|
-
const RadioRoot = React.forwardRef(function RadioRoot({ className, ...props }, ref) {
|
|
81
|
+
const RadioRoot = /* @__PURE__ */ React.forwardRef(function RadioRoot({ className, ...props }, ref) {
|
|
82
82
|
React.useContext(ChoiceResetPaint);
|
|
83
83
|
return (_jsx(BaseRadio.Root, { ...props, ref: ref, className: skin('pui-radio', className) }));
|
|
84
84
|
});
|
|
85
85
|
export const Radio = {
|
|
86
86
|
...BaseRadio,
|
|
87
87
|
Root: RadioRoot,
|
|
88
|
-
Indicator: part(BaseRadio.Indicator, 'pui-radio-indicator'),
|
|
88
|
+
Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'pui-radio-indicator'),
|
|
89
89
|
};
|
|
90
|
-
const SwitchRoot = React.forwardRef(function SwitchRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
|
|
90
|
+
const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
|
|
91
91
|
const [element, attach] = useRootRef(ref);
|
|
92
92
|
const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
|
|
93
93
|
return (_jsx(BaseSwitch.Root, { ...props, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
|
|
@@ -99,7 +99,7 @@ const SwitchRoot = React.forwardRef(function SwitchRoot({ checked, defaultChecke
|
|
|
99
99
|
export const Switch = {
|
|
100
100
|
...BaseSwitch,
|
|
101
101
|
Root: SwitchRoot,
|
|
102
|
-
Thumb: part(BaseSwitch.Thumb, 'pui-switch-thumb'),
|
|
102
|
+
Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
|
|
103
103
|
};
|
|
104
104
|
// Flat names for React Server Components, which cannot dot into client exports.
|
|
105
105
|
export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };
|
package/dist/foundations.js
CHANGED
|
@@ -6,23 +6,23 @@ const gapStyle = (gap, style) => ({
|
|
|
6
6
|
...(gap === undefined ? {} : { '--layout-gap': `var(--space-${gap})` }),
|
|
7
7
|
...style,
|
|
8
8
|
});
|
|
9
|
-
export const Container = React.forwardRef(function Container({ width = 'workspace', className, ...props }, ref) {
|
|
9
|
+
export const Container = /* @__PURE__ */ React.forwardRef(function Container({ width = 'workspace', className, ...props }, ref) {
|
|
10
10
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-container', className), "data-width": width }));
|
|
11
11
|
});
|
|
12
|
-
export const Stack = React.forwardRef(function Stack({ gap, className, style, ...props }, ref) {
|
|
12
|
+
export const Stack = /* @__PURE__ */ React.forwardRef(function Stack({ gap, className, style, ...props }, ref) {
|
|
13
13
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-stack', className), style: gapStyle(gap, style) }));
|
|
14
14
|
});
|
|
15
|
-
export const Inline = React.forwardRef(function Inline({ gap, justify = 'start', className, style, ...props }, ref) {
|
|
15
|
+
export const Inline = /* @__PURE__ */ React.forwardRef(function Inline({ gap, justify = 'start', className, style, ...props }, ref) {
|
|
16
16
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-inline', className), "data-justify": justify, style: gapStyle(gap, style) }));
|
|
17
17
|
});
|
|
18
|
-
export const Grid = React.forwardRef(function Grid({ gap, bleed = 0, columns = 3, className, style, ...props }, ref) {
|
|
18
|
+
export const Grid = /* @__PURE__ */ React.forwardRef(function Grid({ gap, bleed = 0, columns = 3, className, style, ...props }, ref) {
|
|
19
19
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-grid', className), "data-columns": columns, style: gapStyle(gap, {
|
|
20
20
|
'--grid-inline-bleed': `var(--space-${bleed})`,
|
|
21
21
|
...style,
|
|
22
22
|
}) }));
|
|
23
23
|
});
|
|
24
24
|
/** Spans are explicit at each viewport breakpoint; placement follows DOM order. */
|
|
25
|
-
export const GridItem = React.forwardRef(function GridItem({ span, mediumSpan, smallSpan, className, style, ...props }, ref) {
|
|
25
|
+
export const GridItem = /* @__PURE__ */ React.forwardRef(function GridItem({ span, mediumSpan, smallSpan, className, style, ...props }, ref) {
|
|
26
26
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-grid-item', className), style: {
|
|
27
27
|
'--grid-item-span': span,
|
|
28
28
|
'--grid-item-span-medium': mediumSpan,
|
|
@@ -30,7 +30,7 @@ export const GridItem = React.forwardRef(function GridItem({ span, mediumSpan, s
|
|
|
30
30
|
...style,
|
|
31
31
|
} }));
|
|
32
32
|
});
|
|
33
|
-
export const Surface = React.forwardRef(function Surface({ tone = 'subtle', padding, className, style, ...props }, ref) {
|
|
33
|
+
export const Surface = /* @__PURE__ */ React.forwardRef(function Surface({ tone = 'subtle', padding, className, style, ...props }, ref) {
|
|
34
34
|
return (_jsx("div", { ...props, ref: ref, className: cx('pui-surface', className), "data-tone": tone, style: {
|
|
35
35
|
...(padding === undefined
|
|
36
36
|
? {}
|
|
@@ -50,6 +50,6 @@ export function PageHeader({ as: Root = 'div', headingProps, actionsLabel, title
|
|
|
50
50
|
description !== false &&
|
|
51
51
|
description !== '' && (_jsx(Text, { color: 'secondary', className: 'pui-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'pui-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
|
|
52
52
|
}
|
|
53
|
-
export const Prose = React.forwardRef(function Prose({ className, ...props }, ref) {
|
|
53
|
+
export const Prose = /* @__PURE__ */ React.forwardRef(function Prose({ className, ...props }, ref) {
|
|
54
54
|
return _jsx("div", { ...props, ref: ref, className: cx('pui-prose', className) });
|
|
55
55
|
});
|
package/dist/icon.js
CHANGED
|
@@ -24,6 +24,8 @@ const shapes = {
|
|
|
24
24
|
};
|
|
25
25
|
export const iconNames = Object.keys(shapes);
|
|
26
26
|
/** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
|
|
27
|
-
export const Icon = React.forwardRef(function Icon({ name, size = 'sm', decorative = true, label, className, ...props }, ref) {
|
|
28
|
-
return (_jsx("svg", { ...props, ref: ref, className: ['pui-icon', className].filter(Boolean).join(' '), "data-size": size, "data-directional": name === 'chevron-forward' || name === 'arrow-back'
|
|
27
|
+
export const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ name, size = 'sm', decorative = true, label, className, ...props }, ref) {
|
|
28
|
+
return (_jsx("svg", { ...props, ref: ref, className: ['pui-icon', className].filter(Boolean).join(' '), "data-size": size, "data-directional": name === 'chevron-forward' || name === 'arrow-back'
|
|
29
|
+
? 'true'
|
|
30
|
+
: undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
|
|
29
31
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,10 @@ export { ScrollArea } from './scroll-area.js';
|
|
|
11
11
|
export { Sheet, Drawer, type PanelSide, SheetBackdrop, SheetClose, SheetDescription, SheetHandle, SheetPopup, SheetPortal, SheetRoot, SheetTitle, SheetTrigger, SheetViewport, SheetContent, SheetHeader, SheetBody, SheetFooter, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerRoot, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DrawerVirtualKeyboardProvider, DrawerPrimitiveContent, DrawerHeader, DrawerBody, DrawerFooter, } from './panels.js';
|
|
12
12
|
export { Container, Stack, Inline, Grid, GridItem, Surface, Heading, Text, PageHeader, Prose, type Space, } from './foundations.js';
|
|
13
13
|
export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, FieldValidity, FieldsetLegend, FieldsetRoot, CheckboxIndicator, CheckboxRoot, RadioIndicator, RadioRoot, SwitchRoot, SwitchThumb, } from './forms.js';
|
|
14
|
-
export { Tabs,
|
|
14
|
+
export { Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, } from './tabs.js';
|
|
15
|
+
export { Accordion, Collapsible, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, } from './disclosure.js';
|
|
16
|
+
export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
|
|
17
|
+
export { Separator, Link, Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './navigation.js';
|
|
15
18
|
export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from './status.js';
|
|
16
19
|
export { Progress, Meter, Spinner, Skeleton, type SpinnerProps, type SkeletonProps, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './feedback.js';
|
|
17
20
|
export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, type TableDensity, type TableSort, } from './data.js';
|
|
@@ -31,8 +34,4 @@ export { FileUpload, type FileUploadProps, type UploadTransport, type FileUpload
|
|
|
31
34
|
export { Icon, iconNames, type IconName, type IconProps } from './icon.js';
|
|
32
35
|
export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';
|
|
33
36
|
export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
|
|
34
|
-
export { Tree, type TreeNode, type TreeProps } from './tree.js';
|
|
35
|
-
export { DatePicker, DateRangePicker, TimeField, DateLocaleProvider, type DatePickerProps, type DateRangePickerProps, type TimeFieldProps, type DateValue, type TimeValue, } from './date-picker.js';
|
|
36
|
-
export { Chart, type ChartDatum, type ChartSeries, type ChartProps, } from './chart.js';
|
|
37
37
|
export { SyntaxHighlighter, syntaxLanguages, type SyntaxHighlighterProps, } from './syntax-highlighter.js';
|
|
38
|
-
export { Markdown, type MarkdownProps } from './markdown.js';
|
package/dist/index.js
CHANGED
|
@@ -12,7 +12,10 @@ export { ScrollArea } from './scroll-area.js';
|
|
|
12
12
|
export { Sheet, Drawer, SheetBackdrop, SheetClose, SheetDescription, SheetHandle, SheetPopup, SheetPortal, SheetRoot, SheetTitle, SheetTrigger, SheetViewport, SheetContent, SheetHeader, SheetBody, SheetFooter, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerRoot, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DrawerVirtualKeyboardProvider, DrawerPrimitiveContent, DrawerHeader, DrawerBody, DrawerFooter, } from './panels.js';
|
|
13
13
|
export { Container, Stack, Inline, Grid, GridItem, Surface, Heading, Text, PageHeader, Prose, } from './foundations.js';
|
|
14
14
|
export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, FieldValidity, FieldsetLegend, FieldsetRoot, CheckboxIndicator, CheckboxRoot, RadioIndicator, RadioRoot, SwitchRoot, SwitchThumb, } from './forms.js';
|
|
15
|
-
export { Tabs,
|
|
15
|
+
export { Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, } from './tabs.js';
|
|
16
|
+
export { Accordion, Collapsible, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, } from './disclosure.js';
|
|
17
|
+
export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
|
|
18
|
+
export { Separator, Link, Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './navigation.js';
|
|
16
19
|
export { Badge, StatusBadge, } from './status.js';
|
|
17
20
|
export { Progress, Meter, Spinner, Skeleton, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './feedback.js';
|
|
18
21
|
export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './data.js';
|
|
@@ -32,8 +35,7 @@ export { FileUpload, } from './file-upload.js';
|
|
|
32
35
|
export { Icon, iconNames } from './icon.js';
|
|
33
36
|
export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';
|
|
34
37
|
export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
// Chart, DatePicker, Markdown, Tree and syntax highlighting need optional packages, so
|
|
39
|
+
// they live on their own entry points: @surflane/ui/chart, /date-picker, /markdown, /tree
|
|
40
|
+
// and /syntax-highlighting.
|
|
38
41
|
export { SyntaxHighlighter, syntaxLanguages, } from './syntax-highlighter.js';
|
|
39
|
-
export { Markdown } from './markdown.js';
|
package/dist/input-extensions.js
CHANGED
|
@@ -15,10 +15,10 @@ const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defa
|
|
|
15
15
|
setQuery(next);
|
|
16
16
|
}, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
|
|
17
17
|
};
|
|
18
|
-
const AutoTrigger = React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
|
|
18
|
+
const AutoTrigger = /* @__PURE__ */ React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
|
|
19
19
|
return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
|
|
20
20
|
});
|
|
21
|
-
const AutoClear = React.forwardRef(function AutoClear(props, ref) {
|
|
21
|
+
const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref) {
|
|
22
22
|
return _jsx(Combobox.Clear, { "aria-label": 'Clear input', ...props, ref: ref });
|
|
23
23
|
});
|
|
24
24
|
export const Autocomplete = {
|
|
@@ -35,9 +35,9 @@ export const Autocomplete = {
|
|
|
35
35
|
GroupLabel: Combobox.GroupLabel,
|
|
36
36
|
Clear: AutoClear,
|
|
37
37
|
Trigger: AutoTrigger,
|
|
38
|
-
InputGroup: part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
|
|
39
|
-
Item: part(BaseAutocomplete.Item, 'pui-combobox-item'),
|
|
40
|
-
Separator: part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
|
|
38
|
+
InputGroup: /* @__PURE__ */ part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
|
|
39
|
+
Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'pui-combobox-item'),
|
|
40
|
+
Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
|
|
41
41
|
};
|
|
42
42
|
function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
|
|
43
43
|
const [element, attach] = useRootRef(ref);
|
|
@@ -51,12 +51,12 @@ function SliderRoot({ value, defaultValue, onValueChange, ref, className, form,
|
|
|
51
51
|
export const Slider = {
|
|
52
52
|
...BaseSlider,
|
|
53
53
|
Root: SliderRoot,
|
|
54
|
-
Label: part(BaseSlider.Label, 'pui-slider-label'),
|
|
55
|
-
Value: part(BaseSlider.Value, 'pui-slider-value'),
|
|
56
|
-
Control: part(BaseSlider.Control, 'pui-slider-control'),
|
|
57
|
-
Track: part(BaseSlider.Track, 'pui-slider-track'),
|
|
58
|
-
Indicator: part(BaseSlider.Indicator, 'pui-slider-indicator'),
|
|
59
|
-
Thumb: part(BaseSlider.Thumb, 'pui-slider-thumb'),
|
|
54
|
+
Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
|
|
55
|
+
Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
|
|
56
|
+
Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
|
|
57
|
+
Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
|
|
58
|
+
Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
|
|
59
|
+
Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
|
|
60
60
|
};
|
|
61
61
|
// Flat names for React Server Components, which cannot dot into client exports.
|
|
62
62
|
export { AutocompleteRoot, SliderRoot };
|
package/dist/input.js
CHANGED
|
@@ -4,7 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { useComponentSize } from './sizing.js';
|
|
5
5
|
import { Input as BaseInput } from '@base-ui/react/input';
|
|
6
6
|
const cx = (...v) => v.filter(Boolean).join(' ');
|
|
7
|
-
export const Input = React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
|
|
7
|
+
export const Input = /* @__PURE__ */ React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
|
|
8
8
|
const scheme = useComponentSize(typeof size === 'string' ? size : undefined);
|
|
9
9
|
return (_jsxs("span", { "data-ui-size": scheme, className: cx('pui-control', wrapperClassName), "data-leading-icon": leadingIcon ? '' : undefined, "data-disabled": props.disabled || undefined, children: [leadingIcon && (_jsx("span", { className: 'pui-control-icon control-icon', "aria-hidden": 'true', children: leadingIcon })), _jsx(BaseInput, { ...props, size: typeof size === 'number' ? size : undefined, ref: ref, className: cx('pui-input', className) })] }));
|
|
10
10
|
});
|
package/dist/markdown.js
CHANGED
|
@@ -20,7 +20,7 @@ function visit(node, callback) {
|
|
|
20
20
|
}
|
|
21
21
|
/** CommonMark + GFM. HTML stays disabled, URLs use react-markdown's safe default.
|
|
22
22
|
* Fetching, permissions, frontmatter, MDX and script execution are caller concerns. */
|
|
23
|
-
export const Markdown = React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
|
|
23
|
+
export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
|
|
24
24
|
const prefix = `md-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
|
|
25
25
|
const headings = React.useMemo(() => () => (tree) => {
|
|
26
26
|
const counts = new Map();
|
|
@@ -91,7 +91,8 @@ export const Markdown = React.forwardRef(function Markdown({ source, label = 'Ma
|
|
|
91
91
|
const child = React.Children.toArray(children)[0];
|
|
92
92
|
if (!React.isValidElement(child))
|
|
93
93
|
return _jsx("pre", { children: children });
|
|
94
|
-
const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ??
|
|
94
|
+
const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ??
|
|
95
|
+
'text';
|
|
95
96
|
const code = String(child.props.children ?? '').replace(/\n$/, '');
|
|
96
97
|
return (_jsx(CodeBlock, { code: code, language: language, wrap: codeWrap, label: `${label}: code at line ${node?.position?.start.line ?? 1}` }));
|
|
97
98
|
},
|
package/dist/menu.js
CHANGED
|
@@ -3,21 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Menu as BaseMenu } from '@base-ui/react/menu';
|
|
5
5
|
import { skin, part } from './parts.js';
|
|
6
|
-
const MenuPopup = part(BaseMenu.Popup, 'pui-menu');
|
|
7
|
-
const MenuPositioner = part(BaseMenu.Positioner, 'pui-positioner');
|
|
8
|
-
const MenuContent = React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
|
|
6
|
+
const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'pui-menu');
|
|
7
|
+
const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'pui-positioner');
|
|
8
|
+
const MenuContent = /* @__PURE__ */ React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
|
|
9
9
|
return (_jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }));
|
|
10
10
|
});
|
|
11
|
-
const MenuTrigger = React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
|
|
11
|
+
const MenuTrigger = /* @__PURE__ */ React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
|
|
12
12
|
return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-menu-trigger', className) }));
|
|
13
13
|
});
|
|
14
|
-
const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
|
|
14
|
+
const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
|
|
15
15
|
return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) })) }));
|
|
16
16
|
});
|
|
17
|
-
const RadioIndicator = React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
|
|
17
|
+
const RadioIndicator = /* @__PURE__ */ React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
|
|
18
18
|
return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
|
|
19
19
|
});
|
|
20
|
-
const SubmenuTrigger = React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
|
|
20
|
+
const SubmenuTrigger = /* @__PURE__ */ React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
|
|
21
21
|
return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('pui-menu-item pui-menu-submenu-trigger', className), children: [children, indicator === false
|
|
22
22
|
? null
|
|
23
23
|
: (indicator ?? (_jsx("svg", { className: 'pui-submenu-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) })))] }));
|
|
@@ -31,13 +31,13 @@ export const Menu = {
|
|
|
31
31
|
CheckboxItemIndicator: CheckboxIndicator,
|
|
32
32
|
RadioItemIndicator: RadioIndicator,
|
|
33
33
|
SubmenuTrigger,
|
|
34
|
-
Item: part(BaseMenu.Item, 'pui-menu-item'),
|
|
35
|
-
LinkItem: part(BaseMenu.LinkItem, 'pui-menu-item'),
|
|
36
|
-
CheckboxItem: part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
|
|
37
|
-
RadioItem: part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
|
|
38
|
-
GroupLabel: part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
|
|
39
|
-
Separator: part(BaseMenu.Separator, 'pui-menu-separator'),
|
|
40
|
-
Input: part(BaseMenu.Input, 'pui-input'),
|
|
34
|
+
Item: /* @__PURE__ */ part(BaseMenu.Item, 'pui-menu-item'),
|
|
35
|
+
LinkItem: /* @__PURE__ */ part(BaseMenu.LinkItem, 'pui-menu-item'),
|
|
36
|
+
CheckboxItem: /* @__PURE__ */ part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
|
|
37
|
+
RadioItem: /* @__PURE__ */ part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
|
|
38
|
+
GroupLabel: /* @__PURE__ */ part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
|
|
39
|
+
Separator: /* @__PURE__ */ part(BaseMenu.Separator, 'pui-menu-separator'),
|
|
40
|
+
Input: /* @__PURE__ */ part(BaseMenu.Input, 'pui-input'),
|
|
41
41
|
};
|
|
42
42
|
// Flat names for React Server Components, which cannot dot into client exports.
|
|
43
43
|
export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent };
|
package/dist/messages.js
CHANGED
|
@@ -4,22 +4,22 @@ import * as React from 'react';
|
|
|
4
4
|
import { useToneTransition } from './tone-transition.js';
|
|
5
5
|
import { part } from './parts.js';
|
|
6
6
|
import { StatusIcon } from './status.js';
|
|
7
|
-
const MessageRoot = React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
|
|
7
|
+
const MessageRoot = /* @__PURE__ */ React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
|
|
8
8
|
const elementRef = useToneTransition(tone, ref);
|
|
9
9
|
return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: ['pui-message', className].filter(Boolean).join(' ') }));
|
|
10
10
|
});
|
|
11
|
-
const MessageIcon = React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
|
|
11
|
+
const MessageIcon = /* @__PURE__ */ React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
|
|
12
12
|
return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-message-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
|
|
13
13
|
});
|
|
14
14
|
export const InlineMessage = {
|
|
15
15
|
Root: MessageRoot,
|
|
16
16
|
Icon: MessageIcon,
|
|
17
|
-
Content: part('div', 'pui-message-content'),
|
|
18
|
-
Title: part('strong', 'pui-message-title'),
|
|
19
|
-
Description: part('p', 'pui-message-description'),
|
|
20
|
-
Actions: part('div', 'pui-message-actions'),
|
|
17
|
+
Content: /* @__PURE__ */ part('div', 'pui-message-content'),
|
|
18
|
+
Title: /* @__PURE__ */ part('strong', 'pui-message-title'),
|
|
19
|
+
Description: /* @__PURE__ */ part('p', 'pui-message-description'),
|
|
20
|
+
Actions: /* @__PURE__ */ part('div', 'pui-message-actions'),
|
|
21
21
|
};
|
|
22
|
-
const EmptyTitle = React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
|
|
22
|
+
const EmptyTitle = /* @__PURE__ */ React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
|
|
23
23
|
return React.createElement(`h${level}`, {
|
|
24
24
|
...props,
|
|
25
25
|
ref,
|
|
@@ -27,11 +27,11 @@ const EmptyTitle = React.forwardRef(function EmptyTitle({ level = 3, className,
|
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
29
|
export const EmptyState = {
|
|
30
|
-
Root: part('div', 'pui-empty'),
|
|
31
|
-
Icon: part('div', 'pui-empty-icon'),
|
|
30
|
+
Root: /* @__PURE__ */ part('div', 'pui-empty'),
|
|
31
|
+
Icon: /* @__PURE__ */ part('div', 'pui-empty-icon'),
|
|
32
32
|
Title: EmptyTitle,
|
|
33
|
-
Description: part('p', 'pui-empty-description'),
|
|
34
|
-
Actions: part('div', 'pui-empty-actions'),
|
|
33
|
+
Description: /* @__PURE__ */ part('p', 'pui-empty-description'),
|
|
34
|
+
Actions: /* @__PURE__ */ part('div', 'pui-empty-actions'),
|
|
35
35
|
};
|
|
36
36
|
// Flat names for React Server Components, which cannot dot into client exports.
|
|
37
37
|
export const { Root: EmptyStateRoot, Icon: EmptyStateIcon, Title: EmptyStateTitle, Description: EmptyStateDescription, Actions: EmptyStateActions, } = EmptyState;
|
package/dist/navigation-menu.js
CHANGED
|
@@ -7,7 +7,7 @@ function Root(props) {
|
|
|
7
7
|
const { className, orientation = 'horizontal', ...rest } = props;
|
|
8
8
|
return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('pui-navigation-menu', className) }));
|
|
9
9
|
}
|
|
10
|
-
const Trigger = React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
|
|
10
|
+
const Trigger = /* @__PURE__ */ React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
|
|
11
11
|
return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-navigation-trigger', className), children: [children, indicator === false
|
|
12
12
|
? null
|
|
13
13
|
: (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) }) })))] }));
|
|
@@ -16,14 +16,14 @@ export const NavigationMenu = {
|
|
|
16
16
|
...BaseNavigationMenu,
|
|
17
17
|
Root,
|
|
18
18
|
Trigger,
|
|
19
|
-
List: part(BaseNavigationMenu.List, 'pui-navigation-list'),
|
|
20
|
-
Item: part(BaseNavigationMenu.Item, 'pui-navigation-item'),
|
|
21
|
-
Link: part(BaseNavigationMenu.Link, 'pui-navigation-link'),
|
|
22
|
-
Content: part(BaseNavigationMenu.Content, 'pui-navigation-content'),
|
|
23
|
-
Positioner: part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
|
|
24
|
-
Popup: part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
|
|
25
|
-
Viewport: part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
|
|
26
|
-
Icon: React.forwardRef(function Icon({ children, className, ...props }, ref) {
|
|
19
|
+
List: /* @__PURE__ */ part(BaseNavigationMenu.List, 'pui-navigation-list'),
|
|
20
|
+
Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'pui-navigation-item'),
|
|
21
|
+
Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'pui-navigation-link'),
|
|
22
|
+
Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'pui-navigation-content'),
|
|
23
|
+
Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
|
|
24
|
+
Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
|
|
25
|
+
Viewport: /* @__PURE__ */ part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
|
|
26
|
+
Icon: /* @__PURE__ */ React.forwardRef(function Icon({ children, className, ...props }, ref) {
|
|
27
27
|
return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
|
|
28
28
|
}),
|
|
29
29
|
};
|