@clickhouse/click-ui 0.6.1-rc2 → 0.6.1

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 (122) hide show
  1. package/dist/cjs/click-ui.css +623 -11
  2. package/dist/cjs/components/Accordion/Accordion.css +111 -0
  3. package/dist/cjs/components/Accordion/Accordion.module.css.cjs +33 -0
  4. package/dist/cjs/components/Accordion/Accordion.module.css.cjs.map +1 -0
  5. package/dist/cjs/components/Accordion/index.cjs +51 -54
  6. package/dist/cjs/components/Accordion/index.cjs.map +1 -1
  7. package/dist/cjs/components/Alert/Alert.css +169 -0
  8. package/dist/cjs/components/Alert/Alert.module.css.cjs +75 -0
  9. package/dist/cjs/components/Alert/Alert.module.css.cjs.map +1 -0
  10. package/dist/cjs/components/Alert/index.cjs +113 -69
  11. package/dist/cjs/components/Alert/index.cjs.map +1 -1
  12. package/dist/cjs/components/Assets/Icons/Check.cjs +1 -1
  13. package/dist/cjs/components/Assets/Icons/Check.cjs.map +1 -1
  14. package/dist/cjs/components/Assets/Icons/Dollar.cjs +10 -0
  15. package/dist/cjs/components/Assets/Icons/Dollar.cjs.map +1 -0
  16. package/dist/cjs/components/Assets/Icons/Pin.cjs +13 -0
  17. package/dist/cjs/components/Assets/Icons/Pin.cjs.map +1 -0
  18. package/dist/cjs/components/Assets/Icons/Unpin.cjs +17 -0
  19. package/dist/cjs/components/Assets/Icons/Unpin.cjs.map +1 -0
  20. package/dist/cjs/components/Assets/Icons/system/IconsLight.cjs +6 -0
  21. package/dist/cjs/components/Assets/Icons/system/IconsLight.cjs.map +1 -1
  22. package/dist/cjs/components/Button/index.cjs +2 -1
  23. package/dist/cjs/components/Button/index.cjs.map +1 -1
  24. package/dist/cjs/components/Checkbox/index.cjs +1 -11
  25. package/dist/cjs/components/Checkbox/index.cjs.map +1 -1
  26. package/dist/cjs/components/Collapsible/Collapsible.css +79 -0
  27. package/dist/cjs/components/Collapsible/Collapsible.module.css.cjs +31 -0
  28. package/dist/cjs/components/Collapsible/Collapsible.module.css.cjs.map +1 -0
  29. package/dist/cjs/components/Collapsible/IconWrapper.cjs +4 -11
  30. package/dist/cjs/components/Collapsible/IconWrapper.cjs.map +1 -1
  31. package/dist/cjs/components/Collapsible/index.cjs +36 -24
  32. package/dist/cjs/components/Collapsible/index.cjs.map +1 -1
  33. package/dist/cjs/components/Container/Container.css +3 -3
  34. package/dist/cjs/components/HoverCard/HoverCard.css +6 -0
  35. package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs +10 -0
  36. package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs.map +1 -0
  37. package/dist/cjs/components/HoverCard/index.cjs +5 -5
  38. package/dist/cjs/components/HoverCard/index.cjs.map +1 -1
  39. package/dist/cjs/components/Link/Link.css +12 -8
  40. package/dist/cjs/components/Link/Link.module.css.cjs +15 -4
  41. package/dist/cjs/components/Link/Link.module.css.cjs.map +1 -1
  42. package/dist/cjs/components/Link/index.cjs +6 -6
  43. package/dist/cjs/components/Link/index.cjs.map +1 -1
  44. package/dist/cjs/components/Select/common/InternalSelect.cjs +1 -1
  45. package/dist/cjs/components/Select/common/InternalSelect.cjs.map +1 -1
  46. package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.css +167 -0
  47. package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.module.css.cjs +23 -0
  48. package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.module.css.cjs.map +1 -0
  49. package/dist/cjs/components/SidebarNavigationItem/index.cjs +60 -69
  50. package/dist/cjs/components/SidebarNavigationItem/index.cjs.map +1 -1
  51. package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.css +76 -0
  52. package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs +19 -0
  53. package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs.map +1 -0
  54. package/dist/cjs/components/SidebarNavigationTitle/index.cjs +35 -23
  55. package/dist/cjs/components/SidebarNavigationTitle/index.cjs.map +1 -1
  56. package/dist/esm/click-ui.css +623 -11
  57. package/dist/esm/components/Accordion/Accordion.css +111 -0
  58. package/dist/esm/components/Accordion/Accordion.module.css.js +22 -0
  59. package/dist/esm/components/Accordion/Accordion.module.css.js.map +1 -0
  60. package/dist/esm/components/Accordion/index.js +51 -54
  61. package/dist/esm/components/Accordion/index.js.map +1 -1
  62. package/dist/esm/components/Alert/Alert.css +169 -0
  63. package/dist/esm/components/Alert/Alert.module.css.js +53 -0
  64. package/dist/esm/components/Alert/Alert.module.css.js.map +1 -0
  65. package/dist/esm/components/Alert/index.js +113 -69
  66. package/dist/esm/components/Alert/index.js.map +1 -1
  67. package/dist/esm/components/Assets/Icons/Check.js +1 -1
  68. package/dist/esm/components/Assets/Icons/Check.js.map +1 -1
  69. package/dist/esm/components/Assets/Icons/Dollar.js +6 -0
  70. package/dist/esm/components/Assets/Icons/Dollar.js.map +1 -0
  71. package/dist/esm/components/Assets/Icons/Pin.js +9 -0
  72. package/dist/esm/components/Assets/Icons/Pin.js.map +1 -0
  73. package/dist/esm/components/Assets/Icons/Unpin.js +13 -0
  74. package/dist/esm/components/Assets/Icons/Unpin.js.map +1 -0
  75. package/dist/esm/components/Assets/Icons/system/IconsLight.js +6 -0
  76. package/dist/esm/components/Assets/Icons/system/IconsLight.js.map +1 -1
  77. package/dist/esm/components/Button/index.js +2 -1
  78. package/dist/esm/components/Button/index.js.map +1 -1
  79. package/dist/esm/components/Checkbox/index.js +1 -11
  80. package/dist/esm/components/Checkbox/index.js.map +1 -1
  81. package/dist/esm/components/Collapsible/Collapsible.css +79 -0
  82. package/dist/esm/components/Collapsible/Collapsible.module.css.js +21 -0
  83. package/dist/esm/components/Collapsible/Collapsible.module.css.js.map +1 -0
  84. package/dist/esm/components/Collapsible/IconWrapper.js +4 -11
  85. package/dist/esm/components/Collapsible/IconWrapper.js.map +1 -1
  86. package/dist/esm/components/Collapsible/index.js +36 -24
  87. package/dist/esm/components/Collapsible/index.js.map +1 -1
  88. package/dist/esm/components/Container/Container.css +3 -3
  89. package/dist/esm/components/HoverCard/HoverCard.css +6 -0
  90. package/dist/esm/components/HoverCard/HoverCard.module.css.js +6 -0
  91. package/dist/esm/components/HoverCard/HoverCard.module.css.js.map +1 -0
  92. package/dist/esm/components/HoverCard/index.js +5 -5
  93. package/dist/esm/components/HoverCard/index.js.map +1 -1
  94. package/dist/esm/components/Link/Link.css +12 -8
  95. package/dist/esm/components/Link/Link.module.css.js +11 -5
  96. package/dist/esm/components/Link/Link.module.css.js.map +1 -1
  97. package/dist/esm/components/Link/index.js +6 -6
  98. package/dist/esm/components/Link/index.js.map +1 -1
  99. package/dist/esm/components/Select/common/InternalSelect.js +1 -1
  100. package/dist/esm/components/Select/common/InternalSelect.js.map +1 -1
  101. package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.css +167 -0
  102. package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.module.css.js +16 -0
  103. package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.module.css.js.map +1 -0
  104. package/dist/esm/components/SidebarNavigationItem/index.js +60 -69
  105. package/dist/esm/components/SidebarNavigationItem/index.js.map +1 -1
  106. package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.css +76 -0
  107. package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js +12 -0
  108. package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js.map +1 -0
  109. package/dist/esm/components/SidebarNavigationTitle/index.js +35 -23
  110. package/dist/esm/components/SidebarNavigationTitle/index.js.map +1 -1
  111. package/dist/types/components/Accordion/Accordion.d.ts +3 -3
  112. package/dist/types/components/Assets/Icons/Dollar.d.ts +3 -0
  113. package/dist/types/components/Assets/Icons/Pin.d.ts +3 -0
  114. package/dist/types/components/Assets/Icons/Unpin.d.ts +3 -0
  115. package/dist/types/components/Assets/Icons/system/types.d.ts +1 -1
  116. package/dist/types/components/Button/Button.d.ts +1 -24
  117. package/dist/types/components/Button/Button.types.d.ts +3 -0
  118. package/dist/types/components/Collapsible/Collapsible.d.ts +3 -3
  119. package/dist/types/components/HoverCard/HoverCard.d.ts +1 -1
  120. package/dist/types/components/SidebarNavigationItem/SidebarNavigationItem.d.ts +9 -5
  121. package/dist/types/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts +9 -4
  122. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n // The `check` glyph was scaled up 1.25x at the SVG level; render it\n // here at 1rem / 1.25 = 0.8rem so the checkmark keeps its original\n // size inside the box. `minus` (indeterminate) is unaffected.\n {...(checked === 'indeterminate'\n ? {}\n : { width: '0.8rem', height: '0.8rem' })}\n />\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label && (\n <GenericLabel\n htmlFor={id ?? defaultId}\n disabled={disabled}\n >\n {label}\n </GenericLabel>\n )}\n </FormRoot>\n );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","jsxs","FormRoot","wrapper","jsx","RadixCheckbox","cn","checkicon","Icon","width","height","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,uBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,wBAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,wBAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,wBAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,wBAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,wBAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,wBAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAACC,qBACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,wBAAOyB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,yBAAc,IAAA,EAAd,EACC,IAAId,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWQ,OAAG9B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,CAAA,EAAGgB,SAAS,CAAA,EAExD,QAAA,kBAAAO,cAAA,CAACC,yBAAc,SAAA,EAAd,EAAwB,SAAA,EAAW3B,uBAAAA,CAAO6B,SAAAA,EACzC,QAAA,kBAAAH,cAAA;AAAA,MAACI,SAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAMZ,OAAAA,KAAY,eAAA,GAAkB,OAAA,GAAU,OAAA;AAAA,QAC9C,IAAA,EAAK,IAAA;AAAA,QAIL,GAAKA,OAAAA,KAAY,eAAA,GACb,EAAC,GACD;AAAA,UAAEa,KAAAA,EAAO,QAAA;AAAA,UAAUC,MAAAA,EAAQ;AAAA;AAAS;AAAA,OAE5C,CAAA,EACF,CAAA;AAAA,IACClB,yBACCY,cAAA,CAACO,yBAAA,EAAA,EACC,SAASpB,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n />\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label && (\n <GenericLabel\n htmlFor={id ?? defaultId}\n disabled={disabled}\n >\n {label}\n </GenericLabel>\n )}\n </FormRoot>\n );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","jsxs","FormRoot","wrapper","jsx","RadixCheckbox","cn","checkicon","Icon","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,uBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,wBAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,wBAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,wBAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,wBAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,wBAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,wBAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAACC,qBACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,wBAAOyB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,yBAAc,IAAA,EAAd,EACC,IAAId,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWQ,OAAG9B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,yCAACQ,wBAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAW3B,uBAAAA,CAAO6B,WACzC,QAAA,kBAAAH,cAAA,CAACI,SAAA,EAAA,EACC,MAAMZ,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACCY,cAAA,CAACK,yBAAA,EAAA,EACC,SAASlB,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
