tera-system-ui 0.1.76 → 0.2.2

package/dist/llms/input.md

@@ -2,6 +2,8 @@
 
 Text input with prefix/suffix snippet slots, clear button, and status variants.
 
+Input recipe — the canonical styled layer for the base design language. Multi-part component, so it is slotted: `root` (the relative wrapper), `field` (the `<input>` itself, where every variant/size/status lives), `prefix` / `suffix` (the affix spans), and `clear` (the allow-clear button). An app owns its look by extending this recipe with `tv({ extend: inputRecipe, ... })` in typed code; base sizing, focus and status states are inherited. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its tokens). Restyle-internals (the lighter rung): the per-component CSS vars below (--tera-input-*) let a theme/app retune corner radius with no code change; they default to global axis tokens in tera-ui-base.css.
+
 ## Import
 
   import { Input } from 'tera-system-ui';
@@ -24,6 +26,7 @@ Text input with prefix/suffix snippet slots, clear button, and status variants.
   prefix                    Snippet                                 optional  
   suffix                    Snippet                                 optional  
   allowClear                boolean                                 optional  
+  clearIcon                 Snippet                                 optional  Replace the default clear (X) icon with custom markup (structural seam).
 
 ### Usage
 

package/dist/llms/label.md

@@ -2,6 +2,8 @@
 
 Accessible form label.
 
