@frontify/fondue-components 3.0.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/dist/fondue-components.js +38 -24
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +18 -38
  4. package/dist/fondue-components10.js.map +1 -1
  5. package/dist/fondue-components11.js +64 -40
  6. package/dist/fondue-components11.js.map +1 -1
  7. package/dist/fondue-components12.js +19 -77
  8. package/dist/fondue-components12.js.map +1 -1
  9. package/dist/fondue-components13.js +22 -64
  10. package/dist/fondue-components13.js.map +1 -1
  11. package/dist/fondue-components14.js +39 -46
  12. package/dist/fondue-components14.js.map +1 -1
  13. package/dist/fondue-components15.js +6 -12
  14. package/dist/fondue-components15.js.map +1 -1
  15. package/dist/fondue-components16.js +46 -154
  16. package/dist/fondue-components16.js.map +1 -1
  17. package/dist/fondue-components17.js +54 -117
  18. package/dist/fondue-components17.js.map +1 -1
  19. package/dist/fondue-components18.js +28 -117
  20. package/dist/fondue-components18.js.map +1 -1
  21. package/dist/fondue-components19.js +111 -20
  22. package/dist/fondue-components19.js.map +1 -1
  23. package/dist/fondue-components20.js +65 -14
  24. package/dist/fondue-components20.js.map +1 -1
  25. package/dist/fondue-components21.js +42 -59
  26. package/dist/fondue-components21.js.map +1 -1
  27. package/dist/fondue-components22.js +32 -17
  28. package/dist/fondue-components22.js.map +1 -1
  29. package/dist/fondue-components23.js +5 -17
  30. package/dist/fondue-components23.js.map +1 -1
  31. package/dist/fondue-components24.js +10 -33
  32. package/dist/fondue-components24.js.map +1 -1
  33. package/dist/fondue-components25.js +154 -24
  34. package/dist/fondue-components25.js.map +1 -1
  35. package/dist/fondue-components26.js +118 -9
  36. package/dist/fondue-components26.js.map +1 -1
  37. package/dist/fondue-components27.js +118 -110
  38. package/dist/fondue-components27.js.map +1 -1
  39. package/dist/fondue-components28.js +21 -12
  40. package/dist/fondue-components28.js.map +1 -1
  41. package/dist/fondue-components29.js +28 -39
  42. package/dist/fondue-components29.js.map +1 -1
  43. package/dist/fondue-components3.js +11 -40
  44. package/dist/fondue-components3.js.map +1 -1
  45. package/dist/fondue-components30.js +28 -8
  46. package/dist/fondue-components30.js.map +1 -1
  47. package/dist/fondue-components31.js +129 -20
  48. package/dist/fondue-components31.js.map +1 -1
  49. package/dist/fondue-components32.js +20 -55
  50. package/dist/fondue-components32.js.map +1 -1
  51. package/dist/fondue-components33.js +45 -18
  52. package/dist/fondue-components33.js.map +1 -1
  53. package/dist/fondue-components34.js +15 -15
  54. package/dist/fondue-components34.js.map +1 -1
  55. package/dist/fondue-components35.js +60 -2
  56. package/dist/fondue-components35.js.map +1 -1
  57. package/dist/fondue-components36.js +14 -38
  58. package/dist/fondue-components36.js.map +1 -1
  59. package/dist/fondue-components37.js +22 -0
  60. package/dist/fondue-components37.js.map +1 -0
  61. package/dist/fondue-components38.js +20 -0
  62. package/dist/fondue-components38.js.map +1 -0
  63. package/dist/fondue-components39.js +8 -0
  64. package/dist/fondue-components39.js.map +1 -0
  65. package/dist/fondue-components4.js +39 -45
  66. package/dist/fondue-components4.js.map +1 -1
  67. package/dist/fondue-components40.js +16 -0
  68. package/dist/fondue-components40.js.map +1 -0
  69. package/dist/fondue-components41.js +8 -0
  70. package/dist/fondue-components41.js.map +1 -0
  71. package/dist/fondue-components42.js +38 -0
  72. package/dist/fondue-components42.js.map +1 -0
  73. package/dist/fondue-components43.js +8 -0
  74. package/dist/fondue-components43.js.map +1 -0
  75. package/dist/fondue-components44.js +28 -0
  76. package/dist/fondue-components44.js.map +1 -0
  77. package/dist/fondue-components45.js +20 -0
  78. package/dist/fondue-components45.js.map +1 -0
  79. package/dist/fondue-components46.js +14 -0
  80. package/dist/fondue-components46.js.map +1 -0
  81. package/dist/fondue-components47.js +16 -0
  82. package/dist/fondue-components47.js.map +1 -0
  83. package/dist/fondue-components48.js +133 -0
  84. package/dist/fondue-components48.js.map +1 -0
  85. package/dist/fondue-components49.js +15 -0
  86. package/dist/fondue-components49.js.map +1 -0
  87. package/dist/fondue-components5.js +46 -82
  88. package/dist/fondue-components5.js.map +1 -1
  89. package/dist/fondue-components50.js +46 -0
  90. package/dist/fondue-components50.js.map +1 -0
  91. package/dist/fondue-components51.js +11 -0
  92. package/dist/fondue-components51.js.map +1 -0
  93. package/dist/fondue-components52.js +30 -0
  94. package/dist/fondue-components52.js.map +1 -0
  95. package/dist/fondue-components53.js +52 -0
  96. package/dist/fondue-components53.js.map +1 -0
  97. package/dist/fondue-components54.js +21 -0
  98. package/dist/fondue-components54.js.map +1 -0
  99. package/dist/fondue-components55.js +10 -0
  100. package/dist/fondue-components55.js.map +1 -0
  101. package/dist/fondue-components56.js +5 -0
  102. package/dist/fondue-components56.js.map +1 -0
  103. package/dist/fondue-components57.js +14 -0
  104. package/dist/fondue-components57.js.map +1 -0
  105. package/dist/fondue-components58.js +42 -0
  106. package/dist/fondue-components58.js.map +1 -0
  107. package/dist/fondue-components6.js +48 -30
  108. package/dist/fondue-components6.js.map +1 -1
  109. package/dist/fondue-components7.js +80 -83
  110. package/dist/fondue-components7.js.map +1 -1
  111. package/dist/fondue-components8.js +28 -56
  112. package/dist/fondue-components8.js.map +1 -1
  113. package/dist/fondue-components9.js +101 -22
  114. package/dist/fondue-components9.js.map +1 -1
  115. package/dist/index.d.ts +490 -5
  116. package/dist/style.css +1 -1
  117. package/package.json +5 -3
