@uselets/ui 1.1.0 → 1.2.1

package/dist/skills/uselets-ui/SKILL.md

@@ -51,9 +51,11 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 - Treat `@uselets/ui/themes/gomax.css` as the GoMax Figma-backed palette, exposed through the same public color families as the Max theme.
 - Recommend `@fontsource-variable/inter` when matching the package typography setup.
 - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
-- For tooltip-heavy apps, wrap the app with `TooltipProvider`.
+- 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.
+- Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required.
 
 ## Quick Routing
 
@@ -67,6 +69,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 
 - "How do I install and configure `@uselets/ui` in my app?"
 - "Which `@uselets/ui` component should I use for this form?"
-- "Show me the correct import for `TooltipProvider` or `Sidebar`."
+- "Show me the correct import for `TooltipProvider`, `Tooltip`, `UnstyledButton`, or `Sidebar`."
 - "Inspect the installed version of `@uselets/ui` and tell me what `button` exports."
 - "Build this screen only with `@uselets/ui` components."

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -62,7 +62,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Toaster`, `toast`
 - `tooltip`
   - Import path: `@uselets/ui/tooltip`
-  - Exports: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`
+  - Exports: `TooltipProvider`, `Tooltip`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
+  - Notes: `Tooltip` is the ergonomic wrapper with `label`, direct content positioning props, and `disabled`; use `TooltipRoot` with `TooltipTrigger` and `TooltipContent` for manual composition
+- `unstyled-button`
+  - Import path: `@uselets/ui/unstyled-button`
+  - Exports: `UnstyledButton`
+  - Notes: button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`
 
 ## Typography
 
@@ -103,14 +108,15 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Progress`
 - `skeleton`
   - Exports: `Skeleton`
+  - Notes: generic loading placeholder; `visible?: boolean` defaults to `true` and can wrap `children` to reserve their size while the skeleton is shown
 - `spinner`
   - Exports: `Spinner`, `spinnerVariants`
 
 ## Forms and input composition
 
 - `field`
-  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`
-  - Notes: form layout and validation helpers
+  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -144,7 +150,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
-  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
+  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`
@@ -170,6 +176,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
 - `drawer`
   - Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg'` with default `md`; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -144,13 +144,14 @@ The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size uti
 Use these patterns:
 
 ```tsx
-import { Alert, Button, cn, randomId } from '@uselets/ui'
+import { Alert, Button, UnstyledButton, cn, randomId } from '@uselets/ui'
 import type { UIColor } from '@uselets/ui'
 import { Dialog } from '@uselets/ui/dialog'
 import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
 import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
 import { useLocalStorage } from '@uselets/ui/hooks/use-local-storage'
 import { Toaster, toast } from '@uselets/ui/sonner'
+import { UnstyledButton as UnstyledButtonSubpath } from '@uselets/ui/unstyled-button'
 ```
 
 Guidance:
@@ -183,19 +184,36 @@ Use these package-level helpers when relevant:
 
 - `TooltipProvider`
   - Wrap the app or feature root when using tooltips broadly.
+- `Tooltip`
+  - Use `label` for common trigger/content usage; pass positioning props such as `side`, `align`, and `sideOffset` directly.
+- `TooltipRoot`
+  - Use with `TooltipTrigger` and `TooltipContent` when manual composition or custom structure is needed.
 - `Toaster`
   - Mount near the app root before calling `toast(...)`.
 - `ThemeProvider`
   - Provide package theme state for `useTheme` and `ModeToggle`.
 