+Label recipe — the canonical styled layer for the base design language. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: labelRecipe, ... })` in typed code — base sizing and the required-asterisk treatment are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens).
+
 ## Import
 
   import { Label } from 'tera-system-ui';

package/dist/llms/popover-responsive.md

@@ -2,7 +2,7 @@
 
 Popover on desktop, drawer on mobile.
 
-Automatically switches at the 640 px breakpoint.
+PopoverResponsive recipe — the canonical styled layer for the base design language. Thin composite: renders the Popover on desktop (≥ breakpoint) and the Dialog on mobile, switching at `desktopBreakpoint`. It owns almost no styling — the desktop/mobile panels come fully styled from Popover and Dialog, which stay composed as components (the stable seam). The single owned part is the mobile wrapper button, an unstyled reset that turns the trigger snippet into a tap target; it carries no variants. Customization surface — three layers, lightest first: 1. `class` (both panels) / `triggerClass` (mobile button) for one-off classes. 2. First-class common props (side/sideOffset/align for the popover, dialogPosition/dialogPadding + header/footer for the dialog). 3. `popoverProps` / `dialogProps` — typed escape hatches spread onto the underlying component, exposing every child prop and overriding the common props above. Any extra top-level prop is forwarded to BOTH. Or restyle the underlying look by extending the Popover/Dialog recipes. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -17,11 +17,19 @@ Automatically switches at the 640 px breakpoint.
   ──────────────────────────────────────────────────────────────────────────
   children                  Snippet                                 optional  Content rendered inside the popover/dialog panel.
   trigger                   Snippet                                 optional  Snippet used as the clickable trigger.
-  class                     string                                  optional  Additional CSS classes for the content panel.
   open                      boolean                                 optional  Whether the panel is open. Bindable.
+  class                     string                                  optional  Additional classes applied to BOTH the desktop popover panel and the mobile dialog panel.
+  triggerClass              string                                  optional  Additional classes for the mobile trigger wrapper button.
+  desktopBreakpoint         number                                  optional  Viewport width (px) at/above which the desktop popover is used. Defaults to 640.
   side                      'top' | 'bottom' | 'left' | 'right'     optional  Which side of the trigger the desktop popover appears on.
   sideOffset                number                                  optional  Distance in pixels between the trigger and popover (desktop only).
   align                     'start' | 'center' | 'end'              optional  Alignment of the popover relative to the trigger (desktop only).
+  dialogPosition            DialogProps['position']                 optional  Vertical placement of the mobile dialog. Defaults to 'top'.
+  dialogPadding             DialogProps['padding']                  optional  Inner padding of the mobile dialog. Defaults to 'none'.
+  header                    Snippet                                 optional  Snippet rendered in the mobile dialog header area (mobile only).
+  footer                    Snippet                                 optional  Snippet rendered in the mobile dialog footer area (mobile only).
+  popoverProps              Partial<PopoverProps>                   optional  Any additional prop forwarded to the desktop `<Popover>`. Overrides the common props above.
+  dialogProps               Partial<DialogProps>                    optional  Any additional prop forwarded to the mobile `<Dialog>`. Overrides the common props above.
 
 ### Usage
 

package/dist/llms/popover.md

@@ -2,7 +2,7 @@
 
 Floating popover panel anchored to a trigger element.
 
-Built on BitsUI Popover primitive with portal rendering.
+Popover recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Popover): the recipe is slotted by role — `trigger` (the inline wrapper around the clickable trigger) and `content` (the floating panel with its open/close animations). An app owns its look by extending this recipe with `tv({ extend: popoverRecipe, ... })` in typed code. Restyle-internals (the lighter rung): the per-component CSS var below (--tera-popover-radius) lets a theme/app retune the panel's corner radius with no code change; it defaults to the global container-radius token. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 

package/dist/llms/select.md

@@ -2,7 +2,7 @@
 
 Select dropdown with options array and keyboard navigation.
 
-Built on BitsUI Select primitive.
+Select recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Select): the recipe is slotted by role — trigger / content / viewport / item / group — so an app can restyle any part independently. The trigger carries the visual variants (look, size, status, disabled); the dropdown parts are static base strings. Primary customization surface: extend with `tv({ extend: selectRecipe, ... })` in typed code. Lighter rung: the per-component CSS vars (--tera-select-*) let a theme retune corner radius with no code change; they default to global axis tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -29,6 +29,7 @@ Built on BitsUI Select primitive.
   required                  boolean                                 optional  Whether the select is required for form submission.
   name                      string                                  optional  Name attribute used when submitting within a form.
   class                     string                                  optional  Additional CSS classes for the trigger button.
+  checkIcon                 Snippet                                 optional  Replace the default selected-item check mark with custom markup (structural seam).
   onchange                  (value: string | string[]) => void      optional  Called when the selected value changes.
 
 ### Usage

package/dist/llms/skeleton.md

@@ -2,6 +2,8 @@
 
 Loading skeleton placeholder for content areas.
 
+Skeleton recipe — the canonical styled layer for the base design language. Multi-part component: the recipe is slotted by role — root (the labelled loading region) / shape (circle, rect, and each line bar) / lines (the stacked-line wrapper). The `animate` variant swaps the shimmer animation for a flat surface fill; the `variant`/`tone` slots carry the per-shape radius. Primary customization surface: extend with `tv({ extend: skeletonRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-skeleton-radius) lets a theme retune the rect corner radius with no code change; it defaults to the global base-radius token. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+
 ## Import
 
   import { Skeleton } from 'tera-system-ui';
@@ -12,12 +14,12 @@ Loading skeleton placeholder for content areas.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
-  variant                   SkeletonVariant                         optional  
-  width                     string                                  optional  
-  height                    string                                  optional  
-  lines                     number                                  optional  
   animate                   boolean                                 optional  
-  class                     string                                  optional  
+  variant                   SkeletonVariant                         optional  Shape to render: a stack of text lines, a circle (avatar), or a rectangle (media).
+  width                     string                                  optional  CSS width of the placeholder (e.g. '48px', '100%'). Defaults per variant.
+  height                    string                                  optional  CSS height of the placeholder. Defaults per variant; falls back to `width` for circles.
+  lines                     number                                  optional  Number of line bars rendered for the 'line' variant.
+  class                     string                                  optional  Additional CSS classes for the root region.
 
 ### Usage
 
@@ -26,3 +28,4 @@ Loading skeleton placeholder for content areas.
   </script>
 
   <Skeleton />
+  <Skeleton animate />

package/dist/llms/slider.md

@@ -2,7 +2,7 @@
 
 Range slider for numeric value selection.
 
-Built on BitsUI Slider primitive with horizontal and vertical layouts.
+Slider recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Slider): the recipe is slotted by role — `root` (the Root wrapper / hit area), `track` (the rail), `range` (the filled portion), `thumb` (the draggable handle). Layout switches on the `orientation` variant (horizontal / vertical), and the `disabled` variant dims the whole control. Primary customization surface: extend with `tv({ extend: sliderRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-slider-radius) lets a theme retune the thumb corner radius with no code change; it falls back inline to the prior pill shape. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -15,13 +15,13 @@ Built on BitsUI Slider primitive with horizontal and vertical layouts.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  orientation               horizontal | vertical                   optional  (default: horizontal)
+  disabled                  boolean                                 optional  
   class                     string                                  optional  Additional CSS classes for the root element.
   min                       number                                  optional  Minimum value of the slider range.
   max                       number                                  optional  Maximum value of the slider range.
   step                      number                                  optional  Step interval between selectable values.
   value                     number                                  optional  Current value. Bindable.
-  disabled                  boolean                                 optional  Prevents all interaction and dims the control.
-  orientation               'horizontal' | 'vertical'               optional  Layout orientation of the slider track and thumb. When 'vertical', the parent must have an explicit height.
   onchange                  (value: number) => void                 optional  Fires continuously as the thumb moves during drag.
   onValueCommit             (value: number) => void                 optional  Fires once when the user finishes dragging and releases the thumb. Prefer this over `onchange` when the handler triggers expensive work.
   ref                       HTMLElement                             optional  Bindable reference to the root span element.
@@ -33,4 +33,6 @@ Built on BitsUI Slider primitive with horizontal and vertical layouts.
   </script>
 
   <Slider />
+  <Slider orientation="vertical" />
+  <Slider disabled />
   <Slider onchange={(v) => console.log(v)} />

package/dist/llms/spinner.md

@@ -2,6 +2,8 @@
 
 Circular loading spinner indicator.
 
+Spinner recipe — the canonical styled layer for the loading indicator. A single stylable part (the spinning `<svg>`), so this is a base-string recipe. The base carries the `animate-spin` rotation; the `size` and `color` variants are the typed extension surface. The spinner sizes its viewport and tints its stroke through SVG presentation attributes (numeric width/height and a CSS color), driven by the `sizeMap` / `colorMap` in the component — values a Tailwind utility can't express on an SVG element — so the variant classes themselves stay empty by design and the visual scale/tint is attribute-driven. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: spinnerRecipe, ... })` in typed code — the rotation is inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens).
+
 ## Import
 
   import { Spinner } from 'tera-system-ui';
