@sableui/react 0.6.2 → 0.7.1

package/dist/components/pill/pill.variants.js

@@ -0,0 +1,65 @@
+// src/components/pill/pill.variants.ts
+import { cva } from "class-variance-authority";
+var pillVariants = cva(
+  /*
+   * The asymmetric `pt-[0.23em] pb-[0.1em]` is the LEGACY optical correction: a
+   * hand-tuned em nudge compensating for the fact that centring a line box does
+   * not centre the glyphs. It stays as the fallback, and `sable-label-trim`
+   * (applied to the label in pill.tsx) supersedes it wherever `text-box-trim`
+   * exists — `styles.css` neutralises this padding back to symmetric inside the
+   * same `@supports` block that turns the trim on.
+   *
+   * Why not simply delete it: a hardcoded nudge is wrong per font, but deleting
+   * it outright would regress every browser without `text-box` to an uncorrected
+   * label. Progressive enhancement keeps the tuned value where it is still the
+   * only thing available and drops it where the metric-derived fix applies.
+   *
+   * `whitespace-nowrap`: a chip's label is one line; in a scrolling or
+   * wrapping strip it must not break inside itself.
+   */
+  "sable-optical-pad inline-flex w-fit items-center gap-1 whitespace-nowrap rounded-full px-2 pt-[0.23em] pb-[0.1em] text-label-md cursor-pointer motion-interactive motion-press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:shrink-0",
+  {
+    variants: {
+      appearance: {
+        solid: "",
+        outline: "border"
+      },
+      size: {
+        md: "h-(--control-xs) px-3 py-0 [--sable-optical-pad:0px]",
+        sm: "h-6 py-0 text-label-sm [--sable-optical-pad:0px]"
+      },
+      selected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { appearance: "solid", selected: true, class: "bg-primary text-primary-foreground hover:bg-primary" },
+      {
+        appearance: "solid",
+        selected: false,
+        class: "bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
+      },
+      {
+        appearance: "outline",
+        selected: true,
+        class: "border-primary/40 bg-primary/10 text-foreground hover:bg-primary/15"
+      },
+      {
+        appearance: "outline",
+        selected: false,
+        // Transparent on whatever it sits on; the hover is derived from that
+        // surface (sable-surface-interactive), not a fixed accent fill.
+        class: "border-border text-muted-foreground sable-surface-interactive"
+      }
+    ],
+    defaultVariants: {
+      appearance: "solid",
+      size: "md",
+      selected: false
+    }
+  }
+);
+export {
+  pillVariants
+};

package/dist/components/popover/index.js

@@ -0,0 +1,23 @@
+// src/components/popover/index.ts
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverPortal,
+  PopoverClose,
+  PopoverContent,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverArrow
+} from "./popover.js";
+import { popoverMeta } from "./popover.meta.js";
+export {
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverPortal,
+  PopoverTitle,
+  PopoverTrigger,
+  popoverMeta
+};

package/dist/components/popover/popover.js

