@once-ui-system/core 1.8.5 → 2.0.0-alpha.1

package/dist/components/StylePanel.js

@@ -1,193 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from "react";
-import { Flex, Text, SegmentedControl, IconButton, Scroller, Column, ThemeSwitcher } from ".";
-import { useStyle, } from "../contexts/ThemeProvider";
-import { useDataTheme } from "../contexts/DataThemeProvider";
-import styles from "./StylePanel.module.scss";
-import classNames from "clsx";
-import { schemes } from "../types";
-const shapes = ["sharp", "conservative", "playful", "rounded"];
-const colorOptions = {
-    brand: [...schemes],
-    accent: [...schemes],
-    neutral: ["gray", "sand", "slate", "dusk", "mint", "rose"],
-};
-const StylePanel = forwardRef(({ ...rest }, ref) => {
-    const styleContext = useStyle();
-    const { mode: chartMode, setChartOptions } = useDataTheme();
-    const [mounted, setMounted] = useState(false);
-    const [borderValue, setBorderValue] = useState("playful");
-    const [brandValue, setBrandValue] = useState("blue");
-    const [accentValue, setAccentValue] = useState("indigo");
-    const [neutralValue, setNeutralValue] = useState("gray");
-    const [solidValue, setSolidValue] = useState("contrast");
-    const [solidStyleValue, setSolidStyleValue] = useState("flat");
-    const [surfaceValue, setSurfaceValue] = useState("filled");
-    const [scalingValue, setScalingValue] = useState("100");
-    const [chartModeValue, setChartModeValue] = useState("categorical");
-    const [transitionValue, setTransitionValue] = useState("all");
-    useEffect(() => {
-        if (typeof window !== "undefined") {
-            const storedSolid = localStorage.getItem("data-solid");
-            const storedSolidStyle = localStorage.getItem("data-solid-style");
-            if (storedSolid)
-                setSolidValue(storedSolid);
-            if (storedSolidStyle)
-                setSolidStyleValue(storedSolidStyle);
-        }
-    }, []);
-    useEffect(() => {
-        setMounted(true);
-        if (mounted) {
-            setBorderValue(styleContext.border);
-            setBrandValue(styleContext.brand);
-            setAccentValue(styleContext.accent);
-            setNeutralValue(styleContext.neutral);
-            setSurfaceValue(styleContext.surface);
-            setScalingValue(styleContext.scaling);
-            setTransitionValue(styleContext.transition);
-        }
-        // Chart mode is handled separately
-        setChartModeValue(chartMode);
-    }, [styleContext, chartMode, mounted]);
-    return (_jsxs(Column, { fillWidth: true, gap: "16", ref: ref, ...rest, children: [_jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", onBackground: "neutral-strong", children: "Page" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize page theme" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", borderBottom: "neutral-alpha-medium", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Theme" }), _jsx(ThemeSwitcher, {})] }), _jsxs(Flex, { horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Shape" }), _jsx(Flex, { gap: "4", children: shapes.map((radius, index) => (_jsx(Flex, { "data-border": shapes[index], center: true, tabIndex: 0, className: classNames(styles.select, mounted && borderValue === radius ? styles.selected : ""), onClick: () => {
-                                        styleContext.setStyle({ border: radius });
-                                        setBorderValue(radius);
-                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: classNames(styles.neutral, styles.swatch) }) }) }, radius))) })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", onBackground: "neutral-strong", children: "Color" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize color schemes" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, onBackground: "neutral-strong", children: "Brand" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.brand.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && brandValue === color ? styles.selected : ""), onClick: () => {
-                                        styleContext.setStyle({ brand: color });
-                                        setBrandValue(color);
-                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, onBackground: "neutral-strong", children: "Accent" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.accent.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && accentValue === color ? styles.selected : ""), onClick: () => {
-                                        styleContext.setStyle({ accent: color });
-                                        setAccentValue(color);
-                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] }), _jsxs(Flex, { horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, onBackground: "neutral-strong", children: "Neutral" }), _jsx(Scroller, { minWidth: 0, fitWidth: true, children: colorOptions.neutral.map((color, index) => (_jsx(Flex, { marginRight: "2", center: true, tabIndex: 0, className: classNames(styles.select, mounted && neutralValue === color ? styles.selected : ""), onClick: () => {
-                                        styleContext.setStyle({ neutral: color });
-                                        setNeutralValue(color);
-                                    }, children: _jsx(IconButton, { variant: "ghost", size: "m", children: _jsx("div", { className: `${styles[color]} ${styles.swatch}` }) }) }, color))) })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", onBackground: "neutral-strong", children: "Solid style" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize the appearance of interactive elements" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Style" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
-                                    {
-                                        size: "l",
-                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "color", border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Color"] })),
-                                        value: "color",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "inverse", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Inverse"] })),
-                                        value: "inverse",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { "data-solid": "contrast", border: "brand-strong", solid: "brand-strong", width: "24", height: "24", radius: "s" }), "Contrast"] })),
-                                        value: "contrast",
-                                    },
-                                ], onToggle: (value) => {
-                                    styleContext.setStyle({ solid: value });
-                                    setSolidValue(value);
-                                    localStorage.setItem("data-solid", value);
-                                }, selected: mounted ? solidValue : undefined, defaultSelected: "contrast" })] }), _jsxs(Flex, { horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Effect" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, buttons: [
-                                    {
-                                        size: "l",
-                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { border: "brand-strong", solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Flat"] })),
-                                        value: "flat",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { border: "brand-strong", style: {
-                                                        boxShadow: "inset 0 calc(-1 * var(--static-space-8)) var(--static-space-8) var(--brand-solid-strong)",
-                                                    }, solid: "brand-weak", width: "24", height: "24", radius: "s" }), "Plastic"] })),
-                                        value: "plastic",
-                                    },
-                                ], onToggle: (value) => {
-                                    styleContext.setStyle({ solidStyle: value });
-                                    setSolidStyleValue(value);
-                                    localStorage.setItem("data-solid-style", value);
-                                }, selected: mounted ? solidStyleValue : undefined, defaultSelected: "flat" })] })] }), _jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [_jsx(Text, { variant: "heading-strong-s", onBackground: "neutral-strong", children: "Advanced" }), _jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: "Customize advanced styling options" })] }), _jsxs(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", children: [_jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Surface" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
-                                    styleContext.setStyle({ surface: value });
-                                    setSurfaceValue(value);
-                                }, selected: mounted ? surfaceValue : undefined, defaultSelected: "filled", buttons: [
-                                    {
-                                        size: "l",
-                                        label: "Filled",
-                                        value: "filled",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "Translucent",
-                                        value: "translucent",
-                                    },
-                                ] })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Scaling" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
-                                    styleContext.setStyle({ scaling: value });
-                                    setScalingValue(value);
-                                }, selected: mounted ? scalingValue : undefined, defaultSelected: "100", buttons: [
-                                    {
-                                        size: "l",
-                                        label: "90",
-                                        value: "90",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "95",
-                                        value: "95",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "100",
-                                        value: "100",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "105",
-                                        value: "105",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "110",
-                                        value: "110",
-                                    },
-                                ] })] }), _jsxs(Flex, { borderBottom: "neutral-alpha-medium", horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Data Style" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
-                                    setChartOptions({ mode: value });
-                                    setChartModeValue(value);
-                                }, selected: mounted ? chartModeValue : undefined, defaultSelected: "categorical", buttons: [
-                                    {
-                                        size: "l",
-                                        label: "Categorical",
-                                        value: "categorical",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "Divergent",
-                                        value: "divergent",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "Sequential",
-                                        value: "sequential",
-                                    },
-                                ] })] }), _jsxs(Flex, { horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", children: [_jsx(Text, { variant: "label-default-s", onBackground: "neutral-strong", children: "Transition" }), _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onToggle: (value) => {
-                                    styleContext.setStyle({ transition: value });
-                                    setTransitionValue(value);
-                                }, selected: mounted ? transitionValue : undefined, defaultSelected: "all", buttons: [
-                                    {
-                                        size: "l",
-                                        label: "All",
-                                        value: "all",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "Micro",
-                                        value: "micro",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "Macro",
-                                        value: "macro",
-                                    },
-                                    {
-                                        size: "l",
-                                        label: "None",
-                                        value: "none",
-                                    },
-                                ] })] })] })] }));
-});
+import { forwardRef } from "react";
+import { sections } from "./StylePanelSections";
+export { useStylePanel } from "./StylePanelSections";
+const visible = (section) => section?.section !== false;
+/**
+ * The default arrangement of every style section.
+ *
+ * It is a plain composition of its own parts, so a host that needs a different
+ * arrangement — or only two of the sections — can drop this and compose
+ * `StylePanel.Page`, `StylePanel.Brand` and the rest directly inside
+ * `StylePanel.Root`. Pass `value` and `onChange` to take over the state, in
+ * which case nothing is written to ThemeProvider or storage.
+ */
+const StylePanel = forwardRef(({ visibility, ...rest }, ref) => (_jsxs(sections.Root, { ref: ref, ...rest, children: [visible(visibility?.page) && _jsx(sections.Page, { rows: visibility?.page }), visible(visibility?.color) && _jsx(sections.Color, { rows: visibility?.color }), visible(visibility?.solidStyle) && _jsx(sections.SolidStyle, { rows: visibility?.solidStyle }), visibility?.bodyText?.section === true && _jsx(sections.BodyText, { rows: visibility?.bodyText }), visible(visibility?.advanced) && _jsx(sections.Advanced, { rows: visibility?.advanced })] })));
 StylePanel.displayName = "StylePanel";