@@ -1 +1 @@
1
- {"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 variant: {\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 variant: '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,SAAS;AAAA,MACL,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,SAAS;AAAA,EACb;AACJ,CAAC;"}
1
+ {"version":3,"file":"fondue-components21.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n /**\n * Sets the open state of the tooltip.\n */\n open?: boolean;\n /**\n * Callback that is called when the open state of the tooltip changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The delay in milliseconds before the tooltip appears.\n * @default 700\n */\n enterDelay?: number;\n children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n /**\n * @default \"spacious\"\n */\n padding?: 'spacious' | 'compact';\n /**\n * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n */\n side?: 'top' | 'right' | 'bottom' | 'left';\n maxWidth?: string;\n className?: string;\n children: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n {children}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n { children, 'data-test-id': dataTestId = 'fondue-tooltip-content' }: TooltipTriggerProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => {\n return (\n <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n {children}\n </RadixTooltip.Trigger>\n );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n {\n children,\n className,\n maxWidth,\n 'data-test-id': dataTestId = 'fondue-tooltip-content',\n padding = 'spacious',\n ...props\n }: TooltipContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n data-test-id={dataTestId}\n data-tooltip-spacing={padding}\n className={cn(styles.root, className)}\n style={{ maxWidth }}\n collisionPadding={16}\n sideOffset={8}\n ref={ref}\n {...props}\n >\n {children}\n <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n Root: TooltipRoot,\n Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAb;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
@@ -1,20 +1,35 @@
1
- const t = "_content_17q0q_5", n = "_subContent_17q0q_6", o = "_item_17q0q_16", s = "_subTrigger_17q0q_17", _ = "_subMenuIndicator_17q0q_53", e = "_group_17q0q_67", u = "_slot_17q0q_74", c = {
2
- content: t,
3
- subContent: n,
4
- item: o,
5
- subTrigger: s,
6
- subMenuIndicator: _,
7
- group: e,
8
- slot: u
9
- };
1
+ const g = (t) => t.startsWith("aria-") || t === "role", s = {
2
+ m: "margin",
3
+ mx: "margin-x",
4
+ my: "margin-y",
5
+ mt: "margin-top",
6
+ mr: "margin-right",
7
+ mb: "margin-bottom",
8
+ ml: "margin-left",
9
+ p: "padding",
10
+ px: "padding-x",
11
+ py: "padding-y",
12
+ pt: "padding-top",
13
+ pr: "padding-right",
14
+ pb: "padding-bottom",
15
+ pl: "padding-left",
16
+ direction: "flex-direction",
17
+ align: "align-items",
18
+ wrap: "flex-wrap",
19
+ columns: "grid-template-columns",
20
+ rows: "grid-template-rows"
21
+ }, m = (t, n) => (t === "columns" || t === "rows") && typeof n == "number" ? `repeat(${n}, 1fr)` : n, l = (t, n = {}) => Object.entries(t).reduce((i, [r, o]) => {
22
+ if (g(r))
23
+ return i;
24
+ const e = r in n ? n[r] : r in s ? s[r] : r, a = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
25
+ if (typeof o == "object")
26
+ for (const [d, p] of Object.entries(o))
27
+ p !== void 0 && (i[`--${d}-${a}`] = m(r, p));
28
+ else
29
+ i[`--${a}`] = m(r, o);
30
+ return i;
31
+ }, {});
10
32
  export {
11
- t as content,
12
- c as default,
13
- e as group,
14
- o as item,
15
- u as slot,
16
- n as subContent,
17
- _ as subMenuIndicator,
18
- s as subTrigger
33
+ l as propsToCssVariables
19
34
  };
20
35
  //# sourceMappingURL=fondue-components22.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components22.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components22.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n m: 'margin',\n mx: 'margin-x',\n my: 'margin-y',\n mt: 'margin-top',\n mr: 'margin-right',\n mb: 'margin-bottom',\n ml: 'margin-left',\n p: 'padding',\n px: 'padding-x',\n py: 'padding-y',\n pt: 'padding-top',\n pr: 'padding-right',\n pb: 'padding-bottom',\n pl: 'padding-left',\n direction: 'flex-direction',\n align: 'align-items',\n wrap: 'flex-wrap',\n columns: 'grid-template-columns',\n rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n if (key === 'columns' || key === 'rows') {\n if (typeof value === 'number') {\n return `repeat(${value}, 1fr)`;\n }\n return value;\n }\n return value;\n};\n\nexport const propsToCssVariables = (\n props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n return Object.entries(props).reduce((acc, [key, value]) => {\n if (isAriaProp(key)) {\n return acc;\n }\n\n const cssProperty =\n key in extraAbbreviationToCssProperty\n ? extraAbbreviationToCssProperty[key]\n : key in abbreviationToCssProperty\n ? abbreviationToCssProperty[key]\n : key;\n const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n if (typeof value === 'object') {\n for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n if (breakpointValue !== undefined) {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n }\n }\n } else {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n }\n\n return acc;\n }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,OACvCH,MAAQ,aAAaA,MAAQ,WACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAIvBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EAAE,OAAO,CAACE,GAAK,CAACP,GAAKG,CAAK,MAAM;AACnD,MAAAJ,EAAWC,CAAG;AACP,WAAAO;AAGL,QAAAC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GACNS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAEzF,MAAA,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEhBJ,EAAA,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAGnE,SAAAI;AACX,GAAG,CAAmB,CAAA;"}
@@ -1,20 +1,8 @@
1
- import { sv as t } from "./fondue-components15.js";
2
- const a = t({
3
- 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',
4
- variants: {
5
- rounded: {
6
- true: "tw-rounded",
7
- false: ""
8
- }
9
- },
10
- defaultVariants: {
11
- rounded: !0
12
- }
13
- }), 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 ";
1
+ const o = "_root_11d5e_5", t = {
2
+ root: o
3
+ };
14
4
  export {
15
- p as flyoutBodyStyles,
16
- a as flyoutContentStyles,
17
- r as flyoutFooterStyles,
18
- e as flyoutHeaderStyles
5
+ t as default,
6
+ o as root
19
7
  };
20
8
  //# sourceMappingURL=fondue-components23.js.map
@@ -1 +1 @@
1
- {"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;"}
1
+ {"version":3,"file":"fondue-components23.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -1,38 +1,15 @@
1
- import { sv as t } from "./fondue-components15.js";
2
- const i = t({
3
- base: "tw-relative tw-w-full tw-overflow-hidden",
4
- variants: {
5
- rounded: {
6
- true: "tw-rounded"
7
- },
8
- size: {
9
- small: "tw-h-1",
10
- medium: "tw-h-2",
11
- large: "tw-h-3",
12
- "x-large": "tw-h-4"
13
- },
14
- variant: {
15
- default: "tw-bg-box-selected",
16
- positive: "tw-bg-box-positive",
17
- negative: "tw-bg-box-negative"
1
+ import { extendTailwindMerge as e } from "tailwind-merge";
2
+ import { tv as o } from "tailwind-variants";
3
+ const r = e({
4
+ prefix: "tw-",
5
+ extend: {
6
+ classGroups: {
7
+ "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
18
8
  }
19
9
  }
20
- }), a = t({
21
- base: "tw-h-full tw-w-full",
22
- variants: {
23
- variant: {
24
- default: "tw-bg-text-interactive",
25
- positive: "tw-bg-text-positive",
26
- negative: "tw-bg-text-negative"
27
- },
28
- indeterminateState: {
29
- true: "tw-animate-loading-bar-infinite tw-origin-left-right",
30
- false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
31
- }
32
- }
33
- });
10
+ }), m = (...t) => r(...t), x = (t) => o(t);
34
11
  export {
35
- i as loadingBarContainerStyles,
36
- a as loadingBarStyles
12
+ m as cn,
13
+ x as sv
37
14
  };
38
15
  //# sourceMappingURL=fondue-components24.js.map
@@ -1 +1 @@
1
- {"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 variant: {\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 variant: {\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,SAAS;AAAA,MACL,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,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}
1
+ {"version":3,"file":"fondue-components24.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n prefix: 'tw-',\n extend: {\n classGroups: {\n 'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n },\n },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}
@@ -1,28 +1,158 @@
1
- import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
2
- const U = ({
3
- prop: e,
4
- defaultProp: n,
5
- onChange: s = () => {
1
+ import { FOCUS_OUTLINE as t } from "./fondue-components56.js";
2
+ import { sv as e } from "./fondue-components24.js";
3
+ const o = e({
4
+ base: `tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,
5
+ variants: {
6
+ disabled: {
7
+ true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
8
+ },
9
+ rounding: {
10
+ medium: "tw-rounded",
11
+ full: "tw-rounded-full"
12
+ },
13
+ size: {
14
+ small: "tw-h-6 tw-text-body-small",
15
+ medium: "tw-h-9 tw-text-body-medium",
16
+ large: "tw-h-12 tw-text-body-large"
17
+ },
18
+ aspect: {
19
+ square: "tw-aspect-square tw-px-0",
20
+ default: ""
21
+ },
22
+ hugWidth: {
23
+ false: "tw-w-full"
24
+ },
25
+ emphasis: {
26
+ default: "",
27
+ weak: "",
28
+ strong: ""
29
+ },
30
+ variant: {
31
+ default: "",
32
+ positive: "",
33
+ negative: "",
34
+ danger: "",
35
+ loud: ""
36
+ }
37
+ },
38
+ compoundVariants: [
39
+ {
40
+ disabled: !1,
41
+ variant: "default",
42
+ emphasis: "default",
43
+ class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
44
+ },
45
+ {
46
+ disabled: !1,
47
+ variant: "default",
48
+ emphasis: "weak",
49
+ class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
50
+ },
51
+ {
52
+ disabled: !1,
53
+ variant: "default",
54
+ emphasis: "strong",
55
+ class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
56
+ },
57
+ {
58
+ disabled: !1,
59
+ variant: "positive",
60
+ emphasis: "default",
61
+ class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
62
+ },
63
+ {
64
+ disabled: !1,
65
+ variant: "positive",
66
+ emphasis: "weak",
67
+ class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
68
+ },
69
+ {
70
+ disabled: !1,
71
+ variant: "positive",
72
+ emphasis: "strong",
73
+ class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
74
+ },
75
+ {
76
+ disabled: !1,
77
+ variant: "negative",
78
+ emphasis: "default",
79
+ class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
80
+ },
81
+ {
82
+ disabled: !1,
83
+ variant: "negative",
84
+ emphasis: "weak",
85
+ class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
86
+ },
87
+ {
88
+ disabled: !1,
89
+ variant: "negative",
90
+ emphasis: "strong",
91
+ class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
92
+ },
93
+ {
94
+ disabled: !1,
95
+ variant: "danger",
96
+ emphasis: "default",
97
+ class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
98
+ },
99
+ {
100
+ disabled: !1,
101
+ variant: "danger",
102
+ emphasis: "weak",
103
+ class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
104
+ },
105
+ {
106
+ disabled: !1,
107
+ variant: "danger",
108
+ emphasis: "strong",
109
+ class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
110
+ },
111
+ {
112
+ disabled: !1,
113
+ variant: "loud",
114
+ emphasis: "default",
115
+ class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
116
+ },
117
+ {
118
+ disabled: !1,
119
+ variant: "loud",
120
+ emphasis: "weak",
121
+ class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
122
+ },
123
+ {
124
+ disabled: !1,
125
+ variant: "loud",
126
+ emphasis: "strong",
127
+ class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
128
+ },
129
+ {
130
+ aspect: "default",
131
+ size: "small",
132
+ class: "tw-px-2"
133
+ },
134
+ {
135
+ aspect: "default",
136
+ size: "medium",
137
+ class: "tw-px-4"
138
+ },
139
+ {
140
+ aspect: "default",
141
+ size: "large",
142
+ class: "tw-px-6"
143
+ }
144
+ ],
145
+ defaultVariants: {
146
+ variant: "default",
147
+ emphasis: "strong",
148
+ size: "medium",
149
+ rounding: "medium",
150
+ hugWidth: !0,
151
+ aspect: "default",
152
+ disabled: !1
6
153
  }
7
- }) => {
8
- const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
9
- (l) => {
10
- if (t) {
11
- const u = typeof l == "function" ? l(e) : l;
12
- u !== e && r(u);
13
- } else
14
- c(l);
15
- },
16
- [t, e, c, r]
17
- );
18
- return [i, a];
19
- }, b = ({ defaultProp: e, onChange: n }) => {
20
- const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
21
- return m(() => {
22
- c.current !== o && (t == null || t(o), c.current = o);
23
- }, [o, c, t]), s;
24
- };
154
+ });
25
155
  export {
26
- U as useControllableState
156
+ o as buttonStyles
27
157
  };
28
158
  //# sourceMappingURL=fondue-components25.js.map
@@ -1 +1 @@
1
- {"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;"}
1
+ {"version":3,"file":"fondue-components25.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base:\n 'tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' +\n `${FOCUS_OUTLINE}`,\n variants: {\n disabled: {\n true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n },\n rounding: {\n medium: 'tw-rounded',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-h-6 tw-text-body-small',\n medium: 'tw-h-9 tw-text-body-medium',\n large: 'tw-h-12 tw-text-body-large',\n },\n aspect: {\n square: 'tw-aspect-square tw-px-0',\n default: '',\n },\n hugWidth: {\n false: 'tw-w-full',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n variant: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n variant: 'default',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-background tw-border-button-strong-border ' +\n 'hover:tw-bg-button-strong-background-hover ' +\n 'active:tw-bg-button-strong-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'default',\n class:\n 'tw-bg-button-positive-background tw-border-button-positive-border ' +\n 'hover:tw-bg-button-positive-background-hover ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n 'hover:tw-bg-button-strong-positive-background-hover ' +\n 'active:tw-bg-button-strong-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'default',\n class:\n 'tw-bg-button-negative-background tw-border-button-negative-border ' +\n 'hover:tw-bg-button-negative-background-hover ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n 'hover:tw-bg-button-strong-negative-background-hover ' +\n 'active:tw-bg-button-strong-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'strong',\n class:\n 'tw-bg-button-danger-background tw-border-button-danger-border ' +\n 'hover:tw-bg-button-danger-background-hover ' +\n 'active:tw-bg-button-danger-background-pressed',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'default',\n class:\n 'tw-bg-box-selected tw-border-button-border ' +\n 'hover:tw-bg-box-selected-hover ' +\n 'active:tw-bg-box-selected-pressed ',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'weak',\n class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'strong',\n class:\n 'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n 'hover:tw-bg-box-selected-strong-hover ' +\n 'active:tw-bg-box-selected-strong-pressed ',\n },\n {\n aspect: 'default',\n size: 'small',\n class: 'tw-px-2',\n },\n {\n aspect: 'default',\n size: 'medium',\n class: 'tw-px-4',\n },\n {\n aspect: 'default',\n size: 'large',\n class: 'tw-px-6',\n },\n ],\n defaultVariants: {\n variant: 'default',\n emphasis: 'strong',\n size: 'medium',\n rounding: 'medium',\n hugWidth: true,\n aspect: 'default',\n disabled: false,\n },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":";;AAKO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MACI,+IACGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,EACd;AACJ,CAAC;"}
@@ -1,12 +1,121 @@
1
- import { FOCUS_OUTLINE as t } from "./fondue-components35.js";
2
- 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";
1
+ import { sv as t } from "./fondue-components24.js";
2
+ const s = t({
3
+ variants: {
4
+ emphasis: {
5
+ default: "",
6
+ weak: "",
7
+ strong: ""
8
+ },
9
+ variant: {
10
+ default: "",
11
+ positive: "",
12
+ negative: "",
13
+ danger: "",
14
+ loud: ""
15
+ },
16
+ disabled: {
17
+ true: "tw-text-box-disabled-inverse"
18
+ }
19
+ },
20
+ compoundVariants: [
21
+ {
22
+ disabled: !1,
23
+ variant: "default",
24
+ emphasis: "default",
25
+ class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
26
+ },
27
+ {
28
+ disabled: !1,
29
+ variant: "default",
30
+ emphasis: "weak",
31
+ class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
32
+ },
33
+ {
34
+ disabled: !1,
35
+ variant: "default",
36
+ emphasis: "strong",
37
+ class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
38
+ },
39
+ {
40
+ disabled: !1,
41
+ variant: "positive",
42
+ emphasis: "default",
43
+ class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
44
+ },
45
+ {
46
+ disabled: !1,
47
+ variant: "positive",
48
+ emphasis: "weak",
49
+ class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
50
+ },
51
+ {
52
+ disabled: !1,
53
+ variant: "positive",
54
+ emphasis: "strong",
55
+ class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
56
+ },
57
+ {
58
+ disabled: !1,
59
+ variant: "negative",
60
+ emphasis: "default",
61
+ class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
62
+ },
63
+ {
64
+ disabled: !1,
65
+ variant: "negative",
66
+ emphasis: "weak",
67
+ class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
68
+ },
69
+ {
70
+ disabled: !1,
71
+ variant: "negative",
72
+ emphasis: "strong",
73
+ class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
74
+ },
75
+ {
76
+ disabled: !1,
77
+ variant: "danger",
78
+ emphasis: "default",
79
+ class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
80
+ },
81
+ {
82
+ disabled: !1,
83
+ variant: "danger",
84
+ emphasis: "weak",
85
+ class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
86
+ },
87
+ {
88
+ disabled: !1,
89
+ variant: "danger",
90
+ emphasis: "strong",
91
+ class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
92
+ },
93
+ {
94
+ disabled: !1,
95
+ variant: "loud",
96
+ emphasis: "default",
97
+ class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
98
+ },
99
+ {
100
+ disabled: !1,
101
+ variant: "loud",
102
+ emphasis: "weak",
103
+ class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
104
+ },
105
+ {
106
+ disabled: !1,
107
+ variant: "loud",
108
+ emphasis: "strong",
109
+ class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
110
+ }
111
+ ],
112
+ defaultVariants: {
113
+ emphasis: "strong",
114
+ variant: "default",
115
+ disabled: !1
116
+ }
117
+ });
3
118
  export {
4
- o as segmentedControlActiveIndicatorStyles,
5
- i as segmentedControlItemLabelActiveStyles,
6
- s as segmentedControlItemLabelInactiveStyles,
7
- r as segmentedControlItemLabelStyles,
8
- w as segmentedControlItemSeparatorStyles,
9
- n as segmentedControlItemStyles,
10
- a as segmentedControlRootStyles
119
+ s as iconStyles
11
120
  };
12
121
  //# sourceMappingURL=fondue-components26.js.map
@@ -1 +1 @@
1
- {"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;"}
1
+ {"version":3,"file":"fondue-components26.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n variants: {\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n variant: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n disabled: {\n true: 'tw-text-box-disabled-inverse',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n variant: 'default',\n emphasis: 'default',\n class:\n '[&_svg]:tw-text-button-icon ' +\n 'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n 'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'weak',\n class:\n '[&_svg]:tw-text-button-icon ' +\n 'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n 'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'strong',\n class:\n '[&_svg]:tw-text-button-strong-icon ' +\n 'group-hover:[&_svg]:tw-text-button-strong-icon-hover ' +\n 'group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'default',\n class:\n '[&_svg]:tw-text-button-positive-icon ' +\n 'group-hover:[&_svg]:tw-text-button-positive-icon-hover ' +\n 'group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'weak',\n class:\n '[&_svg]:tw-text-button-strong-positive-icon ' +\n 'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'strong',\n class:\n '[&_svg]:tw-text-button-strong-positive-icon ' +\n 'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover ' +\n 'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'default',\n class:\n '[&_svg]:tw-text-button-negative-icon ' +\n 'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'weak',\n class:\n '[&_svg]:tw-text-button-negative-icon ' +\n 'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'strong',\n class:\n '[&_svg]:tw-text-button-strong-negative-icon ' +\n 'group-hover:[&_svg]:tw-text-button-strong-negative-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'default',\n class:\n '[&_svg]:tw-text-button-negative-icon ' +\n 'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'weak',\n class:\n '[&_svg]:tw-text-button-negative-icon ' +\n 'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'strong',\n class:\n '[&_svg]:tw-text-button-danger-icon ' +\n 'group-hover:[&_svg]:tw-text-button-danger-icon-hover' +\n 'group-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'default',\n class:\n '[&_svg]:tw-text-box-selected-inverse ' +\n 'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n 'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'weak',\n class:\n '[&_svg]:tw-text-box-selected-inverse ' +\n 'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n 'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'strong',\n class:\n '[&_svg]:tw-text-box-selected-strong-inverse ' +\n 'group-hover:[&_svg]:tw-text-box-selected-strong-inverse' +\n 'group-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none',\n },\n ],\n defaultVariants: {\n emphasis: 'strong',\n variant: 'default',\n disabled: false,\n },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACd;AACJ,CAAC;"}