@uselets/ui 1.1.0 → 1.2.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 (43) hide show
  1. package/README.md +13 -4
  2. package/dist/components/combobox.d.ts +4 -1
  3. package/dist/components/combobox.js +1 -1
  4. package/dist/components/combobox.js.map +1 -1
  5. package/dist/components/dialog.d.ts +6 -12
  6. package/dist/components/dialog.js +1 -1
  7. package/dist/components/dialog.js.map +1 -1
  8. package/dist/components/field.js +1 -1
  9. package/dist/components/field.js.map +1 -1
  10. package/dist/components/sidebar.js +1 -1
  11. package/dist/components/sidebar.js.map +1 -1
  12. package/dist/components/skeleton.d.ts +5 -1
  13. package/dist/components/skeleton.js +1 -1
  14. package/dist/components/skeleton.js.map +1 -1
  15. package/dist/components/skeleton.spec.d.ts +1 -0
  16. package/dist/components/skeleton.spec.js +2 -0
  17. package/dist/components/skeleton.spec.js.map +1 -0
  18. package/dist/components/tooltip.d.ts +20 -4
  19. package/dist/components/tooltip.js +1 -1
  20. package/dist/components/tooltip.js.map +1 -1
  21. package/dist/components/unstyled-button.d.ts +17 -0
  22. package/dist/components/unstyled-button.js +2 -0
  23. package/dist/components/unstyled-button.js.map +1 -0
  24. package/dist/hooks/use-breakpoint-value.spec.js +1 -1
  25. package/dist/hooks/use-breakpoint.spec.js +1 -1
  26. package/dist/hooks/use-disclosure.spec.js +1 -1
  27. package/dist/hooks/use-document-visibility.spec.js +1 -1
  28. package/dist/hooks/use-idle.spec.js +1 -1
  29. package/dist/hooks/use-interval.spec.js +1 -1
  30. package/dist/hooks/use-local-storage.spec.js +1 -1
  31. package/dist/hooks/use-mobile.spec.js +1 -1
  32. package/dist/index.d.ts +3 -2
  33. package/dist/index.js +1 -1
  34. package/dist/{react.esm-BuxkFT_p.js → react.esm-B3a5z6DL.js} +2 -2
  35. package/dist/{react.esm-BuxkFT_p.js.map → react.esm-B3a5z6DL.js.map} +1 -1
  36. package/dist/skills/uselets-ui/SKILL.md +3 -2
  37. package/dist/skills/uselets-ui/references/component-catalog.md +8 -2
  38. package/dist/skills/uselets-ui/references/package-guide.md +15 -2
  39. package/dist/styles/base.css +1 -1
  40. package/package.json +1 -1
  41. package/skills/uselets-ui/SKILL.md +3 -2
  42. package/skills/uselets-ui/references/component-catalog.md +8 -2
  43. package/skills/uselets-ui/references/package-guide.md +15 -2
@@ -51,7 +51,8 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
51
51
  - Treat `@uselets/ui/themes/gomax.css` as the GoMax Figma-backed palette, exposed through the same public color families as the Max theme.
52
52
  - Recommend `@fontsource-variable/inter` when matching the package typography setup.
53
53
  - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
54
- - For tooltip-heavy apps, wrap the app with `TooltipProvider`.
54
+ - For tooltip-heavy apps, wrap the app with `TooltipProvider`; use `Tooltip label={...}` for common trigger/content usage and `TooltipRoot` only when manual composition is needed.
55
+ - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
55
56
  - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
56
57
  - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
57
58
 
@@ -67,6 +68,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
67
68
 
68
69
  - "How do I install and configure `@uselets/ui` in my app?"
69
70
  - "Which `@uselets/ui` component should I use for this form?"
70
- - "Show me the correct import for `TooltipProvider` or `Sidebar`."
71
+ - "Show me the correct import for `TooltipProvider`, `Tooltip`, `UnstyledButton`, or `Sidebar`."
71
72
  - "Inspect the installed version of `@uselets/ui` and tell me what `button` exports."
72
73
  - "Build this screen only with `@uselets/ui` components."
@@ -62,7 +62,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
62
62
  - Exports: `Toaster`, `toast`
63
63
  - `tooltip`