-export { StylePanel };
+const StylePanelWithSections = Object.assign(StylePanel, sections);
+export { StylePanelWithSections as StylePanel };
 //# sourceMappingURL=StylePanel.js.map

package/dist/components/StylePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylePanel.js","sourceRoot":"","sources":["../../src/components/StylePanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StylePanel.js","sourceRoot":"","sources":["../../src/components/StylePanel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAuD,MAAM,sBAAsB,CAAC;AASrG,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAcrD,MAAM,OAAO,GAAG,CAAC,OAA0C,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC;AAE3F;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,UAAU,CAAkC,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/F,MAAC,QAAQ,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,aAC9B,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAC,QAAQ,CAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,GAAI,EACtE,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,KAAC,QAAQ,CAAC,KAAK,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,GAAI,EACzE,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,KAAC,QAAQ,CAAC,UAAU,IAAC,IAAI,EAAE,UAAU,EAAE,UAAU,GAAI,EACxF,UAAU,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,IAAI,KAAC,QAAQ,CAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,GAAI,EAC3F,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,KAAC,QAAQ,CAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,GAAI,IACrE,CACjB,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,CAAC"}

package/dist/components/StylePanel.module.scss

@@ -124,4 +124,9 @@
 .neutral {
     background: var(--neutral-solid-medium);
     border-color: var(--neutral-alpha-strong);
-}
+}
+/* Dividers belong to the group rather than to each row: a host that hides or
+   reorders rows would otherwise leave a border on the last one. */
+.group > .row:not(:last-child) {
+    border-bottom: 1px solid var(--neutral-alpha-medium);
+}