@@ -0,0 +1,79 @@
1
+ .collapsible__8jmKP {
2
+ width: 100%;
3
+ }
4
+
5
+ .collapsible__8jmKP [data-trigger-icon] {
6
+ visibility: hidden;
7
+ transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);
8
+ }
9
+
10
+ .collapsible__8jmKP [data-trigger-icon][data-open='true'] {
11
+ transform: rotate(90deg);
12
+ }
13
+
14
+ .collapsible__8jmKP [data-collapsible-header]:hover [data-trigger-icon] {
15
+ visibility: visible;
16
+ }
17
+
18
+ .collapsible__header__pWkUS {
19
+ user-select: none;
20
+ }
21
+
22
+ .collapsible__header_indicator-dir_start__s-AUI {
23
+ margin-left: 0;
24
+ }
25
+
26
+ .collapsible__header_indicator-dir_end__EtDn0 {
27
+ margin-left: var(--click-image-sm-size-width);
28
+ }
29
+
30
+ .collapsible__trigger__ArZ-C {
31
+ display: flex;
32
+ align-items: center;
33
+ color: inherit;
34
+ font: inherit;
35
+ cursor: inherit;
36
+ }
37
+
38
+ /* stylelint-disable-next-line block-no-empty -- base element required by BEM */
39
+ .collapsible__content__aT3ek {
40
+ }
41
+
42
+ .collapsible__content_indicator-dir_start__8Gs37 {
43
+ margin-left: var(--click-image-sm-size-width);
44
+ }
45
+
46
+ .collapsible__content_indicator-dir_end__OoEfV {
47
+ margin-right: var(--click-image-sm-size-width);
48
+ }
49
+
50
+ .collapsible__label__RpPE- {
51
+ display: flex;
52
+ /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
53
+ width fallback chain (100% → -webkit-fill-available → fill-available →
54
+ stretch) so the label fills the available inline space. */
55
+ width: 100%;
56
+ width: -webkit-fill-available;
57
+ width: fill-available;
58
+ width: stretch;
59
+ /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
60
+ overflow: hidden;
61
+ flex: 1;
62
+ justify-content: flex-start;
63
+ align-items: center;
64
+ gap: var(--click-sidebar-navigation-item-default-space-gap);
65
+ }
66
+
67
+ .collapsible__ellipsis__huvdc {
68
+ display: flex;
69
+ overflow: hidden;
70
+ flex: 1;
71
+ justify-content: flex-start;
72
+ gap: inherit;
73
+ white-space: nowrap;
74
+ }
75
+
76
+ .collapsible__ellipsis__huvdc > *:not(button) {
77
+ overflow: hidden;
78
+ text-overflow: ellipsis;
79
+ }
@@ -0,0 +1,31 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
4
+
5
+ const collapsible = "collapsible__8jmKP";
6
+ const collapsible__header = "collapsible__header__pWkUS";
7
+ const collapsible__trigger = "collapsible__trigger__ArZ-C";
8
+ const collapsible__content = "collapsible__content__aT3ek";
9
+ const collapsible__label = "collapsible__label__RpPE-";
10
+ const collapsible__ellipsis = "collapsible__ellipsis__huvdc";
11
+ const styles = {
12
+ collapsible: collapsible,
13
+ collapsible__header: collapsible__header,
14
+ "collapsible__header_indicator-dir_start": "collapsible__header_indicator-dir_start__s-AUI",
15
+ "collapsible__header_indicator-dir_end": "collapsible__header_indicator-dir_end__EtDn0",
16
+ collapsible__trigger: collapsible__trigger,
17
+ collapsible__content: collapsible__content,
18
+ "collapsible__content_indicator-dir_start": "collapsible__content_indicator-dir_start__8Gs37",
19
+ "collapsible__content_indicator-dir_end": "collapsible__content_indicator-dir_end__OoEfV",
20
+ collapsible__label: collapsible__label,
21
+ collapsible__ellipsis: collapsible__ellipsis
22
+ };
23
+
24
+ exports.collapsible = collapsible;
25
+ exports.collapsible__content = collapsible__content;
26
+ exports.collapsible__ellipsis = collapsible__ellipsis;
27
+ exports.collapsible__header = collapsible__header;
28
+ exports.collapsible__label = collapsible__label;
29
+ exports.collapsible__trigger = collapsible__trigger;
30
+ exports.default = styles;
31
+ //# sourceMappingURL=Collapsible.module.css.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Collapsible.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,25 +3,18 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const jsxRuntime = require('react/jsx-runtime');
6
- const styledComponents = require('styled-components');
6
+ const cva = require('../../lib/cva.cjs');
7
+ const Collapsible_module = require('./Collapsible.module.css.cjs');
7
8
  const Icon = require('../Icon/index.cjs');