64
64
  - Import path: `@uselets/ui/tooltip`
65
- - Exports: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`
65
+ - Exports: `TooltipProvider`, `Tooltip`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
66
+ - Notes: `Tooltip` is the ergonomic wrapper with `label`, direct content positioning props, and `disabled`; use `TooltipRoot` with `TooltipTrigger` and `TooltipContent` for manual composition
67
+ - `unstyled-button`
68
+ - Import path: `@uselets/ui/unstyled-button`
69
+ - Exports: `UnstyledButton`
70
+ - Notes: button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`
66
71
 
67
72
  ## Typography
68
73
 
@@ -103,6 +108,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
103
108
  - Exports: `Progress`
104
109
  - `skeleton`
105
110
  - Exports: `Skeleton`
111
+ - Notes: generic loading placeholder; `visible?: boolean` defaults to `true` and can wrap `children` to reserve their size while the skeleton is shown
106
112
  - `spinner`
107
113
  - Exports: `Spinner`, `spinnerVariants`
108
114
 
@@ -144,7 +150,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
144
150
  - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
145
151
  - `combobox`
146
152
  - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
147
- - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
153
+ - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs
148
154
  - `dropzone`
149
155
  - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
150
156
  - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`
@@ -144,13 +144,14 @@ The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size uti
144
144
  Use these patterns:
145
145
 
146
146
  ```tsx
147
- import { Alert, Button, cn, randomId } from '@uselets/ui'
147
+ import { Alert, Button, UnstyledButton, cn, randomId } from '@uselets/ui'
148
148
  import type { UIColor } from '@uselets/ui'
149
149
  import { Dialog } from '@uselets/ui/dialog'
150
150
  import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
151
151
  import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
152
152
  import { useLocalStorage } from '@uselets/ui/hooks/use-local-storage'
153
153
  import { Toaster, toast } from '@uselets/ui/sonner'
154
+ import { UnstyledButton as UnstyledButtonSubpath } from '@uselets/ui/unstyled-button'
154
155
  ```
155
156
 
156
157
  Guidance:
@@ -183,6 +184,10 @@ Use these package-level helpers when relevant:
183
184
 
184
185
  - `TooltipProvider`
185
186
  - Wrap the app or feature root when using tooltips broadly.
187
+ - `Tooltip`
188
+ - Use `label` for common trigger/content usage; pass positioning props such as `side`, `align`, and `sideOffset` directly.
189
+ - `TooltipRoot`
190
+ - Use with `TooltipTrigger` and `TooltipContent` when manual composition or custom structure is needed.
186
191
  - `Toaster`
187
192
  - Mount near the app root before calling `toast(...)`.
188
193
  - `ThemeProvider`
@@ -191,11 +196,19 @@ Use these package-level helpers when relevant:
191
196
  Examples:
192
197
 
193
198
  ```tsx
194
- import { TooltipProvider } from '@uselets/ui/tooltip'
199
+ import { Tooltip, TooltipProvider } from '@uselets/ui/tooltip'
195
200
 
196
201
  export function AppRoot({ children }: { children: React.ReactNode }) {
197
202
  return <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
198
203
  }
204
+
205
+ export function SaveButton() {
206
+ return (
207
+ <Tooltip label="Save changes" side="bottom">
208
+ <button type="button">Save</button>
209
+ </Tooltip>
210
+ )
211
+ }
199
212
  ```
200
213
 
201
214
  ```tsx
@@ -4,7 +4,7 @@
4
4
  }
5
5
 
6
6
  body {
7
- @apply bg-background font-sans text-base text-foreground;
7
+ @apply bg-background font-sans text-base text-foreground antialiased;
8
8
  }
9
9
 
