@uselets/ui 1.2.1 → 1.3.0

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

@@ -119,10 +119,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - 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.
+  - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; spacing values `xs` to `xl` map to `4/8/16/24/32px`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
 - `simple-grid`
   - Exports: `SimpleGrid`
-  - Notes: simple grid with `cols`, `gap`, `rowGap`, and `columnGap`. `cols` accepts a number; spacing uses the `xs` to `xl` scale. Use `useBreakpointValue` when column count needs responsive values.
+  - Notes: simple grid with `cols`, `gap`, `rowGap`, and `columnGap`. `cols` accepts a number; spacing values `xs` to `xl` map to `4/8/16/24/32px`. Use `useBreakpointValue` when column count needs responsive values.
 - `visibility`
   - Exports: `HiddenFrom`, `VisibleFrom`
   - Notes: breakpoint visibility wrappers. `HiddenFrom breakpoint="md"` hides at `md` and above; `VisibleFrom breakpoint="md"` shows at `md` and above.
@@ -175,8 +175,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `dialog`
   - 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`
+  - Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`
@@ -209,7 +209,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
 - `carousel`
-  - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `useCarousel`
+  - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`
   - Exports: `Center`, `centerVariants`
 - `chart`
@@ -218,9 +218,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
 - `container`
   - Exports: `Container`, `containerVariants`
+- `flex`
+  - Exports: `Flex`, `flexVariants`
+  - Notes: generic flexbox layout primitive. Supports `direction: 'row' | 'row-reverse' | 'column' | 'column-reverse'`, `align: 'start' | 'end' | 'center' | 'baseline' | 'stretch'`, `justify: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'`, `wrap`, and `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`).
 - `group`
   - Exports: `Group`, `groupVariants`
-  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` and `wrap`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`) and `wrap`
 - `kbd`
   - Exports: `Kbd`, `KbdGroup`
 - `resizable`
@@ -231,7 +234,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Separator`
 - `stack`
   - Exports: `Stack`, `stackVariants`
-  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`)
 - `table`
   - Exports: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption`
 - `timeline`

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

@@ -305,7 +305,9 @@ Choose components by intent:
 - typography:
   - `Anchor`, `Code`, `Heading`, `List`, `Text`
 - layout and display:
-  - `Card`, `Accordion`, `Collapsible`, `Container`, `Group`, `Stack`, `Center`, `Separator`, `ScrollArea`, `Resizable`, `Table`, `Timeline`, `Chart`, `Carousel`, `Avatar`, `Empty`, `Kbd`
+  - `Card`, `Accordion`, `Collapsible`, `Container`, `Flex`, `Group`, `Stack`, `Center`, `Separator`, `ScrollArea`, `Resizable`, `Table`, `Timeline`, `Chart`, `Carousel`, `Avatar`, `Empty`, `Kbd`
+
+Layout spacing props named `gap`, `rowGap`, and `columnGap` use the shared `xs` to `xl` scale: `4/8/16/24/32px`.
 
 ## Inspection workflow
 

package/package.json

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

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

@@ -119,10 +119,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - 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.
+  - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; spacing values `xs` to `xl` map to `4/8/16/24/32px`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
 - `simple-grid`
   - Exports: `SimpleGrid`
-  - Notes: simple grid with `cols`, `gap`, `rowGap`, and `columnGap`. `cols` accepts a number; spacing uses the `xs` to `xl` scale. Use `useBreakpointValue` when column count needs responsive values.
+  - Notes: simple grid with `cols`, `gap`, `rowGap`, and `columnGap`. `cols` accepts a number; spacing values `xs` to `xl` map to `4/8/16/24/32px`. Use `useBreakpointValue` when column count needs responsive values.
 - `visibility`
   - Exports: `HiddenFrom`, `VisibleFrom`
   - Notes: breakpoint visibility wrappers. `HiddenFrom breakpoint="md"` hides at `md` and above; `VisibleFrom breakpoint="md"` shows at `md` and above.
@@ -175,8 +175,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `dialog`
   - 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`
+  - Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`
@@ -209,7 +209,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
 - `carousel`
-  - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `useCarousel`
+  - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`
   - Exports: `Center`, `centerVariants`
 - `chart`
@@ -218,9 +218,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
 - `container`
   - Exports: `Container`, `containerVariants`
+- `flex`
+  - Exports: `Flex`, `flexVariants`
+  - Notes: generic flexbox layout primitive. Supports `direction: 'row' | 'row-reverse' | 'column' | 'column-reverse'`, `align: 'start' | 'end' | 'center' | 'baseline' | 'stretch'`, `justify: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'`, `wrap`, and `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`).
 - `group`
   - Exports: `Group`, `groupVariants`
-  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` and `wrap`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`) and `wrap`
 - `kbd`
   - Exports: `Kbd`, `KbdGroup`
 - `resizable`
@@ -231,7 +234,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Separator`
 - `stack`
   - Exports: `Stack`, `stackVariants`
-  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (`4/8/16/24/32px`)
 - `table`
   - Exports: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption`
 - `timeline`

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

@@ -305,7 +305,9 @@ Choose components by intent:
 - typography:
   - `Anchor`, `Code`, `Heading`, `List`, `Text`
 - layout and display:
-  - `Card`, `Accordion`, `Collapsible`, `Container`, `Group`, `Stack`, `Center`, `Separator`, `ScrollArea`, `Resizable`, `Table`, `Timeline`, `Chart`, `Carousel`, `Avatar`, `Empty`, `Kbd`
+  - `Card`, `Accordion`, `Collapsible`, `Container`, `Flex`, `Group`, `Stack`, `Center`, `Separator`, `ScrollArea`, `Resizable`, `Table`, `Timeline`, `Chart`, `Carousel`, `Avatar`, `Empty`, `Kbd`
+
+Layout spacing props named `gap`, `rowGap`, and `columnGap` use the shared `xs` to `xl` scale: `4/8/16/24/32px`.
 
 ## Inspection workflow