uisv 0.0.20 → 0.0.22

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 (76) hide show
  1. package/dist/components/accordion.svelte +20 -21
  2. package/dist/components/accordion.svelte.d.ts +10 -10
  3. package/dist/components/alert.svelte +22 -28
  4. package/dist/components/alert.svelte.d.ts +5 -5
  5. package/dist/components/app.svelte +57 -0
  6. package/dist/components/app.svelte.d.ts +15 -0
  7. package/dist/components/badge.svelte +33 -38
  8. package/dist/components/badge.svelte.d.ts +3 -3
  9. package/dist/components/banner.svelte +47 -55
  10. package/dist/components/banner.svelte.d.ts +5 -5
  11. package/dist/components/breadcrumb.svelte +6 -6
  12. package/dist/components/breadcrumb.svelte.d.ts +4 -25
  13. package/dist/components/button.svelte +36 -48
  14. package/dist/components/button.svelte.d.ts +12 -12
  15. package/dist/components/calendar.svelte +6 -7
  16. package/dist/components/calendar.svelte.d.ts +3 -3
  17. package/dist/components/card.svelte +14 -15
  18. package/dist/components/card.svelte.d.ts +5 -5
  19. package/dist/components/checkbox-group.svelte +12 -13
  20. package/dist/components/checkbox-group.svelte.d.ts +4 -4
  21. package/dist/components/checkbox.svelte +39 -38
  22. package/dist/components/checkbox.svelte.d.ts +6 -6
  23. package/dist/components/chip.svelte +21 -22
  24. package/dist/components/chip.svelte.d.ts +3 -3
  25. package/dist/components/collapsible.svelte +4 -5
  26. package/dist/components/collapsible.svelte.d.ts +4 -4
  27. package/dist/components/color-picker.svelte +1 -1
  28. package/dist/components/h1.svelte +8 -7
  29. package/dist/components/h2.svelte +12 -11
  30. package/dist/components/h3.svelte +9 -8
  31. package/dist/components/h4.svelte +12 -11
  32. package/dist/components/h5.svelte +12 -11
  33. package/dist/components/h6.svelte +12 -11
  34. package/dist/components/icon.svelte +0 -2
  35. package/dist/components/index.d.ts +6 -0
  36. package/dist/components/index.js +6 -0
  37. package/dist/components/input-number.svelte +5 -7
  38. package/dist/components/input-number.svelte.d.ts +5 -5
  39. package/dist/components/input-time.svelte +11 -12
  40. package/dist/components/input-time.svelte.d.ts +6 -6
  41. package/dist/components/input.svelte +11 -12
  42. package/dist/components/input.svelte.d.ts +6 -6
  43. package/dist/components/kbd.svelte +6 -7
  44. package/dist/components/kbd.svelte.d.ts +2 -2
  45. package/dist/components/modal.svelte +189 -0
  46. package/dist/components/modal.svelte.d.ts +33 -0
  47. package/dist/components/p.svelte +3 -1
  48. package/dist/components/pin-input.svelte +10 -11
  49. package/dist/components/pin-input.svelte.d.ts +3 -3
  50. package/dist/components/placeholder.svelte +4 -4
  51. package/dist/components/popover.svelte +33 -61
  52. package/dist/components/popover.svelte.d.ts +8 -30
  53. package/dist/components/progress.svelte +22 -21
  54. package/dist/components/progress.svelte.d.ts +5 -5
  55. package/dist/components/select.svelte +48 -53
  56. package/dist/components/select.svelte.d.ts +22 -29
  57. package/dist/components/seperator.svelte +6 -7
  58. package/dist/components/seperator.svelte.d.ts +6 -6
  59. package/dist/components/slider.svelte +13 -14
  60. package/dist/components/slider.svelte.d.ts +4 -4
  61. package/dist/components/switch.svelte +17 -22
  62. package/dist/components/switch.svelte.d.ts +6 -6
  63. package/dist/components/tabs.svelte +19 -20
  64. package/dist/components/tabs.svelte.d.ts +7 -7
  65. package/dist/components/tooltip.svelte +94 -0
  66. package/dist/components/tooltip.svelte.d.ts +24 -0
  67. package/dist/contexts.d.ts +47 -0
  68. package/dist/contexts.js +46 -0
  69. package/dist/index.d.ts +1 -0
  70. package/dist/index.js +1 -0
  71. package/dist/mode.d.ts +89 -0
  72. package/dist/mode.js +1 -0
  73. package/dist/utilities.svelte.d.ts +1 -1
  74. package/dist/vite.d.ts +2 -1
  75. package/dist/vite.js +32 -37
  76. package/package.json +31 -26