10
10
  html {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uselets/ui",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "description": "React component library for the LET'S design system.",
@@ -51,7 +51,8 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
51
51
  - Treat `@uselets/ui/themes/gomax.css` as the GoMax Figma-backed palette, exposed through the same public color families as the Max theme.
52
52
  - Recommend `@fontsource-variable/inter` when matching the package typography setup.
53
53
  - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
54
- - For tooltip-heavy apps, wrap the app with `TooltipProvider`.
54
+ - For tooltip-heavy apps, wrap the app with `TooltipProvider`; use `Tooltip label={...}` for common trigger/content usage and `TooltipRoot` only when manual composition is needed.
55
+ - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
55
56
  - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
56
57
  - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
57
58
 
@@ -67,6 +68,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
67
68
 
68
69
  - "How do I install and configure `@uselets/ui` in my app?"
69
70
  - "Which `@uselets/ui` component should I use for this form?"
70
- - "Show me the correct import for `TooltipProvider` or `Sidebar`."
71
+ - "Show me the correct import for `TooltipProvider`, `Tooltip`, `UnstyledButton`, or `Sidebar`."
71
72
  - "Inspect the installed version of `@uselets/ui` and tell me what `button` exports."
72
73
  - "Build this screen only with `@uselets/ui` components."
@@ -62,7 +62,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
62
62
  - Exports: `Toaster`, `toast`
63
63
  - `tooltip`
64
64
  - Import path: `@uselets/ui/tooltip`
65
- - Exports: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`
65
+ - Exports: `TooltipProvider`, `Tooltip`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
66
+ - Notes: `Tooltip` is the ergonomic wrapper with `label`, direct content positioning props, and `disabled`; use `TooltipRoot` with `TooltipTrigger` and `TooltipContent` for manual composition
67
+ - `unstyled-button`
68
+ - Import path: `@uselets/ui/unstyled-button`
69
+ - Exports: `UnstyledButton`
70
+ - Notes: button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`
66
71
 
67
72
  ## Typography
68
73
 
@@ -103,6 +108,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
103
108
  - Exports: `Progress`
104
109
  - `skeleton`
105
110
  - Exports: `Skeleton`
111
+ - Notes: generic loading placeholder; `visible?: boolean` defaults to `true` and can wrap `children` to reserve their size while the skeleton is shown
106
112
  - `spinner`
107
113
  - Exports: `Spinner`, `spinnerVariants`
108
114
 
@@ -144,7 +150,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
144
150
  - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
145
151
  - `combobox`
146
152
  - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
147
- - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
153
+ - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs
148
154
  - `dropzone`
149
155
  - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
150
156
  - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`
@@ -144,13 +144,14 @@ The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size uti
144
144
  Use these patterns:
145
145
 
146
146
  ```tsx
147
- import { Alert, Button, cn, randomId } from '@uselets/ui'
147
+ import { Alert, Button, UnstyledButton, cn, randomId } from '@uselets/ui'
148
148
  import type { UIColor } from '@uselets/ui'
149
149
  import { Dialog } from '@uselets/ui/dialog'
150
150
  import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
151
151
  import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
152
152
  import { useLocalStorage } from '@uselets/ui/hooks/use-local-storage'
153
153
  import { Toaster, toast } from '@uselets/ui/sonner'
154
+ import { UnstyledButton as UnstyledButtonSubpath } from '@uselets/ui/unstyled-button'
154
155
  ```
155
156
 
156
157
  Guidance:
@@ -183,6 +184,10 @@ Use these package-level helpers when relevant:
183
184
 
184
185
  - `TooltipProvider`
185
186
  - Wrap the app or feature root when using tooltips broadly.
187
+ - `Tooltip`
188
+ - Use `label` for common trigger/content usage; pass positioning props such as `side`, `align`, and `sideOffset` directly.
189
+ - `TooltipRoot`
190
+ - Use with `TooltipTrigger` and `TooltipContent` when manual composition or custom structure is needed.
186
191
  - `Toaster`
187
192
  - Mount near the app root before calling `toast(...)`.
188
193
  - `ThemeProvider`
@@ -191,11 +196,19 @@ Use these package-level helpers when relevant:
191
196
  Examples:
192
197
 
193
198
  ```tsx
194
- import { TooltipProvider } from '@uselets/ui/tooltip'
199
+ import { Tooltip, TooltipProvider } from '@uselets/ui/tooltip'
195
200
 
196
201
  export function AppRoot({ children }: { children: React.ReactNode }) {
197
202
  return <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
198
203
  }
204
+
205
+ export function SaveButton() {
206
+ return (
207
+ <Tooltip label="Save changes" side="bottom">
208
+ <button type="button">Save</button>
209
+ </Tooltip>
210
+ )
211
+ }
199
212
  ```
200
213
 
201
214
  ```tsx