@frontify/fondue-components 1.3.4 → 1.4.0

package/dist/fondue-components21.js

@@ -1,38 +1,63 @@
-import { sv as t } from "./fondue-components13.js";
-const i = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
+import { sv as t } from "./fondue-components15.js";
+const e = t({
+  base: "tw-flex tw-self-stretch tw-justify-center ",
   variants: {
-    rounded: {
-      true: "tw-rounded"
+    direction: {
+      horizontal: "tw-flex-col tw-h-0 tw-border-t tw-w-full",
+      vertical: "tw-flex-row tw-w-0 tw-border-r tw-h-full "
     },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
+    color: {
+      weak: "tw-border-line-weak",
+      default: "tw-border-line",
+      strong: "tw-border-line-strong",
+      "x-strong": "tw-border-x-line-strong"
     },
     style: {
-      default: "tw-bg-box-selected",
-      positive: "tw-bg-box-positive",
-      negative: "tw-bg-box-negative"
+      solid: "tw-border-solid",
+      dashed: "tw-border-dashed",
+      noline: "tw-border-none"
     }
-  }
-}), a = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    style: {
-      default: "tw-bg-text-interactive",
-      positive: "tw-bg-text-positive",
-      negative: "tw-bg-text-negative"
+  },
+  compoundVariants: [
+    {
+      direction: "horizontal",
+      padding: "small",
+      class: "tw-my-4"
+    },
+    {
+      direction: "horizontal",
+      padding: "medium",
+      class: "tw-my-7"
+    },
+    {
+      direction: "horizontal",
+      padding: "large",
+      class: "tw-my-12"
+    },
+    {
+      direction: "vertical",
+      padding: "small",
+      class: "tw-mx-4"
+    },
+    {
+      direction: "vertical",
+      padding: "medium",
+      class: "tw-mx-7"
     },
-    indeterminateState: {
-      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
-      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
+    {
+      direction: "vertical",
+      padding: "large",
+      class: "tw-mx-12"
     }
+  ],
+  defaultVariants: {
+    padding: "medium",
+    direction: "horizontal",
+    color: "default",
+    style: "solid"
   }
 });
 export {
-  i as loadingBarContainerStyles,
-  a as loadingBarStyles
+  e as dividerStyles
 };
 //# sourceMappingURL=fondue-components21.js.map

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        style: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        style: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-r tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        style: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        style: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACZ;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AACJ,CAAC;"}

package/dist/fondue-components22.js

