@marwes-ui/svelte 1.3.0 → 1.4.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 (182) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/README.md +43 -11
  3. package/dist/components/README.md +31 -0
  4. package/dist/components/accordion/AccordionField.svelte +20 -6
  5. package/dist/components/accordion/index.d.ts +5 -2
  6. package/dist/components/accordion/index.js +7 -1
  7. package/dist/components/accordion/types.d.ts +3 -0
  8. package/dist/components/avatar/AvatarGroup.svelte +5 -2
  9. package/dist/components/avatar/AvatarGroup.svelte.d.ts +1 -0
  10. package/dist/components/avatar/TeamAvatarGroup.svelte +1 -0
  11. package/dist/components/avatar/TeamAvatarGroup.svelte.d.ts +1 -0
  12. package/dist/components/avatar/index.d.ts +7 -1
  13. package/dist/components/avatar/index.js +6 -0
  14. package/dist/components/avatar/types.d.ts +28 -0
  15. package/dist/components/badge/BadgeGroup.svelte +2 -1
  16. package/dist/components/badge/index.d.ts +5 -1
  17. package/dist/components/badge/index.js +4 -0
  18. package/dist/components/badge/types.d.ts +3 -0
  19. package/dist/components/banner/Banner.svelte +67 -0
  20. package/dist/components/banner/Banner.svelte.d.ts +4 -0
  21. package/dist/components/banner/ErrorBanner.svelte +9 -0
  22. package/dist/components/banner/ErrorBanner.svelte.d.ts +4 -0
  23. package/dist/components/banner/InfoBanner.svelte +9 -0
  24. package/dist/components/banner/InfoBanner.svelte.d.ts +4 -0
  25. package/dist/components/banner/SuccessBanner.svelte +9 -0
  26. package/dist/components/banner/SuccessBanner.svelte.d.ts +4 -0
  27. package/dist/components/banner/WarningBanner.svelte +9 -0
  28. package/dist/components/banner/WarningBanner.svelte.d.ts +4 -0
  29. package/dist/components/banner/index.d.ts +7 -0
  30. package/dist/components/banner/index.js +6 -0
  31. package/dist/components/banner/types.d.ts +14 -0
  32. package/dist/components/banner/types.js +1 -0
  33. package/dist/components/breadcrumb/Breadcrumb.svelte +115 -0
  34. package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts +4 -0
  35. package/dist/components/breadcrumb/index.d.ts +2 -0
  36. package/dist/components/breadcrumb/index.js +1 -0
  37. package/dist/components/breadcrumb/types.d.ts +8 -0
  38. package/dist/components/breadcrumb/types.js +1 -0
  39. package/dist/components/button/Button.svelte +8 -4
  40. package/dist/components/button/DestructiveButton.svelte +1 -1
  41. package/dist/components/button/IconButton.svelte +9 -0
  42. package/dist/components/button/IconButton.svelte.d.ts +4 -0
  43. package/dist/components/button/index.d.ts +24 -1
  44. package/dist/components/button/index.js +23 -0
  45. package/dist/components/button/types.d.ts +30 -1
  46. package/dist/components/card/Card.svelte +2 -1
  47. package/dist/components/card/index.d.ts +4 -1
  48. package/dist/components/card/index.js +3 -0
  49. package/dist/components/card/types.d.ts +4 -0
  50. package/dist/components/checkbox/CheckboxField.svelte +4 -3
  51. package/dist/components/checkbox/CheckboxGroupField.svelte +21 -9
  52. package/dist/components/checkbox/index.d.ts +2 -2
  53. package/dist/components/checkbox/index.js +4 -1
  54. package/dist/components/checkbox/types.d.ts +7 -0
  55. package/dist/components/context-menu/ContextMenu.svelte +56 -0
  56. package/dist/components/context-menu/ContextMenu.svelte.d.ts +4 -0
  57. package/dist/components/context-menu/index.d.ts +2 -0
  58. package/dist/components/context-menu/index.js +1 -0
  59. package/dist/components/context-menu/types.d.ts +7 -0
  60. package/dist/components/context-menu/types.js +1 -0
  61. package/dist/components/date-picker/DatePicker.svelte +14 -2
  62. package/dist/components/date-picker/DatePickerField.svelte +72 -0
  63. package/dist/components/date-picker/DatePickerField.svelte.d.ts +4 -0
  64. package/dist/components/date-picker/index.d.ts +2 -2
  65. package/dist/components/date-picker/index.js +3 -1
  66. package/dist/components/date-picker/types.d.ts +15 -0
  67. package/dist/components/dialog/Dialog.svelte +1 -0
  68. package/dist/components/dialog/DialogModal.svelte +12 -0
  69. package/dist/components/dialog/index.d.ts +1 -1
  70. package/dist/components/dialog/types.d.ts +7 -3
  71. package/dist/components/drawer/Drawer.svelte +132 -0
  72. package/dist/components/drawer/Drawer.svelte.d.ts +4 -0
  73. package/dist/components/drawer/index.d.ts +2 -0
  74. package/dist/components/drawer/index.js +1 -0
  75. package/dist/components/drawer/types.d.ts +16 -0
  76. package/dist/components/drawer/types.js +1 -0
  77. package/dist/components/heading/H1.svelte +10 -0
  78. package/dist/components/heading/H2.svelte +6 -0
  79. package/dist/components/heading/H3.svelte +7 -0
  80. package/dist/components/input/CurrencyField.svelte +1 -1
  81. package/dist/components/input/Input.svelte +1 -0
  82. package/dist/components/input/InputField.svelte +4 -3
  83. package/dist/components/input/InputOtp.svelte +21 -44
  84. package/dist/components/input/InputOtpField.svelte +81 -0
  85. package/dist/components/input/InputOtpField.svelte.d.ts +4 -0
  86. package/dist/components/input/RichText.svelte +7 -6
  87. package/dist/components/input/RichTextField.svelte +4 -3
  88. package/dist/components/input/Select.svelte +7 -31
  89. package/dist/components/input/SelectField.svelte +6 -3
  90. package/dist/components/input/Textarea.svelte +1 -0
  91. package/dist/components/input/TextareaField.svelte +20 -5
  92. package/dist/components/input/index.d.ts +12 -4
  93. package/dist/components/input/index.js +19 -3
  94. package/dist/components/input/types.d.ts +59 -5
  95. package/dist/components/pagination/Pagination.svelte +399 -0
  96. package/dist/components/pagination/Pagination.svelte.d.ts +4 -0
  97. package/dist/components/pagination/PaginationField.svelte +72 -0
  98. package/dist/components/pagination/PaginationField.svelte.d.ts +4 -0
  99. package/dist/components/pagination/index.d.ts +2 -0
  100. package/dist/components/pagination/index.js +2 -0
  101. package/dist/components/pagination/types.d.ts +40 -0
  102. package/dist/components/pagination/types.js +1 -0
  103. package/dist/components/progress-bar/ProgressBar.svelte +50 -0
  104. package/dist/components/progress-bar/ProgressBar.svelte.d.ts +4 -0
  105. package/dist/components/progress-bar/index.d.ts +2 -0
  106. package/dist/components/progress-bar/index.js +1 -0
  107. package/dist/components/progress-bar/types.d.ts +6 -0
  108. package/dist/components/progress-bar/types.js +1 -0
  109. package/dist/components/radio/OptionRadioGroup.svelte +39 -5
  110. package/dist/components/radio/OptionRadioGroup.svelte.d.ts +2 -5
  111. package/dist/components/radio/Radio.svelte +1 -0
  112. package/dist/components/radio/RadioGroupField.svelte +4 -3
  113. package/dist/components/radio/RatingRadioGroup.svelte +18 -3
  114. package/dist/components/radio/YesNoRadioGroup.svelte +18 -3
  115. package/dist/components/radio/index.d.ts +4 -2
  116. package/dist/components/radio/index.js +6 -1
  117. package/dist/components/radio/types.d.ts +47 -0
  118. package/dist/components/segmented-control/SegmentedControl.svelte +125 -0
  119. package/dist/components/segmented-control/SegmentedControl.svelte.d.ts +25 -0
  120. package/dist/components/segmented-control/SegmentedControlField.svelte +76 -0
  121. package/dist/components/segmented-control/SegmentedControlField.svelte.d.ts +25 -0
  122. package/dist/components/segmented-control/index.d.ts +2 -0
  123. package/dist/components/segmented-control/index.js +2 -0
  124. package/dist/components/segmented-control/types.d.ts +41 -0
  125. package/dist/components/segmented-control/types.js +1 -0
  126. package/dist/components/skip-link/SkipLink.svelte +12 -0
  127. package/dist/components/skip-link/SkipLink.svelte.d.ts +4 -0
  128. package/dist/components/skip-link/index.d.ts +2 -0
  129. package/dist/components/skip-link/index.js +1 -0
  130. package/dist/components/skip-link/types.d.ts +7 -0
  131. package/dist/components/skip-link/types.js +1 -0
  132. package/dist/components/slider/SliderField.svelte +9 -8
  133. package/dist/components/slider/index.d.ts +5 -2
  134. package/dist/components/slider/index.js +7 -1
  135. package/dist/components/slider/types.d.ts +21 -0
  136. package/dist/components/spinner/EmptyStateSpinner.svelte +2 -3
  137. package/dist/components/spinner/EmptyStateSpinner.svelte.d.ts +1 -2
  138. package/dist/components/spinner/Spinner.svelte +2 -0
  139. package/dist/components/spinner/index.d.ts +2 -1
  140. package/dist/components/spinner/index.js +1 -0
  141. package/dist/components/spinner/types.d.ts +1 -0
  142. package/dist/components/switch/Switch.svelte +1 -1
  143. package/dist/components/switch/SwitchField.svelte +6 -4
  144. package/dist/components/switch/index.d.ts +4 -2
  145. package/dist/components/switch/index.js +6 -1
  146. package/dist/components/switch/types.d.ts +3 -0
  147. package/dist/components/tab/TabGroup.svelte +7 -4
  148. package/dist/components/text/Text.svelte +23 -0
  149. package/dist/components/text/Text.svelte.d.ts +4 -0
  150. package/dist/components/text/index.d.ts +4 -0
  151. package/dist/components/text/index.js +2 -0
  152. package/dist/components/text/types.d.ts +15 -0
  153. package/dist/components/text/types.js +1 -0
  154. package/dist/components/tooltip/TooltipGroup.svelte +10 -2
  155. package/dist/index.d.ts +47 -29
  156. package/dist/index.js +51 -13
  157. package/dist/provider/MarwesProvider.svelte +26 -14
  158. package/dist/provider/types.d.ts +5 -2
  159. package/package.json +6 -5
  160. package/dist/components/accordion/README.md +0 -19
  161. package/dist/components/avatar/README.md +0 -19
  162. package/dist/components/badge/README.md +0 -16
  163. package/dist/components/button/README.md +0 -21
  164. package/dist/components/card/README.md +0 -15
  165. package/dist/components/checkbox/README.md +0 -17
  166. package/dist/components/date-picker/README.md +0 -17
  167. package/dist/components/dialog/README.md +0 -23
  168. package/dist/components/divider/README.md +0 -15
  169. package/dist/components/heading/README.md +0 -13
  170. package/dist/components/icon/README.md +0 -18
  171. package/dist/components/input/README.md +0 -24
  172. package/dist/components/paragraph/README.md +0 -13
  173. package/dist/components/radio/README.md +0 -16
  174. package/dist/components/skeleton/README.md +0 -16
  175. package/dist/components/slider/README.md +0 -20
  176. package/dist/components/spacing/README.md +0 -15
  177. package/dist/components/spinner/README.md +0 -19
  178. package/dist/components/stat-tile/README.md +0 -15
  179. package/dist/components/switch/README.md +0 -17
  180. package/dist/components/tab/README.md +0 -26
  181. package/dist/components/toast/README.md +0 -35
  182. package/dist/components/tooltip/README.md +0 -22