@@ -12,8 +14,8 @@ Circular loading spinner indicator.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
-  size                      SpinnerSize                             optional  
-  color                     SpinnerColor                            optional  
+  size                      xs | sm | md | lg                       optional  (default: md)
+  color                     primary | white | current               optional  (default: primary)
   class                     string                                  optional  
 
 ### Usage
@@ -23,3 +25,5 @@ Circular loading spinner indicator.
   </script>
 
   <Spinner />
+  <Spinner size="xs" />
+  <Spinner color="white" />

package/dist/llms/star-rating.md

@@ -2,6 +2,8 @@
 
 Interactive star rating (1–5 stars).
 
+StarRating recipe — the canonical styled layer for the interactive 1–5 star control. A single stylable part (each star button), so this is a base-string recipe; the `size` variant scales the hit target and glyph. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: starRatingRecipe, ... })` in typed code — base sizing is inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). The filled/empty star glyph is a structural seam (`starIcon` snippet prop on the component) so rung-3 owners can swap the icon without forking markup.
+
 ## Import
 
   import { StarRating } from 'tera-system-ui';
@@ -15,6 +17,7 @@ Interactive star rating (1–5 stars).
   ──────────────────────────────────────────────────────────────────────────
   size                      sm | md | lg                            optional  (default: md)
   children                  Snippet                                 optional  
+  starIcon                  Snippet<[{ filled: boolean; index: ...  optional  Replace the default star glyph (structural seam). `filled` reflects the active/hovered state.
   class                     string                                  optional  
   value                     number                                  optional  
   onchange                  (value: number) => void                 optional  

package/dist/llms/switch.md

@@ -2,7 +2,7 @@
 
 Toggle switch for boolean state.
 
-Built on BitsUI Switch primitive with form integration support.
+Switch recipe — the canonical styled layer for the toggle switch. Built on the bits-ui Switch primitive: a pill `root` track holding two decorative state indicators (a line for on, a ring for off) and a sliding `thumb`. Each part is a slot, so an app can restyle one part without forking the markup. The primary customization surface is `tv({ extend: switchRecipe })` in typed code; see docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its tokens). Restyle-internals: the per-component CSS var --tera-switch-radius lets a theme/app retune the track + thumb corner radius (e.g. a squared-off switch) with no code change; it defaults to a full pill in tera-ui-base.css.
 
 ## Import
 
@@ -22,6 +22,7 @@ Built on BitsUI Switch primitive with form integration support.
   name                      string                                  optional  Name attribute used when submitting within a form.
   value                     string                                  optional  Value sent with the form when the switch is checked.
   onCheckedChange           (checked: boolean) => void              optional  Called when the checked state changes.
+  thumb                     Snippet                                 optional  Replace the default thumb markup (structural seam).
   ref                       HTMLButtonElement                       optional  Bindable reference to the root button element.
 
 ### Usage

package/dist/llms/table.md

@@ -2,6 +2,8 @@
 
 Data table component.
 
+Table recipe — the canonical styled layer for the base design language. Custom multi-part component (no bits-ui): the recipe is slotted by role — root / table / thead / headerCell / row / cell / loadingCell / empty — so an app can restyle any part independently. The striped zebra background and the sticky header are toggled through slot-scoped variants; the per-row stripe and clickable affordance are driven by booleans computed in markup. Primary customization surface: extend with `tv({ extend: tableRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-table-radius) lets a theme retune the wrapper corner radius with no code change; it defaults to a global axis token via the inline fallback. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+
 ## Import
 
   import { Table } from 'tera-system-ui';
@@ -12,14 +14,16 @@ Data table component.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
-  columns                   ColumnDef<T>[]                          required  
-  data                      T[]                                     required  
-  loading                   boolean                                 optional  
-  empty                     Snippet                                 optional  
-  striped                   boolean                                 optional  
   stickyHeader              boolean                                 optional  
-  onRowClick                (row: T) => void                        optional  
-  class                     string                                  optional  
+  stripedRow                boolean                                 optional  
+  clickable                 boolean                                 optional  
+  columns                   TableColumn<T>[]                        required  Column definitions in display order.
+  data                      T[]                                     required  Row data.
+  loading                   boolean                                 optional  Show skeleton placeholder rows instead of data.
+  empty                     Snippet                                 optional  Custom content rendered when there are no rows. Defaults to "No data".
+  striped                   boolean                                 optional  Zebra-stripe alternating rows.
+  onRowClick                (row: T) => void                        optional  Called when a row is clicked — also adds a pointer affordance.
+  class                     string                                  optional  Additional CSS classes for the scroll wrapper.
 
 ### Usage
 
@@ -28,3 +32,6 @@ Data table component.
   </script>
 
   <Table />
+  <Table stickyHeader />
+  <Table stripedRow />
+  <Table clickable />

package/dist/llms/tabs.md

@@ -2,7 +2,7 @@
 
 Tabbed content panels. Parts: Tabs, TabsList, TabsItem, TabsContent.
 
-Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
+Tabs recipe — the canonical styled layer for the base design language. Tabbed content panels built on the BitsUI Tabs primitive (root / list / trigger / content). The tabs are a multi-part component, so the recipe is SLOTTED: each visible part gets a named slot (root, list, trigger, content, indicator) that an app can target independently when extending with `tv({ extend: tabsRecipe, ... })` in typed code. Two visual styles are expressed as a `variant` variant — `line` (underline / accent-bar indicator) and `ios` (segmented control with a sliding pill). The `line` style also adapts to `orientation` (the indicator moves to the right edge when vertical). All of these were previously if/else branches in the markup; no class is lost. Restyle-internals (the lighter rung): the per-component CSS var below (--tera-tabs-radius) lets a theme/app retune the iOS segmented container's corner radius with no code change; it defaults to the global axis token via an inline fallback. See docs/ARCHITECTURE.md for the worked extend example (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -15,13 +15,13 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  variant                   line | ios                              optional  (default: line)
+  orientation               horizontal | vertical                   optional  (default: horizontal)
   children                  Snippet                                 optional  
   value                     string                                  optional  Currently active tab value. Bindable.
   onchange                  (newTab: string) => void                optional  Called when the active tab changes.
   class                     string                                  optional  Additional CSS classes for the root element.
-  variant                   TabsVariant                             optional  Visual style of the tab list.
   activationMode            'automatic' | 'manual'                  optional  How tabs activate on keyboard focus. - 'automatic': tab content switches immediately when a tab receives focus. - 'manual': the user must press Enter or Space to activate a focused tab.
-  orientation               'horizontal' | 'vertical'               optional  Orientation of the tab list. 'vertical' renders the list as a column alongside the content. Only supported with the 'line' variant.
   loop                      boolean                                 optional  Whether keyboard navigation wraps from the last tab back to the first.
   ref                       HTMLDivElement                          optional  Bindable reference to the root element.
 
@@ -32,6 +32,8 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
   </script>
 
   <Tabs>Content</Tabs>
+  <Tabs variant="ios">Content</Tabs>
+  <Tabs orientation="vertical">Content</Tabs>
   <Tabs onchange={(v) => console.log(v)} />
 
 ## TabsList
@@ -40,8 +42,11 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  variant                   line | ios                              optional  (default: line)
+  orientation               horizontal | vertical                   optional  (default: horizontal)
   children                  Snippet                                 optional  
   class                     string                                  optional  Additional CSS classes for the tab list container.
+  indicatorClass            string                                  optional  Additional CSS classes for the moving active-tab indicator.
   ref                       HTMLElement                             optional  (bindable)
 
 ### Usage
@@ -51,6 +56,8 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
   </script>
 
   <TabsList>Content</TabsList>
+  <TabsList variant="ios">Content</TabsList>
+  <TabsList orientation="vertical">Content</TabsList>
 
 ## TabsItem
 
@@ -58,6 +65,8 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  variant                   line | ios                              optional  (default: line)
+  orientation               horizontal | vertical                   optional  (default: horizontal)
   children                  Snippet                                 optional  
   value                     string                                  required  The value this tab represents — must match a TabsContent value.
   disabled                  boolean                                 optional  Prevents the user from activating this tab.
@@ -71,6 +80,8 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
   </script>
 
   <TabsItem>Content</TabsItem>
+  <TabsItem variant="ios">Content</TabsItem>
+  <TabsItem orientation="vertical">Content</TabsItem>
 
 ## TabsContent
 
@@ -78,6 +89,8 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  variant                   line | ios                              optional  (default: line)
+  orientation               horizontal | vertical                   optional  (default: horizontal)
   children                  Snippet                                 optional  
   value                     string                                  required  The value this content panel corresponds to — must match a TabsItem value.
   class                     string                                  optional  Additional CSS classes for the content panel.
@@ -90,3 +103,5 @@ Parts: Tabs, TabsList, TabsItem, TabsContent. Built on BitsUI Tabs primitive.
   </script>
 
   <TabsContent>Content</TabsContent>
+  <TabsContent variant="ios">Content</TabsContent>
+  <TabsContent orientation="vertical">Content</TabsContent>

package/dist/llms/text-area.md

@@ -2,6 +2,8 @@
 
 Multi-line text input with auto-resize.
 
+TextArea recipe — the canonical styled layer for the base design language. Multi-part component, so it slots: `root` (positioning wrapper), `field` (the textarea itself, which carries every variant/state), and `clear` (the optional clear-button affordance). An app owns its look by extending this recipe with `tv({ extend: textAreaRecipe, ... })` in typed code — base sizing and states are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). Restyle-internals (the lighter rung): the per-component CSS var below (--tera-textarea-radius) lets a theme/app retune the corner radius with no code change; it defaults to a global axis token in tera-ui-base.css.
+
 ## Import
 
   import { TextArea } from 'tera-system-ui';