package/dist/components/StylePanelSections.d.ts

@@ -0,0 +1,117 @@
+import { type ReactNode } from "react";
+import { Column, Flex } from ".";
+import { type BodyLineHeight, type BodySize, type BorderStyle, type NeutralColor, type ScalingSize, type SolidStyle, type SolidType, type SurfaceStyle, type Theme, type TransitionStyle } from "../contexts/ThemeProvider";
+import { type Schemes } from "../types";
+import type { ChartMode } from "../modules/data";
+/** Every style choice the panel can edit, including the chart mode, which is
+ *  owned by DataThemeProvider rather than ThemeProvider. */
+export interface StylePanelValue {
+    theme?: Theme;
+    border?: BorderStyle;
+    brand?: Schemes | "custom";
+    accent?: Schemes | "custom";
+    neutral?: NeutralColor | "custom";
+    solid?: SolidType;
+    solidStyle?: SolidStyle;
+    surface?: SurfaceStyle;
+    scaling?: ScalingSize;
+    transition?: TransitionStyle;
+    bodySize?: BodySize;
+    bodyLineHeight?: BodyLineHeight;
+    chartMode?: ChartMode;
+}
+/** Per-section and per-row visibility. Omitted keys default to visible. */
+export interface StylePanelVisibility {
+    page?: {
+        section?: boolean;
+        theme?: boolean;
+        shape?: boolean;
+    };
+    color?: {
+        section?: boolean;
+        brand?: boolean;
+        accent?: boolean;
+        neutral?: boolean;
+    };
+    solidStyle?: {
+        section?: boolean;
+        solid?: boolean;
+        effect?: boolean;
+    };
+    bodyText?: {
+        section?: boolean;
+        size?: boolean;
+        lineHeight?: boolean;
+    };
+    advanced?: {
+        section?: boolean;
+        surface?: boolean;
+        scaling?: boolean;
+        dataStyle?: boolean;
+        transition?: boolean;
+    };
+}
+/** `label={false}` drops the row's label; any node replaces it. */
+export interface StyleRowProps extends Omit<React.ComponentProps<typeof Flex>, "label"> {
+    label?: ReactNode | false;
+}
+export interface StyleGroupProps extends Omit<React.ComponentProps<typeof Column>, "title"> {
+    title?: ReactNode | false;
+    description?: ReactNode | false;
+}
+interface StylePanelContextValue {
+    value: StylePanelValue;
+    set: (patch: Partial<StylePanelValue>) => void;
+    /** False until after hydration, so a stored choice cannot mismatch the server render. */
+    mounted: boolean;
+    /** True when a host owns the state; the panel then never writes to the providers. */
+    controlled: boolean;
+}
+declare function useStylePanel(): StylePanelContextValue;
+export interface StylePanelRootProps extends Omit<React.ComponentProps<typeof Column>, "value" | "onChange"> {
+    /** Supply with `onChange` to take ownership of the state. The panel then
+     *  writes nothing to ThemeProvider, DataThemeProvider or storage. */
+    value?: StylePanelValue;
+    onChange?: (next: StylePanelValue, changed: Partial<StylePanelValue>) => void;
+}
+/** One labelled row. Dividers come from the group's stylesheet rather than a
+ *  prop, so cherry-picking rows never leaves a dangling border. */
+declare function Row({ label, children, ...rest }: StyleRowProps): import("react").JSX.Element;
+declare function Group({ title, description, children, ...rest }: StyleGroupProps): import("react").JSX.Element;
+declare function ThemeRow({ label, ...rest }: StyleRowProps): import("react").JSX.Element;
+declare function ShapeRow({ label, ...rest }: StyleRowProps): import("react").JSX.Element;
+declare function NeutralRow({ label, ...rest }: StyleRowProps): import("react").JSX.Element;
+declare function DataStyleRow({ label, ...rest }: StyleRowProps): import("react").JSX.Element;
+type GroupProps<Rows extends string> = StyleGroupProps & {
+    rows?: Partial<Record<Rows, boolean>>;
+};
+declare function PageGroup({ title, description, rows, ...rest }: GroupProps<"theme" | "shape">): import("react").JSX.Element;
+declare function ColorGroup({ title, description, rows, ...rest }: GroupProps<"brand" | "accent" | "neutral">): import("react").JSX.Element;
+declare function SolidStyleGroup({ title, description, rows, ...rest }: GroupProps<"solid" | "effect">): import("react").JSX.Element;
+declare function BodyTextGroup({ title, description, rows, ...rest }: GroupProps<"size" | "lineHeight">): import("react").JSX.Element;
+declare function AdvancedGroup({ title, description, rows, ...rest }: GroupProps<"surface" | "scaling" | "dataStyle" | "transition">): import("react").JSX.Element;
+export declare const sections: {
+    Root: import("react").ForwardRefExoticComponent<Omit<StylePanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: typeof Group;
+    Row: typeof Row;
+    Theme: typeof ThemeRow;
+    Shape: typeof ShapeRow;
+    Brand: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Accent: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Neutral: typeof NeutralRow;
+    Solid: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Effect: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Surface: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Scaling: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Transition: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    DataStyle: typeof DataStyleRow;
+    BodySize: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    BodyLineHeight: ({ label, ...rest }: StyleRowProps) => import("react").JSX.Element;
+    Page: typeof PageGroup;
+    Color: typeof ColorGroup;
+    SolidStyle: typeof SolidStyleGroup;
+    BodyText: typeof BodyTextGroup;
+    Advanced: typeof AdvancedGroup;
+};
+export { useStylePanel };
+//# sourceMappingURL=StylePanelSections.d.ts.map