@@ -1,2 +1,5 @@
1
- export { default as Slider } from "./Slider.svelte";
2
- export type { SliderProps, SliderFieldProps } from "./types.js";
1
+ export { default as SliderField } from "./SliderField.svelte";
2
+ export { default as VolumeSlider } from "./VolumeSlider.svelte";
3
+ export { default as BrightnessSlider } from "./BrightnessSlider.svelte";
4
+ export { default as RadiusSlider } from "./RadiusSlider.svelte";
5
+ export type { SliderFieldProps, VolumeSliderProps, BrightnessSliderProps, RadiusSliderProps, } from "./types.js";
@@ -1 +1,7 @@
1
- export { default as Slider } from "./Slider.svelte";
1
+ // `Slider` (the atom) is intentionally NOT re-exported here.
2
+ // Use `SliderField` (or a purpose variant) instead. Internal consumers
3
+ // can deep-import "./Slider.svelte" directly.
4
+ export { default as SliderField } from "./SliderField.svelte";
5
+ export { default as VolumeSlider } from "./VolumeSlider.svelte";
6
+ export { default as BrightnessSlider } from "./BrightnessSlider.svelte";
7
+ export { default as RadiusSlider } from "./RadiusSlider.svelte";
@@ -26,3 +26,24 @@ export interface SliderFieldProps {
26
26
  value?: number;
27
27
  class?: string;
28
28
  }
