@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/toggle-group.js

@@ -15,13 +15,19 @@ const ToggleGroupContext = React.createContext({
  * Pressed buttons that belong together.
  *
  * @family Choices
- * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
- * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
- * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @when Pressed buttons that belong together: which details a chat shows, the marks on a toolbar.
+ * @instead A value that is always exactly one of two or three, such as a list or grid view, is a
+ * `SegmentedControl`: its options are radios, so pressing the chosen one never clears it. The
+ * theme is `ThemeModeSwitcher`. Panels of one object are `Tabs`.
  * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
- * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
- * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
- * *Grid*.
+ * apart. With `multiple`, members are pressed independently and any number may be pressed, none
+ * included. Without it, at most one is pressed and pressing it again clears it; a value that is
+ * always one of two or three is a `SegmentedControl`. The group is named with `aria-label`
+ * or `aria-labelledby`, and a member is either a word as its children or carries an `aria-label`;
+ * a group or an icon member without a name does not compile. Colour: a pressed member takes the
+ * accent grey and nothing takes a hue. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *Tools*,
+ * *Reasoning*.
  * @access `role="group"` with a name; each member a button with `aria-pressed`.
  */
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {

package/dist/components/toggle.d.ts

@@ -11,9 +11,12 @@ declare const toggleVariants: (props?: ({
  * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
  * hidden rows in a toolbar.
  * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
- * `RadioGroup`, drawn segmented when it is short.
- * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
- * label does not change. Hover is the muted fill. Disabled is 50%.
+ * `RadioGroup`, or a `SegmentedControl` when it is two or three views of one surface.
+ * @behaviour Space or Enter flips `aria-pressed`. Sizes, type, corners and the text inset are
+ * `Button`'s (32, 36 and 40 px; 12, 16 and 20 px), and the padding does not change with an icon; an icon-only toggle is square.
+ * Pressed takes the accent fill and weight 600, a neutral fill with no hue; the label does not
+ * change. Hover is the muted fill. Disable it only when pressing is impossible, and say why beside
+ * it.
  * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
  * *Unpin*.
  * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.

package/dist/components/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAmBnB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -3,16 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-sm border border-transparent text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:font-semibold aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:font-semibold data-pressed:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const toggleVariants = cva("group/toggle inline-flex has-[>svg:only-child]:aspect-square has-[>svg:only-child]:px-0 min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-sm border border-transparent text-button font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:font-semibold aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:font-semibold data-pressed:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-transparent",
             outline: "border-input bg-transparent hover:bg-muted",
         },
         size: {
-            default: "h-control-height px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            sm: "h-nadicode-control-height-sm px-control-padding-inline text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-nadicode-control-height-lg px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            default: "h-control-height px-4",
+            sm: "h-nadicode-control-height-sm px-3 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-nadicode-control-height-lg rounded-md px-5 text-button-lg",
         },
     },
     defaultVariants: {
@@ -27,9 +27,12 @@ const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-to
  * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
  * hidden rows in a toolbar.
  * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
- * `RadioGroup`, drawn segmented when it is short.
- * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
- * label does not change. Hover is the muted fill. Disabled is 50%.
+ * `RadioGroup`, or a `SegmentedControl` when it is two or three views of one surface.
+ * @behaviour Space or Enter flips `aria-pressed`. Sizes, type, corners and the text inset are
+ * `Button`'s (32, 36 and 40 px; 12, 16 and 20 px), and the padding does not change with an icon; an icon-only toggle is square.
+ * Pressed takes the accent fill and weight 600, a neutral fill with no hue; the label does not
+ * change. Hover is the muted fill. Disable it only when pressing is impossible, and say why beside
+ * it.
  * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
  * *Unpin*.
  * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.

package/dist/components/tooltip.d.ts

@@ -1,22 +1,53 @@
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import type { PresentContent } from "../internal/present-content.js";
 declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
 /**
  * A short, optional fact about its trigger.
  *
  * @family Feedback
- * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
- * icon-only button's name, a shortcut only when one is bound.
- * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
- * disabled command's reason is written under it, never only here.
- * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
- * Never interactive; never the only home of a warning, a price or a reason.
- * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
- * label (*Save* on Save).
- * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
- * `aria-label` whether or not the tooltip is open.
+ * @when "Use a Tooltip to explain **why** something exists, not **what** it is." "The visible label
+ * names the thing; the tooltip adds the constraint, scope, or limit."
+ * (https://vercel.com/geist/tooltip)
+ * "Use lifecycle Tooltips (`Alpha`, `Experimental`, `Beta`, `Early Access`) to name the limits that
+ * apply: API stability, SLA, support, pricing, retention." (https://vercel.com/geist/tooltip)
+ * Ours: a shortcut is shown in a tooltip only when one is bound.
+ * @instead "For an entity preview with metadata rows (avatar, identifier, 2–4 facts, optional
+ * action), use `Context Card`." "For long-form content or actions that need persistence, route to a
+ * `Drawer` or page navigation." (https://vercel.com/geist/tooltip)
+ * Ours: `Context Card` is `HoverCard` and `Drawer` is `Sheet`. A disabled command's reason is
+ * written under it, never only in a tooltip.
+ * @behaviour "Tooltips open on hover and on keyboard focus." "Keep the default ~150ms entry delay so
+ * the tooltip doesn’t flicker on a sweeping mouse." "Don’t wrap a labelled `Input` in a Tooltip."
+ * "The trigger lands on the `<label>`, not the field, and the tooltip text becomes a second
+ * invisible label for screen readers." "Put help on a sibling icon button." "Keep primary actions
+ * outside the Tooltip; touch users can’t reach a hover-revealed control."
+ * (https://vercel.com/geist/tooltip)
+ * Ours: the pointer wait is 150 ms and keyboard focus opens it at once; `delay={0}` on the trigger
+ * or a `TooltipProvider` removes the wait. Above by default, 10 px from the trigger, at most 250 px
+ * wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem;
+ * `centerText={false}` left-aligns a tooltip that wraps. `TooltipContent` requires its text as
+ * children. Colour: one inverted neutral, the page's ink as the fill and its surface as the
+ * text, with a stem of the same fill and no hue, in both themes; a shortcut is a `Kbd` after the
+ * text, drawn 20 px high.
+ * @words "One sentence or fragment in `text`." "Sentence case, no period for a single fragment."
+ * "Skip tooltips that repeat the visible label (`text="Rate Limit"` on a `Rate Limit` button) or
+ * describe the interaction (`text="Click to override"`)." "Lifecycle Tooltips follow `{Label}:
+ * {one-line meaning}. {Specific limit}.`" "For a paid Beta feature, combine the lifecycle and
+ * pricing in one Tooltip rather than stacking two badges." (https://vercel.com/geist/tooltip)
+ * Ours: the text is `TooltipContent`'s children, for example *Resets on 1 November*.
+ * @access "An icon-only trigger needs an `aria-label` that names the action; the Tooltip body adds
+ * context, it doesn’t replace the label." "Escape closes the tooltip and returns focus to the
+ * trigger." (https://vercel.com/geist/tooltip)
  */
 declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
-declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+declare function TooltipTrigger({ delay, ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, arrow, centerText, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+    /** The text of the tooltip; a tooltip without one does not compile. */
+    children: PresentContent;
+    /** The stem pointing at the trigger; `false` for a tooltip that sits against it. */
+    arrow?: boolean;
+    /** Centres the text of a tooltip that wraps; `false` left-aligns it. */
+    centerText?: boolean;
+}): import("react").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAEhF;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAyBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAQjE,iBAAS,eAAe,CAAC,EAAE,KAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAM5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAS1E;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAe,EACf,KAAgB,EAChB,WAAe,EACf,KAAY,EACZ,UAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IACzF,uEAAuE;IACvE,QAAQ,EAAE,cAAc,CAAC;IACzB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BA8BF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -1,32 +1,61 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { createContext, useContext } from "react";
+import { overlayStem, OverlayStemShape } from "../internal/overlay-stem.js";
 import { cn } from "../lib/utils.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
-function TooltipProvider({ delay = 0, ...props }) {
-    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
+const TOOLTIP_DELAY = 150;
+const TooltipDelay = createContext(TOOLTIP_DELAY);
+function TooltipProvider({ delay = TOOLTIP_DELAY, ...props }) {
+    return (_jsx(TooltipDelay.Provider, { value: delay, children: _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }) }));
 }
 /**
  * A short, optional fact about its trigger.
  *
  * @family Feedback
- * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
- * icon-only button's name, a shortcut only when one is bound.
- * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
- * disabled command's reason is written under it, never only here.
- * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
- * Never interactive; never the only home of a warning, a price or a reason.
- * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
- * label (*Save* on Save).
- * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
- * `aria-label` whether or not the tooltip is open.
+ * @when "Use a Tooltip to explain **why** something exists, not **what** it is." "The visible label
+ * names the thing; the tooltip adds the constraint, scope, or limit."
+ * (https://vercel.com/geist/tooltip)
+ * "Use lifecycle Tooltips (`Alpha`, `Experimental`, `Beta`, `Early Access`) to name the limits that
+ * apply: API stability, SLA, support, pricing, retention." (https://vercel.com/geist/tooltip)
+ * Ours: a shortcut is shown in a tooltip only when one is bound.
+ * @instead "For an entity preview with metadata rows (avatar, identifier, 2–4 facts, optional
+ * action), use `Context Card`." "For long-form content or actions that need persistence, route to a
+ * `Drawer` or page navigation." (https://vercel.com/geist/tooltip)
+ * Ours: `Context Card` is `HoverCard` and `Drawer` is `Sheet`. A disabled command's reason is
+ * written under it, never only in a tooltip.
+ * @behaviour "Tooltips open on hover and on keyboard focus." "Keep the default ~150ms entry delay so
+ * the tooltip doesn’t flicker on a sweeping mouse." "Don’t wrap a labelled `Input` in a Tooltip."
+ * "The trigger lands on the `<label>`, not the field, and the tooltip text becomes a second
+ * invisible label for screen readers." "Put help on a sibling icon button." "Keep primary actions
+ * outside the Tooltip; touch users can’t reach a hover-revealed control."
+ * (https://vercel.com/geist/tooltip)
+ * Ours: the pointer wait is 150 ms and keyboard focus opens it at once; `delay={0}` on the trigger
+ * or a `TooltipProvider` removes the wait. Above by default, 10 px from the trigger, at most 250 px
+ * wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem;
+ * `centerText={false}` left-aligns a tooltip that wraps. `TooltipContent` requires its text as
+ * children. Colour: one inverted neutral, the page's ink as the fill and its surface as the
+ * text, with a stem of the same fill and no hue, in both themes; a shortcut is a `Kbd` after the
+ * text, drawn 20 px high.
+ * @words "One sentence or fragment in `text`." "Sentence case, no period for a single fragment."
+ * "Skip tooltips that repeat the visible label (`text="Rate Limit"` on a `Rate Limit` button) or
+ * describe the interaction (`text="Click to override"`)." "Lifecycle Tooltips follow `{Label}:
+ * {one-line meaning}. {Specific limit}.`" "For a paid Beta feature, combine the lifecycle and
+ * pricing in one Tooltip rather than stacking two badges." (https://vercel.com/geist/tooltip)
+ * Ours: the text is `TooltipContent`'s children, for example *Resets on 1 November*.
+ * @access "An icon-only trigger needs an `aria-label` that names the action; the Tooltip body adds
+ * context, it doesn’t replace the label." "Escape closes the tooltip and returns focus to the
+ * trigger." (https://vercel.com/geist/tooltip)
  */
 function Tooltip({ ...props }) {
     return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
-function TooltipTrigger({ ...props }) {
-    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+function TooltipTrigger({ delay, ...props }) {
+    const inheritedDelay = useContext(TooltipDelay);
+    return (_jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", delay: delay ?? inheritedDelay, ...props }));
 }
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs items-center gap-1.5 rounded-sm border-0 bg-popover px-nadicode-sm py-1.5 text-body-sm text-popover-foreground nc-elevation-floating has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", anchoredOverlayMotion, className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-var(--nc-rounded-xs))] rotate-45 rounded-xs border border-border bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
+function TooltipContent({ className, side = "top", sideOffset = 10, align = "center", alignOffset = 0, arrow = true, centerText = true, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 w-fit max-w-62.5 rounded-md border-0 bg-foreground px-nadicode-xs py-1.5 text-body-compact text-balance text-background nc-elevation-floating has-data-[slot=kbd]:inline-flex has-data-[slot=kbd]:items-center has-data-[slot=kbd]:gap-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:h-5 **:data-[slot=kbd]:min-w-5 **:data-[slot=kbd]:text-caption **:data-[slot=kbd]:leading-5", centerText ? "text-center" : "text-left", anchoredOverlayMotion, className), ...props, children: [children, arrow ? (_jsx(TooltipPrimitive.Arrow, { className: cn(overlayStem, "[&_path]:fill-foreground"), children: _jsx(OverlayStemShape, {}) })) : null] }) }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/trend-badge.js

@@ -34,6 +34,6 @@ function trendTone(direction, upIsGood = true, neutral = false) {
  */
 function TrendBadge({ value, direction, tone, directionLabel, }) {
     const Icon = TREND_ICONS[direction];
-    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", children: [_jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), _jsx("span", { className: "sr-only", children: directionLabel }), value] }));
+    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", icon: _jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), children: [_jsx("span", { className: "sr-only", children: directionLabel }), value] }));
 }
 export { TrendBadge, trendTone };

package/dist/components/update-card.js

@@ -21,7 +21,7 @@ export function UpdateCard(props) {
     return (_jsxs(Card, { "aria-label": props.title, className: "mx-1 mb-1", "data-state": props.state, render: _jsx("section", {}), size: "sm", surface: "outlined", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: props.title }), _jsx(CardDescription, { children: props.version }), props.state === "updated" ? (_jsx(CardAction, { children: _jsx(Button, { "aria-label": props.dismiss.label, onClick: props.dismiss.onClick, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(X, { "aria-hidden": "true" }) }) })) : null] }), props.state === "available" ? (_jsx(CardContent, { className: "grid *:w-full", children: _jsx(PageCommandButton, { command: props.action, variant: "default" }) })) : null] }));
 }
 function NarrowUpdate(props) {
-    const button = props.state === "available" ? (_jsx(Button, { "aria-busy": props.action.pending || undefined, "aria-label": `${props.action.pending ? (props.action.pendingLabel ?? props.action.label) : props.action.label}: ${props.version}`, disabled: props.action.disabled || props.action.pending, size: "icon", variant: "ghost", ...(props.action.render
+    const button = props.state === "available" ? (_jsx(Button, { "aria-label": `${props.action.pending ? (props.action.pendingLabel ?? props.action.label) : props.action.label}: ${props.version}`, disabled: props.action.disabled, loading: props.action.pending, size: "icon", variant: "ghost", ...(props.action.render
             ? { render: props.action.render, nativeButton: false }
             : { onClick: props.action.onClick, type: "button" }), children: _jsx(ArrowDownToLine, { "aria-hidden": "true" }) })) : (_jsx(Button, { "aria-label": `${props.dismiss.label}: ${props.title}`, onClick: props.dismiss.onClick, size: "icon", type: "button", variant: "ghost", children: _jsx(CircleCheck, { "aria-hidden": "true" }) }));
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: button }), _jsxs(TooltipContent, { side: "right", children: [props.title, ", ", props.version] })] }));

package/dist/eslint/index.js

@@ -3,20 +3,61 @@ import { readdirSync, readFileSync } from "node:fs";
 
 import { builtinRules } from "eslint/use-at-your-own-risk";
 
+import { badgeIsStaticLabel } from "./rules/badge-is-static-label.js";
+import { buttonIconSlot } from "./rules/button-icon-slot.js";
+import { buttonLinkForNavigation } from "./rules/button-link-for-navigation.js";
+import { buttonNoAriaLabelWithText } from "./rules/button-no-aria-label-with-text.js";
+import { buttonTypeRolesOnlyInButtons } from "./rules/button-type-roles-only-in-buttons.js";
+import { choiceControlHasAName } from "./rules/choice-control-has-a-name.js";
+import { choiceGroupInFieldset } from "./rules/choice-group-in-fieldset.js";
+import { commandShortcutSingleOwner } from "./rules/command-shortcut-single-owner.js";
+import { confirmDialogWords } from "./rules/confirm-dialog-words.js";
+import { dataTableOneUnsizedColumn } from "./rules/data-table-one-unsized-column.js";
+import { destructiveActionPlacement } from "./rules/destructive-action-placement.js";
+import { disabledChoiceSaysWhy } from "./rules/disabled-choice-says-why.js";
+import { settingsLimitInFooter } from "./rules/settings-limit-in-footer.js";
+import { ellipsisOpensADialog } from "./rules/ellipsis-opens-a-dialog.js";
 import { emptyStateOwner } from "./rules/empty-state-owner.js";
+import { inputGroupOwners } from "./rules/input-group-owners.js";
+import { kbdChildrenNoModifierText } from "./rules/kbd-children-no-modifier-text.js";
 import { menuOwner } from "./rules/menu-owner.js";
+import { middleTruncatePlacement } from "./rules/middle-truncate-placement.js";
 import { noAppFeatureComponent } from "./rules/no-app-feature-component.js";
+import { noBareButtonLabel } from "./rules/no-bare-button-label.js";
 import { noChoiceControlWrapper } from "./rules/no-choice-control-wrapper.js";
 import { noComment } from "./rules/no-comment.js";
+import { noControlInReadOnlySurface } from "./rules/no-control-in-read-only-surface.js";
 import { noDecorativeIcon } from "./rules/no-decorative-icon.js";
 import { noDeprecatedZodApi } from "./rules/no-deprecated-zod-api.js";
 import { noGlobalPatch } from "./rules/no-global-patch.js";
+import { noHandBuiltBusy } from "./rules/no-hand-built-busy.js";
+import { noHandBuiltThemePicker } from "./rules/no-hand-built-theme-picker.js";
+import { noHandBuiltTile } from "./rules/no-hand-built-tile.js";
+import { noHandFormattedDate } from "./rules/no-hand-formatted-date.js";
+import { noHandStackedAvatars } from "./rules/no-hand-stacked-avatars.js";
+import { noNestedCollapse } from "./rules/no-nested-collapse.js";
 import { noPackageComponentRedefinition } from "./rules/no-package-component-redefinition.js";
+import { noSearchInForm } from "./rules/no-search-in-form.js";
 import { noShadcnAppearanceOverride } from "./rules/no-shadcn-appearance-override.js";
+import { noShellPromptInSnippet } from "./rules/no-shell-prompt-in-snippet.js";
+import { noStockErrorWords } from "./rules/no-stock-error-words.js";
 import { noSubjectDerivedExpectation } from "./rules/no-subject-derived-expectation.js";
+import { noTooltipAroundLabelledField } from "./rules/no-tooltip-around-labelled-field.js";
+import { noWeightClassOnStrongInTypeRole } from "./rules/no-weight-class-on-strong-in-type-role.js";
 import { noWriteInSubscription } from "./rules/no-write-in-subscription.js";
+import { oneSubmenuLevel } from "./rules/one-submenu-level.js";
+import { oneToastPerFlow } from "./rules/one-toast-per-flow.js";
+import { optionCount } from "./rules/option-count.js";
+import { pageCommandLinkNotRender } from "./rules/page-command-link-not-render.js";
 import { pageComposition } from "./rules/page-composition.js";
+import { progressNeedsName } from "./rules/progress-needs-name.js";
 import { serverActionDiscipline } from "./rules/server-action-discipline.js";
+import { skeletonInRegion } from "./rules/skeleton-in-region.js";
+import { sortableHeadingUsesSort } from "./rules/sortable-heading-uses-sort.js";
+import { tableCellInsetOwner } from "./rules/table-cell-inset-owner.js";
+import { tabsSelectionIsControlled } from "./rules/tabs-selection-is-controlled.js";
+import { tooltipOnlyArrow } from "./rules/tooltip-only-arrow.js";
+import { tooltipTriggerAccessibleName } from "./rules/tooltip-trigger-accessible-name.js";
 import { strictDesignSystemSelectors } from "./strict-design-system.js";
 
 /**
@@ -106,20 +147,61 @@ const plugin = {
   configs: {},
   rules: {
     ...strictSelectorRules,
+    "badge-is-static-label": badgeIsStaticLabel,
+    "button-icon-slot": buttonIconSlot,
+    "button-link-for-navigation": buttonLinkForNavigation,
+    "button-no-aria-label-with-text": buttonNoAriaLabelWithText,
+    "button-type-roles-only-in-buttons": buttonTypeRolesOnlyInButtons,
+    "choice-control-has-a-name": choiceControlHasAName,
+    "choice-group-in-fieldset": choiceGroupInFieldset,
+    "command-shortcut-single-owner": commandShortcutSingleOwner,
+    "confirm-dialog-words": confirmDialogWords,
+    "data-table-one-unsized-column": dataTableOneUnsizedColumn,
+    "destructive-action-placement": destructiveActionPlacement,
+    "disabled-choice-says-why": disabledChoiceSaysWhy,
+    "settings-limit-in-footer": settingsLimitInFooter,
+    "ellipsis-opens-a-dialog": ellipsisOpensADialog,
     "empty-state-owner": emptyStateOwner,
+    "input-group-owners": inputGroupOwners,
+    "kbd-children-no-modifier-text": kbdChildrenNoModifierText,
     "menu-owner": menuOwner,
+    "middle-truncate-placement": middleTruncatePlacement,
     "no-app-feature-component": noAppFeatureComponent,
+    "no-bare-button-label": noBareButtonLabel,
     "no-choice-control-wrapper": noChoiceControlWrapper,
     "no-comment": noComment,
+    "no-control-in-read-only-surface": noControlInReadOnlySurface,
     "no-decorative-icon": noDecorativeIcon,
     "no-deprecated-zod-api": noDeprecatedZodApi,
     "no-global-patch": noGlobalPatch,
+    "no-hand-built-busy": noHandBuiltBusy,
+    "no-hand-built-theme-picker": noHandBuiltThemePicker,
+    "no-hand-built-tile": noHandBuiltTile,
+    "no-hand-formatted-date": noHandFormattedDate,
+    "no-hand-stacked-avatars": noHandStackedAvatars,
+    "no-nested-collapse": noNestedCollapse,
     "no-package-component-redefinition": noPackageComponentRedefinition,
+    "no-search-in-form": noSearchInForm,
     "no-shadcn-appearance-override": noShadcnAppearanceOverride,
+    "no-shell-prompt-in-snippet": noShellPromptInSnippet,
+    "no-stock-error-words": noStockErrorWords,
     "no-subject-derived-expectation": noSubjectDerivedExpectation,
+    "no-tooltip-around-labelled-field": noTooltipAroundLabelledField,
+    "no-weight-class-on-strong-in-type-role": noWeightClassOnStrongInTypeRole,
     "no-write-in-subscription": noWriteInSubscription,
+    "one-submenu-level": oneSubmenuLevel,
+    "one-toast-per-flow": oneToastPerFlow,
+    "option-count": optionCount,
+    "page-command-link-not-render": pageCommandLinkNotRender,
     "page-composition": pageComposition,
+    "progress-needs-name": progressNeedsName,
     "server-action-discipline": serverActionDiscipline,
+    "skeleton-in-region": skeletonInRegion,
+    "sortable-heading-uses-sort": sortableHeadingUsesSort,
+    "table-cell-inset-owner": tableCellInsetOwner,
+    "tabs-selection-is-controlled": tabsSelectionIsControlled,
+    "tooltip-only-arrow": tooltipOnlyArrow,
+    "tooltip-trigger-accessible-name": tooltipTriggerAccessibleName,
   },
 };
 

package/dist/eslint/rules/badge-is-static-label.js

@@ -0,0 +1,93 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector such as
+ * `Badge Badge` matches a name written in the file, not the element bound to
+ * the package's Badge, so it misses a renamed import and flags a product's own
+ * `Badge`; and `Badge[icon]` cannot tell a label inside the `icon` prop from
+ * an icon. This rule joins each element to its import first.
+ */
+import { partOf, renderedImports, staticAttribute } from "./rendered-import.js";
+
+const exportedBy = (module) => [
+  { from: `@nadicodeai/ui/components/${module}`, part: module },
+  { from: "@nadicodeai/ui", part: module },
+  { from: `@/components/${module}`, part: module },
+];
+
+const PARTS = new Map([
+  ["Badge", exportedBy("badge")],
+  [
+    "StatusBadge",
+    [
+      ...exportedBy("status-badge"),
+      { from: "@/components/kit/status-badge", part: "status-badge" },
+    ],
+  ],
+  ["Tag", exportedBy("tag")],
+  ["TrendBadge", exportedBy("trend-badge")],
+]);
+
+const HOSTS = new Set(["badge", "status-badge"]);
+const BUTTON_ATTRIBUTES = new Set(["tabIndex", "aria-pressed", "onKeyDown", "onKeyUp"]);
+
+const attributeName = (attribute) =>
+  attribute.type === "JSXAttribute" && attribute.name.type === "JSXIdentifier"
+    ? attribute.name.name
+    : null;
+
+export const badgeIsStaticLabel = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A Badge or StatusBadge is a static label: no label inside it, no button behaviour on it.",
+    },
+    schema: [],
+    messages: {
+      "static-label":
+        'A badge is a static label of text, or one icon and text. Put a second label beside it; a value that can be acted on is a Button, or a link with <Badge render={<a href=... />} variant="pill">.',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const partOfElement = (element) =>
+      partOf(importOf(element.openingElement.name), PARTS, context.filename);
+    const isHost = (opening) => HOSTS.has(partOf(importOf(opening.name), PARTS, context.filename));
+
+    function holdingHost(label) {
+      let child = label;
+      for (let current = label.parent; current; child = current, current = current.parent) {
+        const holdsAsChild =
+          current.type === "JSXElement" &&
+          current.children.includes(child) &&
+          isHost(current.openingElement);
+        if (holdsAsChild) return current;
+        if (
+          current.type === "JSXAttribute" &&
+          attributeName(current) === "icon" &&
+          isHost(current.parent)
+        ) {
+          return current.parent;
+        }
+      }
+      return null;
+    }
+
+    return {
+      JSXElement(node) {
+        if (partOfElement(node) && holdingHost(node)) {
+          context.report({ node, messageId: "static-label" });
+        }
+      },
+      JSXOpeningElement(node) {
+        if (!isHost(node)) return;
+        for (const attribute of node.attributes) {
+          const name = attributeName(attribute);
+          const refused =
+            BUTTON_ATTRIBUTES.has(name) ||
+            (name === "role" && staticAttribute(node, "role") === "button");
+          if (refused) context.report({ node: attribute, messageId: "static-label" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/button-icon-slot.js

@@ -0,0 +1,102 @@
+/*
+ * Standard tool checked first: the `repo/shadcn-composition` selector in the
+ * root config (`Button JSXOpeningElement[name.name=/Icon$/]` without
+ * `data-icon`) matches by element name under any `Button`, so it cannot tell a
+ * text Button from an icon-only one (the size decides where an icon goes), nor
+ * a `Button` imported from `@nadicodeai/ui` from a local one, nor an icon bound
+ * to an icon module from a component that only ends in `Icon`.
+ */
+import {
+  PACKAGE_BARREL,
+  partOf,
+  renderedImports,
+  sourceMatches,
+  staticAttribute,
+  writtenName,
+} from "./rendered-import.js";
+
+const BUTTONS = new Map(
+  ["Button", "ButtonLink"].map((name) => [
+    name,
+    ["@nadicodeai/ui/components/button", PACKAGE_BARREL].map((from) => ({ from, part: name })),
+  ]),
+);
+
+const TEXT_SIZES = new Set(["default", "xs", "sm", "lg"]);
+
+const isAttribute = (attribute, name) =>
+  attribute.type === "JSXAttribute" && attribute.name.name === name;
+
+export const buttonIconSlot = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A text Button takes its icon as prefix or suffix; an icon-only Button takes the icon as its child with no data-icon.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          iconModules: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [{ iconModules: ["lucide-react", "@nadicodeai/ui/components/house-icons"] }],
+    messages: {
+      "icon-slot":
+        'Pass an icon in a text Button as prefix={<Icon />} or suffix={<Icon />}; an icon-only Button (size="icon") takes the icon as its child.',
+    },
+  },
+  create(context) {
+    const [{ iconModules }] = context.options;
+    const importOf = renderedImports(context);
+    const isButton = (openingElement) =>
+      partOf(importOf(openingElement.name), BUTTONS, context.filename) !== null;
+
+    const isIcon = (openingElement) => {
+      const imported = importOf(openingElement.name);
+      if (
+        imported &&
+        iconModules.some((module) => sourceMatches(imported.source, module, context.filename))
+      ) {
+        return true;
+      }
+      return /Icon$/.test(writtenName(openingElement.name) ?? "");
+    };
+
+    function enclosingButton(node) {
+      for (let current = node.parent.parent; current; current = current.parent) {
+        if (current.type === "JSXAttribute") return null;
+        if (current.type === "JSXElement" && isButton(current.openingElement)) {
+          return current.openingElement;
+        }
+      }
+      return null;
+    }
+
+    function takesTextSize(button) {
+      if (button.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute")) {
+        return false;
+      }
+      if (!button.attributes.some((attribute) => isAttribute(attribute, "size"))) return true;
+      return TEXT_SIZES.has(staticAttribute(button, "size"));
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.parent.type !== "JSXElement") return;
+        const carriesDataIcon = node.attributes.some((attribute) =>
+          isAttribute(attribute, "data-icon"),
+        );
+        if (!carriesDataIcon && !isIcon(node)) return;
+        const button = enclosingButton(node);
+        if (!button) return;
+        if (carriesDataIcon || takesTextSize(button)) {
+          context.report({ node, messageId: "icon-slot" });
+        }
+      },
+    };
+  },
+};