package/dist/components/StylePanelSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylePanelSections.d.ts","sourceRoot":"","sources":["../../src/components/StylePanelSections.tsx"],"names":[],"mappings":"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"}

package/dist/components/StylePanelSections.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { Column, Flex, IconButton, Scroller, SegmentedControl, Text, ThemeSwitcher } from ".";
+import { useStyle, } from "../contexts/ThemeProvider";
+import { useDataTheme } from "../contexts/DataThemeProvider";
+import { schemes } from "../types";
+import styles from "./StylePanel.module.scss";
+import classNames from "clsx";
+const StylePanelContext = createContext(null);
+function useStylePanel() {
+    const context = useContext(StylePanelContext);
+    if (!context) {
+        throw new Error("StylePanel sections must be rendered inside a <StylePanel> or <StylePanel.Root>");
+    }
+    return context;
+}
+/** Reads and writes ThemeProvider — the default when no `value`/`onChange` is given. */
+function useBoundState() {
+    const styleContext = useStyle();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    const value = useMemo(() => ({
+        theme: styleContext.theme,
+        border: styleContext.border,
+        brand: styleContext.brand,
+        accent: styleContext.accent,
+        neutral: styleContext.neutral,
+        solid: styleContext.solid,
+        solidStyle: styleContext.solidStyle,
+        surface: styleContext.surface,
+        scaling: styleContext.scaling,
+        transition: styleContext.transition,
+        bodySize: styleContext.bodySize,
+        bodyLineHeight: styleContext.bodyLineHeight,
+    }), [styleContext]);
+    const set = useCallback((patch) => {
+        // chartMode lives in DataThemeProvider; the DataStyle row handles it.
+        const { chartMode: _chartMode, ...style } = patch;
+        if (Object.keys(style).length > 0)
+            styleContext.setStyle(style);
+    }, [styleContext]);
+    return { value, set, mounted };
+}
+const Root = forwardRef(function Root({ value, onChange, children, ...rest }, ref) {
+    const bound = useBoundState();
+    const controlled = value !== undefined && onChange !== undefined;
+    const controlledSet = useCallback((patch) => onChange?.({ ...value, ...patch }, patch), [value, onChange]);
+    const context = useMemo(() => controlled
+        ? { value: value, set: controlledSet, mounted: true, controlled: true }
+        : { ...bound, controlled: false }, [controlled, value, controlledSet, bound]);
+    return (_jsx(StylePanelContext.Provider, { value: context, children: _jsx(Column, { fillWidth: true, gap: "16", ref: ref, ...rest, children: children }) }));
+});
+/* ---- primitives ---------------------------------------------------------- */
+/** One labelled row. Dividers come from the group's stylesheet rather than a
+ *  prop, so cherry-picking rows never leaves a dangling border. */
+function Row({ label, children, ...rest }) {
+    return (_jsxs(Flex, { className: styles.row, horizontal: "between", vertical: "center", fillWidth: true, paddingX: "24", paddingY: "16", gap: "24", ...rest, children: [label !== false && (_jsx(Flex, { textVariant: "label-default-s", minWidth: 3, onBackground: "neutral-strong", children: label })), children] }));
+}
+function Group({ title, description, children, ...rest }) {
+    return (_jsxs(Column, { fillWidth: true, gap: "16", ...rest, children: [(title !== false || description !== false) && (_jsxs(Column, { fillWidth: true, paddingTop: "12", paddingLeft: "16", gap: "4", children: [title !== false && (_jsx(Text, { variant: "heading-strong-s", onBackground: "neutral-strong", children: title })), description !== false && (_jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: description }))] })), _jsx(Column, { fillWidth: true, border: "neutral-alpha-medium", radius: "l-4", className: styles.group, children: children })] }));
+}
+function Swatches({ options, selected, onSelect, ariaLabel, scroll, swatchClass, dataBorder, }) {
+    const items = options.map((option) => (_jsx(Flex, { ...(dataBorder ? { "data-border": option } : {}), marginRight: scroll ? "2" : undefined, center: true, tabIndex: 0, role: "button", "aria-label": ariaLabel(option), "aria-pressed": selected === option, className: classNames(styles.select, selected === option ? styles.selected : ""), onClick: () => onSelect(option), children: _jsx(IconButton, { variant: "ghost", size: "m", "aria-hidden": true, children: _jsx("div", { className: classNames(swatchClass ? swatchClass(option) : styles.neutral, styles.swatch) }) }) }, option)));
+    return scroll ? (_jsx(Scroller, { minWidth: 0, fitWidth: true, children: items })) : (_jsx(Flex, { gap: "4", children: items }));
+}
+/* ---- rows ---------------------------------------------------------------- */
+const shapes = ["sharp", "conservative", "playful", "rounded"];
+const neutrals = ["gray", "sand", "slate", "dusk", "mint", "rose"];
+function ThemeRow({ label = "Theme", ...rest }) {
+    return (_jsx(Row, { label: label, ...rest, children: _jsx(ThemeSwitcher, {}) }));
+}
+function ShapeRow({ label = "Shape", ...rest }) {
+    const { value, set, mounted } = useStylePanel();
+    return (_jsx(Row, { label: label, ...rest, children: _jsx(Swatches, { options: shapes, selected: mounted ? value.border : undefined, onSelect: (border) => set({ border: border }), ariaLabel: (shape) => `Corner style: ${shape}`, dataBorder: true }) }));
+}
+function schemeRow(key, fallback) {
+    return function SchemeRow({ label = fallback, ...rest }) {
+        const { value, set, mounted } = useStylePanel();
+        return (_jsx(Row, { label: label, ...rest, children: _jsx(Swatches, { options: schemes, selected: mounted ? value[key] : undefined, onSelect: (scheme) => set({ [key]: scheme }), ariaLabel: (scheme) => `${fallback} colour: ${scheme}`, swatchClass: (scheme) => styles[scheme], scroll: true }) }));
+    };
+}
+const BrandRow = schemeRow("brand", "Brand");
+const AccentRow = schemeRow("accent", "Accent");
+function NeutralRow({ label = "Neutral", ...rest }) {
+    const { value, set, mounted } = useStylePanel();
+    return (_jsx(Row, { label: label, ...rest, children: _jsx(Swatches, { options: neutrals, selected: mounted ? value.neutral : undefined, onSelect: (neutral) => set({ neutral: neutral }), ariaLabel: (neutral) => `Neutral colour: ${neutral}`, swatchClass: (neutral) => styles[neutral], scroll: true }) }));
+}
+function solidSwatch(solid, fill, tone) {
+    return (_jsxs(Flex, { vertical: "center", gap: "12", children: [_jsx(Flex, { ...(solid ? { "data-solid": solid } : {}), border: "brand-strong", solid: fill, width: "24", height: "24", radius: "s" }), tone] }));
+}
+function segmentedRow(key, fallback, buttons, defaultValue) {
+    return function SegmentedRow({ label = fallback, ...rest }) {
+        const { value, set, mounted } = useStylePanel();
+        return (_jsx(Row, { label: label, ...rest, children: _jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onChange: (next) => set({ [key]: next }), value: mounted ? value[key] : undefined, defaultValue: defaultValue, buttons: buttons.map((button) => ({ size: "l", ...button })) }) }));
+    };
+}
+const SolidRow = segmentedRow("solid", "Style", [
+    { label: solidSwatch("color", "brand-weak", "Color"), value: "color" },
+    { label: solidSwatch("inverse", "brand-strong", "Inverse"), value: "inverse" },
+    { label: solidSwatch("contrast", "brand-strong", "Contrast"), value: "contrast" },
+], "contrast");
+const EffectRow = segmentedRow("solidStyle", "Effect", [
+    { label: solidSwatch("", "brand-weak", "Flat"), value: "flat" },
+    { label: solidSwatch("", "brand-weak", "Plastic"), value: "plastic" },
+], "flat");
+const SurfaceRow = segmentedRow("surface", "Surface", [
+    { label: "Filled", value: "filled" },
+    { label: "Translucent", value: "translucent" },
+], "filled");
+const ScalingRow = segmentedRow("scaling", "Scaling", ["90", "95", "100", "105", "110"].map((size) => ({ label: size, value: size })), "100");
+const TransitionRow = segmentedRow("transition", "Transition", [
+    { label: "All", value: "all" },
+    { label: "Micro", value: "micro" },
+    { label: "Macro", value: "macro" },
+    { label: "None", value: "none" },
+], "all");
+const BodySizeRow = segmentedRow("bodySize", "Text size", ["90", "95", "100", "105", "110"].map((size) => ({ label: size, value: size })), "100");
+const BodyLineHeightRow = segmentedRow("bodyLineHeight", "Line height", ["90", "100", "110", "120"].map((height) => ({ label: height, value: height })), "100");
+const dataStyleButtons = [
+    { size: "l", label: "Categorical", value: "categorical" },
+    { size: "l", label: "Divergent", value: "divergent" },
+    { size: "l", label: "Sequential", value: "sequential" },
+];
+/** Split out so that only this row depends on DataThemeProvider — every other
+ *  section can be cherry-picked without one in the tree. */
+function BoundDataStyleControl() {
+    const { mode, setChartOptions } = useDataTheme();
+    return (_jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onChange: (next) => setChartOptions({ mode: next }), value: mode, defaultValue: "categorical", buttons: dataStyleButtons }));
+}
+function DataStyleRow({ label = "Data Style", ...rest }) {
+    const { value, set, mounted, controlled } = useStylePanel();
+    return (_jsx(Row, { label: label, ...rest, children: controlled ? (_jsx(SegmentedControl, { maxWidth: 22, minWidth: 0, onChange: (next) => set({ chartMode: next }), value: mounted ? value.chartMode : undefined, defaultValue: "categorical", buttons: dataStyleButtons })) : (_jsx(BoundDataStyleControl, {})) }));
+}
+const show = (rows, key) => rows?.[key] !== false;
+function PageGroup({ title = "Page", description = "Customize page theme", rows, ...rest }) {
+    return (_jsxs(Group, { title: title, description: description, ...rest, children: [show(rows, "theme") && _jsx(ThemeRow, {}), show(rows, "shape") && _jsx(ShapeRow, {})] }));
+}
+function ColorGroup({ title = "Color", description = "Customize color schemes", rows, ...rest }) {
+    return (_jsxs(Group, { title: title, description: description, ...rest, children: [show(rows, "brand") && _jsx(BrandRow, {}), show(rows, "accent") && _jsx(AccentRow, {}), show(rows, "neutral") && _jsx(NeutralRow, {})] }));
+}
+function SolidStyleGroup({ title = "Solid style", description = "Customize the appearance of interactive elements", rows, ...rest }) {
+    return (_jsxs(Group, { title: title, description: description, ...rest, children: [show(rows, "solid") && _jsx(SolidRow, {}), show(rows, "effect") && _jsx(EffectRow, {})] }));
+}
+function BodyTextGroup({ title = "Body text", description = "Scale running text without touching headings", rows, ...rest }) {
+    return (_jsxs(Group, { title: title, description: description, ...rest, children: [show(rows, "size") && _jsx(BodySizeRow, {}), show(rows, "lineHeight") && _jsx(BodyLineHeightRow, {})] }));
+}
+function AdvancedGroup({ title = "Advanced", description = "Customize advanced styling options", rows, ...rest }) {
+    return (_jsxs(Group, { title: title, description: description, ...rest, children: [show(rows, "surface") && _jsx(SurfaceRow, {}), show(rows, "scaling") && _jsx(ScalingRow, {}), show(rows, "dataStyle") && _jsx(DataStyleRow, {}), show(rows, "transition") && _jsx(TransitionRow, {})] }));
+}
+export const sections = {
+    Root,
+    Group,
+    Row,
+    Theme: ThemeRow,
+    Shape: ShapeRow,
+    Brand: BrandRow,
+    Accent: AccentRow,
+    Neutral: NeutralRow,
+    Solid: SolidRow,
+    Effect: EffectRow,
+    Surface: SurfaceRow,
+    Scaling: ScalingRow,
+    Transition: TransitionRow,
+    DataStyle: DataStyleRow,
+    BodySize: BodySizeRow,
+    BodyLineHeight: BodyLineHeightRow,
+    Page: PageGroup,
+    Color: ColorGroup,
+    SolidStyle: SolidStyleGroup,
+    BodyText: BodyTextGroup,
+    Advanced: AdvancedGroup,
+};
+export { useStylePanel };
+//# sourceMappingURL=StylePanelSections.js.map

package/dist/components/StylePanelSections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylePanelSections.js","sourceRoot":"","sources":["../../src/components/StylePanelSections.tsx"],"names":[],"mappings":"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"}

package/dist/components/Swiper.d.ts

@@ -7,7 +7,13 @@ interface SwiperProps extends React.ComponentProps<typeof Flex> {
     items: SwiperItem[];
     controls?: boolean | "contained";
     priority?: boolean;
-    fill?: boolean;
+    /**
+     * Drop the intrinsic aspect ratio and let the slides stretch to whatever box
+     * they are in. Named `stretch` rather than `fill` because `fill` is a layout
+     * prop on every Flex-derived component, and shadowing it here meant `fill`
+     * did not do the one thing its name promised.
+     */
+    stretch?: boolean;
     aspectRatio?: string;
     sizes?: string;
     unoptimized?: boolean;