29
+ export interface VolumeSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
30
+ label?: string;
31
+ slider?: Omit<SliderProps, "value">;
32
+ orientation?: SliderProps["orientation"];
33
+ minValueLabel?: string;
34
+ maxValueLabel?: string;
35
+ }
36
+ export interface BrightnessSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
37
+ label?: string;
38
+ slider?: Omit<SliderProps, "value">;
39
+ orientation?: SliderProps["orientation"];
40
+ minValueLabel?: string;
41
+ maxValueLabel?: string;
42
+ }
43
+ export interface RadiusSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
44
+ label?: string;
45
+ slider?: Omit<SliderProps, "value">;
46
+ orientation?: SliderProps["orientation"];
47
+ minValueLabel?: string;
48
+ maxValueLabel?: string;
49
+ }
@@ -1,10 +1,9 @@
1
1
  <script lang="ts">
2
2
  import { mergeStyle } from "../../internal/css-vars.js";
3
3
  import Spinner from "./Spinner.svelte";
4
- import type { SpinnerProps } from "./types.js";
4
+ import type { EmptyStateSpinnerProps } from "./types.js";
5
5
 
6
- type Props = SpinnerProps;
7
- let { dataAttributes, ...props }: Props = $props();
6
+ let { dataAttributes, ...props }: EmptyStateSpinnerProps = $props();
8
7
  </script>
9
8
 
10
9
  <Spinner
@@ -1,4 +1,3 @@
1
- import type { SpinnerProps } from "./types.js";
2
- declare const EmptyStateSpinner: import("svelte").Component<SpinnerProps, {}, "">;
1
+ declare const EmptyStateSpinner: import("svelte").Component<import("./types.js").SpinnerProps, {}, "">;
3
2
  type EmptyStateSpinner = ReturnType<typeof EmptyStateSpinner>;
4
3
  export default EmptyStateSpinner;
@@ -10,6 +10,7 @@
10
10
  size,
11
11
  decorative,
12
12
  ariaLabel,
13
+ label,
13
14
  id,
14
15
  class: className,
15
16
  style,
@@ -22,6 +23,7 @@
22
23
  ...(size !== undefined ? { size } : {}),
23
24
  ...(decorative !== undefined ? { decorative } : {}),
24
25
  ...(ariaLabel !== undefined ? { ariaLabel } : {}),
26
+ ...(label !== undefined ? { label } : {}),
25
27
  ...(id !== undefined ? { id } : {}),
26
28
  })
27
29
  );
@@ -1,3 +1,4 @@
1
1
  export { default as Spinner } from "./Spinner.svelte";