@@ -0,0 +1,100 @@
+// src/components/popover/popover.tsx
+import { Popover as Base } from "@base-ui/react/popover";
+import { anchoredScroll } from "../../lib/anchored-scroll.js";
+import { cn } from "../../lib/cn.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { PresentationProvider } from "../../lib/presentation.js";
+import { useAnchoredDensity } from "../../lib/density.js";
+import { jsx } from "react/jsx-runtime";
+var Popover = Base.Root;
+var PopoverTrigger = Base.Trigger;
+var PopoverPortal = withPortalThemeScope(Base.Portal);
+var PopoverClose = Base.Close;
+function PopoverContent({
+  className,
+  children,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  anchor,
+  ...props
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(
+    Base.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      anchor,
+      className: "z-(--z-overlay)",
+      children: /* @__PURE__ */ jsx(
+        Base.Popup,
+        {
+          ...anchoredDensity,
+          className: cn(
+            "w-72 rounded-md border border-border-floating bg-popover sable-surface-popover p-4 text-popover-foreground shadow-md outline-none",
+            // A popover holds arbitrary content, so it is the surface most likely
+            // to outgrow the room under its trigger. See lib/anchored-scroll.
+            // PopoverArrow is unaffected: its containing block is the positioner
+            // (an ancestor of the popup), so it escapes the popup's overflow clip.
+            anchoredScroll,
+            "motion-pop",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(PresentationProvider, { value: "page", children })
+        }
+      )
+    }
+  ) });
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Title,
+    {
+      className: cn("mb-1 text-title-sm text-popover-foreground", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Description,
+    {
+      className: cn("text-body-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function PopoverArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Arrow,
+    {
+      className: cn(
+        // Offsets on the spacing scale, like the size-2.5 square they place, so
+        // the point stays seated on the popup's edge at every density.
+        "group/arrow data-[side=bottom]:-top-1.5 data-[side=left]:-right-1.5 data-[side=right]:-left-1.5 data-[side=top]:-bottom-1.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "block size-2.5 rotate-45 border-border-floating bg-popover group-data-[side=top]/arrow:border-b group-data-[side=top]/arrow:border-r group-data-[side=bottom]/arrow:border-t group-data-[side=bottom]/arrow:border-l group-data-[side=left]/arrow:border-t group-data-[side=left]/arrow:border-r group-data-[side=right]/arrow:border-b group-data-[side=right]/arrow:border-l"
+        }
+      )
+    }
+  );
+}
+export {
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverPortal,
+  PopoverTitle,
+  PopoverTrigger
+};

package/dist/components/popover/popover.meta.js

@@ -0,0 +1,136 @@
+// src/components/popover/popover.meta.ts
+var popoverMeta = {
+  name: "Popover",
+  summary: "Click-triggered overlay over Base UI Popover (focus management, collision-aware positioning, Esc/outside dismissal). Holds interactive content; 18rem-wide surface.",
+  status: "stable",
+  keywords: [
+    "popover",
+    "floating panel",
+    "anchored",
+    "disclosure"
+  ],
+  usage: {
+    description: "Use Popover for anchored secondary content that needs more room than a tooltip but less commitment than a dialog.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for small pickers, summaries, or contextual controls tied to a trigger."
+      },
+      {
+        guidance: "do",
+        description: "Keep focus behavior and dismissal predictable."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Popover for blocking confirmations, long forms, or critical information."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a form that can fail validation inside one. A popover dismisses on outside click, which discards what the user typed with no warning \u2014 that is a Dialog."
+      }
+    ],
+    anatomy: [
+      {
+        name: "PopoverTrigger",
+        required: true,
+        description: "The element that anchors and opens the popover."
+      },
+      {
+        name: "PopoverContent",
+        required: true,
+        description: "The floating content surface."
+      },
+      {
+        name: "PopoverTitle",
+        required: false,
+        description: "An optional heading for the content."
+      },
+      {
+        name: "PopoverDescription",
+        required: false,
+        description: "Optional supporting copy."
+      },
+      {
+        name: "PopoverClose",
+        required: false,
+        description: "An explicit close control when helpful."
+      },
+      {
+        name: "PopoverArrow",
+        required: false,
+        description: "An optional arrow pointing to the trigger."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Tooltip",
+      "ContextCard",
+      "Dialog"
+    ]
+  },
+  props: [
+    {
+      name: "Popover (Root)",
+      type: "Base UI Popover.Root props (open, defaultOpen, onOpenChange, modal)",
+      description: "Groups the trigger and content. Uncontrolled by default."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "PopoverTrigger",
+      type: "Base UI Trigger props + render",
+      description: "The anchor element. Use render={<Button/>} to compose with another component."
+    },
+    {
+      name: "PopoverContent",
+      type: 'Base UI Popup props + side: "top" | "bottom" | "left" | "right" | "inline-*" + align: "start" | "center" | "end" + sideOffset: number + anchor: Element | Ref | (() => Element) | VirtualElement + className',
+      description: 'Portals + positions + paints the popup. side picks which side of the trigger to render against (auto-flips on collision; defaults to "bottom"); align sets alignment along that side (defaults to "center"); sideOffset is the gap in px (defaults to 8). anchor positions against a different element/ref/getter than the trigger \u2014 Base UI 1.5 has no separate Anchor part, so pass it here to decouple the open-location from the trigger.'
+    },
+    {
+      name: "PopoverTitle",
+      type: "Base UI Title props + className",
+      description: "Accessible heading; Base UI wires aria-labelledby to the popup."
+    },
+    {
+      name: "PopoverDescription",
+      type: "Base UI Description props + className",
+      description: "Supplementary copy; Base UI wires aria-describedby to the popup."
+    },
+    {
+      name: "PopoverClose",
+      type: "Base UI Close props + render",
+      description: "A button that closes the popover. Use render={<Button/>} to compose."
+    },
+    {
+      name: "PopoverArrow",
+      type: "Base UI Arrow props + className",
+      description: "Optional pointer connecting the popup to its trigger. Place inside PopoverContent."
+    }
+  ],
+  tokensUsed: [
+    "popover",
+    "popover-foreground",
+    "border-floating",
+    "muted-foreground"
+  ],
+  a11y: [
+    "Base UI manages focus into and out of the popup, traps focus when modal, and restores focus to the trigger on close.",
+    "Opens on trigger press (click/Enter/Space); dismisses on Esc and outside press.",
+    "PopoverTitle/PopoverDescription wire aria-labelledby/aria-describedby on the popup.",
+    "Enters and exits on the motion-pop recipe (Base UI starting/ending-style attributes), so it follows the motion policy."
+  ],
+  examples: [
+    {
+      label: "Basic",
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Edition details</PopoverTitle><PopoverDescription>A limited run of 100, stored permanently on Arweave.</PopoverDescription></PopoverContent></Popover>'
+    },
+    {
+      label: "With close",
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Collecting mints a compressed NFT to your wallet.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>'
+    }
+  ]
+};
+export {
+  popoverMeta
+};