+`Field` automatically shares one generated control id with `FieldLabel` and labelable descendants such as
+`Input`, `Textarea`, `SelectTrigger`, `NativeSelect`, `Checkbox`, `Switch`, `RadioGroupItem`, and related input
+wrappers when explicit ids are omitted. Pass matching `FieldLabel htmlFor` and control `id` only when a stable
+custom id is required.
+
 Examples:
 
 ```tsx
-import { TooltipProvider } from '@uselets/ui/tooltip'
+import { Tooltip, TooltipProvider } from '@uselets/ui/tooltip'
 
 export function AppRoot({ children }: { children: React.ReactNode }) {
   return <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
 }
+
+export function SaveButton() {
+  return (
+    <Tooltip label="Save changes" side="bottom">
+      <button type="button">Save</button>
+    </Tooltip>
+  )
+}
 ```
 
 ```tsx

package/dist/styles/base.css

@@ -4,7 +4,7 @@
   }
 
   body {
-    @apply bg-background font-sans text-base text-foreground;
+    @apply bg-background font-sans text-base text-foreground antialiased;
   }
 
   html {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "private": false,
   "description": "React component library for the LET'S design system.",

package/skills/uselets-ui/SKILL.md

@@ -51,9 +51,11 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 - Treat `@uselets/ui/themes/gomax.css` as the GoMax Figma-backed palette, exposed through the same public color families as the Max theme.
 - Recommend `@fontsource-variable/inter` when matching the package typography setup.
 - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
-- For tooltip-heavy apps, wrap the app with `TooltipProvider`.
+- 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.
+- Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required.
 
 ## Quick Routing
 
@@ -67,6 +69,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 
 - "How do I install and configure `@uselets/ui` in my app?"
 - "Which `@uselets/ui` component should I use for this form?"
-- "Show me the correct import for `TooltipProvider` or `Sidebar`."
+- "Show me the correct import for `TooltipProvider`, `Tooltip`, `UnstyledButton`, or `Sidebar`."
 - "Inspect the installed version of `@uselets/ui` and tell me what `button` exports."
 - "Build this screen only with `@uselets/ui` components."

package/skills/uselets-ui/references/component-catalog.md

@@ -62,7 +62,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Toaster`, `toast`
 - `tooltip`
   - Import path: `@uselets/ui/tooltip`
-  - Exports: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`
+  - Exports: `TooltipProvider`, `Tooltip`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
+  - Notes: `Tooltip` is the ergonomic wrapper with `label`, direct content positioning props, and `disabled`; use `TooltipRoot` with `TooltipTrigger` and `TooltipContent` for manual composition
+- `unstyled-button`
+  - Import path: `@uselets/ui/unstyled-button`
+  - Exports: `UnstyledButton`
+  - Notes: button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`
 
 ## Typography
 
@@ -103,14 +108,15 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Progress`
 - `skeleton`
   - Exports: `Skeleton`
+  - Notes: generic loading placeholder; `visible?: boolean` defaults to `true` and can wrap `children` to reserve their size while the skeleton is shown
 - `spinner`
   - Exports: `Spinner`, `spinnerVariants`
 
 ## Forms and input composition
 
 - `field`
-  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`
-  - Notes: form layout and validation helpers
+  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -144,7 +150,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
-  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
+  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`
@@ -170,6 +176,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
 - `drawer`
   - Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg'` with default `md`; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`

package/skills/uselets-ui/references/package-guide.md

@@ -144,13 +144,14 @@ The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size uti
 Use these patterns:
 
 ```tsx
-import { Alert, Button, cn, randomId } from '@uselets/ui'
+import { Alert, Button, UnstyledButton, cn, randomId } from '@uselets/ui'
 import type { UIColor } from '@uselets/ui'
 import { Dialog } from '@uselets/ui/dialog'
 import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
 import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
 import { useLocalStorage } from '@uselets/ui/hooks/use-local-storage'
 import { Toaster, toast } from '@uselets/ui/sonner'
+import { UnstyledButton as UnstyledButtonSubpath } from '@uselets/ui/unstyled-button'
 ```
 
 Guidance:
@@ -183,19 +184,36 @@ Use these package-level helpers when relevant:
 
 - `TooltipProvider`
   - Wrap the app or feature root when using tooltips broadly.
+- `Tooltip`
+  - Use `label` for common trigger/content usage; pass positioning props such as `side`, `align`, and `sideOffset` directly.
+- `TooltipRoot`
+  - Use with `TooltipTrigger` and `TooltipContent` when manual composition or custom structure is needed.
 - `Toaster`
   - Mount near the app root before calling `toast(...)`.
 - `ThemeProvider`
   - Provide package theme state for `useTheme` and `ModeToggle`.
 
+`Field` automatically shares one generated control id with `FieldLabel` and labelable descendants such as
+`Input`, `Textarea`, `SelectTrigger`, `NativeSelect`, `Checkbox`, `Switch`, `RadioGroupItem`, and related input
+wrappers when explicit ids are omitted. Pass matching `FieldLabel htmlFor` and control `id` only when a stable
+custom id is required.
+
 Examples:
 
 ```tsx
-import { TooltipProvider } from '@uselets/ui/tooltip'
+import { Tooltip, TooltipProvider } from '@uselets/ui/tooltip'
 
 export function AppRoot({ children }: { children: React.ReactNode }) {
   return <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
 }
+
+export function SaveButton() {
+  return (
+    <Tooltip label="Save changes" side="bottom">
+      <button type="button">Save</button>
+    </Tooltip>
+  )
+}
 ```
 
 ```tsx