thread-ui 0.8.0 → 0.9.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 (183) hide show
  1. package/README.md +28 -1
  2. package/dist/components/data-display/sort-controls/sort-controls.js.map +1 -1
  3. package/dist/components/form-elements/dropdowns/dropdown/dropdown.js +2 -2
  4. package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map +1 -1
  5. package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js +2 -4
  6. package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map +1 -1
  7. package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js +2 -2
  8. package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map +1 -1
  9. package/dist/components/form-elements/file-upload/components/file-input.js +5 -3
  10. package/dist/components/form-elements/file-upload/components/file-input.js.map +1 -1
  11. package/dist/components/form-elements/file-upload/components/item-previews.js +4 -4
  12. package/dist/components/form-elements/file-upload/components/item-previews.js.map +1 -1
  13. package/dist/components/form-elements/input-wrapper.js +1 -1
  14. package/dist/components/form-elements/input-wrapper.js.map +1 -1
  15. package/dist/components/form-elements/number-input/number-input.d.ts +1 -1
  16. package/dist/components/form-elements/number-input/number-input.js +8 -7
  17. package/dist/components/form-elements/number-input/number-input.js.map +1 -1
  18. package/dist/components/form-elements/number-input/number-input.types.d.ts +0 -2
  19. package/dist/components/form-elements/styles/index.js +7 -6
  20. package/dist/components/form-elements/styles/index.js.map +1 -1
  21. package/dist/components/layouts/column-layout/column-layout.js +5 -5
  22. package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
  23. package/dist/components/layouts/container/container.d.ts +2 -2
  24. package/dist/components/layouts/container/container.js +9 -6
  25. package/dist/components/layouts/container/container.js.map +1 -1
  26. package/dist/components/layouts/container/container.types.d.ts +6 -5
  27. package/dist/components/layouts/footer/footer.d.ts +1 -1
  28. package/dist/components/layouts/footer/footer.js +7 -22
  29. package/dist/components/layouts/footer/footer.js.map +1 -1
  30. package/dist/components/layouts/footer/footer.types.d.ts +3 -0
  31. package/dist/components/media/image-panel/image-panel.js.map +1 -1
  32. package/dist/components/media/info-card/info-card.d.ts +3 -8
  33. package/dist/components/media/info-card/info-card.js +74 -31
  34. package/dist/components/media/info-card/info-card.js.map +1 -1
  35. package/dist/components/media/info-card/info-card.types.d.ts +5 -2
  36. package/dist/components/media/media-card/media-card.d.ts +1 -1
  37. package/dist/components/media/media-card/media-card.js +44 -14
  38. package/dist/components/media/media-card/media-card.js.map +1 -1
  39. package/dist/components/media/media-card/media-card.types.d.ts +3 -1
  40. package/dist/components/navigation/nav-menu/{items → components}/index.d.ts +1 -1
  41. package/dist/components/navigation/nav-menu/{items → components}/index.js +1 -1
  42. package/dist/components/navigation/nav-menu/components/index.js.map +1 -0
  43. package/dist/components/navigation/nav-menu/components/nav-drop-down-item/index.js.map +1 -0
  44. package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.js +7 -12
  45. package/dist/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.js.map +1 -0
  46. package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.types.js.map +1 -1
  47. package/dist/components/navigation/nav-menu/components/nav-icon-item/index.d.ts +2 -0
  48. package/dist/components/navigation/nav-menu/components/nav-icon-item/index.js +2 -0
  49. package/dist/components/navigation/nav-menu/components/nav-icon-item/index.js.map +1 -0
  50. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.d.ts +2 -0
  51. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.js +6 -0
  52. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.js.map +1 -0
  53. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.types.d.ts +5 -0
  54. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.types.js +2 -0
  55. package/dist/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.types.js.map +1 -0
  56. package/dist/components/navigation/nav-menu/components/nav-item/index.js.map +1 -0
  57. package/dist/components/navigation/nav-menu/components/nav-item/nav-item.js +6 -0
  58. package/dist/components/navigation/nav-menu/components/nav-item/nav-item.js.map +1 -0
  59. package/dist/components/navigation/nav-menu/components/nav-item/nav-item.types.js.map +1 -0
  60. package/dist/components/navigation/nav-menu/components/nav-link/index.d.ts +2 -0
  61. package/dist/components/navigation/nav-menu/components/nav-link/index.js +2 -0
  62. package/dist/components/navigation/nav-menu/components/nav-link/index.js.map +1 -0
  63. package/dist/components/navigation/nav-menu/components/nav-link/nav-link.d.ts +2 -0
  64. package/dist/components/navigation/nav-menu/{items/base-item/base-item.js → components/nav-link/nav-link.js} +9 -7
  65. package/dist/components/navigation/nav-menu/components/nav-link/nav-link.js.map +1 -0
  66. package/dist/components/navigation/nav-menu/components/nav-link/nav-link.types.d.ts +7 -0
  67. package/dist/components/navigation/nav-menu/components/nav-link/nav-link.types.js +2 -0
  68. package/dist/components/navigation/nav-menu/components/nav-link/nav-link.types.js.map +1 -0
  69. package/dist/components/navigation/nav-menu/nav-menu.js +17 -21
  70. package/dist/components/navigation/nav-menu/nav-menu.js.map +1 -1
  71. package/dist/components/navigation/nav-menu/nav-menu.types.d.ts +4 -4
  72. package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js +3 -3
  73. package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js.map +1 -1
  74. package/dist/components/typography/page-header/page-header.js +3 -3
  75. package/dist/components/typography/page-header/page-header.js.map +1 -1
  76. package/dist/components/ui/button/button-recipe.js +28 -28
  77. package/dist/components/ui/button/button-recipe.js.map +1 -1
  78. package/dist/components/ui/card/card.d.ts +10 -4
  79. package/dist/components/ui/card/card.js +64 -29
  80. package/dist/components/ui/card/card.js.map +1 -1
  81. package/dist/components/ui/card/card.types.d.ts +11 -5
  82. package/dist/components/ui/divider/divider.js +5 -5
  83. package/dist/components/ui/divider/divider.js.map +1 -1
  84. package/dist/components/ui/loaders/skeleton/index.d.ts +2 -2
  85. package/dist/components/ui/loaders/skeleton/index.js +1 -1
  86. package/dist/components/ui/loaders/skeleton/index.js.map +1 -1
  87. package/dist/components/ui/loaders/skeleton/skeleton.d.ts +5 -5
  88. package/dist/components/ui/loaders/skeleton/skeleton.js +5 -5
  89. package/dist/components/ui/loaders/skeleton/skeleton.js.map +1 -1
  90. package/dist/components/ui/loaders/skeleton/skeleton.types.d.ts +1 -1
  91. package/dist/components/ui/loaders/skeleton-layout/index.d.ts +2 -2
  92. package/dist/components/ui/loaders/skeleton-layout/index.js +1 -1
  93. package/dist/components/ui/loaders/skeleton-layout/index.js.map +1 -1
  94. package/dist/components/ui/loaders/skeleton-layout/skeleton-layout.d.ts +4 -4
  95. package/dist/components/ui/loaders/skeleton-layout/skeleton-layout.js +5 -5
  96. package/dist/components/ui/loaders/skeleton-layout/skeleton-layout.js.map +1 -1
  97. package/dist/components/ui/loaders/skeleton-layout/skeleton-layout.types.d.ts +3 -3
  98. package/dist/components/ui/modal/components/modal-content.js +2 -1
  99. package/dist/components/ui/modal/components/modal-content.js.map +1 -1
  100. package/dist/components/ui/modal/modal.js +2 -2
  101. package/dist/components/ui/modal/modal.js.map +1 -1
  102. package/dist/components/ui/toggle/toggle.js +7 -7
  103. package/dist/components/ui/toggle/toggle.js.map +1 -1
  104. package/dist/internal-components/image/is-html-image-props.js +1 -2
  105. package/dist/internal-components/image/is-html-image-props.js.map +1 -1
  106. package/dist/styled-system/recipes/button.js +14 -14
  107. package/dist/styled-system/recipes/button.mjs +14 -14
  108. package/dist/styled-system/styles.css +1 -1
  109. package/dist/styled-system/tokens/index.js +106 -46
  110. package/dist/styled-system/tokens/index.mjs +106 -46
  111. package/dist/styled-system/tokens/tokens.d.ts +9 -6
  112. package/dist/styled-system/types/prop-type.d.ts +2 -1
  113. package/dist/styled-system/types/style-props.d.ts +1 -1
  114. package/dist/styles/panda.css +1 -1
  115. package/dist/styles/tailwind.css +1 -0
  116. package/dist/styles/theme.css +62 -17
  117. package/dist/styles/thread.css +3 -3
  118. package/dist/theme/css-name-configurations/theme-css-names.d.ts +125 -18
  119. package/dist/theme/css-name-configurations/theme-css-names.js +50 -7
  120. package/dist/theme/css-name-configurations/theme-css-names.js.map +1 -1
  121. package/dist/theme/default-theme.js +48 -14
  122. package/dist/theme/default-theme.js.map +1 -1
  123. package/dist/theme/index.d.ts +1 -0
  124. package/dist/theme/index.js +1 -0
  125. package/dist/theme/index.js.map +1 -1
  126. package/dist/theme/theme-surface-system.d.ts +9 -0
  127. package/dist/theme/theme-surface-system.js +34 -0
  128. package/dist/theme/theme-surface-system.js.map +1 -0
  129. package/dist/theme/thread-theme.js.map +1 -1
  130. package/dist/types/image/image.types.d.ts +1 -1
  131. package/dist/types/theme/theme.types.d.ts +69 -11
  132. package/dist/types/utility/index.d.ts +1 -1
  133. package/dist/types/utility/type-production.types.d.ts +4 -0
  134. package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.d.ts +11 -0
  135. package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.js +11 -0
  136. package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.js.map +1 -0
  137. package/dist/utils/theme-utilities/get-resolved-layer-values/index.d.ts +1 -0
  138. package/dist/utils/theme-utilities/get-resolved-layer-values/index.js +2 -0
  139. package/dist/utils/theme-utilities/get-resolved-layer-values/index.js.map +1 -0
  140. package/dist/utils/theme-utilities/get-utility-color/get-utility-color-value.d.ts +3 -2
  141. package/dist/utils/theme-utilities/get-utility-color/get-utility-color-value.js +21 -17
  142. package/dist/utils/theme-utilities/get-utility-color/get-utility-color-value.js.map +1 -1
  143. package/dist/utils/theme-utilities/index.d.ts +1 -0
  144. package/dist/utils/theme-utilities/index.js +1 -0
  145. package/dist/utils/theme-utilities/index.js.map +1 -1
  146. package/package.json +1 -1
  147. package/dist/components/navigation/nav-menu/items/base-item/base-item.d.ts +0 -2
  148. package/dist/components/navigation/nav-menu/items/base-item/base-item.js.map +0 -1
  149. package/dist/components/navigation/nav-menu/items/base-item/base-item.types.d.ts +0 -9
  150. package/dist/components/navigation/nav-menu/items/base-item/base-item.types.js +0 -2
  151. package/dist/components/navigation/nav-menu/items/base-item/base-item.types.js.map +0 -1
  152. package/dist/components/navigation/nav-menu/items/base-item/index.d.ts +0 -2
  153. package/dist/components/navigation/nav-menu/items/base-item/index.js +0 -2
  154. package/dist/components/navigation/nav-menu/items/base-item/index.js.map +0 -1
  155. package/dist/components/navigation/nav-menu/items/index.js.map +0 -1
  156. package/dist/components/navigation/nav-menu/items/nav-drop-down-item/index.js.map +0 -1
  157. package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map +0 -1
  158. package/dist/components/navigation/nav-menu/items/nav-icon-item/index.d.ts +0 -2
  159. package/dist/components/navigation/nav-menu/items/nav-icon-item/index.js +0 -2
  160. package/dist/components/navigation/nav-menu/items/nav-icon-item/index.js.map +0 -1
  161. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.d.ts +0 -2
  162. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.js +0 -6
  163. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.js.map +0 -1
  164. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.types.d.ts +0 -7
  165. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.types.js +0 -2
  166. package/dist/components/navigation/nav-menu/items/nav-icon-item/nav-icon-item.types.js.map +0 -1
  167. package/dist/components/navigation/nav-menu/items/nav-item/index.js.map +0 -1
  168. package/dist/components/navigation/nav-menu/items/nav-item/nav-item.js +0 -6
  169. package/dist/components/navigation/nav-menu/items/nav-item/nav-item.js.map +0 -1
  170. package/dist/components/navigation/nav-menu/items/nav-item/nav-item.types.js.map +0 -1
  171. package/dist/components/navigation/nav-menu/nav-menu-styles.d.ts +0 -4
  172. package/dist/components/navigation/nav-menu/nav-menu-styles.js +0 -5
  173. package/dist/components/navigation/nav-menu/nav-menu-styles.js.map +0 -1
  174. /package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/index.d.ts +0 -0
  175. /package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/index.js +0 -0
  176. /package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.d.ts +0 -0
  177. /package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.types.d.ts +0 -0
  178. /package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.types.js +0 -0
  179. /package/dist/components/navigation/nav-menu/{items → components}/nav-item/index.d.ts +0 -0
  180. /package/dist/components/navigation/nav-menu/{items → components}/nav-item/index.js +0 -0
  181. /package/dist/components/navigation/nav-menu/{items → components}/nav-item/nav-item.d.ts +0 -0
  182. /package/dist/components/navigation/nav-menu/{items → components}/nav-item/nav-item.types.d.ts +0 -0
  183. /package/dist/components/navigation/nav-menu/{items → components}/nav-item/nav-item.types.js +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"image-panel.js","sourceRoot":"","sources":["../../../../src/components/media/image-panel/image-panel.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"image-panel.js","sourceRoot":"","sources":["../../../../src/components/media/image-panel/image-panel.tsx"],"names":[],"mappings":"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"}
@@ -1,13 +1,8 @@
1
1
  import { InfoCardProps } from './info-card.types';
2
2
  /**
3
- * Linked card displaying a cover image, title, and icon. Supports named icons, emojis, and external SVGs.
3
+ * Linked card displaying a cover image, title, and icon. Always interactive with hover and active states.
4
4
  *
5
5
  * @example
6
- * // Named icon
7
- * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" img="/cover.jpg" />
8
- *
9
- * @example
10
- * // Emoji
11
- * <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} img="/cover.jpg" />
6
+ * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
12
7
  */
13
- export declare const InfoCard: ({ title, url, icon, img }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const InfoCard: ({ title, url, icon, image, layer }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,35 +1,78 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { css, cx } from '../../../styled-system/css';
3
+ import { css } from '../../../styled-system/css';
4
+ import { cva } from '../../../styled-system/css';
4
5
  import { Text } from '../../../components/typography';
5
- import { DynamicIcon } from '../../../internal-components';
6
+ import { DynamicIcon, renderImage } from '../../../internal-components';
7
+ import { SurfaceLayerMap } from '../../../theme';
6
8
  const styles = {
7
- card: css({
8
- margin: 'auto',
9
- border: 'solid',
10
- borderRadius: 'md',
11
- borderWidth: 'md',
12
- borderColor: 'structure',
13
- borderStyle: 'solid',
14
- maxHeight: '15rem',
15
- overflow: 'hidden',
16
- maxWidth: '391px',
17
- aspectRatio: '8 / 5',
18
- width: '100%',
19
- backgroundColor: { base: 'background', _hover: 'surface' },
20
- }),
21
- cardContent: css({
22
- display: 'flex',
23
- flexDirection: 'column',
24
- }),
25
- link: css({
26
- cursor: 'pointer',
9
+ card: cva({
10
+ base: {
11
+ margin: 'auto',
12
+ borderStyle: 'solid',
13
+ borderRadius: 'md',
14
+ maxHeight: '60',
15
+ overflow: 'hidden',
16
+ maxWidth: '391px',
17
+ aspectRatio: '8 / 5',
18
+ width: '100%',
19
+ cursor: 'pointer',
20
+ display: 'flex',
21
+ flexDirection: 'column',
22
+ transition: 'background-color 0.15s ease, box-shadow 0.15s ease',
23
+ _hover: {
24
+ backgroundColor: 'hover',
25
+ '& .info-card-image-wrapper::after': {
26
+ opacity: 0.1,
27
+ },
28
+ },
29
+ _active: {
30
+ backgroundColor: 'active',
31
+ },
32
+ },
33
+ variants: {
34
+ bg: {
35
+ none: {},
36
+ canvas: { backgroundColor: 'canvas' },
37
+ inset: { backgroundColor: 'inset' },
38
+ surface: { backgroundColor: 'surface' },
39
+ elevated: { backgroundColor: 'elevated' },
40
+ overlay: { backgroundColor: 'overlay' },
41
+ },
42
+ shadow: {
43
+ none: { boxShadow: 'none' },
44
+ sm: { boxShadow: 'sm' },
45
+ md: { boxShadow: 'md' },
46
+ lg: { boxShadow: 'lg' },
47
+ },
48
+ structure: {
49
+ none: { borderWidth: '0' },
50
+ subtle: { borderWidth: 'md', borderColor: 'structure.subtle' },
51
+ default: { borderWidth: 'md', borderColor: 'structure.default' },
52
+ strong: { borderWidth: 'md', borderColor: 'structure.strong' },
53
+ },
54
+ },
55
+ defaultVariants: {
56
+ bg: 'surface',
57
+ shadow: 'sm',
58
+ structure: 'subtle',
59
+ },
27
60
  }),
28
61
  imageWrapper: css({
29
62
  overflow: 'hidden',
30
63
  width: '100%',
31
64
  flex: '1',
32
65
  minHeight: '0',
66
+ position: 'relative',
67
+ _after: {
68
+ content: '""',
69
+ position: 'absolute',
70
+ inset: '0',
71
+ backgroundColor: 'text.standard',
72
+ opacity: 0,
73
+ transition: 'opacity 0.15s ease',
74
+ pointerEvents: 'none',
75
+ },
33
76
  }),
34
77
  image: css({
35
78
  height: '100%',
@@ -48,17 +91,17 @@ const styles = {
48
91
  }),
49
92
  };
50
93
  /**
51
- * Linked card displaying a cover image, title, and icon. Supports named icons, emojis, and external SVGs.
52
- *
53
- * @example
54
- * // Named icon
55
- * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" img="/cover.jpg" />
94
+ * Linked card displaying a cover image, title, and icon. Always interactive with hover and active states.
56
95
  *
57
96
  * @example
58
- * // Emoji
59
- * <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} img="/cover.jpg" />
97
+ * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
60
98
  */
61
- export const InfoCard = ({ title, url, icon, img }) => {
62
- return (_jsxs("a", { href: url, className: cx(styles.cardContent, styles.link, styles.card), children: [_jsx("div", { className: styles.imageWrapper, children: _jsx("img", { className: styles.image, src: img, alt: "Article Cover Image" }) }), _jsxs("div", { className: styles.caption, children: [_jsx(DynamicIcon, { icon: icon, size: 24 }), _jsx(Text, { size: "sm", truncate: true, inline: true, children: title })] })] }));
99
+ export const InfoCard = ({ title, url, icon, image, layer = 'surface' }) => {
100
+ const config = SurfaceLayerMap[layer];
101
+ return (_jsxs("a", { href: url, className: styles.card({
102
+ bg: config.bg,
103
+ shadow: config.shadow,
104
+ structure: config.structure,
105
+ }), children: [_jsx("div", { className: `${styles.imageWrapper} info-card-image-wrapper`, children: renderImage(image, undefined, styles.image) }), _jsxs("div", { className: styles.caption, children: [_jsx(DynamicIcon, { icon: icon, size: 24 }), _jsx(Text, { size: "sm", truncate: true, inline: true, children: title })] })] }));
63
106
  };
64
107
  //# sourceMappingURL=info-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,WAAW;QACxB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,OAAO;QACpB,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE;KAC1D,CAAC;IACF,WAAW,EAAE,GAAG,CAAC;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACvB,CAAC;IACF,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,SAAS;KACjB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QACjB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,GAAG;KACd,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,OAAO;KAClB,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG;QACR,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC;KACb,CAAC;CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAiB,EAAE,EAAE;IACpE,OAAO,CACN,aAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,aACxE,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YAClC,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,qBAAqB,GAAG,GAC/D,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC7B,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EACrC,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,MAAM,kBAC7B,KAAK,GACA,IACF,IACH,CACJ,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"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"}
@@ -1,4 +1,5 @@
1
1
  import { DynamicIconProps } from '../../../internal-components';
2
+ import { ImageProps, SurfaceLayerOptions } from '../../../types';
2
3
  export type InfoCardProps = {
3
4
  /** Card title displayed in the caption bar */
4
5
  title: string;
@@ -12,6 +13,8 @@ export type InfoCardProps = {
12
13
  * icon={{ type: 'svg', content: '/icons/article.svg' }}
13
14
  */
14
15
  icon?: DynamicIconProps['icon'];
15
- /** Cover image URL displayed in the card */
16
- img: string;
16
+ /** Cover image displayed in the card */
17
+ image: ImageProps;
18
+ /** Surface layer @default `'surface'` */
19
+ layer?: SurfaceLayerOptions;
17
20
  };
@@ -12,4 +12,4 @@ import { MediaCardProps } from './media-card.types';
12
12
  * details={[{ title: 'Role', details: 'Engineer' }]}
13
13
  * />
14
14
  */
15
- export declare const MediaCard: ({ description, details, detailsPosition, image, imagePosition, links, size, title, }: MediaCardProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const MediaCard: ({ description, details, detailsPosition, image, imagePosition, layer, links, size, title, }: MediaCardProps) => import("react/jsx-runtime").JSX.Element;
@@ -3,14 +3,14 @@ import { css, cva } from '../../../styled-system/css';
3
3
  import { H1, Text } from '../../../components/typography';
4
4
  import { Divider, Icon } from '../../../components/ui';
5
5
  import { LinkWrapper, renderImage } from '../../../internal-components';
6
+ import { SurfaceLayerMap } from '../../../theme';
6
7
  import { cloneElement, isValidElement } from 'react';
7
8
  const styles = {
8
9
  container: cva({
9
10
  base: {
10
11
  alignItems: 'center',
11
12
  borderRadius: 'md',
12
- borderWidth: 'md',
13
- borderColor: 'structure',
13
+ borderStyle: 'solid',
14
14
  display: 'flex',
15
15
  flexDirection: 'column',
16
16
  justifyContent: 'center',
@@ -28,9 +28,32 @@ const styles = {
28
28
  md: { maxWidth: '672px' },
29
29
  lg: { maxWidth: '896px' },
30
30
  },
31
+ bg: {
32
+ none: {},
33
+ canvas: { backgroundColor: 'canvas' },
34
+ inset: { backgroundColor: 'inset' },
35
+ surface: { backgroundColor: 'surface' },
36
+ elevated: { backgroundColor: 'elevated' },
37
+ overlay: { backgroundColor: 'overlay' },
38
+ },
39
+ shadow: {
40
+ none: { boxShadow: 'none' },
41
+ sm: { boxShadow: 'sm' },
42
+ md: { boxShadow: 'md' },
43
+ lg: { boxShadow: 'lg' },
44
+ },
45
+ structure: {
46
+ none: { borderWidth: '0' },
47
+ subtle: { borderWidth: 'md', borderColor: 'structure.subtle' },
48
+ default: { borderWidth: 'md', borderColor: 'structure.default' },
49
+ strong: { borderWidth: 'md', borderColor: 'structure.strong' },
50
+ },
31
51
  },
32
52
  defaultVariants: {
33
53
  size: 'md',
54
+ bg: 'surface',
55
+ shadow: 'sm',
56
+ structure: 'subtle',
34
57
  },
35
58
  }),
36
59
  title: css({
@@ -44,7 +67,7 @@ const styles = {
44
67
  display: 'flex',
45
68
  alignItems: 'center',
46
69
  justifyContent: 'center',
47
- gap: '0.5rem',
70
+ gap: '2',
48
71
  },
49
72
  variants: {
50
73
  imagePosition: {
@@ -73,8 +96,8 @@ const styles = {
73
96
  alignItems: 'center',
74
97
  justifyContent: 'center',
75
98
  gap: {
76
- base: '0.5rem',
77
- lg: '0.75rem',
99
+ base: '2',
100
+ lg: '3',
78
101
  },
79
102
  flexDirection: 'column',
80
103
  }),
@@ -82,10 +105,10 @@ const styles = {
82
105
  borderRadius: 'md',
83
106
  borderWidth: 'sm',
84
107
  width: '100%',
85
- maxWidth: '16rem',
108
+ maxWidth: '64',
86
109
  marginX: 'auto',
87
110
  marginTop: {
88
- lg: '0.75rem',
111
+ lg: '3',
89
112
  },
90
113
  }),
91
114
  links: css({
@@ -93,14 +116,14 @@ const styles = {
93
116
  flexDirection: 'row',
94
117
  alignItems: 'center',
95
118
  justifyContent: 'center',
96
- gap: '0.5rem',
119
+ gap: '2',
97
120
  color: 'text.standard',
98
121
  }),
99
122
  dividerWrapper: css({
100
123
  display: {
101
124
  lg: 'none',
102
125
  },
103
- marginY: '0.5rem',
126
+ marginY: '2',
104
127
  width: '9/12',
105
128
  }),
106
129
  description: css({
@@ -111,7 +134,7 @@ const styles = {
111
134
  marginX: 'auto',
112
135
  alignItems: 'center',
113
136
  justifyContent: 'center',
114
- gap: '0.75rem',
137
+ gap: '3',
115
138
  display: 'flex',
116
139
  flexDirection: {
117
140
  base: 'column',
@@ -120,9 +143,9 @@ const styles = {
120
143
  }),
121
144
  descriptionWrapper: css({
122
145
  maxHeight: {
123
- base: '300px',
146
+ base: '75',
124
147
  md: 'none',
125
- lg: '500px',
148
+ lg: '125',
126
149
  },
127
150
  overflowY: {
128
151
  base: 'auto',
@@ -149,9 +172,16 @@ const styles = {
149
172
  * details={[{ title: 'Role', details: 'Engineer' }]}
150
173
  * />
151
174
  */
152
- export const MediaCard = ({ description, details, detailsPosition = 'text', image, imagePosition = 'left', links, size = 'md', title, }) => {
175
+ export const MediaCard = ({ description, details, detailsPosition = 'text', image, imagePosition = 'left', layer = 'surface', links, size = 'md', title, }) => {
176
+ // Resolve from layer, allow individual overrides
177
+ const layerConfig = SurfaceLayerMap[layer];
153
178
  const linksSection = links.map((link, index) => isValidElement(link) ? (cloneElement(link, { key: index })) : (_jsx(LinkWrapper, { link: link.url, children: _jsx(Icon, { name: link.iconName, size: 24 }) }, index)));
154
179
  const mediaDetails = details && (_jsx("div", { className: styles.details, children: details.map((detail, index) => (_jsxs("span", { children: [_jsx(Text, { align: "center", size: "xs", children: detail.title }), _jsx(Text, { align: "center", size: "xs", bold: true, children: detail.details })] }, index))) }));
155
- return (_jsxs("div", { className: styles.container({ size }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents({ imagePosition }), children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { align: "center", size: "sm", children: item }, index))) })] })] })] }));
180
+ return (_jsxs("div", { className: styles.container({
181
+ size,
182
+ bg: layerConfig.bg,
183
+ shadow: layerConfig.shadow,
184
+ structure: layerConfig.structure,
185
+ }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents({ imagePosition }), children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { align: "center", size: "sm", children: item }, index))) })] })] })] }));
156
186
  };