@@ -26,6 +28,7 @@ Multi-line text input with auto-resize.
   rows                      number                                  optional  
   showCount                 boolean                                 optional  
   maxLength                 number                                  optional  
+  clearIcon                 Snippet                                 optional  Replace the default clear icon (IconX) with custom markup (structural seam).
 
 ### Usage
 

package/dist/llms/tooltip.md

@@ -2,7 +2,7 @@
 
 Floating tooltip shown on hover or focus.
 
-Built on BitsUI Tooltip primitive with portal rendering.
+Tooltip recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Tooltip): the recipe is slotted by role — trigger (the inline wrapper around the trigger element), content (the floating panel) and arrow (the pointer). An app restyles any part independently by extending with `tv({ extend: tooltipRecipe, ... })` in typed code; base layout, animation and color states are inherited. Restyle-internals (the lighter rung): the per-component CSS var below (--tera-tooltip-radius) lets a theme/app retune corner radius with no code change; it defaults to the global axis token via an inline fallback. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -22,6 +22,7 @@ Built on BitsUI Tooltip primitive with portal rendering.
   disabled                  boolean                                 optional  Prevents the tooltip from ever opening.
   children                  Snippet                                 optional  The element that triggers the tooltip on hover/focus.
   class                     string                                  optional  Additional CSS classes for the trigger wrapper span.
