sv5ui 1.4.0 → 1.5.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 (42) hide show
  1. package/dist/Checkbox/Checkbox.svelte +2 -11
  2. package/dist/CheckboxGroup/CheckboxGroup.svelte +2 -11
  3. package/dist/FormField/FormField.svelte +2 -6
  4. package/dist/Input/Input.svelte +2 -10
  5. package/dist/PinInput/PinInput.svelte +2 -11
  6. package/dist/RadioGroup/RadioGroup.svelte +2 -11
  7. package/dist/Select/Select.svelte +2 -10
  8. package/dist/SelectMenu/SelectMenu.svelte +2 -10
  9. package/dist/Slider/Slider.svelte +2 -11
  10. package/dist/Switch/Switch.svelte +2 -11
  11. package/dist/Table/Table.svelte +752 -0
  12. package/dist/Table/Table.svelte.d.ts +26 -0
  13. package/dist/Table/index.d.ts +2 -0
  14. package/dist/Table/index.js +1 -0
  15. package/dist/Table/table.types.d.ts +199 -0
  16. package/dist/Table/table.types.js +1 -0
  17. package/dist/Table/table.utils.d.ts +51 -0
  18. package/dist/Table/table.utils.js +166 -0
  19. package/dist/Table/table.variants.d.ts +205 -0
  20. package/dist/Table/table.variants.js +126 -0
  21. package/dist/Textarea/Textarea.svelte +2 -10
  22. package/dist/config.d.ts +3 -0
  23. package/dist/config.js +4 -1
  24. package/dist/hooks/index.d.ts +14 -0
  25. package/dist/hooks/index.js +7 -0
  26. package/dist/hooks/useClickOutside.svelte.d.ts +31 -0
  27. package/dist/hooks/useClickOutside.svelte.js +37 -0
  28. package/dist/hooks/useClipboard.svelte.d.ts +30 -0
  29. package/dist/hooks/useClipboard.svelte.js +45 -0
  30. package/dist/hooks/useDebounce.svelte.d.ts +36 -0
  31. package/dist/hooks/useDebounce.svelte.js +56 -0
  32. package/dist/hooks/useEscapeKeydown.svelte.d.ts +31 -0
  33. package/dist/hooks/useEscapeKeydown.svelte.js +37 -0
  34. package/dist/hooks/useFormField.svelte.d.ts +21 -0
  35. package/dist/hooks/useFormField.svelte.js +17 -0
  36. package/dist/hooks/useInfiniteScroll.svelte.d.ts +57 -0
  37. package/dist/hooks/useInfiniteScroll.svelte.js +69 -0
  38. package/dist/hooks/useMediaQuery.svelte.d.ts +31 -0
  39. package/dist/hooks/useMediaQuery.svelte.js +38 -0
  40. package/dist/index.d.ts +2 -0
  41. package/dist/index.js +3 -0
  42. package/package.json +1 -1
package/dist/Checkbox/Checkbox.svelte CHANGED
@@ -8,9 +8,8 @@
8
8
  import { Checkbox, Label, useId } from 'bits-ui'
9
9
  import { checkboxVariants, checkboxDefaults } from './checkbox.variants.js'
10
10
  import { getComponentConfig, iconsDefaults } from '../config.js'
11
- import { getContext } from 'svelte'
12
11
  import Icon from '../Icon/Icon.svelte'
13
- import type { FormFieldProps } from '../FormField/form-field.types.js'
12
+ import { useFormField } from '../hooks/useFormField.svelte.js'
14
13
 
15
14
  const config = getComponentConfig('checkbox', checkboxDefaults)
16
15
  const icons = getComponentConfig('icons', iconsDefaults)
@@ -43,15 +42,7 @@
43
42
  ...restProps
44
43
  }: Props = $props()
45
44
 
46
- const formFieldContext = getContext<
47
- | {
48
- name?: string
49
- size: NonNullable<FormFieldProps['size']>
50
- error?: string | boolean
51
- ariaId: string
52
- }
53
- | undefined
54
- >('formField')
45
+ const formFieldContext = useFormField()
55
46
 
56
47
  const hasError = $derived(
57
48
  formFieldContext?.error !== undefined && formFieldContext?.error !== false
package/dist/CheckboxGroup/CheckboxGroup.svelte CHANGED
@@ -8,9 +8,8 @@
8
8
  import { Checkbox, Label, useId } from 'bits-ui'
9
9
  import { checkboxGroupVariants, checkboxGroupDefaults } from './checkbox-group.variants.js'
10
10
  import { getComponentConfig, iconsDefaults } from '../config.js'
11
- import { getContext } from 'svelte'
12
11
  import Icon from '../Icon/Icon.svelte'
13
- import type { FormFieldProps } from '../FormField/form-field.types.js'
12
+ import { useFormField } from '../hooks/useFormField.svelte.js'
14
13
  import type { CheckboxGroupItem } from './checkbox-group.types.js'
15
14
 
16
15
  const config = getComponentConfig('checkboxGroup', checkboxGroupDefaults)
@@ -42,15 +41,7 @@
42
41
  ...restProps
43
42
  }: Props = $props()