157
187
  //# sourceMappingURL=media-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { IconNames } from '../../../components/ui';
3
- import { ImageProps, UtilitySizeOptions } from '../../../types';
3
+ import { ImageProps, UtilitySizeOptions, SurfaceLayerOptions } from '../../../types';
4
4
  /** An icon link or a custom React element rendered in the links row */
5
5
  type MediaLink = {
6
6
  /** Named icon to display */
@@ -24,6 +24,8 @@ export type MediaCardProps = {
24
24
  image: ImageProps;
25
25
  /** Side the image appears on at large viewports @default `'left'` */
26
26
  imagePosition?: 'left' | 'right';
27
+ /** Layer shorthand — resolves bg, shadow, and structure from SurfaceLayerMap @default `'surface'` */
28
+ layer?: SurfaceLayerOptions;
27
29
  /** Links rendered below the image as icons or custom elements */
28
30
  links: MediaLink[];
29
31
  /** Controls the max width of the card @default `'md'` */
@@ -1,4 +1,4 @@
1
- export * from './base-item';
1
+ export * from './nav-link';
2
2
  export * from './nav-drop-down-item';
3
3
  export * from './nav-icon-item';
4
4
  export * from './nav-item';
@@ -1,4 +1,4 @@
1
- export * from './base-item';
1
+ export * from './nav-link';
2
2
  export * from './nav-drop-down-item';
3
3
  export * from './nav-icon-item';
4
4
  export * from './nav-item';
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useState } from 'react';
4
- import { BaseItem } from '../base-item';
4
+ import { NavLink } from '../nav-link';
5
5
  import { css, cx } from '../../../../../styled-system/css';
6
6
  const styles = {
7
7
  parentBlock: css({
@@ -10,7 +10,7 @@ const styles = {
10
10
  textBlock: css({
11
11
  display: 'flex',
12
12
  flexDirection: 'row',
13
- gap: '4px',
13
+ gap: '1',
14
14
  justifyContent: 'center',
15
15
  alignItems: 'center',
16
16
  }),
@@ -24,20 +24,16 @@ const styles = {
24
24
  }),
25
25
  dropdownContent: css({
26
26
  display: 'none',
27
- borderWidth: '1px',
28
27
  position: { base: 'static', lg: 'absolute' },
29
28
  width: 'fit-content',
30
29
  borderRadius: 'md',
31
30
  padding: '16px',
32
- zIndex: 10,
31
+ zIndex: 'overlay',
33
32
  top: { lg: 'calc(100% + 30px)' },
34
33
  left: { lg: '50%' },
35
34
  transform: { lg: 'translateX(-50%)' },
36
- background: 'background',
37
- borderColor: 'structure',
38
- _dark: {
39
- backgroundColor: 'surface',
40
- },
35
+ backgroundColor: 'overlay',
36
+ boxShadow: 'lg',
41
37
  }),
42
38
  dropdownContentShow: css({
43
39
  display: { base: 'none', lg: 'block' },
@@ -46,13 +42,12 @@ const styles = {
46
42
  justifyContent: 'center',
47
43
  columnGap: '24px',
48
44
  alignItems: 'center',
49
- backgroundColor: 'background',
50
45
  width: '100vw',
51
46
  position: 'relative',
52
47
  left: '50%',
53
48
  transform: 'translateX(-50%)',
54
49
  borderRadius: 'md',
55
- zIndex: 10,
50
+ zIndex: 'overlay',
56
51
  }),
57
52
  dropdownContentNoShow: css({
58
53
  display: 'none',
@@ -70,6 +65,6 @@ export const NavDropdownItem = ({ title, items }) => {
70
65
  transition: 'all 200ms',
71
66
  transform: isHovered ? 'rotate(180deg)' : 'rotate(0deg)',
72
67
  };
73
- return (_jsxs("div", { className: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setIsHovered(false), children: [_jsx(BaseItem, { href: "#", children: _jsxs("div", { className: styles.textBlock, children: [_jsx("span", { children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), isHovered && _jsx("div", { className: styles.targetArea }), _jsx("div", { className: cx(styles.collapsedDropdownContent, isHovered ? styles.collapsedDropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(BaseItem, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) }), _jsx("div", { id: "target-123", className: cx(styles.dropdownContent, isHovered ? styles.dropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(BaseItem, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) })] }));
68
+ return (_jsxs("div", { className: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setIsHovered(false), children: [_jsx(NavLink, { href: "#", children: _jsxs("div", { className: styles.textBlock, children: [_jsx("span", { children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), isHovered && _jsx("div", { className: styles.targetArea }), _jsx("div", { className: cx(styles.collapsedDropdownContent, isHovered ? styles.collapsedDropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(NavLink, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) }), _jsx("div", { className: cx(styles.dropdownContent, isHovered ? styles.dropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(NavLink, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) })] }));
74
69
  };
75
70
  //# sourceMappingURL=nav-drop-down-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"nav-drop-down-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"nav-drop-down-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export type { NavigationLogoProps } from './navigation-logo.types';
2
+ export { NavigationLogo } from './navigation-logo';
@@ -0,0 +1,2 @@
1
+ export { NavigationLogo } from './navigation-logo';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-icon-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
@@ -0,0 +1,2 @@
1
+ import { NavigationLogoProps } from './navigation-logo.types';
2
+ export declare const NavigationLogo: ({ href, logo }: NavigationLogoProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { NavLink } from '../nav-link';
3
+ export const NavigationLogo = ({ href, logo }) => {
4
+ return (_jsx(NavLink, { href: href, halfPadding: true, children: logo }));
5
+ };
6
+ //# sourceMappingURL=navigation-logo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"navigation-logo.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAuB,EAAE,EAAE;IACrE,OAAO,CACN,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,kBAC9B,IAAI,GACI,CACV,CAAC;AACH,CAAC,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { ReactNode } from 'react';
2
+ export type NavigationLogoProps = {
3
+ href: string;
4
+ logo: ReactNode;
5
+ };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=navigation-logo.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"navigation-logo.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-icon-item/navigation-logo.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { NavLink } from '../nav-link';
3
+ export const NavItem = ({ href, title }) => {
4
+ return _jsx(NavLink, { href: href, children: title });
5
+ };
6
+ //# sourceMappingURL=nav-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-item/nav-item.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,EAAE,EAAE;IACxD,OAAO,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,YAAG,KAAK,GAAW,CAAC;AAC/C,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nav-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-item/nav-item.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export type { NavLinkProps } from './nav-link.types';
2
+ export { NavLink } from './nav-link';
@@ -0,0 +1,2 @@
1
+ export { NavLink } from './nav-link';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-link/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,2 @@
1
+ import { NavLinkProps } from './nav-link.types';
2
+ export declare const NavLink: ({ children, href, halfPadding, isDropdownItem }: NavLinkProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,13 +9,13 @@ const styles = {
9
9
  }),
10
10
  link: cva({
11
11
  base: {
12
- position: { sm: 'static', lg: 'relative' },
12
+ position: { base: 'static', lg: 'relative' },
13
13
  display: 'inline-flex',
14
14
  flexDirection: 'column',
15
- height: { sm: 'auto', lg: '2.5rem' },
15
+ height: { base: 'auto', lg: '2.5rem' },
16
16
  alignItems: 'center',
17
17
  justifyContent: 'center',
18
- borderRadius: '0.375rem',
18
+ borderRadius: 'md',
19
19
  color: 'text.standard',
20
20
  fontSize: '0.875rem',
21
21
  fontWeight: 500,
@@ -23,7 +23,10 @@ const styles = {
23
23
  transition: 'all 150ms ease-in-out',
24
24
  margin: 'auto',
25
25
  _hover: {
26
- backgroundColor: 'elevated',
26
+ backgroundColor: 'hover',
27
+ },
28
+ _active: {
29
+ backgroundColor: 'active',
27
30
  },
28
31
  },
29
32
  variants: {
@@ -42,8 +45,7 @@ const styles = {
42
45
  },
43
46
  }),
44
47
  };
45
- export const BaseItem = ({ children, href, halfPadding = false, onMouseEnter, onMouseLeave, isDropdownItem, }) => {
46
- // Handle hover state
48
+ export const NavLink = ({ children, href, halfPadding = false, isDropdownItem }) => {
47
49
  return (_jsx("li", { className: styles.li, children: _jsx(LinkWrapper, { link: href, className: styles.link({ halfPadding, isDropdownItem }), children: children }) }));
48
50
  };
49
- //# sourceMappingURL=base-item.js.map
51
+ //# sourceMappingURL=nav-link.js.map