2
2
  export { default as ButtonSpinner } from "./ButtonSpinner.svelte";
3
- export type { SpinnerProps, ButtonSpinnerProps } from "./types.js";
3
+ export { default as EmptyStateSpinner } from "./EmptyStateSpinner.svelte";
4
+ export type { SpinnerProps, ButtonSpinnerProps, EmptyStateSpinnerProps } from "./types.js";
@@ -1,2 +1,3 @@
1
1
  export { default as Spinner } from "./Spinner.svelte";
2
2
  export { default as ButtonSpinner } from "./ButtonSpinner.svelte";
3
+ export { default as EmptyStateSpinner } from "./EmptyStateSpinner.svelte";
@@ -7,3 +7,4 @@ export interface SpinnerProps extends SpinnerOptions {
7
7
  export interface ButtonSpinnerProps extends SpinnerProps {
8
8
  inverted?: boolean;
9
9
  }
10
+ export type EmptyStateSpinnerProps = SpinnerProps;
@@ -39,7 +39,7 @@
39
39
  aria-checked={kit.a11y.ariaChecked}
40
40
  aria-disabled={kit.a11y.ariaDisabled}
41
41
  aria-label={kit.a11y.ariaLabel}
42
- aria-labelledby={kit.a11y.ariaLabelledby}
42
+ aria-labelledby={kit.a11y.ariaLabelledBy}
43
43
  aria-describedby={kit.a11y.ariaDescribedBy}
44
44
  class={mergedClass}
45
45
  style={mergedStyle}
@@ -1,6 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { buildSwitchFieldA11yIds } from "@marwes-ui/core";
3
3
  import { mergeClass } from "../../internal/merge-class.js";
4
+ import Text from "../text/Text.svelte";
4
5
  import Switch from "./Switch.svelte";
5
6
  import type { SwitchFieldProps, SwitchProps } from "./types.js";
6
7
 
@@ -39,6 +40,7 @@
39
40
  mergeClass(
40
41
  "mw-switch-field",
41
42
  disabled && "mw-switch-field--disabled",
43
+ hasError && "mw-switch-field--invalid",
42
44
  className
43
45
  )
44
46
  );
@@ -50,22 +52,22 @@
50
52
  {...switchProps}
51
53
  id={fieldId}
52
54
  ariaDescribedBy={a11yIds.describedBy}
53
- ariaLabelledby={a11yIds.labelId}
55
+ ariaLabelledBy={a11yIds.labelId}
54
56
  />
55
57
  <label class="mw-switch-field__label" id={a11yIds.labelId} for={fieldId}>
56
- <p class="mw-p mw-p--md">{label}</p>
58
+ <Text variant="label">{label}</Text>
57
59
  </label>
58
60
  </div>
59
61
 