44
43
 
45
- const formFieldContext = getContext<
46
- | {
47
- name?: string
48
- size: NonNullable<FormFieldProps['size']>
49
- error?: string | boolean
50
- ariaId: string
51
- }
52
- | undefined
53
- >('formField')
44
+ const formFieldContext = useFormField()
54
45
 
55
46
  const hasError = $derived(
56
47
  formFieldContext?.error !== undefined && formFieldContext?.error !== false
package/dist/FormField/FormField.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  import { formFieldVariants, formFieldDefaults } from './form-field.variants.js'
10
10
  import { getComponentConfig } from '../config.js'
11
11
  import { setContext } from 'svelte'
12
+ import type { FormFieldContext } from '../hooks/useFormField.svelte.js'
12
13
 
13
14
  const config = getComponentConfig('formField', formFieldDefaults)
14
15
 
@@ -57,12 +58,7 @@
57
58
  const hasError = $derived(error !== undefined && error !== false)
58
59
  const errorMessage = $derived(typeof error === 'string' ? error : undefined)
59
60
 
60
- setContext<{
61
- name?: string
62
- size: NonNullable<FormFieldProps['size']>
63
- error?: string | boolean
64
- ariaId: string
65
- }>('formField', {
61
+ setContext<FormFieldContext>('formField', {
66
62
  get name() {
67
63
  return name
68
64
  },
package/dist/Input/Input.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  import Icon from '../Icon/Icon.svelte'
16
16
  import Avatar from '../Avatar/Avatar.svelte'
17
17
  import type { AvatarSize } from '../Avatar/avatar.types.js'
18
- import type { FormFieldProps } from '../FormField/form-field.types.js'
18
+ import { useFormField } from '../hooks/useFormField.svelte.js'
19
19
 
20
20
  const config = getComponentConfig('input', inputDefaults)
21
21
  const icons = getComponentConfig('icons', iconsDefaults)
@@ -45,15 +45,7 @@
45
45
  ...restProps
46
46
  }: Props = $props()
47
47
 
48
- const formFieldContext = getContext<
49
- | {
50
- name?: string
51
- size: NonNullable<FormFieldProps['size']>
52
- error?: string | boolean
53
- ariaId: string
54
- }
55
- | undefined
56
- >('formField')
48
+ const formFieldContext = useFormField()
57
49
 
58
50
  const fieldGroupContext = getContext<
59
51
  | {
package/dist/PinInput/PinInput.svelte CHANGED
@@ -6,10 +6,9 @@
6
6
 
7
7
  <script lang="ts">
8
8
  import { PinInput, useId } from 'bits-ui'
9
- import { getContext } from 'svelte'
10
9
  import { pinInputVariants, pinInputDefaults } from './pin-input.variants.js'
11
10
  import { getComponentConfig } from '../config.js'
12
- import type { FormFieldProps } from '../FormField/form-field.types.js'
11
+ import { useFormField } from '../hooks/useFormField.svelte.js'
13
12
 
14
13
  const config = getComponentConfig('pinInput', pinInputDefaults)
15
14
 
@@ -43,15 +42,7 @@
43
42
  ...restProps
44
43
  }: Props = $props()
45
44
 
46
- const formFieldContext = getContext<
47
- | {
48
- name?: string
49
- size: NonNullable<FormFieldProps['size']>
50
- error?: string | boolean
51
- ariaId: string
52
- }
53
- | undefined
54
- >('formField')
45
+ const formFieldContext = useFormField()
55
46
 
56
47
  const autoInputId = useId()
57
48
  const hasError = $derived(
package/dist/RadioGroup/RadioGroup.svelte CHANGED
@@ -8,9 +8,8 @@
8
8
  import { RadioGroup, Label, useId } from 'bits-ui'
9
9
  import { radioGroupVariants, radioGroupDefaults } from './radio-group.variants.js'
10
10
  import { getComponentConfig, iconsDefaults } from '../config.js'
11
- import { getContext } from 'svelte'
12
11
  import Icon from '../Icon/Icon.svelte'
13
- import type { FormFieldProps } from '../FormField/form-field.types.js'
12
+ import { useFormField } from '../hooks/useFormField.svelte.js'
14
13
  import type { RadioGroupItem } from './radio-group.types.js'
15
14
 
16
15
  const config = getComponentConfig('radioGroup', radioGroupDefaults)
@@ -43,15 +42,7 @@
43
42
  ...restProps
44
43
  }: Props = $props()
45
44
 
46
- const formFieldContext = getContext<
47
- | {
48
- name?: string
49
- size: NonNullable<FormFieldProps['size']>
50
- error?: string | boolean
51
- ariaId: string
52
- }
53
- | undefined
54
- >('formField')
45
+ const formFieldContext = useFormField()
55
46
 
56
47
  const hasError = $derived(
57
48
  formFieldContext?.error !== undefined && formFieldContext?.error !== false
package/dist/Select/Select.svelte CHANGED
@@ -16,7 +16,7 @@
16
16
  import Icon from '../Icon/Icon.svelte'
17
17
  import Avatar from '../Avatar/Avatar.svelte'
18
18
  import type { AvatarSize } from '../Avatar/avatar.types.js'
19
- import type { FormFieldProps } from '../FormField/form-field.types.js'
19
+ import { useFormField } from '../hooks/useFormField.svelte.js'
20
20
 
21
21
  const config = getComponentConfig('select', selectDefaults)
22
22
  const icons = getComponentConfig('icons', iconsDefaults)
@@ -68,15 +68,7 @@
68
68
  }: Props = $props()
69
69
 
70
70
  // ---- Form context ----
71
- const formFieldContext = getContext<
72
- | {
73
- name?: string
74
- size: NonNullable<FormFieldProps['size']>
75
- error?: string | boolean
76
- ariaId: string
77
- }
78
- | undefined
79
- >('formField')
71
+ const formFieldContext = useFormField()
80
72
 
81
73
  const fieldGroupContext = getContext<
82
74
  | {
package/dist/SelectMenu/SelectMenu.svelte CHANGED
@@ -21,7 +21,7 @@
21
21
  import Avatar from '../Avatar/Avatar.svelte'
22
22
  import Input from '../Input/Input.svelte'
23
23
  import type { AvatarSize } from '../Avatar/avatar.types.js'
24
- import type { FormFieldProps } from '../FormField/form-field.types.js'
24
+ import { useFormField } from '../hooks/useFormField.svelte.js'
25
25
 
26
26
  const config = getComponentConfig('selectMenu', selectMenuDefaults)
27
27
  const icons = getComponentConfig('icons', iconsDefaults)
@@ -77,15 +77,7 @@
77
77
  }: Props = $props()
78
78
 
79
79
  // ---- Form context ----
80
- const formFieldContext = getContext<
81
- | {
82
- name?: string
83
- size: NonNullable<FormFieldProps['size']>
84
- error?: string | boolean
85
- ariaId: string
86
- }
87
- | undefined
88
- >('formField')
80
+ const formFieldContext = useFormField()
89
81
 
90
82
  const fieldGroupContext = getContext<
91
83
  | {
package/dist/Slider/Slider.svelte CHANGED
@@ -6,10 +6,9 @@
6
6
 
7
7
  <script lang="ts">
8
8
  import { Slider, useId } from 'bits-ui'
9
- import { getContext } from 'svelte'
10
9
  import { sliderVariants, sliderDefaults } from './slider.variants.js'
11
10
  import { getComponentConfig } from '../config.js'
12
- import type { FormFieldProps } from '../FormField/form-field.types.js'
11
+ import { useFormField } from '../hooks/useFormField.svelte.js'
13
12
 
14
13
  const config = getComponentConfig('slider', sliderDefaults)
15
14
 
@@ -37,15 +36,7 @@
37
36
  ...restProps
38
37
  }: Props = $props()
39
38
 
40
- const formFieldContext = getContext<
41
- | {
42
- name?: string
43
- size: NonNullable<FormFieldProps['size']>
44
- error?: string | boolean
45
- ariaId: string
46
- }
47
- | undefined
48
- >('formField')
39
+ const formFieldContext = useFormField()
49
40
 
50
41
  const autoId = useId()
51
42
  const hasError = $derived(
package/dist/Switch/Switch.svelte CHANGED
@@ -8,9 +8,8 @@
8
8
  import { Switch, Label, useId } from 'bits-ui'
9
9
  import { switchVariants, switchDefaults } from './switch.variants.js'
10
10
  import { getComponentConfig, iconsDefaults } from '../config.js'
11
- import { getContext } from 'svelte'
12
11
  import Icon from '../Icon/Icon.svelte'
13
- import type { FormFieldProps } from '../FormField/form-field.types.js'
12
+ import { useFormField } from '../hooks/useFormField.svelte.js'
14
13
 
15
14
  const config = getComponentConfig('switch', switchDefaults)
16
15
  const icons = getComponentConfig('icons', iconsDefaults)
@@ -39,15 +38,7 @@
39
38
  ...restProps
40
39
  }: Props = $props()
41
40
 
42
- const formFieldContext = getContext<
43
- | {
44
- name?: string
45
- size: NonNullable<FormFieldProps['size']>
46
- error?: string | boolean
47
- ariaId: string
48
- }
49
- | undefined
50
- >('formField')
41
+ const formFieldContext = useFormField()
51
42
 
52
43
  const hasError = $derived(
53
44
  formFieldContext?.error !== undefined && formFieldContext?.error !== false