@@ -1,28 +1,20 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
-const U = ({
-  prop: e,
-  defaultProp: n,
-  onChange: s = () => {
-  }
-}) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
-    (l) => {
-      if (t) {
-        const u = typeof l == "function" ? l(e) : l;
-        u !== e && r(u);
-      } else
-        c(l);
-    },
-    [t, e, c, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: e, onChange: n }) => {
-  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
-  return m(() => {
-    c.current !== o && (t == null || t(o), c.current = o);
-  }, [o, c, t]), s;
+const t = "_content_11ubj_5", n = "_subContent_11ubj_6", o = "_item_11ubj_16", s = "_subTrigger_11ubj_17", u = "_subMenuIndicator_11ubj_54", _ = "_group_11ubj_60", e = "_slot_11ubj_67", b = {
+  content: t,
+  subContent: n,
+  item: o,
+  subTrigger: s,
+  subMenuIndicator: u,
+  group: _,
+  slot: e
 };
 export {
-  U as useControllableState
+  t as content,
+  b as default,
+  _ as group,
+  o as item,
+  e as slot,
+  n as subContent,
+  u as subMenuIndicator,
+  s as subTrigger
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
+{"version":3,"file":"fondue-components22.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components23.js

@@ -1,12 +1,20 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components26.js";
-const a = "tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate", n = `tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ${t} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`, o = "tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] peer-data-[state=on]:tw-block [&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] [&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] [&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] [&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] [&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]", w = "-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out group-first:tw-opacity-0 group-first:tw-ease-in group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in [[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in group-focus-visible:tw-duration-0", r = "tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] [&_svg]:tw-shrink-0", i = "tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 group-data-[state=on]:tw-ease-out", s = "tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in";
+import { sv as t } from "./fondue-components15.js";
+const a = t({
+  base: 'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 before:tw-fixed tw-content-[""] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',
+  variants: {
+    rounded: {
+      true: "tw-rounded",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    rounded: !0
+  }
+}), e = "tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", r = "tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", p = "tw-flex tw-flex-col tw-gap-4 group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ";
 export {
-  o as segmentedControlActiveIndicatorStyles,
-  i as segmentedControlItemLabelActiveStyles,
-  s as segmentedControlItemLabelInactiveStyles,
-  r as segmentedControlItemLabelStyles,
-  w as segmentedControlItemSeparatorStyles,
-  n as segmentedControlItemStyles,
-  a as segmentedControlRootStyles
+  p as flyoutBodyStyles,
+  a as flyoutContentStyles,
+  r as flyoutFooterStyles,
+  e as flyoutHeaderStyles
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/SegmentedControl/styles/segmentedControlStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const segmentedControlRootStyles =\n    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +\n    'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';\n\nexport const segmentedControlItemStyles =\n    'tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none ' +\n    // Apply border radius based on the index\n    'first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ' +\n    // Focus styles for keyboard navigation, custom rounding applied to match the active indicator\n    `${FOCUS_OUTLINE} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`;\n\nexport const segmentedControlActiveIndicatorStyles =\n    'tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform ' +\n    // Outline of active item\n    \"before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled \" +\n    'before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] ' +\n    // Show the active indicator when the state is on\n    'peer-data-[state=on]:tw-block ' +\n    // Used to animate the active indicator horizontally\n    '[&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] ' +\n    '[&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] ' +\n    '[&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] ' +\n    '[&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] ' +\n    '[&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] ' +\n    'peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] ' +\n    'peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] ' +\n    'peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] ' +\n    'peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] ' +\n    'peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] ' +\n    'peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] ' +\n    'peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] ' +\n    'peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] ' +\n    'peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] ' +\n    'peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]';\n\nexport const segmentedControlItemSeparatorStyles =\n    '-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out ' +\n    // Hide the separator when the state is on to rely on the active item's border\n    'group-first:tw-opacity-0 group-first:tw-ease-in ' +\n    'group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in ' +\n    'group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in ' +\n    '[[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in ' +\n    // Remove transition is the control is focused\n    'group-focus-visible:tw-duration-0';\n\nexport const segmentedControlItemLabelStyles =\n    'tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium ' +\n    // Hover on unselected items but not when disabled\n    'group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] ' +\n    // Prevent shrinking of icons\n    '[&_svg]:tw-shrink-0';\n\nexport const segmentedControlItemLabelActiveStyles =\n    'tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium ' +\n    'tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 ' +\n    'group-data-[state=on]:tw-ease-out';\n\nexport const segmentedControlItemLabelInactiveStyles =\n    'tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal ' +\n    'tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 ' +\n    'group-data-[state=on]:tw-ease-in';\n"],"names":["segmentedControlRootStyles","segmentedControlItemStyles","FOCUS_OUTLINE","segmentedControlActiveIndicatorStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles"],"mappings":";AAIO,MAAMA,IACT,+OAGSC,IACT,oNAIGC,CAAa,qEAEPC,IACT,i5CAuBSC,IACT,kYASSC,IACT,qMAMSC,IACT,6OAISC,IACT;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/components/Flyout/styles/flyoutStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const flyoutContentStyles = sv({\n    base:\n        'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 ' +\n        // Mobile view flyout -> dialog responsiveness\n        '[body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 ' +\n        // Responsive dialog background element\n        'before:tw-fixed tw-content-[\"\"] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n            false: '',\n        },\n    },\n    defaultVariants: {\n        rounded: true,\n    },\n});\n\nexport const flyoutHeaderStyles =\n    'tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutFooterStyles =\n    'tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutBodyStyles =\n    'tw-flex tw-flex-col tw-gap-4 ' +\n    'group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 ' +\n    'group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ';\n"],"names":["flyoutContentStyles","sv","flyoutHeaderStyles","flyoutFooterStyles","flyoutBodyStyles"],"mappings":";AAIO,MAAMA,IAAsBC,EAAG;AAAA,EAClC,MACI;AAAA,EAKJ,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT,gOAKSC,IACT,qNAKSC,IACT;"}

package/dist/fondue-components24.js

@@ -1,9 +1,38 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components26.js";
-const r = `tw-group tw-relative tw-flex tw-items-stretch tw-font-sans tw-font-normal tw-text-start tw-h-9 tw-text-body-medium tw-text-text tw-transition-colors tw-bg-base dark:tw-bg-transparent tw-rounded tw-border tw-border-line-strong hover:tw-border-line-x-strong has-[:focus-visible]:tw-border-line-xx-strong has-[input[readonly]]:tw-border-transparent has-[input:disabled]:tw-border-line-weak has-[input:disabled]:tw-bg-box-disabled data-[status="success"]:tw-border-text-positive data-[status="error"]:tw-border-text-negative ${t}`, a = 'tw-peer/input tw-w-full tw-bg-transparent placeholder:tw-text-text-x-weak tw-flex tw-items-center [text-align:inherit] tw-indent-3 tw-outline-none tw-rounded-[calc(var(--radius)_-_var(--line-width))] has-[~_div:not([data-name="right"])]:tw-indent-0 has-[~_:not([data-name="right"])]:tw-pl-0 has-[~_:not([data-name="right"])]:tw-rounded-l-none has-[~_[data-name="right"]]:tw-pr-0 has-[~_[data-name="right"]]:tw-rounded-r-none [~_:not([data-name="right"])_~_:not([data-name="left"])]:tw-pr-0 [~_:not([data-name="right"])_~_:not([data-name="left"])]:tw-rounded-r-none[&[readonly]]:tw-cursor-text [&[readonly]]:tw-text-text-weak [&[readonly]]:tw-indent-0 disabled:tw-cursor-text disabled:tw-text-text-disabled ', n = 'tw-peer tw-shrink-0 tw-flex tw-items-center tw-cursor-text tw-gap-1.5 tw-pl-3 tw-pr-1.5 [&:not([data-name="right"])]:-tw-order-1 [&:not([data-name="right"])]:tw-mx-0 data-[name="right"]:tw-order-[0] data-[name="right"]:tw-mx-0 data-[name="right"]:tw-pr-3 [&:not([data-name="right"])_~_:not([data-name="left"])]:tw-order-[0] [&:not([data-name="right"])_~_:not([data-name="left"])]:tw-mx-0 peer-[&[readonly]]/input:tw-text-text-weak peer-[&[readonly]]/input:[&:not([data-name="right"])]:tw-pl-0 peer-disabled/input:tw-text-text-disabled ', o = "tw-flex tw-absolute tw-size-6 -tw-top-3 -tw-right-3 tw-pointer-events-none tw-items-center tw-justify-center tw-bg-base tw-border tw-border-line-strong tw-rounded-full before:tw-flex before:tw-items-center before:tw-justify-center before:tw-size-4 before:tw-rounded-full before:tw-border before:tw-border-solid before:tw-border-text-interactive before:tw-border-t-transparent before:tw-animate-spin";
+import { sv as t } from "./fondue-components15.js";
+const i = t({
+  base: "tw-relative tw-w-full tw-overflow-hidden",
+  variants: {
+    rounded: {
+      true: "tw-rounded"
+    },
+    size: {
+      small: "tw-h-1",
+      medium: "tw-h-2",
+      large: "tw-h-3",
+      "x-large": "tw-h-4"
+    },
+    style: {
+      default: "tw-bg-box-selected",
+      positive: "tw-bg-box-positive",
+      negative: "tw-bg-box-negative"
+    }
+  }
+}), a = t({
+  base: "tw-h-full tw-w-full",
+  variants: {
+    style: {
+      default: "tw-bg-text-interactive",
+      positive: "tw-bg-text-positive",
+      negative: "tw-bg-text-negative"
+    },
+    indeterminateState: {
+      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
+      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
+    }
+  }
+});
 export {
-  a as inputStyles,
-  o as loadingStatusStyles,
-  r as rootStyles,
-  n as slotStyles
+  i as loadingBarContainerStyles,
+  a as loadingBarStyles
 };
 //# sourceMappingURL=fondue-components24.js.map

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/TextInput/styles/textInputStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const rootStyles =\n    'tw-group tw-relative tw-flex tw-items-stretch tw-font-sans tw-font-normal tw-text-start tw-h-9 tw-text-body-medium tw-text-text tw-transition-colors ' +\n    // Focus and border styles\n    'tw-bg-base dark:tw-bg-transparent tw-rounded tw-border tw-border-line-strong hover:tw-border-line-x-strong has-[:focus-visible]:tw-border-line-xx-strong ' +\n    // Readonly styles\n    'has-[input[readonly]]:tw-border-transparent ' +\n    // Disabled styles\n    'has-[input:disabled]:tw-border-line-weak has-[input:disabled]:tw-bg-box-disabled ' +\n    // Success and error status styles\n    'data-[status=\"success\"]:tw-border-text-positive data-[status=\"error\"]:tw-border-text-negative ' +\n    `${FOCUS_OUTLINE}`;\n\nexport const inputStyles =\n    'tw-peer/input tw-w-full tw-bg-transparent placeholder:tw-text-text-x-weak tw-flex tw-items-center [text-align:inherit] tw-indent-3 tw-outline-none tw-rounded-[calc(var(--radius)_-_var(--line-width))] ' +\n    // Remove border-radius and text-indent/padding on the left if there’s a left-side slot\n    'has-[~_div:not([data-name=\"right\"])]:tw-indent-0 has-[~_:not([data-name=\"right\"])]:tw-pl-0 has-[~_:not([data-name=\"right\"])]:tw-rounded-l-none ' +\n    // Remove border-radius and padding on the right if there’s a right-side slot\n    'has-[~_[data-name=\"right\"]]:tw-pr-0 has-[~_[data-name=\"right\"]]:tw-rounded-r-none ' +\n    '[~_:not([data-name=\"right\"])_~_:not([data-name=\"left\"])]:tw-pr-0 [~_:not([data-name=\"right\"])_~_:not([data-name=\"left\"])]:tw-rounded-r-none' +\n    // Readonly styles\n    '[&[readonly]]:tw-cursor-text [&[readonly]]:tw-text-text-weak [&[readonly]]:tw-indent-0 ' +\n    // Disabled styles\n    'disabled:tw-cursor-text disabled:tw-text-text-disabled ';\n\nexport const slotStyles =\n    'tw-peer tw-shrink-0 tw-flex tw-items-center tw-cursor-text tw-gap-1.5 tw-pl-3 tw-pr-1.5 ' +\n    // Left slot\n    '[&:not([data-name=\"right\"])]:-tw-order-1 [&:not([data-name=\"right\"])]:tw-mx-0 ' +\n    // Right slot\n    'data-[name=\"right\"]:tw-order-[0] data-[name=\"right\"]:tw-mx-0 data-[name=\"right\"]:tw-pr-3 ' +\n    // 2 slots without any name should be implicitly ordered\n    '[&:not([data-name=\"right\"])_~_:not([data-name=\"left\"])]:tw-order-[0] [&:not([data-name=\"right\"])_~_:not([data-name=\"left\"])]:tw-mx-0 ' +\n    // Readonly color styles\n    'peer-[&[readonly]]/input:tw-text-text-weak peer-[&[readonly]]/input:[&:not([data-name=\"right\"])]:tw-pl-0 ' +\n    // Disabled color styles\n    'peer-disabled/input:tw-text-text-disabled ';\n\nexport const loadingStatusStyles =\n    'tw-flex tw-absolute tw-size-6 -tw-top-3 -tw-right-3 tw-pointer-events-none ' +\n    'tw-items-center tw-justify-center tw-bg-base tw-border tw-border-line-strong tw-rounded-full ' +\n    'before:tw-flex before:tw-items-center before:tw-justify-center before:tw-size-4 before:tw-rounded-full ' +\n    'before:tw-border before:tw-border-solid before:tw-border-text-interactive before:tw-border-t-transparent before:tw-animate-spin';\n"],"names":["rootStyles","FOCUS_OUTLINE","inputStyles","slotStyles","loadingStatusStyles"],"mappings":";AAIa,MAAAA,IACT,4gBASGC,CAAa,IAEPC,IACT,ssBAWSC,IACT,2hBAYSC,IACT;"}
+{"version":3,"file":"fondue-components24.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        style: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        style: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}

package/dist/fondue-components25.js

@@ -1,18 +1,28 @@
-import { sv as t } from "./fondue-components13.js";
-const o = t({
-  base: "tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden",
-  variants: {
-    padding: {
-      spacious: "tw-px-3 tw-py-2",
-      compact: "tw-px-2 tw-py-1"
-    }
-  },
-  defaultVariants: {
-    padding: "spacious"
+import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
+const U = ({
+  prop: e,
+  defaultProp: n,
+  onChange: s = () => {
   }
-}), e = "tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small";
+}) => {
+  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
+    (l) => {
+      if (t) {
+        const u = typeof l == "function" ? l(e) : l;
+        u !== e && r(u);
+      } else
+        c(l);
+    },
+    [t, e, c, r]
+  );
+  return [i, a];
+}, b = ({ defaultProp: e, onChange: n }) => {
+  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
+  return m(() => {
+    c.current !== o && (t == null || t(o), c.current = o);
+  }, [o, c, t]), s;
+};
 export {
-  e as tooltipArrowStyles,
-  o as tooltipContentStyles
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/Tooltip/styles/tooltipStyles.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const tooltipContentStyles = sv({\n    base: 'tw-bg-box-neutral-mighty tw-text-box-neutral-mighty-inverse tw-rounded tw-max-w-48 tw-text-sm tw-overflow-hidden',\n    variants: {\n        padding: {\n            spacious: 'tw-px-3 tw-py-2',\n            compact: 'tw-px-2 tw-py-1',\n        },\n    },\n    defaultVariants: {\n        padding: 'spacious',\n    },\n});\n\nexport const tooltipArrowStyles =\n    'tw-w-2 tw-h-2 tw-bg-box-neutral-mighty tw-border-r tw-border-b tw-border-r-line-mighty tw-border-b-line-mighty tw-rotate-45 -tw-translate-y-1 tw-rounded-br-small';\n"],"names":["tooltipContentStyles","sv","tooltipArrowStyles"],"mappings":";AAIO,MAAMA,IAAuBC,EAAG;AAAA,EACnC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}

package/dist/fondue-components26.js

@@ -1,5 +1,12 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue";
+import { FOCUS_OUTLINE as t } from "./fondue-components35.js";
+const a = "tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate", n = `tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ${t} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`, o = "tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] peer-data-[state=on]:tw-block [&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] [&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] [&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] [&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] [&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]", w = "-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out group-first:tw-opacity-0 group-first:tw-ease-in group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in [[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in group-focus-visible:tw-duration-0", r = "tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] [&_svg]:tw-shrink-0", i = "tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 group-data-[state=on]:tw-ease-out", s = "tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in";
 export {
-  t as FOCUS_OUTLINE
+  o as segmentedControlActiveIndicatorStyles,
+  i as segmentedControlItemLabelActiveStyles,
+  s as segmentedControlItemLabelInactiveStyles,
+  r as segmentedControlItemLabelStyles,
+  w as segmentedControlItemSeparatorStyles,
+  n as segmentedControlItemStyles,
+  a as segmentedControlRootStyles
 };
 //# sourceMappingURL=fondue-components26.js.map

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue';\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/SegmentedControl/styles/segmentedControlStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const segmentedControlRootStyles =\n    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +\n    'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';\n\nexport const segmentedControlItemStyles =\n    'tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none ' +\n    // Apply border radius based on the index\n    'first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ' +\n    // Focus styles for keyboard navigation, custom rounding applied to match the active indicator\n    `${FOCUS_OUTLINE} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`;\n\nexport const segmentedControlActiveIndicatorStyles =\n    'tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform ' +\n    // Outline of active item\n    \"before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled \" +\n    'before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] ' +\n    // Show the active indicator when the state is on\n    'peer-data-[state=on]:tw-block ' +\n    // Used to animate the active indicator horizontally\n    '[&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] ' +\n    '[&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] ' +\n    '[&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] ' +\n    '[&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] ' +\n    '[&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] ' +\n    'peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] ' +\n    'peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] ' +\n    'peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] ' +\n    'peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] ' +\n    'peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] ' +\n    'peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] ' +\n    'peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] ' +\n    'peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] ' +\n    'peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] ' +\n    'peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]';\n\nexport const segmentedControlItemSeparatorStyles =\n    '-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out ' +\n    // Hide the separator when the state is on to rely on the active item's border\n    'group-first:tw-opacity-0 group-first:tw-ease-in ' +\n    'group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in ' +\n    'group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in ' +\n    '[[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in ' +\n    // Remove transition is the control is focused\n    'group-focus-visible:tw-duration-0';\n\nexport const segmentedControlItemLabelStyles =\n    'tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium ' +\n    // Hover on unselected items but not when disabled\n    'group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] ' +\n    // Prevent shrinking of icons\n    '[&_svg]:tw-shrink-0';\n\nexport const segmentedControlItemLabelActiveStyles =\n    'tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium ' +\n    'tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 ' +\n    'group-data-[state=on]:tw-ease-out';\n\nexport const segmentedControlItemLabelInactiveStyles =\n    'tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal ' +\n    'tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 ' +\n    'group-data-[state=on]:tw-ease-in';\n"],"names":["segmentedControlRootStyles","segmentedControlItemStyles","FOCUS_OUTLINE","segmentedControlActiveIndicatorStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles"],"mappings":";AAIO,MAAMA,IACT,+OAGSC,IACT,oNAIGC,CAAa,qEAEPC,IACT,i5CAuBSC,IACT,kYASSC,IACT,qMAMSC,IACT,6OAISC,IACT;"}