@apple-pie/slice 0.1.59 → 0.2.0

package/dist/cjs/chunks/RadioButtonList-Oc7oMivb.js

@@ -0,0 +1,88 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), React = require("react"), jsxRuntime = require("react/jsx-runtime"), misc = require("./misc-PmT7cZzC.js");
+
+require("./resolveColor-DkYThq2J.js"), require("./broadcastChannel-DdPZ3LUB.js"), 
+require("./files-RYD9L_pI.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), RadioButton = require("./RadioButton-B2HGjkQk.js"), css_wrapper = "RadioButtonList-module_wrapper__wnq1-", css_column = "RadioButtonList-module_column__Bq16e flexBox-module_columnStart__C7P44", css_row = "RadioButtonList-module_row__D3szq flexBox-module_rowStart__4tcxS";
+
+function RadioButtonListComponent(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {children: children, options: options = [], value: value, defaultValue: defaultValue = null, name: name, label: label, disabled: disabled = !1, direction: direction = "column", wrap: wrap = !1, gap: gap = 16, itemGap: itemGap = 6, marginBottom: marginBottom = 0, width: width = "min-content", align: align, iconChecked: iconChecked, iconUnChecked: iconUnChecked, iconSize: iconSize, iconColor: iconColor, iconColorSelected: iconColorSelected, textColor: textColor, textSize: textSize, textTopOffset: textTopOffset, backgroundColor: backgroundColor, backgroundColorSelected: backgroundColorSelected, borderWidth: borderWidth, borderColor: borderColor, borderRadius: borderRadius, padding: padding, onChange: onChange, className: className, style: style} = props, divAttributes = tslib_es6.__rest(props, [ "children", "options", "value", "defaultValue", "name", "label", "disabled", "direction", "wrap", "gap", "itemGap", "marginBottom", "width", "align", "iconChecked", "iconUnChecked", "iconSize", "iconColor", "iconColorSelected", "textColor", "textSize", "textTopOffset", "backgroundColor", "backgroundColorSelected", "borderWidth", "borderColor", "borderRadius", "padding", "onChange", "className", "style" ]), labelId = React.useId(), [localValue, setLocalValue] = React.useState(() => defaultValue), initialValue = React.useRef(defaultValue), containerRef = React.useRef(null), controlled = void 0 !== value, active = controlled ? value : localValue;
+    React.useEffect(() => {
+        var _a;
+        if (controlled) return;
+        const form = null === (_a = containerRef.current) || void 0 === _a ? void 0 : _a.closest("form");
+        if (!form) return;
+        let mounted = !0;
+        const reset = event => {
+            queueMicrotask(() => {
+                mounted && !event.defaultPrevented && setLocalValue(() => initialValue.current);
+            });
+        };
+        return form.addEventListener("reset", reset), () => {
+            mounted = !1, form.removeEventListener("reset", reset);
+        };
+    }, [ controlled ]);
+    const cssVars = {
+        "--rb-list-flex-wrap": wrap ? "wrap" : "nowrap",
+        "--rb-list-margin-bottom": misc.setStyle(marginBottom, "0px"),
+        "--rb-gap": `${Number.isFinite(gap) ? Math.max(0, gap) : 16}px`,
+        "--rb-list-width": misc.setStyle(width, "min-content")
+    }, context = React.useMemo(() => ({
+        value: active,
+        name: name || labelId,
+        disabled: disabled,
+        optionProps: {
+            align: align,
+            iconChecked: iconChecked,
+            iconUnChecked: iconUnChecked,
+            iconSize: iconSize,
+            iconColor: iconColor,
+            iconColorSelected: iconColorSelected,
+            textColor: textColor,
+            textSize: textSize,
+            textTopOffset: textTopOffset,
+            backgroundColor: backgroundColor,
+            backgroundColorSelected: backgroundColorSelected,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
+            borderRadius: borderRadius,
+            padding: padding,
+            gap: itemGap
+        },
+        select: option => {
+            disabled || void 0 === option.value || null === option.value || Object.is(active, option.value) || (controlled || setLocalValue(() => option.value), 
+            null == onChange || onChange(option.value, option));
+        }
+    }), [ active, name, labelId, disabled, controlled, onChange, align, iconChecked, iconUnChecked, iconSize, iconColor, iconColorSelected, textColor, textSize, textTopOffset, backgroundColor, backgroundColorSelected, borderWidth, borderColor, borderRadius, padding, itemGap ]);
+    return jsxRuntime.jsx(RadioButton.RadioGroupContext.Provider, {
+        value: context,
+        children: jsxRuntime.jsxs("div", Object.assign({
+            ref: containerRef
+        }, divAttributes, {
+            className: `${css_wrapper} ${"row" === direction ? css_row : css_column}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign({}, style), cssVars),
+            role: "radiogroup",
+            "aria-labelledby": label ? labelId : divAttributes["aria-labelledby"],
+            "aria-disabled": disabled || void 0,
+            "aria-orientation": "row" === direction ? "horizontal" : "vertical",
+            children: [ label && jsxRuntime.jsx("div", {
+                id: labelId,
+                children: label
+            }), void 0 !== children ? children : options.map((option, index) => {
+                var _a;
+                return React.createElement(RadioButton.RadioButton, Object.assign({}, option, {
+                    key: "string" == typeof option.value || "number" == typeof option.value ? `${typeof option.value}:${option.value}` : null !== (_a = option.fieldName) && void 0 !== _a ? _a : index
+                }));
+            }) ]
+        }))
+    });
+}
+
+RadioButtonListComponent.displayName = "RadioButtonList";
+
+const RadioButtonList = React.memo(RadioButtonListComponent);
+
+exports.RadioButtonList = RadioButtonList;

package/dist/cjs/chunks/Slider-Y7zMFKiM.js

@@ -0,0 +1,170 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), css_wrapper = "Slider-module_wrapper__KCCs1", css_control = "Slider-module_control__fvTgq", css_trackWrapper = "Slider-module_trackWrapper__Ot0Wh", css_trackBg = "Slider-module_trackBg__7zfqm", css_track = "Slider-module_track__kaJkL", css_trackHead = "Slider-module_trackHead__W-UdG";
+
+function clampSliderValue(value, min, max) {
+    return Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : min;
+}
+
+function sliderPercent(value, min, max) {
+    return max > min ? (clampSliderValue(value, min, max) - min) / (max - min) : 0;
+}
+
+/** Keep the existing keyboard-only step contract; pointer movement stays continuous. */ function keyboardSliderValue(value, key, min, max, step) {
+    const increment = void 0 !== step && Number.isFinite(step) && step > 0 ? step : Math.max((max - min) / 100, .01);
+    let next;
+    switch (key) {
+      case "ArrowRight":
+      case "ArrowUp":
+      case "PageUp":
+        next = value + increment;
+        break;
+
+      case "ArrowLeft":
+      case "ArrowDown":
+      case "PageDown":
+        next = value - increment;
+        break;
+
+      case "Home":
+        return min;
+
+      case "End":
+        return max;
+
+      default:
+        return null;
+    }
+    return clampSliderValue(Number(next.toPrecision(15)), min, max);
+}
+
+function sliderLength(value, fallback) {
+    return "number" == typeof value ? `${Number.isFinite(value) ? Math.max(0, value) : fallback}px` : (null == value ? void 0 : value.trim()) || `${fallback}px`;
+}
+
+const Slider = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {value: value, defaultValue: defaultValue = 50, min: min = 0, max: max = 100, width: width = 100, height: height = 2, touchHeight: touchHeight = 24, trackHeadSize: trackHeadSize = 12, trackHeadOnHover: trackHeadOnHover, step: step, disabled: disabled = !1, disabledOpacity: disabledOpacity = .5, trackHeadBorderRadius: trackHeadBorderRadius = "100%", cursor: cursor = "grabbing", trackHeadColor: trackHeadColor = "var(--core-text-light)", trackColor: trackColor = "var(--core-surface-secondary)", progressColor: progressColor = "var(--core-text-tertiary)", trackHeadBorderWidth: trackHeadBorderWidth = 1, trackHeadBorderColor: trackHeadBorderColor = "var(--core-outline-secondary)", onChange: onChange, onChangeEnd: onChangeEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onLostPointerCapture: onLostPointerCapture, onBlur: onBlur, className: className, style: style, tabIndex: tabIndex, "aria-label": ariaLabel, "aria-labelledby": labelledBy} = props, inputAttributes = tslib_es6.__rest(props, [ "value", "defaultValue", "min", "max", "width", "height", "touchHeight", "trackHeadSize", "trackHeadOnHover", "step", "disabled", "disabledOpacity", "trackHeadBorderRadius", "cursor", "trackHeadColor", "trackColor", "progressColor", "trackHeadBorderWidth", "trackHeadBorderColor", "onChange", "onChangeEnd", "onKeyDown", "onKeyUp", "onPointerDown", "onPointerUp", "onPointerCancel", "onLostPointerCapture", "onBlur", "className", "style", "tabIndex", "aria-label", "aria-labelledby" ]), [minimum, maximum] = function(min, max) {
+        const low = Number.isFinite(min) ? min : 0, high = Number.isFinite(max) ? max : 100;
+        return Number.isFinite(high - low) ? low <= high ? [ low, high ] : [ high, low ] : [ 0, 100 ];
+    }(min, max), [localValue, setLocalValue] = React.useState(defaultValue), currentValue = clampSliderValue(null != value ? value : localValue, minimum, maximum), percent = sliderPercent(currentValue, minimum, maximum), interaction = React.useRef(null), [dragging, setDragging] = React.useState(!1), previousBounds = React.useRef({
+        minimum: minimum,
+        maximum: maximum
+    });
+    React.useEffect(() => {
+        (disabled || previousBounds.current.minimum !== minimum || previousBounds.current.maximum !== maximum) && (interaction.current = null, 
+        setDragging(!1)), previousBounds.current = {
+            minimum: minimum,
+            maximum: maximum
+        };
+    }, [ disabled, minimum, maximum ]), React.useEffect(() => () => {
+        interaction.current = null;
+    }, []);
+    const cancelInteraction = () => {
+        interaction.current = null, setDragging(!1);
+    }, finishInteraction = () => {
+        const pending = interaction.current;
+        interaction.current = null, setDragging(!1), !disabled && (null == pending ? void 0 : pending.changed) && (null == onChangeEnd || onChangeEnd(pending.latest, sliderPercent(pending.latest, minimum, maximum)));
+    }, updateValue = requested => {
+        var _a, _b;
+        const next = clampSliderValue(requested, minimum, maximum);
+        if (next === (null !== (_b = null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.latest) && void 0 !== _b ? _b : currentValue)) return;
+        interaction.current && (interaction.current.latest = next, interaction.current.changed = !0);
+        const hadInteraction = null !== interaction.current;
+        void 0 === value && setLocalValue(next), null == onChange || onChange(next, sliderPercent(next, minimum, maximum)), 
+        hadInteraction || null == onChangeEnd || onChangeEnd(next, sliderPercent(next, minimum, maximum));
+    }, headSize = null === trackHeadSize ? 0 : Number.isFinite(trackHeadSize) ? Math.max(0, trackHeadSize) : 12, padding = Math.ceil(headSize / 2), borderWidth = Number.isFinite(trackHeadBorderWidth) ? Math.max(0, trackHeadBorderWidth) : 1, radius = "number" == typeof trackHeadBorderRadius ? Number.isFinite(trackHeadBorderRadius) ? `${Math.max(0, trackHeadBorderRadius)}px` : "100%" : null != trackHeadBorderRadius ? trackHeadBorderRadius : "100%", cssVars = {
+        "--slider-padding": `${padding}px`,
+        "--slider-native-thumb-size": 2 * padding + "px",
+        "--slider-width": "auto" === width ? "100%" : sliderLength(width, 100),
+        "--slider-height": sliderLength(height, 2),
+        "--slider-touch-height": sliderLength(touchHeight, 24),
+        "--slider-hit-height": "max(var(--slider-touch-height), var(--slider-height), var(--slider-head-size))",
+        "--slider-cursor": disabled ? "default" : cursor,
+        "--slider-head-display": headSize > 0 ? "block" : "none",
+        "--slider-head-radius": radius,
+        "--slider-head-size": `${headSize}px`,
+        "--slider-head-color": null != trackHeadColor ? trackHeadColor : "var(--core-text-primary)",
+        "--slider-progress-color": null != progressColor ? progressColor : "var(--core-text-primary)",
+        "--slider-track-color": null != trackColor ? trackColor : "var(--core-surface-secondary)",
+        "--slider-track-head-border": `${borderWidth}px solid ${trackHeadBorderColor}`,
+        "--slider-opacity": disabled ? Number.isFinite(disabledOpacity) ? Math.min(1, Math.max(0, disabledOpacity)) : .5 : 1,
+        "--slider-progress": 100 * percent + "%"
+    };
+    return jsxRuntime.jsxs("div", {
+        className: `${css_wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        "data-head-on-hover": trackHeadOnHover || void 0,
+        "data-dragging": dragging || void 0,
+        children: [ jsxRuntime.jsx("input", Object.assign({}, inputAttributes, {
+            className: css_control,
+            type: "range",
+            min: minimum,
+            max: maximum,
+            step: "any",
+            value: currentValue,
+            disabled: disabled,
+            tabIndex: disabled ? -1 : null != tabIndex ? tabIndex : 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelledBy,
+            "aria-disabled": disabled || void 0,
+            "aria-valuemin": minimum,
+            "aria-valuemax": maximum,
+            "aria-valuenow": currentValue,
+            "aria-orientation": "horizontal",
+            onChange: event => {
+                disabled || updateValue(event.currentTarget.valueAsNumber);
+            },
+            onPointerDown: event => {
+                disabled || (null == onPointerDown || onPointerDown(event), !event.defaultPrevented && 0 === event.button && event.isPrimary && (interaction.current = {
+                    kind: "pointer",
+                    latest: currentValue,
+                    changed: !1
+                }, setDragging(!0)));
+            },
+            onPointerUp: event => {
+                var _a;
+                null == onPointerUp || onPointerUp(event), "pointer" === (null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.kind) && finishInteraction();
+            },
+            onPointerCancel: event => {
+                null == onPointerCancel || onPointerCancel(event), cancelInteraction();
+            },
+            onLostPointerCapture: event => {
+                var _a;
+                null == onLostPointerCapture || onLostPointerCapture(event), "pointer" === (null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.kind) && cancelInteraction();
+            },
+            onKeyDown: event => {
+                var _a, _b, _c;
+                if (disabled) return;
+                if (null == onKeyDown || onKeyDown(event), event.defaultPrevented) return;
+                const next = keyboardSliderValue(null !== (_b = null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.latest) && void 0 !== _b ? _b : currentValue, event.key, minimum, maximum, step);
+                null !== next && (event.preventDefault(), "keyboard" !== (null === (_c = interaction.current) || void 0 === _c ? void 0 : _c.kind) && (interaction.current = {
+                    kind: "keyboard",
+                    latest: currentValue,
+                    changed: !1
+                }), updateValue(next));
+            },
+            onKeyUp: event => {
+                var _a;
+                null == onKeyUp || onKeyUp(event), "keyboard" === (null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.kind) && null !== keyboardSliderValue(currentValue, event.key, minimum, maximum, step) && finishInteraction();
+            },
+            onBlur: event => {
+                var _a;
+                null == onBlur || onBlur(event), "keyboard" === (null === (_a = interaction.current) || void 0 === _a ? void 0 : _a.kind) ? finishInteraction() : cancelInteraction();
+            }
+        })), jsxRuntime.jsxs("div", {
+            className: css_trackWrapper,
+            "aria-hidden": "true",
+            children: [ jsxRuntime.jsx("div", {
+                className: css_trackBg,
+                children: jsxRuntime.jsx("div", {
+                    className: css_track
+                })
+            }), jsxRuntime.jsx("div", {
+                className: css_trackHead
+            }) ]
+        }) ]
+    });
+});
+
+exports.Slider = Slider;

package/dist/cjs/chunks/Spacer-CM7sstpQ.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime");
+
+const Spacer = require("react").memo(props => {
+    const {size: size = "s"} = props, divAttributes = tslib_es6.__rest(props, [ "size" ]), {className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "className", "style" ]), dimension = `var(--spacing-${size})`, spacerStyle = {
+        width: dimension,
+        minWidth: dimension,
+        maxWidth: dimension,
+        height: dimension,
+        minHeight: dimension,
+        maxHeight: dimension,
+        flexShrink: 0
+    };
+    return jsxRuntime.jsx("div", Object.assign({
+        className: className,
+        style: Object.assign(Object.assign({}, style), spacerStyle)
+    }, rest));
+});
+
+exports.Spacer = Spacer;

package/dist/cjs/chunks/Switch-CWJh4Pi4.js

@@ -0,0 +1,70 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), css_wrapper = "Switch-module_wrapper__kudO9", css_track = "Switch-module_track__7ObdZ", css_knob = "Switch-module_knob__vKNOc";
+
+const radiusValue = value => "number" == typeof value ? Number.isFinite(value) ? `${Math.max(0, value)}px` : "var(--corner-round)" : value;
+
+function SwitchComponent(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {borderRadius: borderRadius = "var(--corner-round)", knobRadius: knobRadius = "var(--corner-round)", knobWidth: knobWidth = 26, name: name, checked: checked, defaultChecked: defaultChecked = !1, value: value, height: height = 22, width: width = 48, padding: padding, transition: transition, backgroundColorOn: backgroundColorOn = "var(--feedback-positive)", backgroundColorOff: backgroundColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange, onClick: onClick, disabled: disabled = !1, type: type = "button", className: className, style: style} = props, buttonAttributes = tslib_es6.__rest(props, [ "borderRadius", "knobRadius", "knobWidth", "name", "checked", "defaultChecked", "value", "height", "width", "padding", "transition", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange", "onClick", "disabled", "type", "className", "style" ]), [internalChecked, setInternalChecked] = React.useState(defaultChecked), on = null != checked ? checked : internalChecked, accessibleName = (null == name ? void 0 : name.trim()) || "Switch", reduceMotion = usePrefersReducedMotion.usePrefersReducedMotion(), themeMotion = hooks_useTheme.useTheme().current.motion, motionTransition = getWaterTransition.getWaterTransition(themeMotion, transition), backgroundColor = on ? backgroundColorOn : backgroundColorOff, resolvedHeight = Number.isFinite(height) && height > 0 ? Math.max(1, height) : 22, cssVars = {
+        "--switch-width": `${Math.max(resolvedHeight, Number.isFinite(width) && width > 0 ? width : 48)}px`,
+        "--switch-height": `${resolvedHeight}px`,
+        "--switch-padding": `clamp(0px, ${void 0 !== padding && Number.isFinite(padding) ? `${padding}px` : "var(--spacing-xxs)"}, ${(resolvedHeight - 1) / 2}px)`,
+        "--switch-knob-size": "calc(var(--switch-height) - var(--switch-padding) * 2)",
+        "--switch-knob-color": knobColor,
+        "--switch-border-radius": radiusValue(borderRadius),
+        "--switch-knob-radius": radiusValue(knobRadius),
+        "--switch-knob-width": `clamp(1px, ${Number.isFinite(knobWidth) && knobWidth > 0 ? knobWidth : 26}px, calc(var(--switch-width) - var(--switch-padding) * 2))`
+    };
+    return jsxRuntime.jsxs("button", Object.assign({}, Object.fromEntries(Object.entries(buttonAttributes).filter(([key]) => "role" !== key && !key.startsWith("aria-"))), {
+        name: name,
+        type: type,
+        disabled: disabled,
+        className: `${css_wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign(Object.assign({}, style), cssVars), {
+            justifyContent: on ? "flex-end" : "flex-start"
+        }),
+        onClick: event => {
+            if (disabled) return;
+            if (null == onClick || onClick(event), event.defaultPrevented) return;
+            const next = !on;
+            void 0 === checked && setInternalChecked(next), null == onChange || onChange(value, next);
+        },
+        role: "switch",
+        "aria-label": accessibleName,
+        "aria-checked": on,
+        children: [ reduceMotion ? jsxRuntime.jsx("div", {
+            className: css_knob,
+            "aria-hidden": "true"
+        }) : jsxRuntime.jsx(react.motion.div, {
+            className: css_knob,
+            "aria-hidden": "true",
+            layout: "position",
+            initial: !1,
+            animate: {
+                backgroundColor: knobColor
+            },
+            transition: motionTransition
+        }), reduceMotion ? jsxRuntime.jsx("span", {
+            className: css_track,
+            "aria-hidden": "true",
+            style: {
+                backgroundColor: backgroundColor
+            }
+        }) : jsxRuntime.jsx(react.motion.span, {
+            className: css_track,
+            "aria-hidden": "true",
+            initial: !1,
+            animate: {
+                backgroundColor: backgroundColor
+            },
+            transition: motionTransition
+        }) ]
+    }));
+}
+
+SwitchComponent.displayName = "Switch";
+
+const Switch = React.memo(SwitchComponent);
+
+exports.Switch = Switch;

package/dist/cjs/chunks/Tab-DFvjUNPs.js

@@ -0,0 +1,96 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Badge = require("./Badge-DtVP2qH0.js"), Icon = require("./Icon-COY7IZkK.js"), sharedTypes = require("./sharedTypes-BDMIewR9.js");
+
+const TabContext = React.createContext(null), withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([name]) => !name.startsWith("aria-"))), useClientLayoutEffect = "undefined" == typeof window ? React.useEffect : React.useLayoutEffect;
+
+var css_option = "Tab-module_option__vkB9w", css_selected = "Tab-module_selected__EkxSu", css_icon = "Tab-module_icon__HdlbJ";
+
+const Tab = React.memo(function(rawProps) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const _h = resolveColorProps.resolveColorProps(rawProps), {value: value, label: label, children: children, icon: icon, iconSize: iconSize, toolTip: toolTip, count: count, disabled: disabled = !1, panelId: panelId, id: id, onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: className, style: style, accentColor: accentColor, textColor: textColor, textColorSelected: textColorSelected, underlineColor: underlineColor, underlineSelectedColor: underlineSelectedColor, iconColor: iconColor, iconColorSelected: iconColorSelected} = _h, attributes = tslib_es6.__rest(_h, [ "value", "label", "children", "icon", "iconSize", "toolTip", "count", "disabled", "panelId", "id", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "className", "style", "accentColor", "textColor", "textColorSelected", "underlineColor", "underlineSelectedColor", "iconColor", "iconColorSelected" ]), group = React.useContext(TabContext);
+    if (!group) throw new Error("Tab must be used inside TabBar.");
+    if (null == value) throw new Error("Tab requires a unique, non-null value.");
+    const generatedId = React.useId(), ref = React.useRef(null), option = React.useMemo(() => ({
+        value: value,
+        label: label,
+        children: children,
+        icon: icon,
+        iconSize: iconSize,
+        toolTip: toolTip,
+        count: count,
+        disabled: disabled,
+        panelId: panelId,
+        id: id,
+        accentColor: accentColor,
+        textColor: textColor,
+        textColorSelected: textColorSelected,
+        underlineColor: underlineColor,
+        underlineSelectedColor: underlineSelectedColor,
+        iconColor: iconColor,
+        iconColorSelected: iconColorSelected
+    }), [ value, label, children, icon, iconSize, toolTip, count, disabled, panelId, id, accentColor, textColor, textColorSelected, underlineColor, underlineSelectedColor, iconColor, iconColorSelected ]);
+    useClientLayoutEffect(() => ref.current ? group.register(ref.current, option) : void 0, [ group.register, option ]);
+    const selected = null != group.value && Object.is(group.value, value), unavailable = group.disabled || disabled, accent = null != accentColor ? accentColor : group.colors.accentColor, colors = {
+        "--tab-icon-size": void 0 === iconSize ? void 0 : `${iconSize}px`,
+        "--tab-text-color": null !== (_a = null != textColor ? textColor : group.colors.textColor) && void 0 !== _a ? _a : "var(--core-text-primary)",
+        "--tab-text-color-selected": null !== (_c = null !== (_b = null != textColorSelected ? textColorSelected : group.colors.textColorSelected) && void 0 !== _b ? _b : accent) && void 0 !== _c ? _c : "var(--core-text-special)",
+        "--tab-icon-color": null !== (_d = null != iconColor ? iconColor : group.colors.iconColor) && void 0 !== _d ? _d : "currentColor",
+        "--tab-icon-color-selected": null !== (_f = null !== (_e = null != iconColorSelected ? iconColorSelected : group.colors.iconColorSelected) && void 0 !== _e ? _e : accent) && void 0 !== _f ? _f : "currentColor"
+    };
+    return jsxRuntime.jsxs("button", Object.assign({}, withoutAria(attributes), {
+        id: null != id ? id : generatedId,
+        ref: ref,
+        style: Object.assign(Object.assign({}, style), colors),
+        type: "button",
+        role: "tab",
+        "aria-controls": panelId,
+        "aria-selected": selected,
+        disabled: unavailable,
+        tabIndex: unavailable || !selected && !Object.is(group.firstValue, value) ? -1 : 0,
+        className: `${css_option}${selected ? ` ${css_selected}` : ""}${className ? ` ${className}` : ""}`,
+        onClick: event => {
+            null == onClick || onClick(event), event.defaultPrevented || group.select(option);
+        },
+        onKeyDown: event => {
+            null == onKeyDown || onKeyDown(event), event.defaultPrevented || group.navigate(event);
+        },
+        onMouseEnter: event => {
+            var _a;
+            null == onMouseEnter || onMouseEnter(event), event.defaultPrevented || unavailable || !toolTip || null === (_a = group.onToolTip) || void 0 === _a || _a.call(group, {
+                type: sharedTypes.ToolTipType.button,
+                payload: {
+                    label: toolTip
+                },
+                event: event,
+                ref: ref
+            });
+        },
+        onMouseLeave: event => {
+            var _a;
+            null == onMouseLeave || onMouseLeave(event), !event.defaultPrevented && toolTip && (null === (_a = group.onToolTip) || void 0 === _a || _a.call(group, null));
+        },
+        children: [ icon && jsxRuntime.jsx("span", {
+            className: css_icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                size: 20,
+                style: {
+                    width: "100%",
+                    height: "100%"
+                },
+                fill: group.iconFill,
+                strokeColor: "currentColor"
+            })
+        }), null !== (_g = null != label ? label : children) && void 0 !== _g ? _g : "Tab", void 0 !== count && 0 !== count && jsxRuntime.jsx(Badge.Badge, {
+            variant: "light",
+            hideZero: !1,
+            count: count
+        }) ]
+    }));
+});
+
+exports.Tab = Tab, exports.TabContext = TabContext, exports.useClientLayoutEffect = useClientLayoutEffect, 
+exports.withoutAria = withoutAria;

package/dist/cjs/chunks/TabBar-lB0aqabp.js

@@ -0,0 +1,186 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), react = require("motion/react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), 
+require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), IconButton = require("./IconButton-KJr15EW6.js"), Tab = require("./Tab-DFvjUNPs.js"), css = {
+    wrapper: "TabBar-module_wrapper__cyOR1",
+    list: "TabBar-module_list__4b33I",
+    indicator: "TabBar-module_indicator__2pk0F",
+    close: "TabBar-module_close__bvSBh",
+    xs: "TabBar-module_xs__QDjV9 type-module_body-xs-regular__ZAFft",
+    s: "TabBar-module_s__-EBj2 type-module_body-s-regular__vRHSP",
+    m: "TabBar-module_m__3sCA3 type-module_body-m-regular__LuQBA",
+    l: "TabBar-module_l__hy1rR type-module_body-l-regular__lOYbg",
+    xl: "TabBar-module_xl__zaASU type-module_body-xl-regular__pF2kC"
+};
+
+const TabBar = React.memo(function(rawProps) {
+    var _a, _b, _c, _d, _e, _f;
+    const _g = resolveColorProps.resolveColorProps(rawProps), {children: children, tabBarName: tabBarName, accentColor: accentColor, textColor: textColor, textColorSelected: textColorSelected, underlineColor: underlineColor, underlineSelectedColor: underlineSelectedColor, iconColor: iconColor, iconColorSelected: iconColorSelected, options: options = [], value: value, defaultValue: defaultValue, underline: underline = !0, border: border = !0, height: height = "auto", width: width = "100%", tabWidth: tabWidth = "compact", closeWidth: closeWidth = "auto", padding: padding = "var(--spacing-s)", iconSize: iconSize = 20, iconFill: iconFill = !1, iconGap: iconGap = 8, tabGap: tabGap = 8, disabled: disabled = !1, hasClose: hasClose = !1, justify: justify = "start", borderColor: borderColor = "var(--core-outline-secondary)", textSize: textSize = "m", transition: transition, onChange: onChange, onClose: onClose, onToolTip: onToolTip, className: className, style: style} = _g, attributes = tslib_es6.__rest(_g, [ "children", "tabBarName", "accentColor", "textColor", "textColorSelected", "underlineColor", "underlineSelectedColor", "iconColor", "iconColorSelected", "options", "value", "defaultValue", "underline", "border", "height", "width", "tabWidth", "closeWidth", "padding", "iconSize", "iconFill", "iconGap", "tabGap", "disabled", "hasClose", "justify", "borderColor", "textSize", "transition", "onChange", "onClose", "onToolTip", "className", "style" ]), accessibleName = (null == tabBarName ? void 0 : tabBarName.trim()) || "Tabs", theme = hooks_useTheme.useTheme(), reduced = usePrefersReducedMotion.usePrefersReducedMotion(), timing = React.useMemo(() => reduced ? {
+        type: "tween",
+        duration: 0,
+        delay: 0,
+        repeat: 0
+    } : getWaterTransition.getWaterTransition(theme.current.motion, transition), [ reduced, theme.current.motion, transition ]), [localValue, setLocalValue] = React.useState(() => {
+        var _a;
+        if (void 0 !== defaultValue) return defaultValue;
+        if (void 0 === children) return null === (_a = options.find(option => !option.disabled)) || void 0 === _a ? void 0 : _a.value;
+        const findFirst = nodes => {
+            for (const child of React.Children.toArray(nodes)) {
+                if (!React.isValidElement(child)) continue;
+                if (child.type === Tab.Tab && !child.props.disabled) return child.props.value;
+                const nested = findFirst(child.props.children);
+                if (void 0 !== nested) return nested;
+            }
+        };
+        return findFirst(children);
+    }), controlled = void 0 !== value, active = controlled ? value : localValue, listRef = React.useRef(null), entries = React.useRef(new Map), [revision, setRevision] = React.useState(0), [firstValue, setFirstValue] = React.useState(), [indicator, setIndicator] = React.useState(null), register = React.useCallback((element, option) => (entries.current.set(element, option), 
+    setRevision(n => n + 1), () => {
+        entries.current.delete(element), setRevision(n => n + 1);
+    }), []), select = React.useCallback(option => {
+        disabled || option.disabled || Object.is(active, option.value) || (controlled || setLocalValue(() => option.value), 
+        null == onToolTip || onToolTip(null), null == onChange || onChange(option.value, option));
+    }, [ disabled, active, controlled, onChange, onToolTip ]), enabledTabs = React.useCallback(() => {
+        var _a, _b;
+        return Array.from(null !== (_b = null === (_a = listRef.current) || void 0 === _a ? void 0 : _a.querySelectorAll('[role="tab"]')) && void 0 !== _b ? _b : []).filter(el => !el.disabled && entries.current.has(el));
+    }, []), navigate = React.useCallback(event => {
+        if (disabled) return;
+        const tabs = enabledTabs(), index = tabs.indexOf(event.currentTarget);
+        let next;
+        switch (event.key) {
+          case "ArrowRight":
+            next = (index + 1) % tabs.length;
+            break;
+
+          case "ArrowLeft":
+            next = (index - 1 + tabs.length) % tabs.length;
+            break;
+
+          case "Home":
+            next = 0;
+            break;
+
+          case "End":
+            next = tabs.length - 1;
+            break;
+
+          default:
+            return;
+        }
+        event.preventDefault();
+        const target = tabs[next];
+        if (target) {
+            target.focus();
+            const option = entries.current.get(target);
+            option && select(option);
+        }
+    }, [ disabled, enabledTabs, select ]);
+    Tab.useClientLayoutEffect(() => {
+        const first = enabledTabs()[0], firstOption = first && entries.current.get(first), selectedOption = enabledTabs().map(element => entries.current.get(element)).find(option => Object.is(null == option ? void 0 : option.value, active));
+        setFirstValue(() => {
+            var _a;
+            return null !== (_a = null == selectedOption ? void 0 : selectedOption.value) && void 0 !== _a ? _a : null == firstOption ? void 0 : firstOption.value;
+        }), !controlled && void 0 === active && firstOption && setLocalValue(() => firstOption.value);
+    }, [ revision, enabledTabs, controlled, active, disabled ]), Tab.useClientLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list) return;
+        const measure = () => {
+            var _a;
+            const target = null === (_a = Array.from(entries.current).find(([el, option]) => el.isConnected && !el.disabled && Object.is(option.value, active))) || void 0 === _a ? void 0 : _a[0];
+            if (!target || disabled || !underline) return void setIndicator(null);
+            const next = {
+                x: target.offsetLeft,
+                width: target.offsetWidth
+            };
+            setIndicator(previous => (null == previous ? void 0 : previous.x) === next.x && previous.width === next.width ? previous : next);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(list);
+        for (const element of entries.current.keys()) observer.observe(element);
+        return () => observer.disconnect();
+    }, [ revision, active, disabled, underline, children, options, padding, iconSize, iconGap, tabGap, tabWidth, textSize, width ]);
+    const colors = React.useMemo(() => ({
+        accentColor: accentColor,
+        textColor: textColor,
+        textColorSelected: textColorSelected,
+        underlineColor: underlineColor,
+        underlineSelectedColor: underlineSelectedColor,
+        iconColor: iconColor,
+        iconColorSelected: iconColorSelected
+    }), [ accentColor, textColor, textColorSelected, underlineColor, underlineSelectedColor, iconColor, iconColorSelected ]), selectedOption = Array.from(entries.current.values()).find(option => Object.is(option.value, active)), selectedAccent = null !== (_a = null == selectedOption ? void 0 : selectedOption.accentColor) && void 0 !== _a ? _a : accentColor, indicatorColor = null !== (_d = null !== (_c = null !== (_b = null == selectedOption ? void 0 : selectedOption.underlineSelectedColor) && void 0 !== _b ? _b : underlineSelectedColor) && void 0 !== _c ? _c : selectedAccent) && void 0 !== _d ? _d : "var(--core-text-special)", baselineColor = null !== (_f = null !== (_e = null == selectedOption ? void 0 : selectedOption.underlineColor) && void 0 !== _e ? _e : underlineColor) && void 0 !== _f ? _f : borderColor, context = React.useMemo(() => ({
+        value: active,
+        firstValue: firstValue,
+        iconFill: iconFill,
+        disabled: disabled,
+        register: register,
+        select: select,
+        navigate: navigate,
+        onToolTip: onToolTip,
+        colors: colors
+    }), [ active, firstValue, iconFill, disabled, register, select, navigate, onToolTip, colors ]), vars = {
+        "--tab-bar-height": misc.setStyle(height),
+        "--tab-bar-width": misc.setStyle(width),
+        "--tab-bar-gap": misc.setStyle(tabGap),
+        "--tab-bar-padding": misc.setStyle(padding),
+        "--tab-bar-icon-size": misc.setStyle(iconSize),
+        "--tab-bar-icon-gap": misc.setStyle(iconGap),
+        "--tab-bar-tab-width": "fill" === tabWidth ? "auto" : "compact" === tabWidth ? "max-content" : misc.setStyle(tabWidth),
+        "--tab-bar-tab-flex": "fill" === tabWidth ? "1 1 0" : "compact" === tabWidth ? "0 1 auto" : "0 0 auto",
+        "--tab-bar-border": border ? "1px" : "0px",
+        "--tab-bar-border-color": baselineColor,
+        "--tab-bar-underline-selected-color": indicatorColor,
+        "--tab-bar-justify": "start" === justify ? "flex-start" : "end" === justify ? "flex-end" : "center",
+        "--tab-bar-close-width": misc.setStyle(closeWidth)
+    };
+    return jsxRuntime.jsx(Tab.TabContext.Provider, {
+        value: context,
+        children: jsxRuntime.jsxs("div", {
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign({}, style), vars),
+            children: [ jsxRuntime.jsxs("div", Object.assign({}, Tab.withoutAria(attributes), {
+                ref: listRef,
+                role: "tablist",
+                "aria-label": accessibleName,
+                "aria-orientation": "horizontal",
+                "aria-disabled": disabled || void 0,
+                className: `${css.list} ${css[textSize]}`,
+                "data-icon-fill": iconFill || void 0,
+                children: [ void 0 !== children ? children : options.map((option, i) => {
+                    var _a;
+                    return React.createElement(Tab.Tab, Object.assign({}, option, {
+                        key: "string" == typeof option.value || "number" == typeof option.value ? `${typeof option.value}:${option.value}` : null !== (_a = option.id) && void 0 !== _a ? _a : i
+                    }));
+                }), indicator && jsxRuntime.jsx(react.motion.div, {
+                    "aria-hidden": "true",
+                    className: css.indicator,
+                    initial: !1,
+                    animate: indicator,
+                    transition: timing
+                }, reduced ? "static" : "animated") ]
+            })), hasClose && jsxRuntime.jsx("div", {
+                className: css.close,
+                children: jsxRuntime.jsx(IconButton.IconButton, {
+                    actionName: "Close tabs",
+                    icon: "basic.cross",
+                    iconSize: Math.max(0, iconSize - 4),
+                    buttonSize: iconSize,
+                    disabled: disabled,
+                    onClick: onClose,
+                    iconFill: iconFill
+                })
+            }) ]
+        })
+    });
+});
+
+exports.TabBar = TabBar;