60
62
  {#if hasDescription}
61
63
  <div class="mw-switch-field__description" id={a11yIds.descriptionId}>
62
- <p class="mw-p mw-p--sm">{description}</p>
64
+ <Text variant="caption">{description}</Text>
63
65
  </div>
64
66
  {/if}
65
67
 
66
68
  {#if hasError}
67
69
  <div class="mw-switch-field__error" id={a11yIds.errorId} aria-live="polite">
68
- <p class="mw-p mw-p--sm">{error}</p>
70
+ <Text variant="caption">{error}</Text>
69
71
  </div>
70
72
  {/if}
71
73
  </div>
@@ -1,3 +1,5 @@
1
- export { default as Switch } from "./Switch.svelte";
2
1
  export { default as SwitchField } from "./SwitchField.svelte";
3
- export type { SwitchProps, SwitchFieldProps } from "./types.js";
2
+ export { default as FeatureToggle } from "./FeatureToggle.svelte";
3
+ export { default as PreferenceSwitch } from "./PreferenceSwitch.svelte";
4
+ export { default as PermissionSwitch } from "./PermissionSwitch.svelte";
5
+ export type { SwitchFieldProps, FeatureToggleProps, PreferenceSwitchProps, PermissionSwitchProps, } from "./types.js";
@@ -1,2 +1,7 @@
1
- export { default as Switch } from "./Switch.svelte";
1
+ // `Switch` (the atom) is intentionally NOT re-exported here.
2
+ // Use `SwitchField` (or a purpose variant) instead. Internal consumers
3
+ // can deep-import "./Switch.svelte" directly.
2
4
  export { default as SwitchField } from "./SwitchField.svelte";
5
+ export { default as FeatureToggle } from "./FeatureToggle.svelte";
6
+ export { default as PreferenceSwitch } from "./PreferenceSwitch.svelte";
7
+ export { default as PermissionSwitch } from "./PermissionSwitch.svelte";
@@ -18,3 +18,6 @@ export interface SwitchFieldProps {
18
18
  ariaDescribedBy?: string;
19
19
  class?: string;
20
20
  }
21
+ export type FeatureToggleProps = SwitchFieldProps;
22
+ export type PreferenceSwitchProps = SwitchFieldProps;
23
+ export type PermissionSwitchProps = SwitchFieldProps;
@@ -7,6 +7,7 @@
7
7
  } from "@marwes-ui/core";
8
8
  import type { TabGroupItemState } from "@marwes-ui/core";
9
9
  import { mergeClass } from "../../internal/merge-class.js";
10
+ import Text from "../text/Text.svelte";
10
11
  import type { TabGroupProps } from "./types.js";
11
12
 
12
13
  let {
@@ -32,6 +33,7 @@
32
33
  const hasLabel = $derived(!!label);
33
34
 
34
35
  const a11yIds = $derived(buildTabGroupA11yIds({ id: groupId, itemValues, hasLabel }));
36
+ const labelId = $derived(a11yIds.labelId ?? `${groupId}-label`);
35
37
 
36
38
  let internalActive = $state<string | undefined>(undefined);
37
39
 
@@ -76,17 +78,18 @@
76
78
 
77
79
  <div class={mergedClass} {...dataAttributes}>
78
80
  {#if label}
79
- <div class="mw-tab-group__label" id={a11yIds.labelId}>
80
- <p class="mw-p mw-p--sm">{label}</p>
81
+ <div class="mw-tab-group__header">
82
+ <Text variant="label" id={labelId}>{label}</Text>
81
83
  </div>
82
84
  {/if}
83
85
 
84
86
  <div
85
- class="mw-tab-group__tablist"
87
+ class="mw-tab-group__list"
86
88
  role="tablist"
87
89
  id={a11yIds.tabListId}
88
- aria-labelledby={a11yIds.labelId}
90
+ aria-labelledby={label ? labelId : undefined}
89
91
  aria-label={!label ? ariaLabel : undefined}
92
+ tabindex={-1}
90
93
  onkeydown={handleKeydown}
91
94
  >
92
95
  {#each tabs as tab}
@@ -0,0 +1,23 @@
1
+ <script lang="ts">
2
+ import { textRecipe } from "@marwes-ui/core";
3
+ import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
4
+ import { mergeClass } from "../../internal/merge-class.js";
5
+ import { useTheme } from "../../provider/use-theme.js";
6
+ import type { TextProps } from "./types.js";
7
+
8
+ let {
9
+ children,
10
+ class: className,
11
+ style,
12
+ ...opts
13
+ }: TextProps = $props();
14
+
15
+ const { theme } = useTheme();
16
+ const kit = $derived(textRecipe(opts, theme));
17
+ const mergedClass = $derived(mergeClass(kit.className, className));
18
+ const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
19
+ </script>
20
+
21
+ <svelte:element this={kit.tag} id={kit.a11y.id} class={mergedClass} style={mergedStyle}>
22
+ {@render children?.()}
23
+ </svelte:element>
@@ -0,0 +1,4 @@
1
+ import type { TextProps } from "./types.js";
2
+ declare const Text: import("svelte").Component<TextProps, {}, "">;
3
+ type Text = ReturnType<typeof Text>;
4
+ export default Text;
@@ -0,0 +1,4 @@
1
+ export { default as Text } from "./Text.svelte";
2
+ export { default as TypographyText } from "./Text.svelte";
3
+ export type TextComponent = typeof import("./Text.svelte").default;
4
+ export type { TextProps } from "./types.js";
@@ -0,0 +1,2 @@
1
+ export { default as Text } from "./Text.svelte";
2
+ export { default as TypographyText } from "./Text.svelte";
@@ -0,0 +1,15 @@
1
+ import type { TextAs, TextVariant } from "@marwes-ui/core";
2
+ import type { Snippet } from "svelte";
3
+ export interface TextProps {
4
+ variant?: TextVariant;
5
+ as?: TextAs;
6
+ /**
7
+ * Render as a heading element (h1–h6) while keeping the visual variant.
8
+ * Wins over `as` when both are set.
9
+ */
10
+ headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
11
+ id?: string;
12
+ children?: Snippet;
13
+ class?: string;
14
+ style?: string | undefined;
15
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -28,9 +28,17 @@
28
28
  const resolvedTooltipId = $derived(tooltipIdProp ?? `${groupId}-tooltip`);
29
29
 
30
30
  const isControlled = $derived(open !== undefined);
31
- let internalOpen = $state(defaultOpen);
31
+ function getInitialOpen(): boolean {
32
+ return defaultOpen;
33
+ }
34
+
35
+ function getInitialTooltipMounted(): boolean {
36
+ return open ?? defaultOpen;
37
+ }
38
+
39
+ let internalOpen = $state(getInitialOpen());
32
40
  const resolvedOpen = $derived(isControlled ? (open as boolean) : internalOpen);
33
- let isTooltipMounted = $state(resolvedOpen);
41
+ let isTooltipMounted = $state(getInitialTooltipMounted());
34
42
 
35
43
  $effect(() => {
36
44
  if (resolvedOpen) {
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import "@marwes-ui/presets/firstEdition/styles.css";
1
2
  export { default as MarwesProvider } from "./provider/MarwesProvider.svelte";
2
- export type { MarwesProviderProps, MarwesContextState, MarwesContextValue, } from "./provider/types.js";
3
+ export type { MarwesProviderProps, MarwesProviderSnippetProps, MarwesContextState, MarwesContextValue, } from "./provider/types.js";
3
4
  export { useTheme } from "./provider/use-theme.js";
4
5
  export type { UseThemeReturn } from "./provider/use-theme.js";
5
6
  export { useThemeMode } from "./provider/use-theme-mode.js";
@@ -7,6 +8,7 @@ export type { ThemeModeContextValue } from "./provider/use-theme-mode.js";
7
8
  export { createMarwesThemeScript, createMarwesThemeStyle } from "./ssr.js";
8
9
  export type { MarwesThemeScriptOptions, MarwesThemeStyleOptions } from "./ssr.js";
9
10
  export { default as Button } from "./components/button/Button.svelte";
11
+ export { default as IconButton } from "./components/button/IconButton.svelte";
10
12
  export { default as PrimaryButton } from "./components/button/PrimaryButton.svelte";
11
13
  export { default as SecondaryButton } from "./components/button/SecondaryButton.svelte";
12
14
  export { default as TextButton } from "./components/button/TextButton.svelte";
@@ -29,14 +31,13 @@ export { default as SearchButton } from "./components/button/SearchButton.svelte
29
31
  export { default as FilterButton } from "./components/button/FilterButton.svelte";
30
32
  export { default as SortButton } from "./components/button/SortButton.svelte";
31
33
  export { default as DropdownButton } from "./components/button/DropdownButton.svelte";
32
- export type { ButtonProps } from "./components/button/types.js";
34
+ export type { ButtonProps, CancelButtonProps, CloseButtonProps, ConfirmButtonProps, CopyButtonProps, CreateButtonProps, DestructiveButtonProps, DownloadButtonProps, DropdownButtonProps, EditButtonProps, FilterButtonProps, IconButtonProps, LinkButtonProps, PrimaryButtonProps, RefreshButtonProps, SaveButtonProps, SearchButtonProps, SecondaryButtonProps, SortButtonProps, SubmitButtonProps, SuccessButtonProps, TextButtonProps, UploadButtonProps, VerifyButtonProps, } from "./components/button/types.js";
33
35
  export { default as Icon } from "./components/icon/Icon.svelte";
34
36
  export type { IconProps } from "./components/icon/types.js";
35
37
  export { default as Spinner } from "./components/spinner/Spinner.svelte";
36
38
  export { default as ButtonSpinner } from "./components/spinner/ButtonSpinner.svelte";
37
39
  export { default as EmptyStateSpinner } from "./components/spinner/EmptyStateSpinner.svelte";
38
- export type { SpinnerProps, ButtonSpinnerProps } from "./components/spinner/types.js";
39
- export { default as Input } from "./components/input/Input.svelte";
40
+ export type { SpinnerProps, ButtonSpinnerProps, EmptyStateSpinnerProps, } from "./components/spinner/types.js";
40
41
  export { default as InputField } from "./components/input/InputField.svelte";
41
42
  export { default as PasswordField } from "./components/input/PasswordField.svelte";
42
43
  export { default as EmailField } from "./components/input/EmailField.svelte";
@@ -47,23 +48,33 @@ export { default as CurrencyField } from "./components/input/CurrencyField.svelt
47
48
  export { default as DateOfBirthField } from "./components/input/DateOfBirthField.svelte";
48
49
  export { default as ZipCodeField } from "./components/input/ZipCodeField.svelte";
49
50
  export { default as DropdownField } from "./components/input/DropdownField.svelte";
50
- export { default as InputOtp } from "./components/input/InputOtp.svelte";
51
- export { default as RichText } from "./components/input/RichText.svelte";
51
+ export { default as InputOtpField } from "./components/input/InputOtpField.svelte";
52
52
  export { default as RichTextField } from "./components/input/RichTextField.svelte";
53
- export type { InputProps, InputFieldProps, InputOtpProps, RichTextProps, RichTextFieldProps, } from "./components/input/types.js";
53
+ export type { CurrencyFieldProps, DateOfBirthFieldProps, DropdownFieldProps, EmailFieldProps, InputFieldProps, InputOtpFieldProps, PasswordFieldProps, PhoneFieldProps, RichTextFieldProps, SearchFieldProps, URLFieldProps, ZipCodeFieldProps, } from "./components/input/types.js";
54
54
  export { default as Badge } from "./components/badge/Badge.svelte";
55
55
  export { default as BadgeGroup } from "./components/badge/BadgeGroup.svelte";
56
56
  export { default as StatusBadge } from "./components/badge/StatusBadge.svelte";
57
57
  export { default as PriorityBadge } from "./components/badge/PriorityBadge.svelte";
58
58
  export { default as NotificationBadge } from "./components/badge/NotificationBadge.svelte";
59
- export type { BadgeProps, BadgeGroupProps } from "./components/badge/types.js";
59
+ export type { BadgeProps, BadgeGroupProps, StatusBadgeProps, PriorityBadgeProps, NotificationBadgeProps, } from "./components/badge/types.js";
60
+ export { default as Banner } from "./components/banner/Banner.svelte";
61
+ export { default as InfoBanner } from "./components/banner/InfoBanner.svelte";
62
+ export { default as SuccessBanner } from "./components/banner/SuccessBanner.svelte";
63
+ export { default as WarningBanner } from "./components/banner/WarningBanner.svelte";
64
+ export { default as ErrorBanner } from "./components/banner/ErrorBanner.svelte";
65
+ export { BannerVariant } from "@marwes-ui/core";
66
+ export type { BannerProps, InfoBannerProps, SuccessBannerProps, WarningBannerProps, ErrorBannerProps, } from "./components/banner/types.js";
60
67
  export { default as Card } from "./components/card/Card.svelte";
61
68
  export { default as ProductCard } from "./components/card/ProductCard.svelte";
62
69
  export { default as ProfileCard } from "./components/card/ProfileCard.svelte";
63
70
  export { default as StatCard } from "./components/card/StatCard.svelte";
64
- export type { CardProps } from "./components/card/types.js";
71
+ export type { CardProps, ProductCardProps, ProfileCardProps, StatCardProps, } from "./components/card/types.js";
65
72
  export { default as Divider } from "./components/divider/Divider.svelte";
66
73
  export type { DividerProps } from "./components/divider/types.js";
74
+ export { default as ContextMenu } from "./components/context-menu/ContextMenu.svelte";
75
+ export type { ContextMenuActionItem, ContextMenuEntry, ContextMenuProps, } from "./components/context-menu/types.js";
76
+ export { default as Breadcrumb } from "./components/breadcrumb/Breadcrumb.svelte";
77
+ export type { BreadcrumbItem, BreadcrumbProps } from "./components/breadcrumb/types.js";
67
78
  export { default as Spacing } from "./components/spacing/Spacing.svelte";
68
79
  export { default as Spacer } from "./components/spacing/Spacer.svelte";
69
80
  export type { SpacingProps, SpacerProps } from "./components/spacing/types.js";
@@ -73,39 +84,42 @@ export { default as H3 } from "./components/heading/H3.svelte";
73
84
  export type { H1Props, H2Props, H3Props } from "./components/heading/types.js";
74
85
  export { default as Paragraph } from "./components/paragraph/Paragraph.svelte";
75
86
  export type { ParagraphProps } from "./components/paragraph/types.js";
76
- export { default as Textarea } from "./components/input/Textarea.svelte";
87
+ export { default as Text } from "./components/text/Text.svelte";
88
+ export { default as TypographyText } from "./components/text/Text.svelte";
89
+ export type TextComponent = typeof import("./components/text/Text.svelte").default;
90
+ export type { TextProps } from "./components/text/types.js";
77
91
  export { default as TextareaField } from "./components/input/TextareaField.svelte";
78
- export type { TextareaProps, TextareaFieldProps } from "./components/input/types.js";
79
- export { default as Select } from "./components/input/Select.svelte";
92
+ export type { TextareaFieldProps } from "./components/input/types.js";
80
93
  export { default as SelectField } from "./components/input/SelectField.svelte";
81
- export type { SelectProps, SelectFieldProps } from "./components/input/types.js";
82
- export { default as Checkbox } from "./components/checkbox/Checkbox.svelte";
94
+ export type { SelectAppearance, SelectOption, SelectFieldProps, SelectFieldVariant, } from "./components/input/types.js";
83
95
  export { default as CheckboxField } from "./components/checkbox/CheckboxField.svelte";
84
96
  export { default as CheckboxGroupField } from "./components/checkbox/CheckboxGroupField.svelte";
85
- export type { CheckboxProps, CheckboxFieldProps, CheckboxGroupFieldProps, } from "./components/checkbox/types.js";
86
- export { default as Switch } from "./components/switch/Switch.svelte";
97
+ export type { CheckboxFieldProps, CheckboxGroupFieldProps, CheckboxGroupFieldOption, } from "./components/checkbox/types.js";
87
98
  export { default as SwitchField } from "./components/switch/SwitchField.svelte";
88
99
  export { default as FeatureToggle } from "./components/switch/FeatureToggle.svelte";
89
100
  export { default as PreferenceSwitch } from "./components/switch/PreferenceSwitch.svelte";
90
101
  export { default as PermissionSwitch } from "./components/switch/PermissionSwitch.svelte";
91
- export type { SwitchProps, SwitchFieldProps } from "./components/switch/types.js";
92
- export { default as Radio } from "./components/radio/Radio.svelte";
102
+ export type { SwitchFieldProps, FeatureToggleProps, PreferenceSwitchProps, PermissionSwitchProps, } from "./components/switch/types.js";
93
103
  export { default as RadioGroupField } from "./components/radio/RadioGroupField.svelte";
94
104
  export { default as OptionRadioGroup } from "./components/radio/OptionRadioGroup.svelte";
95
105
  export { default as YesNoRadioGroup } from "./components/radio/YesNoRadioGroup.svelte";
96
106
  export { default as RatingRadioGroup } from "./components/radio/RatingRadioGroup.svelte";
97
- export type { RadioProps, RadioGroupFieldProps } from "./components/radio/types.js";
107
+ export type { OptionRadioGroupProps, RatingRadioGroupProps, RadioGroupFieldOption, RadioGroupFieldProps, YesNoRadioGroupProps, } from "./components/radio/types.js";
98
108
  export { default as Avatar } from "./components/avatar/Avatar.svelte";
99
109
  export { default as AvatarBadge } from "./components/avatar/AvatarBadge.svelte";
100
110
  export { default as AvatarGroup } from "./components/avatar/AvatarGroup.svelte";
101
111
  export { default as ProfileAvatar } from "./components/avatar/ProfileAvatar.svelte";
102
112
  export { default as PresenceAvatar } from "./components/avatar/PresenceAvatar.svelte";
103
113
  export { default as TeamAvatarGroup } from "./components/avatar/TeamAvatarGroup.svelte";
104
- export type { AvatarProps } from "./components/avatar/types.js";
105
- export { default as DatePicker } from "./components/date-picker/DatePicker.svelte";
106
- export type { DatePickerProps } from "./components/date-picker/types.js";
114
+ export type { AvatarProps, AvatarBadgeProps, AvatarGroupItem, AvatarGroupProps, PresenceAvatarProps, ProfileAvatarProps, TeamAvatarGroupProps, } from "./components/avatar/types.js";
115
+ export { default as DatePickerField } from "./components/date-picker/DatePickerField.svelte";
116
+ export type { DatePickerFieldProps } from "./components/date-picker/types.js";
117
+ export { default as Drawer } from "./components/drawer/Drawer.svelte";
118
+ export type { DrawerPlacement, DrawerProps, DrawerSize } from "./components/drawer/types.js";
107
119
  export { default as Skeleton } from "./components/skeleton/Skeleton.svelte";
108
120
  export type { SkeletonProps } from "./components/skeleton/types.js";
121
+ export { default as ProgressBar } from "./components/progress-bar/ProgressBar.svelte";
122
+ export type { ProgressBarProps } from "./components/progress-bar/types.js";
109
123
  export { default as StatTile } from "./components/stat-tile/StatTile.svelte";
110
124
  export type { StatTileProps } from "./components/stat-tile/types.js";
111
125
  export { default as Tooltip } from "./components/tooltip/Tooltip.svelte";
@@ -125,13 +139,12 @@ export { default as DialogModal } from "./components/dialog/DialogModal.svelte";
125
139
  export { default as ConfirmDialog } from "./components/dialog/ConfirmDialog.svelte";
126
140
  export { default as DestructiveDialog } from "./components/dialog/DestructiveDialog.svelte";
127
141
  export { default as InfoDialog } from "./components/dialog/InfoDialog.svelte";
128
- export type { DialogProps, DialogModalProps, ConfirmDialogProps, DestructiveDialogProps, InfoDialogProps, } from "./components/dialog/types.js";
129
- export { default as Accordion } from "./components/accordion/Accordion.svelte";
142
+ export type { DialogFooterControls, DialogProps, DialogModalProps, ConfirmDialogProps, DestructiveDialogProps, InfoDialogProps, } from "./components/dialog/types.js";
130
143
  export { default as AccordionField } from "./components/accordion/AccordionField.svelte";
131
144
  export { default as FAQAccordion } from "./components/accordion/FAQAccordion.svelte";
132
145
  export { default as SettingsAccordion } from "./components/accordion/SettingsAccordion.svelte";
133
146
  export { default as SectionsAccordion } from "./components/accordion/SectionsAccordion.svelte";
134
- export type { AccordionProps, AccordionFieldItem, AccordionFieldProps, } from "./components/accordion/types.js";
147
+ export type { AccordionFieldItem, AccordionFieldProps, FAQAccordionProps, SectionsAccordionProps, SettingsAccordionProps, } from "./components/accordion/types.js";
135
148
  export { default as Tab } from "./components/tab/Tab.svelte";
136
149
  export { default as TabPanel } from "./components/tab/TabPanel.svelte";
137
150
  export { default as TabGroup } from "./components/tab/TabGroup.svelte";
@@ -139,11 +152,16 @@ export { default as NavigationTabs } from "./components/tab/NavigationTabs.svelt
139
152
  export { default as ContentTabs } from "./components/tab/ContentTabs.svelte";
140
153
  export { default as SettingsTabs } from "./components/tab/SettingsTabs.svelte";
141
154
  export type { TabProps, TabPanelProps, TabGroupProps, TabGroupItem, NavigationTabsProps, ContentTabsProps, SettingsTabsProps, } from "./components/tab/types.js";
142
- export { default as Slider } from "./components/slider/Slider.svelte";
155
+ export { default as SegmentedControlField } from "./components/segmented-control/SegmentedControlField.svelte";
156
+ export type { SegmentedControlItem, SegmentedControlFieldProps, } from "./components/segmented-control/types.js";
157
+ export { default as PaginationField } from "./components/pagination/PaginationField.svelte";
158
+ export type { PaginationFieldProps } from "./components/pagination/types.js";
159
+ export { default as SkipLink } from "./components/skip-link/SkipLink.svelte";
160
+ export type { SkipLinkProps } from "./components/skip-link/types.js";
143
161
  export { default as SliderField } from "./components/slider/SliderField.svelte";
144
162
  export { default as VolumeSlider } from "./components/slider/VolumeSlider.svelte";
145
163
  export { default as BrightnessSlider } from "./components/slider/BrightnessSlider.svelte";
146
164
  export { default as RadiusSlider } from "./components/slider/RadiusSlider.svelte";
147
- export type { SliderProps, SliderFieldProps } from "./components/slider/types.js";
148
- export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, createFontStack, IconName, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, Spacings, SwitchSize, ThemeMode, } from "@marwes-ui/core";
149
- export type { Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Theme, ThemeInput, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, } from "@marwes-ui/core";
165
+ export type { SliderFieldProps, VolumeSliderProps, BrightnessSliderProps, RadiusSliderProps, } from "./components/slider/types.js";
166
+ export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, createFontStack, IconName, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar, createMwTheme, createMwThemeMedia, Spacings, SwitchSize, TextVariant, ThemeMode, } from "@marwes-ui/core";
167
+ export type { Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwTheme, MwThemeMedia, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Theme, ThemeBreakpointName, ThemeBreakpoints, ThemeInput, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, TextAs, ThemeVariableStrategy, ToneName, } from "@marwes-ui/core";