package/dist/contexts.js ADDED
@@ -0,0 +1,46 @@
1
+ import { Context } from 'runed';
2
+ export const app_icons = new Context('app-config');
3
+ export const DEFAULT_ICONS = {
4
+ arrowdown: 'i-lucide:arrow-down',
5
+ arrowleft: 'i-lucide:arrow-left',
6
+ arrowright: 'i-lucide:arrow-right',
7
+ arrowup: 'i-lucide:arrow-up',
8
+ caution: 'i-lucide:circle-alert',
9
+ check: 'i-lucide:check',
10
+ chevrondoubleleft: 'i-lucide:chevron-double-left',
11
+ chevrondoubleright: 'i-lucide:chevron-double-right',
12
+ chevrondown: 'i-lucide:chevron-down',
13
+ chevronleft: 'i-lucide:chevron-left',
14
+ chevronright: 'i-lucide:chevron-right',
15
+ chevronup: 'i-lucide:chevron-up',
16
+ close: 'i-lucide:x',
17
+ copy: 'i-lucide:copy',
18
+ copycheck: 'i-lucide:circle-check',
19
+ dark: 'i-lucide:moon',
20
+ drag: 'i-lucide:grip-vertical',
21
+ ellipsis: 'i-lucide:ellipsis',
22
+ error: 'i-lucide:circle-x',
23
+ external: 'i-lucide:arrow-up-right',
24
+ eye: 'i-lucide:eye',
25
+ eyeoff: 'i-lucide:eye-slash',
26
+ file: 'i-lucide:file',
27
+ folder: 'i-lucide:folder',
28
+ folderopen: 'i-lucide:folder-open',
29
+ hash: 'i-lucide:hash',
30
+ info: 'i-lucide:info',
31
+ light: 'i-lucide:sun',
32
+ loading: 'i-lucide:loader-circle',
33
+ menu: 'i-lucide:list',
34
+ minus: 'i-lucide:minus',
35
+ panelclose: 'i-lucide:caret-left',
36
+ panelopen: 'i-lucide:caret-right',
37
+ plus: 'i-lucide:plus',
38
+ reload: 'i-lucide:arrow-counter-clockwise',
39
+ search: 'i-lucide:magnifying-glass',
40
+ stop: 'i-lucide:square',
41
+ success: 'i-lucide:check-circle',
42
+ system: 'i-lucide:monitor',
43
+ tip: 'i-lucide:lightbulb',
44
+ upload: 'i-lucide:upload',
45
+ warning: 'i-lucide:warning',
46
+ };
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export * from './components/index.js';
2
2
  export * from './utilities.svelte.js';
3
3
  export * from './types.js';
4
4
  export { ModeWatcher } from 'mode-watcher';
5
+ export { toast, type ToastOptions } from 'svelte-sonner';
package/dist/index.js CHANGED
@@ -2,3 +2,4 @@ export * from './components/index.js';
2
2
  export * from './utilities.svelte.js';
3
3
  export * from './types.js';
4
4
  export { ModeWatcher } from 'mode-watcher';