8
9
 
9
- const LabelContainer = styledComponents.styled.span.withConfig({
10
- componentId: "sc-1cu1l45-0"
11
- })(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
12
- theme
13
- }) => theme.click.sidebar.navigation.item.default.space.gap);
14
- const EllipsisContainer = styledComponents.styled.span.withConfig({
15
- componentId: "sc-1cu1l45-1"
16
- })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:inherit;flex:1;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
17
10
  const IconWrapper = ({
18
11
  icon,
19
12
  iconDir = "start",
20
13
  children
21
14
  }) => {
22
- return /* @__PURE__ */ jsxRuntime.jsxs(LabelContainer, { children: [
15
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cva.cn(Collapsible_module.default.collapsible__label), children: [
23
16
  icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
24
- /* @__PURE__ */ jsxRuntime.jsx(EllipsisContainer, { children }),
17
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Collapsible_module.default.collapsible__ellipsis), children }),
25
18
  icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
26
19
  ] });
27
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nconst LabelContainer = styled.span`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n width: -webkit-fill-available;\n width: fill-available;\n width: stretch;\n flex: 1;\n gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};\n overflow: hidden;\n`;\n\nconst EllipsisContainer = styled.span`\n display: flex;\n white-space: nowrap;\n overflow: hidden;\n justify-content: flex-start;\n gap: inherit;\n flex: 1;\n & > *:not(button) {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nexport const IconWrapper = ({\n icon,\n iconDir = 'start',\n children,\n}: {\n // TODO: The consumer app seem to expect to use other assets\n // this needs to be investigated why it had type IconName\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n children: ReactNode;\n}) => {\n return (\n <LabelContainer>\n {icon && iconDir === 'start' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n <EllipsisContainer>{children}</EllipsisContainer>\n {icon && iconDir === 'end' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n </LabelContainer>\n );\n};\n"],"names":["LabelContainer","styled","span","withConfig","componentId","theme","click","sidebar","navigation","item","default","space","gap","EllipsisContainer","IconWrapper","icon","iconDir","children","jsx","Icon"],"mappings":";;;;;;;;AAMA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mJAAA,EAAA,mBAAA,GASzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQC,WAAWC,IAAAA,CAAKC,OAAAA,CAAQC,MAAMC,GAAG,CAAA;AAI7E,MAAMC,iBAAAA,GAAoBZ,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0JAAA,CAAA,CAAA;AAa9B,MAAMU,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,cAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,oBAGbG,cAAA,CAAC,qBAAmBD,QAAAA,EAAS,CAAA;AAAA,IAC5BF,IAAAA,IAAQC,YAAY,KAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n icon,\n iconDir = 'start',\n children,\n}: {\n // TODO: The consumer app seem to expect to use other assets\n // this needs to be investigated why it had type IconName\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n children: ReactNode;\n}) => {\n return (\n <span className={cn(styles.collapsible__label)}>\n {icon && iconDir === 'start' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n {icon && iconDir === 'end' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n </span>\n );\n};\n"],"names":["IconWrapper","icon","iconDir","children","cn","styles","collapsible__label","jsx","Icon","collapsible__ellipsis"],"mappings":";;;;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWC,MAAAA,CAAGC,0BAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,mCAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,OAAGC,0BAAAA,CAAOI,qBAAqB,GAAIN,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
@@ -1,25 +1,26 @@
1
+ require("./Collapsible.css");
1
2
  'use strict';
2
3
 
3
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
5
 
5
6
  const jsxRuntime = require('react/jsx-runtime');
6
7
  const react = require('react');
7
- const styledComponents = require('styled-components');
8
+ const cva = require('../../lib/cva.cjs');
8
9
  const EmptyButton = require('../EmptyButton/index.cjs');
9
10
  const IconWrapper = require('./IconWrapper.cjs');
11
+ const Collapsible_module = require('./Collapsible.module.css.cjs');
10
12
  const Icon = require('../Icon/index.cjs');
13
+ const classVarianceAuthority = require('class-variance-authority');
11
14
 
12
15
  const NavContext = react.createContext({
13
16
  open: false,
14
17
  onOpenChange: () => null
15
18
  });
16
- const CollapsibleContainer = styledComponents.styled.div.withConfig({
17
- componentId: "sc-guwmyz-0"
18
- })(["width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open='true']{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}"]);
19
19
  const Collapsible = ({
20
20
  open: openProp,
21
21
  onOpenChange: onOpenChangeProp,
22
22
  children,
23
+ className,
23
24
  ...props
24
25
  }) => {
25
26
  const [open, setOpen] = react.useState(openProp ?? false);
@@ -38,14 +39,19 @@ const Collapsible = ({
38
39
  open: openProp ?? open,
39
40
  onOpenChange
40
41
  };
41
- return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
42
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Collapsible_module.default.collapsible, className), children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
42
43
  };
43
- const CollapsipleHeaderContainer = styledComponents.styled.div.withConfig({
44
- componentId: "sc-guwmyz-1"
45
- })(["margin-left:", ";user-select:none;"], ({
46
- theme,
47
- $indicatorDir
48
- }) => $indicatorDir === "start" ? 0 : theme.click.image.sm.size.width);
44
+ const headerVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__header, {
45
+ variants: {
46
+ indicatorDir: {
47
+ start: Collapsible_module.default["collapsible__header_indicator-dir_start"],
48
+ end: Collapsible_module.default["collapsible__header_indicator-dir_end"]
49
+ }
50
+ },
51
+ defaultVariants: {
52
+ indicatorDir: "start"
53
+ }
54
+ });
49
55
  const CollapsipleHeader = react.forwardRef(({
50
56
  indicatorDir = "start",
51
57
  icon,
@@ -53,19 +59,22 @@ const CollapsipleHeader = react.forwardRef(({
53
59
  children,
54
60
  wrapInTrigger,
55
61
  onClick: onClickProp,
62
+ className,
56
63
  ...props
57
64
  }, ref) => {
58
65
  const {
59
66
  onOpenChange
60
67
  } = react.useContext(NavContext);
61
- return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleHeaderContainer, { $indicatorDir: indicatorDir, ref, onClick: (e) => {
68
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onClick: (e) => {
62
69
  if (wrapInTrigger && typeof onOpenChange === "function") {
63
70
  onOpenChange();
64
71
  }
65
72
  if (typeof onClickProp === "function") {
66
73
  onClickProp(e);
67
74
  }
68
- }, "data-collapsible-header": true, ...props, children: [
75
+ }, "data-collapsible-header": true, ...props, className: cva.cn(headerVariants({
76
+ indicatorDir
77
+ }), className), children: [
69
78
  indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {}),
70
79
  children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
71
80
  indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {})
@@ -73,15 +82,13 @@ const CollapsipleHeader = react.forwardRef(({
73
82
  });
74
83
  CollapsipleHeader.displayName = "CollapsibleHeader";
75
84
  Collapsible.Header = CollapsipleHeader;
76
- const CollapsipleTriggerButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
77
- componentId: "sc-guwmyz-2"
78
- })(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
79
85
  const CollapsipleTrigger = ({
80
86
  onClick: onClickProp,
81
87
  children,
82
88
  indicatorDir = "start",
83
89
  icon,
84
90
  iconDir = "start",
91
+ className,
85
92
  ...props
86
93
  }) => {
87
94
  const {
@@ -96,7 +103,7 @@ const CollapsipleTrigger = ({
96
103
  }
97
104
  onOpenChange();
98
105
  };
99
- return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
106
+ return /* @__PURE__ */ jsxRuntime.jsxs(EmptyButton.EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cva.cn(Collapsible_module.default.collapsible__trigger, className), children: [
100
107
  indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
101
108
  children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
102
109
  indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
@@ -104,14 +111,17 @@ const CollapsipleTrigger = ({
104
111
  };
105
112
  CollapsipleTrigger.displayName = "CollapsibleTrigger";
106
113
  Collapsible.Trigger = CollapsipleTrigger;
107
- const CollapsibleContentWrapper = styledComponents.styled.div.withConfig({
108
- componentId: "sc-guwmyz-3"
109
- })(["", ""], ({
110
- theme,
111
- $indicatorDir
112
- }) => $indicatorDir ? `${$indicatorDir === "start" ? "margin-left" : "margin-right"}: ${theme.click.image.sm.size.width}` : "");
114
+ const contentVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__content, {
115
+ variants: {
116
+ indicatorDir: {
117
+ start: Collapsible_module.default["collapsible__content_indicator-dir_start"],
118
+ end: Collapsible_module.default["collapsible__content_indicator-dir_end"]
119
+ }
120
+ }
121
+ });
113
122
  const CollapsipleContent = ({
114
123
  indicatorDir,
124
+ className,
115
125
  ...props
116
126
  }) => {
117
127
  const {
@@ -120,7 +130,9 @@ const CollapsipleContent = ({
120
130
  if (!open) {
121
131
  return;
122
132
  }
123
- return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentWrapper, { $indicatorDir: indicatorDir, ...props });
133
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(contentVariants({
134
+ indicatorDir
135
+ }), className) });
124
136
  };
125
137
  CollapsipleContent.displayName = "CollapsibleContent";
126
138
  Collapsible.Content = CollapsipleContent;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n createContext,\n useState,\n HTMLAttributes,\n useContext,\n useEffect,\n forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\n\ntype ContextProps = {\n open: boolean;\n onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n open: false,\n onOpenChange: () => null,\n});\nconst CollapsibleContainer = styled.div`\n width: 100%;\n [data-trigger-icon] {\n visibility: hidden;\n transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);\n &[data-open='true'] {\n transform: rotate(90deg);\n }\n }\n [data-collapsible-header]:hover [data-trigger-icon] {\n visibility: visible;\n }\n`;\n\nexport const Collapsible = ({\n open: openProp,\n onOpenChange: onOpenChangeProp,\n children,\n ...props\n}: CollapsibleProps) => {\n const [open, setOpen] = useState(openProp ?? false);\n const onOpenChange = () => {\n setOpen(open => {\n if (typeof onOpenChangeProp === 'function') {\n onOpenChangeProp(!open);\n }\n return !open;\n });\n };\n\n useEffect(() => {\n setOpen(open => openProp ?? open);\n }, [openProp]);\n\n const value = {\n open: openProp ?? open,\n onOpenChange,\n };\n return (\n <CollapsibleContainer {...props}>\n <NavContext.Provider value={value}>{children}</NavContext.Provider>\n </CollapsibleContainer>\n );\n};\n\nconst CollapsipleHeaderContainer = styled.div<{ $indicatorDir: HorizontalDirection }>`\n margin-left: ${({ theme, $indicatorDir }) =>\n $indicatorDir === 'start' ? 0 : theme.click.image.sm.size.width};\n user-select: none;\n`;\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n (\n {\n indicatorDir = 'start',\n icon,\n iconDir,\n children,\n wrapInTrigger,\n onClick: onClickProp,\n ...props\n }: CollapsipleHeaderProps,\n ref\n ) => {\n const { onOpenChange } = useContext(NavContext);\n return (\n <CollapsipleHeaderContainer\n $indicatorDir={indicatorDir}\n ref={ref}\n onClick={e => {\n if (wrapInTrigger && typeof onOpenChange === 'function') {\n onOpenChange();\n }\n if (typeof onClickProp === 'function') {\n onClickProp(e);\n }\n }}\n data-collapsible-header\n {...props}\n >\n {indicatorDir === 'start' && <Collapsible.Trigger />}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && <Collapsible.Trigger />}\n </CollapsipleHeaderContainer>\n );\n }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\nconst CollapsipleTriggerButton = styled(EmptyButton)<{\n $indicatorDir: HorizontalDirection;\n}>`\n display: flex;\n align-items: center;\n font: inherit;\n color: inherit;\n cursor: inherit;\n`;\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n onClick: onClickProp,\n children,\n indicatorDir = 'start',\n icon,\n iconDir = 'start',\n ...props\n}: CollapsipleTriggerProps) => {\n const { open, onOpenChange } = useContext(NavContext);\n const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n if (onClickProp) {\n onClickProp(e);\n }\n onOpenChange();\n };\n\n return (\n <CollapsipleTriggerButton\n onClick={onClick}\n $indicatorDir={indicatorDir}\n aria-label=\"trigger children\"\n {...props}\n >\n {indicatorDir === 'start' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n </CollapsipleTriggerButton>\n );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst CollapsibleContentWrapper = styled.div<{ $indicatorDir?: HorizontalDirection }>`\n ${({ theme, $indicatorDir }) =>\n $indicatorDir\n ? `${$indicatorDir === 'start' ? 'margin-left' : 'margin-right'}: ${\n theme.click.image.sm.size.width\n }`\n : ''}\n`;\n\nconst CollapsipleContent = ({\n indicatorDir,\n ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n const { open } = useContext(NavContext);\n if (!open) {\n return;\n }\n return (\n <CollapsibleContentWrapper\n $indicatorDir={indicatorDir}\n {...props}\n />\n );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","CollapsibleContainer","styled","div","withConfig","componentId","Collapsible","openProp","onOpenChangeProp","children","props","setOpen","useState","useEffect","value","jsx","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","IconWrapper","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","jsxs","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n createContext,\n useState,\n HTMLAttributes,\n useContext,\n useEffect,\n forwardRef,\n} from 'react';\n\nimport { cn, cva } from '@/lib/cva';\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n open: boolean;\n onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n open: false,\n onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n open: openProp,\n onOpenChange: onOpenChangeProp,\n children,\n className,\n ...props\n}: CollapsibleProps) => {\n const [open, setOpen] = useState(openProp ?? false);\n const onOpenChange = () => {\n setOpen(open => {\n if (typeof onOpenChangeProp === 'function') {\n onOpenChangeProp(!open);\n }\n return !open;\n });\n };\n\n useEffect(() => {\n setOpen(open => openProp ?? open);\n }, [openProp]);\n\n const value = {\n open: openProp ?? open,\n onOpenChange,\n };\n return (\n <div\n {...props}\n className={cn(styles.collapsible, className)}\n >\n <NavContext.Provider value={value}>{children}</NavContext.Provider>\n </div>\n );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n variants: {\n indicatorDir: {\n start: styles['collapsible__header_indicator-dir_start'],\n end: styles['collapsible__header_indicator-dir_end'],\n },\n },\n defaultVariants: {\n indicatorDir: 'start',\n },\n});\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n (\n {\n indicatorDir = 'start',\n icon,\n iconDir,\n children,\n wrapInTrigger,\n onClick: onClickProp,\n className,\n ...props\n }: CollapsipleHeaderProps,\n ref\n ) => {\n const { onOpenChange } = useContext(NavContext);\n return (\n <div\n ref={ref}\n onClick={e => {\n if (wrapInTrigger && typeof onOpenChange === 'function') {\n onOpenChange();\n }\n if (typeof onClickProp === 'function') {\n onClickProp(e);\n }\n }}\n data-collapsible-header\n {...props}\n className={cn(headerVariants({ indicatorDir }), className)}\n >\n {indicatorDir === 'start' && <Collapsible.Trigger />}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && <Collapsible.Trigger />}\n </div>\n );\n }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n onClick: onClickProp,\n children,\n indicatorDir = 'start',\n icon,\n iconDir = 'start',\n className,\n ...props\n}: CollapsipleTriggerProps) => {\n const { open, onOpenChange } = useContext(NavContext);\n const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n if (onClickProp) {\n onClickProp(e);\n }\n onOpenChange();\n };\n\n return (\n <EmptyButton\n onClick={onClick}\n aria-label=\"trigger children\"\n {...props}\n className={cn(styles.collapsible__trigger, className)}\n >\n {indicatorDir === 'start' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n </EmptyButton>\n );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n variants: {\n indicatorDir: {\n start: styles['collapsible__content_indicator-dir_start'],\n end: styles['collapsible__content_indicator-dir_end'],\n },\n },\n});\n\nconst CollapsipleContent = ({\n indicatorDir,\n className,\n ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n const { open } = useContext(NavContext);\n if (!open) {\n return;\n }\n return (\n <div\n {...props}\n className={cn(contentVariants({ indicatorDir }), className)}\n />\n );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","Collapsible","openProp","onOpenChangeProp","children","className","props","setOpen","useState","useEffect","value","cn","styles","collapsible","headerVariants","cva","collapsible__header","variants","indicatorDir","start","end","defaultVariants","CollapsipleHeader","forwardRef","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","jsxs","e","jsx","IconWrapper","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","EmptyButton","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}
@@ -5,9 +5,9 @@
5
5
  this reset a nested Container would inherit an ancestor's value — e.g. a
6
6
  parent with `fillHeight` would force `height: 100%` onto every descendant
7
7
  Container, and a parent with `grow` would make children flex-grow too.
8
- Resetting to the guaranteed-invalid `initial` value keeps each Container's
9
- defaults isolated; the `var()` fallbacks below then resolve to the same
10
- defaults the styled-components version produced when the prop was unset. */
8
+ Resetting the variables on `.container` prevents inheritance; using `initial`
9
+ makes the consuming declarations compute to their initial values when the prop
10
+ is unset (the `var()` fallbacks below are an extra guard). */
11
11
  --container-height: initial;
12
12
  --container-min-height: initial;
13
13
  --container-max-height: initial;
@@ -0,0 +1,6 @@
1
+ .hover-card__trigger__tMcTR {
2
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
3
+ keyword on `width` is widely supported on evergreen browsers; the original
4
+ styled-components rule used the same value. */
5
+ width: fit-content;
6
+ }
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
4
+
5
+ const styles = {
6
+ "hover-card__trigger": "hover-card__trigger__tMcTR"
7
+ };
8
+
9
+ exports.default = styles;
10
+ //# sourceMappingURL=HoverCard.module.css.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HoverCard.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
@@ -1,3 +1,4 @@
1
+ require("./HoverCard.css");
1
2
  'use strict';
2
3
 
3
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,8 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
6
  const jsxRuntime = require('react/jsx-runtime');
6
7
  const RadixHoverCard = require('@radix-ui/react-hover-card');
7
8
  const GenericMenu = require('../GenericMenu/index.cjs');
8
- const styledComponents = require('styled-components');
9
+ const cva = require('../../lib/cva.cjs');
9
10
  const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
11
+ const HoverCard_module = require('./HoverCard.module.css.cjs');
10
12
 
11
13
  function _interopNamespace(e) {
12
14
  if (e && e.__esModule) return e;
@@ -34,14 +36,12 @@ const HoverCard = ({
34
36
  }) => {
35
37
  return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Root, { ...props, children });
36
38
  };
37
- const Trigger = styledComponents.styled(RadixHoverCard__namespace.Trigger).withConfig({
38
- componentId: "sc-1ect7b6-0"
39
- })(["width:fit-content;"]);
40
39
  const HoverCardTrigger = ({
41
40
  children,
41
+ className,
42
42
  ...props
43
43
  }) => {
44
- return /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...props, children });
44
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { ...props, className: cva.cn(HoverCard_module.default["hover-card__trigger"], className), children });
45
45
  };
46
46
  HoverCardTrigger.displayName = "HoverCardTrigger";
47
47
  HoverCard.Trigger = HoverCardTrigger;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n showArrow?: boolean;\n forceMount?: true;\n container?: HTMLElement | null;\n children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst Trigger = styled(RadixHoverCard.Trigger)`\n width: fit-content;\n`;\n\nconst HoverCardTrigger = ({\n children,\n ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n return <Trigger {...props}>{children}</Trigger>;\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n children,\n showArrow,\n forceMount,\n container,\n ...props\n}: HoverCardContentProps) => {\n return (\n <RadixHoverCard.Portal\n forceMount={forceMount}\n container={container}\n >\n <GenericPopoverMenuPanel\n as={RadixHoverCard.Content}\n $type=\"hover-card\"\n $showArrow={showArrow}\n {...props}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RadixHoverCard.Arrow}\n width={15}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </GenericPopoverMenuPanel>\n </RadixHoverCard.Portal>\n );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","RadixHoverCard","Trigger","styled","withConfig","componentId","HoverCardTrigger","jsx","displayName","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,OAAAA,GAAUC,uBAAAA,CAAOF,yBAAAA,CAAeC,OAAO,EAACE,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA,CAAA;AAI9C,MAAMC,mBAAmBA,CAAC;AAAA,EACxBP,QAAAA;AAAAA,EACA,GAAGC;AACiC,CAAA,KAAM;AAC1C,EAAA,uBAAOO,cAAA,CAAC,OAAA,EAAA,EAAQ,GAAIP,KAAAA,EAAQD,QAAAA,EAAS,CAAA;AACvC,CAAA;AACAO,gBAAAA,CAAiBE,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,CAAUI,OAAAA,GAAUI,gBAAAA;AAEpB,MAAMG,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,sCACGC,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAAY,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIb,yBAAAA,CAAec,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYL,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCH,cAAA,CAACS,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIf,yBAAAA,CAAee,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAT,cAAA,CAACU,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDlB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBD,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,CAAUiB,OAAAA,GAAUN,gBAAAA;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n showArrow?: boolean;\n forceMount?: true;\n container?: HTMLElement | null;\n children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n children,\n className,\n ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n return (\n <RadixHoverCard.Trigger\n {...props}\n className={cn(styles['hover-card__trigger'], className)}\n >\n {children}\n </RadixHoverCard.Trigger>\n );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n children,\n showArrow,\n forceMount,\n container,\n ...props\n}: HoverCardContentProps) => {\n return (\n <RadixHoverCard.Portal\n forceMount={forceMount}\n container={container}\n >\n <GenericPopoverMenuPanel\n as={RadixHoverCard.Content}\n $type=\"hover-card\"\n $showArrow={showArrow}\n {...props}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RadixHoverCard.Arrow}\n width={15}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </GenericPopoverMenuPanel>\n </RadixHoverCard.Portal>\n );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","RadixHoverCard","HoverCardTrigger","className","jsx","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,mBAAmBA,CAAC;AAAA,EACxBH,QAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACA,GAAGH;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACEI,cAAA,CAACH,yBAAA,CAAe,OAAA,EAAf,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,wBAAAA,CAAO,qBAAqB,CAAA,EAAGH,SAAS,GAErDJ,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAG,gBAAAA,CAAiBK,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUU,OAAAA,GAAUN,gBAAAA;AAEpB,MAAMO,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,sCACGC,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAAY,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIb,yBAAAA,CAAec,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYL,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCN,cAAA,CAACY,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIf,yBAAAA,CAAee,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAZ,cAAA,CAACa,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDlB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUiB,OAAAA,GAAUN,gBAAAA;;;;"}
@@ -118,18 +118,22 @@
118
118
  --link-font: var(--typography-styles-product-text-mono-lg);
119
119
  }
120
120
 
121
- /* The inner Icon receives .external-icon via className. The original used a
122
- descendant selector inside IconWrapper; here we pass the scoped class
123
- straight to the Icon so the selector stays a single class with the same
124
- effective specificity. */
125
- .external-icon_size_xs__hRWrg,
126
- .external-icon_size_sm__QFJoc {
121
+ /* The inner Icon is a `link__icon` element it receives the scoped class via
122
+ className. The original used a descendant selector inside IconWrapper; here we
123
+ pass the scoped class straight to the Icon so the selector stays a single
124
+ class with the same effective specificity. */
125
+ /* stylelint-disable-next-line block-no-empty -- base element required by BEM */
126
+ .link__icon__El8JR {
127
+ }
128
+
129
+ .link__icon_size_xs__qMUN-,
130
+ .link__icon_size_sm__d2ZIU {
127
131
  width: var(--click-link-icon-size-sm-width);
128
132
  height: var(--click-link-icon-size-sm-height);
129
133
  }
130
134
 
131
- .external-icon_size_md__-bbPt,
132
- .external-icon_size_lg__XGkpl {
135
+ .link__icon_size_md__-5EZ1,
136
+ .link__icon_size_lg__RY5Y1 {
133
137
  width: var(--click-link-icon-size-md-width);
134
138
  height: var(--click-link-icon-size-md-height);
135
139
  }
@@ -12,6 +12,11 @@ const link_weight_medium = "link_weight_medium__Sot5E";
12
12
  const link_weight_semibold = "link_weight_semibold__6STFO";
13
13
  const link_weight_bold = "link_weight_bold__FWQyo";
14
14
  const link_weight_mono = "link_weight_mono__Mzdum";
15
+ const link__icon = "link__icon__El8JR";
16
+ const link__icon_size_xs = "link__icon_size_xs__qMUN-";
17
+ const link__icon_size_sm = "link__icon_size_sm__d2ZIU";
18
+ const link__icon_size_md = "link__icon_size_md__-5EZ1";
19
+ const link__icon_size_lg = "link__icon_size_lg__RY5Y1";
15
20
  const styles = {
16
21
  link: link,
17
22
  link_size_xs: link_size_xs,
@@ -23,14 +28,20 @@ const styles = {
23
28
  link_weight_semibold: link_weight_semibold,
24
29
  link_weight_bold: link_weight_bold,
25
30
  link_weight_mono: link_weight_mono,
26
- "external-icon_size_xs": "external-icon_size_xs__hRWrg",
27
- "external-icon_size_sm": "external-icon_size_sm__QFJoc",
28
- "external-icon_size_md": "external-icon_size_md__-bbPt",
29
- "external-icon_size_lg": "external-icon_size_lg__XGkpl"
31
+ link__icon: link__icon,
32
+ link__icon_size_xs: link__icon_size_xs,
33
+ link__icon_size_sm: link__icon_size_sm,
34
+ link__icon_size_md: link__icon_size_md,
35
+ link__icon_size_lg: link__icon_size_lg
30
36
  };
31
37
 
32
38
  exports.default = styles;
33
39
  exports.link = link;
40
+ exports.link__icon = link__icon;
41
+ exports.link__icon_size_lg = link__icon_size_lg;
42
+ exports.link__icon_size_md = link__icon_size_md;
43
+ exports.link__icon_size_sm = link__icon_size_sm;
44
+ exports.link__icon_size_xs = link__icon_size_xs;
34
45
  exports.link_size_lg = link_size_lg;
35
46
  exports.link_size_md = link_size_md;
36
47
  exports.link_size_sm = link_size_sm;
@@ -1 +1 @@
1
- {"version":3,"file":"Link.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Link.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -31,13 +31,13 @@ const linkVariants = classVarianceAuthority.cva(Link_module.default.link, {
31
31
  weight: "normal"
32
32
  }
33
33
  });
34
- const externalIconVariants = classVarianceAuthority.cva("", {
34
+ const iconVariants = classVarianceAuthority.cva(Link_module.default["link__icon"], {
35
35
  variants: {
36
36
  size: {
37
- xs: Link_module.default["external-icon_size_xs"],
38
- sm: Link_module.default["external-icon_size_sm"],
39
- md: Link_module.default["external-icon_size_md"],
40
- lg: Link_module.default["external-icon_size_lg"]
37
+ xs: Link_module.default["link__icon_size_xs"],
38
+ sm: Link_module.default["link__icon_size_sm"],
39
+ md: Link_module.default["link__icon_size_md"],
40
+ lg: Link_module.default["link__icon_size_lg"]
41
41
  }
42
42
  },
43
43
  defaultVariants: {
@@ -60,7 +60,7 @@ const _Link = ({
60
60
  weight
61
61
  }), className), children: [
62
62
  children,
63
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn("external-icon", externalIconVariants({
63
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn(iconVariants({
64
64
  size
65
65
  })), "data-testid": icon }) })
66
66
  ] });
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactEventHandler,\n ReactNode,\n forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n /** The font size of the link text */\n size?: TextSize;\n /** The font weight of the link text */\n weight?: TextWeight;\n /** Click event handler */\n onClick?: ReactEventHandler;\n /** The content to display inside the link */\n children?: React.ReactNode;\n /** Optional icon to display after the link text */\n icon?: IconName;\n /** Custom component to render as the link element */\n component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n variants: {\n size: {\n xs: styles['link_size_xs'],\n sm: styles['link_size_sm'],\n md: styles['link_size_md'],\n lg: styles['link_size_lg'],\n },\n weight: {\n normal: styles['link_weight_normal'],\n medium: styles['link_weight_medium'],\n semibold: styles['link_weight_semibold'],\n bold: styles['link_weight_bold'],\n mono: styles['link_weight_mono'],\n },\n },\n defaultVariants: {\n size: 'md',\n weight: 'normal',\n },\n});\n\nconst externalIconVariants = cva('', {\n variants: {\n size: {\n xs: styles['external-icon_size_xs'],\n sm: styles['external-icon_size_sm'],\n md: styles['external-icon_size_md'],\n lg: styles['external-icon_size_lg'],\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n {\n size = 'md',\n weight = 'normal',\n onClick,\n icon,\n children,\n component,\n className,\n ...props\n }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n ref: ComponentPropsWithRef<T>['ref']\n) => {\n const Component = component ?? 'a';\n return (\n <Component\n ref={ref}\n onClick={onClick}\n {...props}\n className={cn(linkVariants({ size, weight }), className)}\n >\n {children}\n {icon && (\n <span>\n <Icon\n name={icon}\n className={cn('external-icon', externalIconVariants({ size }))}\n data-testid={icon}\n />\n </span>\n )}\n </Component>\n );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,2BAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,oBAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,oBAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,oBAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,MAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAG,eAAA,EAAiBX,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactEventHandler,\n ReactNode,\n forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n /** The font size of the link text */\n size?: TextSize;\n /** The font weight of the link text */\n weight?: TextWeight;\n /** Click event handler */\n onClick?: ReactEventHandler;\n /** The content to display inside the link */\n children?: React.ReactNode;\n /** Optional icon to display after the link text */\n icon?: IconName;\n /** Custom component to render as the link element */\n component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n variants: {\n size: {\n xs: styles['link_size_xs'],\n sm: styles['link_size_sm'],\n md: styles['link_size_md'],\n lg: styles['link_size_lg'],\n },\n weight: {\n normal: styles['link_weight_normal'],\n medium: styles['link_weight_medium'],\n semibold: styles['link_weight_semibold'],\n bold: styles['link_weight_bold'],\n mono: styles['link_weight_mono'],\n },\n },\n defaultVariants: {\n size: 'md',\n weight: 'normal',\n },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n variants: {\n size: {\n xs: styles['link__icon_size_xs'],\n sm: styles['link__icon_size_sm'],\n md: styles['link__icon_size_md'],\n lg: styles['link__icon_size_lg'],\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n {\n size = 'md',\n weight = 'normal',\n onClick,\n icon,\n children,\n component,\n className,\n ...props\n }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n ref: ComponentPropsWithRef<T>['ref']\n) => {\n const Component = component ?? 'a';\n return (\n <Component\n ref={ref}\n onClick={onClick}\n {...props}\n className={cn(linkVariants({ size, weight }), className)}\n >\n {children}\n {icon && (\n <span>\n <Icon\n name={icon}\n className={cn(iconVariants({ size }))}\n data-testid={icon}\n />\n </span>\n )}\n </Component>\n );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,0BAAAA,CAAIC,mBAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,oBAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,oBAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,oBAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAS,cAAA,CAACC,aACC,IAAA,EAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAGX,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}