package/dist/components/progress/index.js

@@ -0,0 +1,19 @@
+// src/components/progress/index.ts
+import {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue
+} from "./progress.js";
+import { progressTrackVariants } from "./progress.variants.js";
+import { progressMeta } from "./progress.meta.js";
+export {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+  progressMeta,
+  progressTrackVariants
+};

package/dist/components/progress/progress.js

@@ -0,0 +1,70 @@
+// src/components/progress/progress.tsx
+import { Progress as Base } from "@base-ui/react/progress";
+import { createContext, useContext } from "react";
+import { cn } from "../../lib/cn.js";
+import { progressTrackVariants } from "./progress.variants.js";
+import { jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function Progress({
+  className,
+  children,
+  value = null,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(Base.Root, { value, className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(ProgressTrack, {}) }) });
+}
+Progress.displayName = "Progress";
+function ProgressTrack({ className, children, size, ...props }) {
+  const inherited = useContext(SizeContext);
+  return /* @__PURE__ */ jsx(
+    Base.Track,
+    {
+      className: cn(progressTrackVariants({ size: size ?? inherited }), className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ProgressIndicator, {})
+    }
+  );
+}
+ProgressTrack.displayName = "ProgressTrack";
+function ProgressIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Indicator,
+    {
+      className: cn(
+        "h-full rounded-full bg-primary transition-[width] duration-(--motion-duration-slower) ease-decelerate",
+        "data-[indeterminate]:w-full data-[indeterminate]:motion-pulse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+ProgressIndicator.displayName = "ProgressIndicator";
+function ProgressLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Label,
+    {
+      className: cn("text-label-md text-foreground", className),
+      ...props
+    }
+  );
+}
+ProgressLabel.displayName = "ProgressLabel";
+function ProgressValue({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Value,
+    {
+      className: cn("text-mono-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+ProgressValue.displayName = "ProgressValue";
+export {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue
+};

package/dist/components/progress/progress.meta.js

@@ -0,0 +1,171 @@
+// src/components/progress/progress.meta.ts
+var progressMeta = {
+  name: "Progress",
+  summary: "Linear progress bar over Base UI Progress \u2014 value 0\u2013100 drives the fill; omit value (or pass null) for an indeterminate, pulsing bar.",
+  status: "stable",
+  keywords: [
+    "progress",
+    "task progress",
+    "meter",
+    "loading"
+  ],
+  usage: {
+    description: "Use Progress to communicate determinate or indeterminate completion for a task or process.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use determinate values when progress can be measured."
+      },
+      {
+        guidance: "do",
+        description: "Pair the visual indicator with text when users need context or exact values."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Progress as a decorative divider or status color bar."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use a determinate Progress for an unknown duration. A bar that sits at 90% is worse than a Spinner, because it makes a promise about time that you cannot keep."
+      }
+    ],
+    anatomy: [
+      {
+        name: "ProgressTrack",
+        required: true,
+        description: "The background track that defines the range."
+      },
+      {
+        name: "ProgressIndicator",
+        required: true,
+        description: "The filled or animated progress indicator."
+      },
+      {
+        name: "ProgressLabel",
+        required: false,
+        description: "A text label for the progress task."
+      },
+      {
+        name: "ProgressValue",
+        required: false,
+        description: "A readable value such as 45 percent."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Spinner",
+      "Skeleton"
+    ]
+  },
+  props: [
+    {
+      name: "value",
+      type: "number | null",
+      default: "null",
+      description: "Current value between min and max. null (or omitted) renders the indeterminate state."
+    },
+    {
+      name: "min",
+      type: "number",
+      default: "0",
+      description: "The minimum value of the range."
+    },
+    {
+      name: "max",
+      type: "number",
+      default: "100",
+      description: "The maximum value of the range."
+    },
+    {
+      name: "format",
+      type: "Intl.NumberFormatOptions",
+      description: "Formatting options for ProgressValue (e.g. style: 'percent', or a currency)."
+    },
+    {
+      name: "getAriaValueText",
+      type: "(formatted, value) => string",
+      description: "Returns a human-readable text alternative for aria-valuenow."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      default: '"md"',
+      description: "Bar thickness, on the same three rails as Meter so the two match on one page. ProgressTrack inherits it."
+    }
+  ],
+  variants: {
+    size: ["sm", "md", "lg"]
+  },
+  subcomponents: [
+    {
+      name: "ProgressTrack",
+      type: "Base UI Track props + className",
+      description: "The rail. Rendered automatically when Progress has no children; renders a ProgressIndicator child by default. Takes `size` (inherited from Progress) for its thickness \u2014 use that rather than a className height."
+    },
+    {
+      name: "ProgressIndicator",
+      type: "Base UI Indicator props + className",
+      description: "The fill. Width is set by Base UI from the value; spans full width and pulses while indeterminate."
+    },
+    {
+      name: "ProgressLabel",
+      type: "Base UI Label props + className",
+      description: "Accessible label; wires aria-labelledby on the Root."
+    },
+    {
+      name: "ProgressValue",
+      type: "Base UI Value props + className",
+      description: "Formatted value readout. Accepts a render-function child for custom formatting."
+    }
+  ],
+  tokensUsed: ["secondary", "primary", "foreground", "muted-foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A progress bar appears because work started. Staging its entrance delays the one piece of information the reader is waiting for."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Root",
+      why: "It reports; it does not accept input. A bar that reacted to the pointer would read as a Slider, which is a control the reader can drag."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "ProgressIndicator",
+      why: "Fill width eases between values on the motion tokens (no recipe animates width), so the bar reads as filling rather than as a series of unrelated widths. It matters most where progress arrives in coarse jumps \u2014 four chunked upload callbacks look like a glitching bar without it."
+    },
+    {
+      slot: "activity",
+      recipe: "motion-pulse",
+      part: "ProgressIndicator",
+      why: "Indeterminate (value null) has no width to animate, so the pulse carries the whole signal that work is still happening. Without it the indeterminate state is a static bar \u2014 indistinguishable from a stalled determinate one."
+    }
+  ],
+  a11y: [
+    "Base UI sets role=progressbar with aria-valuenow / aria-valuemin / aria-valuemax and reports status to screen readers.",
+    "Indeterminate state (value null) omits aria-valuenow per the ARIA spec.",
+    "Pair ProgressLabel with the bar for a visible, associated name; ProgressValue exposes the formatted value."
+  ],
+  examples: [
+    {
+      label: "Determinate",
+      code: '<Progress value={64} aria-label="Upload" />'
+    },
+    {
+      label: "Indeterminate",
+      code: '<Progress aria-label="Preparing export" />'
+    },
+    {
+      label: "With label and value",
+      code: '<Progress value={40}><div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1"><ProgressLabel>Uploading</ProgressLabel><ProgressValue /></div><ProgressTrack /></Progress>'
+    }
+  ]
+};
+export {
+  progressMeta
+};

package/dist/components/progress/progress.variants.js

@@ -0,0 +1,17 @@
+// src/components/progress/progress.variants.ts
+import { cva } from "class-variance-authority";
+var progressTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-secondary", {
+  variants: {
+    size: {
+      sm: "h-1.5",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  progressTrackVariants
+};

package/dist/components/radar-chart/index.js

@@ -0,0 +1,7 @@
+// src/components/radar-chart/index.ts
+import { RadarChart } from "./radar-chart.js";
+import { radarChartMeta } from "./radar-chart.meta.js";
+export {
+  RadarChart,
+  radarChartMeta
+};