5
+ export { toast } from 'svelte-sonner';
package/dist/mode.d.ts CHANGED
@@ -1 +1,90 @@
1
+ import { setMode } from 'mode-watcher';
2
+ export type Mode = Parameters<typeof setMode>['0'];
3
+ export type ThemeColors = {
4
+ dark: string;
5
+ light: string;
6
+ } | undefined;
7
+ export type ModeWatcherProps = {
8
+ /**
9
+ * Whether to automatically track operating system preferences
10
+ * and update the mode accordingly.
11
+ *
12
+ * @default `true`
13
+ */
14
+ track?: boolean;
15
+ /**
16
+ * The default mode to use instead of the user's preference.
17
+ *
18
+ * @default `"system"`
19
+ */
20
+ defaultMode?: Mode;
21
+ /**
22
+ * The default theme to use, which will be applied to the root `html` element
23
+ * and can be managed with the `setTheme` function.
24
+ *
25
+ * @example
26
+ * ```html
27
+ * <html data-theme="your-custom-theme"></html>
28
+ * ```
29
+ *
30
+ * @default `undefined`
31
+ */
32
+ defaultTheme?: string;
33
+ /**
34
+ * The theme colors to use for each mode.
35
+ */
36
+ themeColors?: ThemeColors;
37
+ /**
38
+ * Whether to disable transitions when updating the mode.
39
+ */
40
+ disableTransitions?: boolean;
41
+ /**
42
+ * The classname to add to the root `html` element when the mode is dark.
43
+ *
44
+ * @default `["dark"]`
45
+ */
46
+ darkClassNames?: string[];
47
+ /**
48
+ * The classname to add to the root `html` element when the mode is light.
49
+ *
50
+ * @default `[]`
51
+ */
52
+ lightClassNames?: string[];
53
+ /**
54
+ * Optionally provide a custom local storage key to use for storing the mode.
55
+ *
56
+ * @default `'mode-watcher-mode'`
57
+ */
58
+ modeStorageKey?: string;
59
+ /**
60
+ * Optionally provide a custom local storage key to use for storing the theme.
61
+ *
62
+ * @default `'mode-watcher-theme'`
63
+ */
64
+ themeStorageKey?: string;
65
+ /**
66
+ * An optional nonce to use for the injected script tag to allow-list mode-watcher
67
+ * if you are using a Content Security Policy.
68
+ *
69
+ * @default `undefined`
70
+ */
71
+ nonce?: string;
72
+ /**
73
+ * Whether to disable the injected script tag that sets the initial mode.
74
+ * Set this if you are manually injecting the script using a hook.
75
+ *
76
+ * @default `false`
77
+ */
78
+ disableHeadScriptInjection?: boolean;
79
+ /**
80
+ * Whether to run the mode changes synchronously instead of using
81
+ * an animation frame. If true, will have an impact on blocking performance
82
+ * due to blocking the main thread.
83
+ *
84
+ * Only applicable if `disableTransitions` is set to `true`.
85
+ *
86
+ * @default `false`
87
+ */
88
+ synchronousModeChanges?: boolean;
89
+ };
1
90
  export * from 'mode-watcher';
package/dist/mode.js CHANGED
@@ -1 +1,2 @@
1
+ import { setMode } from 'mode-watcher';
1
2
  export * from 'mode-watcher';
package/dist/utilities.svelte.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare function isComponent(v: unknown): v is Component;
11
11
  * @param v - The value to check
12
12
  * @returns true if the value is a snippet, false otherwise
13
13
  */
14
- export declare function isSnippet(v: unknown): v is Snippet;
14
+ export declare function isSnippet<T>(v: unknown): v is Snippet<[T]>;
15
15
  /**
16
16
  * Returns a reactive value holding the dom rect of `node`s.
17
17
  *
package/dist/vite.d.ts CHANGED
@@ -48,4 +48,5 @@ export type PluginOptions = {
48
48
  */
49
49
  icons?: Parameters<typeof presetIcons>[0];
50
50
  };
51
- export declare function uisv(options: PluginOptions): import("vite").Plugin<any>[][];
51
+ declare const _default: (options?: PluginOptions) => import("vite").Plugin<any>[][];
52
+ export default _default;
package/dist/vite.js CHANGED
@@ -1,9 +1,11 @@
1
- import uno_plugin from 'unocss/vite';
2
1
  import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWebFonts, presetIcons, presetWind4, } from 'unocss';
3
2
  import {} from '@unocss/preset-web-fonts';
4
3
  import { defu } from 'defu';
5
4
  import { getColors } from 'theme-colors';