+  arrow                     Snippet                                 optional  Replace the default pointer arrow with custom markup (structural seam).
 
 ### Usage
 

package/dist/recipes/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Recipe toolkit — the typed extension surface for consuming apps.
+ *
+ * `tv` is both the recipe builder AND the extension primitive. An app expresses
+ * its own design language by extending a base recipe, with full type inference:
+ *
+ *   import { tv, buttonRecipe } from 'tera-system-ui/recipes';
+ *   export const appButton = tv({
+ *     extend: buttonRecipe,
+ *     variants: { variant: { primary: 'bg-[--brand] text-white ...' } },
+ *     defaultVariants: { size: 'lg' },
+ *   });
+ *
+ * - `defineRecipe` is an alias of `tv` that reads better when authoring a NEW
+ *   base recipe (vs. extending one).
+ * - `cx` concatenates classes (no conflict resolution); `cn` concatenates AND
+ *   resolves conflicting Tailwind utilities via tailwind-merge — use `cn` when
+ *   merging caller-supplied classes over recipe output.
+ */
+export { tv, cx, cnMerge, createTV, defaultConfig } from "tailwind-variants";
+export { tv as defineRecipe } from "tailwind-variants";
+export type { VariantProps, TVReturnType, ClassValue } from "tailwind-variants";
+export { cn } from "../utils/utils";
+export { buttonRecipe } from "../components/button/Button.recipe";
+export type { ButtonRecipeProps, ButtonProps } from "../components/button/Button.recipe";
+export { inputRecipe } from "../components/input/Input.recipe";
+export type { InputRecipeProps, InputProps } from "../components/input/Input.recipe";
+export { selectRecipe } from "../components/select/Select.recipe";
+export type { SelectRecipeProps, SelectProps } from "../components/select/Select.recipe";
+export { textAreaRecipe } from "../components/text-area/TextArea.recipe";
+export type { TextAreaRecipeProps, TextAreaProps, AutoSizeConfig } from "../components/text-area/TextArea.recipe";
+export { cardRecipe } from "../components/card/Card.recipe";
+export type { CardRecipeProps, CardProps } from "../components/card/Card.recipe";
+export { badgeRecipe } from "../components/badge/Badge.recipe";
+export type { BadgeRecipeProps, BadgeProps } from "../components/badge/Badge.recipe";
+export { checkboxRecipe } from "../components/checkbox/Checkbox.recipe";
+export type { CheckboxRecipeProps, CheckboxProps } from "../components/checkbox/Checkbox.recipe";
+export { switchRecipe } from "../components/switch/Switch.recipe";
+export type { SwitchRecipeProps, SwitchProps } from "../components/switch/Switch.recipe";
+export { accordionRecipe } from "../components/accordion/Accordion.recipe";
+export type { AccordionRecipeProps, AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from "../components/accordion/Accordion.recipe";
+export { dialogRecipe } from "../components/dialog/Dialog.recipe";
+export type { DialogRecipeProps, DialogProps, DialogPropsAstro } from "../components/dialog/Dialog.recipe";
+export { dropdownMenuRecipe } from "../components/dropdown-menu/DropdownMenu.recipe";
+export type { DropdownMenuRecipeProps } from "../components/dropdown-menu/DropdownMenu.recipe";
+export { popoverRecipe } from "../components/popover/Popover.recipe";
+export type { PopoverRecipeProps, PopoverProps } from "../components/popover/Popover.recipe";
+export { tooltipRecipe } from "../components/tooltip/Tooltip.recipe";
+export type { TooltipRecipeProps, TooltipProps } from "../components/tooltip/Tooltip.recipe";
+export { drawerRecipe } from "../components/drawer/Drawer.recipe";
+export type { DrawerRecipeProps, DrawerProps } from "../components/drawer/Drawer.recipe";
+export { sliderRecipe } from "../components/slider/Slider.recipe";
+export type { SliderRecipeProps } from "../components/slider/Slider.recipe";
+export { alertRecipe } from "../components/alert/Alert.recipe";
+export type { AlertRecipeProps } from "../components/alert/Alert.recipe";
+export { comboboxRecipe } from "../components/combobox/Combobox.recipe";
+export type { ComboboxRecipeProps, ComboboxProps, ComboboxItem } from "../components/combobox/Combobox.recipe";
+export { tabsRecipe } from "../components/tabs/Tabs.recipe";
+export type { TabsRecipeProps, TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from "../components/tabs/Tabs.recipe";
+export { avatarRecipe } from "../components/avatar/Avatar.recipe";
+export type { AvatarRecipeProps } from "../components/avatar/Avatar.recipe";
+export { labelRecipe } from "../components/label/Label.recipe";
+export type { LabelRecipeProps } from "../components/label/Label.recipe";
+export { starRatingRecipe } from "../components/star-rating/StarRating.recipe";
+export type { StarRatingRecipeProps } from "../components/star-rating/StarRating.recipe";
+export { commandRecipe } from "../components/command/Command.recipe";
+export type { CommandRecipeProps } from "../components/command/Command.recipe";
+export { tableRecipe } from "../components/table/Table.recipe";
+export type { TableRecipeProps, TableProps, TableColumn } from "../components/table/Table.recipe";
+export { spinnerRecipe } from "../components/spinner/Spinner.recipe";
+export type { SpinnerRecipeProps, SpinnerProps } from "../components/spinner/Spinner.recipe";
+export { skeletonRecipe } from "../components/skeleton/Skeleton.recipe";
+export type { SkeletonRecipeProps, SkeletonProps, SkeletonVariant } from "../components/skeleton/Skeleton.recipe";
+export { dateRangePickerRecipe } from "../components/date-range-picker/DateRangePicker.recipe";
+export type { DateRangePickerRecipeProps, DateRangePickerProps } from "../components/date-range-picker/DateRangePicker.recipe";
+export { popoverResponsiveRecipe } from "../components/popover-responsive/PopoverResponsive.recipe";
+export type { PopoverResponsiveRecipeProps, PopoverResponsiveProps } from "../components/popover-responsive/PopoverResponsive.recipe";
+export { bottomSheetRecipe } from "../components/bottom-sheet/BottomSheet.recipe";
+export type { BottomSheetRecipeProps, BottomSheetProps } from "../components/bottom-sheet/BottomSheet.recipe";

package/dist/recipes/index.js

@@ -0,0 +1,52 @@
+/**
+ * Recipe toolkit — the typed extension surface for consuming apps.
+ *
+ * `tv` is both the recipe builder AND the extension primitive. An app expresses
+ * its own design language by extending a base recipe, with full type inference:
+ *
+ *   import { tv, buttonRecipe } from 'tera-system-ui/recipes';
+ *   export const appButton = tv({
+ *     extend: buttonRecipe,
+ *     variants: { variant: { primary: 'bg-[--brand] text-white ...' } },
+ *     defaultVariants: { size: 'lg' },
+ *   });
+ *
+ * - `defineRecipe` is an alias of `tv` that reads better when authoring a NEW
+ *   base recipe (vs. extending one).
+ * - `cx` concatenates classes (no conflict resolution); `cn` concatenates AND
+ *   resolves conflicting Tailwind utilities via tailwind-merge — use `cn` when
+ *   merging caller-supplied classes over recipe output.
+ */
+export { tv, cx, cnMerge, createTV, defaultConfig } from "tailwind-variants";
+export { tv as defineRecipe } from "tailwind-variants";
+export { cn } from "../utils/utils";
+// ── Canonical component recipes — extend these in app code ──────────────────
+// (Grows by one line per migrated component; this is the curated public surface.)
+export { buttonRecipe } from "../components/button/Button.recipe";
+export { inputRecipe } from "../components/input/Input.recipe";
+export { selectRecipe } from "../components/select/Select.recipe";
+export { textAreaRecipe } from "../components/text-area/TextArea.recipe";
+export { cardRecipe } from "../components/card/Card.recipe";
+export { badgeRecipe } from "../components/badge/Badge.recipe";
+export { checkboxRecipe } from "../components/checkbox/Checkbox.recipe";
+export { switchRecipe } from "../components/switch/Switch.recipe";
+export { accordionRecipe } from "../components/accordion/Accordion.recipe";
+export { dialogRecipe } from "../components/dialog/Dialog.recipe";
+export { dropdownMenuRecipe } from "../components/dropdown-menu/DropdownMenu.recipe";
+export { popoverRecipe } from "../components/popover/Popover.recipe";
+export { tooltipRecipe } from "../components/tooltip/Tooltip.recipe";
+export { drawerRecipe } from "../components/drawer/Drawer.recipe";
+export { sliderRecipe } from "../components/slider/Slider.recipe";
+export { alertRecipe } from "../components/alert/Alert.recipe";
+export { comboboxRecipe } from "../components/combobox/Combobox.recipe";
+export { tabsRecipe } from "../components/tabs/Tabs.recipe";
+export { avatarRecipe } from "../components/avatar/Avatar.recipe";
+export { labelRecipe } from "../components/label/Label.recipe";
+export { starRatingRecipe } from "../components/star-rating/StarRating.recipe";
+export { commandRecipe } from "../components/command/Command.recipe";
+export { tableRecipe } from "../components/table/Table.recipe";
+export { spinnerRecipe } from "../components/spinner/Spinner.recipe";
+export { skeletonRecipe } from "../components/skeleton/Skeleton.recipe";
+export { dateRangePickerRecipe } from "../components/date-range-picker/DateRangePicker.recipe";
+export { popoverResponsiveRecipe } from "../components/popover-responsive/PopoverResponsive.recipe";
+export { bottomSheetRecipe } from "../components/bottom-sheet/BottomSheet.recipe";