@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/RadioButtonList-DsOgpe0m.mjs

@@ -0,0 +1,99 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import React, { useId, useState, useRef, useEffect, useMemo, createElement } from "react";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { a as RadioGroupContext, R as RadioButton } from "./RadioButton-DTUKMjvM.mjs";
+
+var 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(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 = __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 = useId(), [localValue, setLocalValue] = useState(() => defaultValue), initialValue = useRef(defaultValue), containerRef = useRef(null), controlled = void 0 !== value, active = controlled ? value : localValue;
+    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": setStyle(marginBottom, "0px"),
+        "--rb-gap": `${Number.isFinite(gap) ? Math.max(0, gap) : 16}px`,
+        "--rb-list-width": setStyle(width, "min-content")
+    }, context = 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 jsx(RadioGroupContext.Provider, {
+        value: context,
+        children: 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 && jsx("div", {
+                id: labelId,
+                children: label
+            }), void 0 !== children ? children : options.map((option, index) => {
+                var _a;
+                return createElement(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);
+
+export { RadioButtonList as R };

package/dist/esm/chunks/Slider-DaZTE-eD.mjs

@@ -0,0 +1,176 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useState, useRef, useEffect } from "react";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+var 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(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 = __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] = useState(defaultValue), currentValue = clampSliderValue(null != value ? value : localValue, minimum, maximum), percent = sliderPercent(currentValue, minimum, maximum), interaction = useRef(null), [dragging, setDragging] = useState(!1), previousBounds = useRef({
+        minimum: minimum,
+        maximum: maximum
+    });
+    useEffect(() => {
+        (disabled || previousBounds.current.minimum !== minimum || previousBounds.current.maximum !== maximum) && (interaction.current = null, 
+        setDragging(!1)), previousBounds.current = {
+            minimum: minimum,
+            maximum: maximum
+        };
+    }, [ disabled, minimum, maximum ]), 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 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: [ 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();
+            }
+        })), jsxs("div", {
+            className: css_trackWrapper,
+            "aria-hidden": "true",
+            children: [ jsx("div", {
+                className: css_trackBg,
+                children: jsx("div", {
+                    className: css_track
+                })
+            }), jsx("div", {
+                className: css_trackHead
+            }) ]
+        }) ]
+    });
+});
+
+export { Slider as S };

package/dist/esm/chunks/Spacer-CsJxUJ7E.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React from "react";
+
+const Spacer = React.memo(props => {
+    const {size: size = "s"} = props, divAttributes = __rest(props, [ "size" ]), {className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "className", "style" ]), dimension = `var(--spacing-${size})`, spacerStyle = {
+        width: dimension,
+        minWidth: dimension,
+        maxWidth: dimension,
+        height: dimension,
+        minHeight: dimension,
+        maxHeight: dimension,
+        flexShrink: 0
+    };
+    return jsx("div", Object.assign({
+        className: className,
+        style: Object.assign(Object.assign({}, style), spacerStyle)
+    }, rest));
+});
+
+export { Spacer as S };

package/dist/esm/chunks/Switch-BDFgMC0b.mjs

@@ -0,0 +1,84 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { useState } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var 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(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 = __rest(props, [ "borderRadius", "knobRadius", "knobWidth", "name", "checked", "defaultChecked", "value", "height", "width", "padding", "transition", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange", "onClick", "disabled", "type", "className", "style" ]), [internalChecked, setInternalChecked] = useState(defaultChecked), on = null != checked ? checked : internalChecked, accessibleName = (null == name ? void 0 : name.trim()) || "Switch", reduceMotion = usePrefersReducedMotion(), themeMotion = useTheme().current.motion, motionTransition = 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 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 ? jsx("div", {
+            className: css_knob,
+            "aria-hidden": "true"
+        }) : jsx(motion.div, {
+            className: css_knob,
+            "aria-hidden": "true",
+            layout: "position",
+            initial: !1,
+            animate: {
+                backgroundColor: knobColor
+            },
+            transition: motionTransition
+        }), reduceMotion ? jsx("span", {
+            className: css_track,
+            "aria-hidden": "true",
+            style: {
+                backgroundColor: backgroundColor
+            }
+        }) : jsx(motion.span, {
+            className: css_track,
+            "aria-hidden": "true",
+            initial: !1,
+            animate: {
+                backgroundColor: backgroundColor
+            },
+            transition: motionTransition
+        }) ]
+    }));
+}
+
+SwitchComponent.displayName = "Switch";
+
+const Switch = React.memo(SwitchComponent);
+
+export { Switch as S };

package/dist/esm/chunks/Tab-B8yJ9Qy4.mjs

@@ -0,0 +1,105 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { createContext, useEffect, useLayoutEffect, useContext, useId, useRef, useMemo } from "react";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { B as Badge } from "./Badge-DpnuS-Ey.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { T as ToolTipType } from "./sharedTypes-DYXO7VNa.mjs";
+
+const TabContext = createContext(null), withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([name]) => !name.startsWith("aria-"))), useClientLayoutEffect = "undefined" == typeof window ? useEffect : 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(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 = __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 = 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 = useId(), ref = useRef(null), option = 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 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: 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 && jsx("span", {
+            className: css_icon,
+            "aria-hidden": "true",
+            children: jsx(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 && jsx(Badge, {
+            variant: "light",
+            hideZero: !1,
+            count: count
+        }) ]
+    }));
+});
+
+export { Tab as T, TabContext as a, useClientLayoutEffect as u, withoutAria as w };