6
- export function uisv(options) {
5
+ // import type { Plugin } from 'vite';
6
+ // import { resolve } from 'node:path';
7
+ import uno_plugin from 'unocss/vite';
8
+ export default (options = {}) => {
7
9
  const _opts = defu(options, {
8
10
  colors: {
9
11
  primary: {
@@ -38,17 +40,6 @@ export function uisv(options) {
38
40
  },
39
41
  },
40
42
  });
41
- // const theme_plugin: Plugin = {
42
- // name: 'vite-plugin-uisv',
43
- // enforce: 'pre',
44
- // async configResolved() {
45
- // const path = resolve('node_modules/uisv/theme.js');
46
- // console.log(await write(path, `export const button = {}`));
47
- // },
48
- // resolveId(source, importer, options) {
49
- // if (source === '$build') return resolve('node_modules/uisv/theme.js');
50
- // },
51
- // };
52
43
  return [
53
44
  uno_plugin({
54
45
  content: {
@@ -71,12 +62,12 @@ export function uisv(options) {
71
62
  if (typeof colors.surface !== 'object')
72
63
  return '';
73
64
  const variables = `
74
- --colors-base: ${colors.surface['200']};
75
- --colors-dimmed: ${colors.surface['500']};
76
- --colors-muted: ${colors.surface['400']};
77
- --colors-toned: ${colors.surface['300']};
78
- --colors-highlighted: white;
79
- --colors-inverted: ${colors.surface['900']};
65
+ --colors-label-base: ${colors.surface['200']};
66
+ --colors-label-dimmed: ${colors.surface['500']};
67
+ --colors-label-muted: ${colors.surface['400']};
68
+ --colors-label-toned: ${colors.surface['300']};
69
+ --colors-label-highlighted: white;
70
+ --colors-label-inverted: ${colors.surface['900']};
80
71
 
81
72
  --colors-surface-base: ${colors.surface['900']};
82
73
  --colors-surface-muted: ${colors.surface['800']};
@@ -86,7 +77,7 @@ export function uisv(options) {
86
77
  `;
87
78
  return `
88
79
  body {
89
- background-color: var(--colors-inverted);
80
+ background-color: var(--colors-label-inverted);
90
81
  }
91
82
 
92
83
  .dark {
@@ -109,7 +100,7 @@ export function uisv(options) {
109
100
  transformers: [transformerVariantGroup(), transformerCompileClass(), transformerDirectives()],
110
101
  extendTheme: (theme) => {
111
102
  if (!('colors' in theme) || typeof theme.colors !== 'object')
112
- theme.colors = {};
103
+ return;
113
104
  const colors = theme.colors;
114
105
  for (const [color, value] of Object.entries(_opts.colors)) {
115
106
  if (typeof value !== 'string') {
@@ -119,24 +110,28 @@ export function uisv(options) {
119
110
  const in_theme = colors[value];
120
111
  colors[color] = in_theme ? in_theme : getColors(value);
121
112
  }
122
- if (typeof colors.surface === 'object') {
123
- colors['base'] = colors.surface['700'];
124
- colors['dimmed'] = colors.surface['400'];
125
- colors['muted'] = colors.surface['500'];
126
- colors['toned'] = colors.surface['600'];
127
- colors['highlighted'] = colors.surface['900'];
128
- colors['inverted'] = 'white';
129
- colors['surface'] = defu(colors.surface, {
130
- base: 'white',
131
- muted: colors.surface['50'],
132
- elevated: colors.surface['100'],
133
- accented: colors.surface['200'],
134
- inverted: colors.surface['900'],
135
- });
136
- }
113
+ if (typeof colors.surface !== 'object')
114
+ colors.surface = {};
115
+ if (typeof colors.label === 'object')
116
+ colors.label = {};
117
+ colors.label = defu(colors.label, {
118
+ base: colors.surface['700'],
119
+ dimmed: colors.surface['400'],
120
+ muted: colors.surface['500'],
121
+ toned: colors.surface['600'],
122
+ highlighted: colors.surface['900'],
123
+ inverted: 'white',
124
+ });
125
+ colors['surface'] = defu(colors.surface, {
126
+ base: 'white',
127
+ muted: colors.surface['50'],
128
+ elevated: colors.surface['100'],
129
+ accented: colors.surface['200'],
130
+ inverted: colors.surface['900'],
131
+ });
137
132
  if (theme.colors)
138
133
  theme.colors = colors;
139
134
  },
140
135
  }),
141
136
  ];
142
- }
137
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uisv",
3
- "version": "0.0.20",
3
+ "version": "0.0.22",
4
4
  "description": "ui library for the rest of us",
5
5
  "license": "MIT",
6
6
  "repository": "ui-sv/uisv",
@@ -33,6 +33,7 @@
33
33
  ".": {
34
34
  "types": "./dist/index.d.ts",
35
35
  "svelte": "./dist/index.js",
36
+ "style": "./dist/runtime/index.css",
36
37
  "default": "./dist/index.js"
37
38
  },
38
39
  "./vite": {
@@ -55,45 +56,49 @@
55
56
  "svelte": "^5.0.0"
56
57
  },
57
58
  "devDependencies": {
58
- "@eslint/compat": "^2.0.2",
59
+ "@eslint/compat": "^2.0.5",
59
60
  "@eslint/js": "^10.0.1",
60
- "@iconify-json/lucide": "^1.2.90",
61
+ "@iconify-json/lucide": "^1.2.105",
61
62
  "@sveltejs/adapter-auto": "^7.0.1",
62
- "@sveltejs/kit": "^2.52.0",
63
+ "@sveltejs/kit": "^2.59.1",
63
64
  "@sveltejs/package": "^2.5.7",
64
65
  "@sveltejs/vite-plugin-svelte": "^6.2.4",
65
- "@types/node": "^25.2.3",
66
- "@vitest/browser": "^4.0.18",
67
- "eslint": "^10.0.0",
66
+ "@types/node": "^25.6.1",
67
+ "@vitest/browser": "^4.1.5",
68
+ "eslint": "^10.3.0",
68
69
  "eslint-config-prettier": "^10.1.8",
69
- "eslint-plugin-svelte": "^3.15.0",
70
- "globals": "^17.3.0",
71
- "playwright": "^1.58.2",
72
- "prettier": "^3.8.1",
73
- "prettier-plugin-svelte": "^3.4.1",
74
- "publint": "^0.3.17",
75
- "svelte": "^5.51.2",
76
- "svelte-check": "^4.4.0",
70
+ "eslint-plugin-svelte": "^3.17.1",
71
+ "globals": "^17.6.0",
72
+ "playwright": "^1.59.1",
73
+ "prettier": "^3.8.3",
74
+ "prettier-plugin-svelte": "^3.5.1",
75
+ "publint": "^0.3.19",
76
+ "svelte": "^5.55.5",
77
+ "svelte-check": "^4.4.8",
77
78
  "typescript": "^5.9.3",
78
- "typescript-eslint": "^8.55.0",
79
- "vite": "^7.3.1",
80
- "vitest": "^4.0.18",
81
- "vitest-browser-svelte": "^2.0.2"
79
+ "typescript-eslint": "^8.59.2",
80
+ "vite": "^7.3.3",
81
+ "vitest": "^4.1.5",
82
+ "vitest-browser-svelte": "^2.1.1"
82
83
  },
83
84
  "dependencies": {
84
- "@internationalized/date": "^3.11.0",
85
- "@unocss/preset-web-fonts": "^66.6.0",
86
- "bits-ui": "^2.16.5",
87
- "colortranslator": "^5.0.0",
88
- "defu": "^6.1.4",
85
+ "@internationalized/date": "^3.12.1",
86
+ "@unocss/preset-web-fonts": "^66.6.8",
87
+ "@unocss/svelte-scoped": "^66.6.8",
88
+ "bits-ui": "^2.18.1",
89
+ "colortranslator": "^6.1.1",
90
+ "defu": "^6.1.7",
91
+ "devalue": "^5.8.0",
89
92
  "maska": "^3.2.0",
93
+ "mlly": "^1.8.2",
90
94
  "mode-watcher": "^1.1.0",
91
95
  "runed": "^0.37.1",
92
96
  "scule": "^1.3.0",
93
- "tailwind-merge": "^3.5.0",
97
+ "svelte-sonner": "^1.1.1",
98
+ "svelte-toolbelt": "^0.10.6",
94
99
  "tailwind-variants": "^3.2.2",
95
100
  "theme-colors": "^0.1.0",
96
- "unocss": "^66.6.0"
101
+ "unocss": "^66.6.8"
97
102
  },
98
103
  "keywords": [
99
104
  "svelte",