@sableui/react 0.6.2 → 0.7.1

package/dist/components/search-input/search-input.js

@@ -0,0 +1,91 @@
+// src/components/search-input/search-input.tsx
+import { useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { FIELD_INVALID, FIELD_SHELL, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { useDensity, useTypeTier } from "../../lib/density.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchInput({
+  value,
+  defaultValue,
+  onValueChange,
+  onClear,
+  placeholder = "Search",
+  className,
+  inputClassName,
+  ref,
+  type,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+  const controlled = value !== void 0;
+  const current = controlled ? value : uncontrolled;
+  const hasValue = current.length > 0;
+  function change(next) {
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+  function handleClear() {
+    change("");
+    onClear?.();
+  }
+  const tier = useTypeTier();
+  const density = useDensity();
+  return (
+    // The wrapper is the field: className lands here, so a width cap moves the
+    // clear button with the input instead of leaving it at the far edge of a
+    // wider box.
+    /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex w-full items-center", className), children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "search",
+          className: "pointer-events-none absolute start-3 text-sm text-muted-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: type ?? "search",
+          value: current,
+          onChange: (event) => change(event.target.value),
+          placeholder,
+          className: cn(
+            "flex h-(--control-md) w-full ps-9 pe-9 text-foreground",
+            // The shell Input and CommandMenuTrigger wear too — lib/field-shell.
+            FIELD_SHELL,
+            FIELD_INVALID,
+            "[&::-webkit-search-cancel-button]:appearance-none",
+            tier.body,
+            density === "comfortable" && MOBILE_FIELD_TIER,
+            inputClassName
+          ),
+          ...props
+        }
+      ),
+      hasValue && !props.disabled ? (
+        // Sable's own icon button, not a hand-sized <button>: the hit area,
+        // focus ring, press and disabled fade follow the control ladder with
+        // every other icon button. Muted ink until hovered, so the X never
+        // out-shouts the query it clears.
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: handleClear,
+            "aria-label": "Clear search",
+            className: "absolute end-2 text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
+          }
+        )
+      ) : null
+    ] })
+  );
+}
+SearchInput.displayName = "SearchInput";
+export {
+  SearchInput
+};

package/dist/components/search-input/search-input.meta.js

@@ -0,0 +1,129 @@
+// src/components/search-input/search-input.meta.ts
+var searchInputMeta = {
+  name: "SearchInput",
+  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), card surface, 2px focus ring; the clear button appears only when there is a value.",
+  status: "stable",
+  keywords: [
+    "search",
+    "input",
+    "filter",
+    "query"
+  ],
+  usage: {
+    description: "Use SearchInput for text queries that filter or search a known content set.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use a clear placeholder that names the content being searched."
+      },
+      {
+        guidance: "do",
+        description: "Provide a visible clear affordance when query state persists."
+      },
+      {
+        guidance: "do",
+        description: "When a button stands in for search (a header trigger that opens CommandMenu with \u2318K), use CommandMenuTrigger. It wears this field's shell from the same source, so the two cannot drift; a hand-styled button already did once, into a borderless chip that matched neither the field nor a button."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use SearchInput as a command palette; use CommandMenu for global commands, opened from the header by CommandMenuTrigger. A SearchInput that opens a dialog on focus is a text box you cannot type in."
+      },
+      {
+        guidance: "dont",
+        description: "Do not search on every keystroke against an expensive backend without debouncing. The user sees results flicker and reorder under them, and you send a request per character."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Input",
+      "CommandMenu",
+      "Combobox"
+    ]
+  },
+  props: [
+    {
+      name: "value",
+      type: "string",
+      description: "Controlled value of the search field."
+    },
+    {
+      name: "defaultValue",
+      type: "string",
+      description: "Uncontrolled initial value. The field tracks its own text, so the clear button still appears and empties it."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Sizes and places the whole field \u2014 magnifier, input and clear button together (e.g. max-w-80). A width cap here keeps the clear button inside the field."
+    },
+    {
+      name: "inputClassName",
+      type: "string",
+      description: "Classes for the <input> element alone, for the rare input-only override."
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Called with the next string on every keystroke."
+    },
+    {
+      name: "onClear",
+      type: "() => void",
+      description: "Called when the clear button is pressed. The component also fires onValueChange('') so a controlled value resets."
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      default: '"Search"',
+      description: "Placeholder text shown when the field is empty."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Dims the control and blocks pointer interaction."
+    },
+    {
+      name: "...props",
+      type: 'ComponentPropsWithRef<"input">',
+      description: "All native input attributes (name, autoFocus, ref, aria-invalid, \u2026) pass through to the <input> except value/onChange, which are owned by value/onValueChange, and className, which sizes the whole field."
+    }
+  ],
+  tokensUsed: [
+    "input",
+    "card",
+    "foreground",
+    "muted-foreground",
+    "ring",
+    "destructive"
+  ],
+  a11y: [
+    'Renders a native <input type="search"> \u2014 keyboard and form semantics come for free.',
+    "Associate a <label htmlFor> (or wrap) \u2014 the magnifier glyph is decorative, not a label.",
+    "The leading search Icon is pointer-events-none and purely decorative.",
+    "The clear button is a real <button> (Sable's ghost icon Button) with aria-label='Clear search' and a focus-visible ring. It is hidden while the field is disabled.",
+    "Focus-visible draws a 2px ring in the --ring token; aria-invalid raises the destructive border and ring."
+  ],
+  examples: [
+    {
+      label: "Controlled",
+      code: 'const [q, setQ] = useState("")\n<SearchInput value={q} onValueChange={setQ} placeholder="Search posts" />'
+    },
+    {
+      label: "With onClear",
+      code: '<SearchInput value={q} onValueChange={setQ} onClear={() => console.log("cleared")} />'
+    },
+    {
+      label: "Uncontrolled, sized as a whole",
+      code: '<Field label="Search posts"><SearchInput defaultValue="editions" className="max-w-80" /></Field>'
+    },
+    {
+      label: "Disabled",
+      code: '<SearchInput disabled placeholder="Search" />'
+    }
+  ]
+};
+export {
+  searchInputMeta
+};

package/dist/components/section-header/index.js

@@ -0,0 +1,7 @@
+// src/components/section-header/index.ts
+import { SectionHeader } from "./section-header.js";
+import { sectionHeaderMeta } from "./section-header.meta.js";
+export {
+  SectionHeader,
+  sectionHeaderMeta
+};

package/dist/components/section-header/section-header.js

@@ -0,0 +1,39 @@
+// src/components/section-header/section-header.tsx
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { HeadingRow } from "../../lib/heading-row.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TITLE_TIER = {
+  md: "text-heading-3",
+  sm: "text-heading-4"
+};
+function SectionHeader({
+  title,
+  description,
+  actions,
+  titleAs = "h2",
+  titleId,
+  size = "md",
+  className,
+  ...props
+}) {
+  const generatedId = useId();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      HeadingRow,
+      {
+        as: titleAs,
+        title,
+        titleId: titleId ?? generatedId,
+        titleClassName: TITLE_TIER[size],
+        band: "flex min-h-(--control-sm) items-center",
+        actions
+      }
+    ),
+    description ? /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-sm text-pretty text-muted-foreground", children: description }) : null
+  ] });
+}
+SectionHeader.displayName = "SectionHeader";
+export {
+  SectionHeader
+};

package/dist/components/section-header/section-header.meta.js

@@ -0,0 +1,174 @@
+// src/components/section-header/section-header.meta.ts
+var sectionHeaderMeta = {
+  name: "SectionHeader",
+  summary: 'The heading block for one section of a page: a title (h2 by default), an optional line of description, and actions on the title row \u2014 a "View all" link or a couple of buttons \u2014 that drop beneath the title only when the row runs out of room.',
+  status: "stable",
+  keywords: [
+    "section header",
+    "section heading",
+    "section title",
+    "shelf",
+    "view all",
+    "see all",
+    "show all",
+    "h2",
+    "subsection",
+    "optical alignment",
+    "bleed"
+  ],
+  usage: {
+    description: "Use SectionHeader to head each section below the page title \u2014 a home-page shelf with View all, a settings group, a list with its own actions. PageHeader is the route's single h1; every section under it takes a SectionHeader, with titleId wired to the section's aria-labelledby.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Wrap the header and its content in a `<section aria-labelledby={titleId}>` (a flex column with a gap, or a Stack inside it) so the section is a named region and the header's title is its name."
+      },
+      {
+        guidance: "do",
+        description: "Pick titleAs by the document outline (h2 under the page h1, h3 inside an h2 section) and size by visual weight: md for a page's sections and shelves, sm for denser groups like settings."
+      },
+      {
+        guidance: "do",
+        description: 'Keep actions to one or two `size="sm"` buttons \u2014 the title is centred on that height. A shelf\'s "View all" is a ghost Button rendered as a link (`render={<a href=\u2026 />}`), named for what it opens when the label alone is ambiguous (aria-label="View all new releases").'
+      },
+      {
+        guidance: "do",
+        description: 'Pass a ghost or link action as a plain Button and let the header align it: the last direct child bleeds by its own padding at the end, so "View all" sits on the edge of the grid below, and the first bleeds at the start, which is the edge once the actions wrap beneath the title. Filled buttons keep their edge on the line. Set bleed="none" on the Button to opt one out.'
+      },
+      {
+        guidance: "dont",
+        description: "Nudge a View all onto the edge with -me-3, or wrap the actions in your own div: the header aligns direct children only, and only by each button's real padding. If you must wrap them, set bleed on the Button inside instead."
+      },
+      {
+        guidance: "dont",
+        description: 'Use a second PageHeader for a section \u2014 that is a second h1, and the outline then reports two documents. And do not hand-build `<div className="flex justify-between"><h2 className="text-heading-3">\u2026` per shelf: it misses the wrapping, the aria wiring and the shared rhythm.'
+      },
+      {
+        guidance: "dont",
+        description: "Use SectionHeader to title a Card (use CardHeader + CardTitle) or a docked tool panel (use PanelSection). It heads a section of the page, not a surface."
+      },
+      {
+        guidance: "dont",
+        description: "Add margin to the header to space it from its content. It has no outer spacing on purpose; the section's gap owns that rhythm, so every section on the page keeps the same one."
+      }
+    ],
+    anatomy: [
+      { name: "Title", required: true, description: "The section's heading (h2 by default), wrapping rather than truncating. Its id names the section." },
+      { name: "Description", required: false, description: "One line of supporting copy under the title, capped at the prose measure." },
+      {
+        name: "Actions",
+        required: false,
+        description: "Buttons or links at the title row's end; they move beneath the title when the row is too narrow for both. A borderless (ghost/link) Button at either end of the group is optically aligned: its label, not its invisible padding, meets the content edge."
+      }
+    ]
+  },
+  related: {
+    components: ["PageHeader", "CardHeader", "PanelSection", "Grid", "Stack", "Button"],
+    patterns: ["SettingsPage", "DashboardPage"]
+  },
+  props: [
+    { name: "title", type: "ReactNode", description: "The section's title." },
+    { name: "description", type: "ReactNode", description: "One line of supporting copy beneath the title, capped at the prose measure." },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: `Trailing actions on the title row \u2014 a View all link or a couple of buttons, size="sm". They stay on the title's row and drop beneath it only when the row runs out of room; the title wraps rather than truncating. A ghost or link Button that ends the group bleeds by its padding at the end (and one that starts it, at the start \u2014 the edge once wrapped), so its label lines up with the content below; Button bleed="none" opts out. Direct children only.`
+    },
+    {
+      name: "titleAs",
+      type: '"h2" | "h3" | "h4"',
+      default: '"h2"',
+      description: "The heading element, chosen by the document outline: h2 for a section under the page's h1, h3 for a subsection inside one."
+    },
+    {
+      name: "titleId",
+      type: "string",
+      description: "The title's id, so the section it heads can point at it: <section aria-labelledby={titleId}>. Generated when omitted."
+    },
+    {
+      name: "size",
+      type: '"md" | "sm"',
+      default: '"md"',
+      description: "Visual weight, independent of the heading level: md (text-heading-3) for a page's sections and shelves; sm (text-heading-4) for denser sets \u2014 settings groups, subsections."
+    }
+  ],
+  variants: {
+    size: ["md", "sm"]
+  },
+  tokensUsed: ["foreground", "muted-foreground"],
+  a11y: [
+    "Renders a real heading (h2 by default); choose titleAs by the outline, never to get a size \u2014 size sets the look.",
+    "The title always carries an id (titleId, or a generated one). Point the section at it with aria-labelledby so the section is announced as a named region and appears in landmark navigation.",
+    'A repeated "View all" is ambiguous in a links list; name each one for its section (aria-label="View all new releases") or keep the visible label specific.'
+  ],
+  motion: [
+    { slot: "arrival", recipe: "none", part: "root", why: "A heading arrives with the section it names; animating it separately would make the section's title lag its content." },
+    { slot: "response", recipe: "none", part: "root", why: "The header itself is not interactive; the Buttons passed as actions carry their own response." },
+    { slot: "transition", recipe: "none", part: "root", why: "It has no states of its own to move between." },
+    { slot: "activity", recipe: "none", part: "root", why: "It never does indeterminate work." }
+  ],
+  examples: [
+    {
+      label: "A shelf with View all",
+      code: `<section aria-labelledby="new-releases" className="flex flex-col gap-4">
+	<SectionHeader
+		titleId="new-releases"
+		title="New releases"
+		description="Fresh from artists you follow."
+		actions={
+			<Button variant="ghost" size="sm" render={<a href="/new" />} aria-label="View all new releases">
+				View all
+			</Button>
+		}
+	/>
+	<Grid minItemWidth="10rem" gap={2}>
+		<Card><CardHeader><CardTitle>Night Swim</CardTitle><CardDescription>Lena Vale</CardDescription></CardHeader></Card>
+		<Card><CardHeader><CardTitle>Low Tide</CardTitle><CardDescription>Harbour Lights</CardDescription></CardHeader></Card>
+	</Grid>
+</section>`
+    },
+    {
+      label: "A settings section",
+      code: `<section aria-labelledby="playback" className="flex flex-col gap-4">
+	<SectionHeader
+		titleId="playback"
+		size="sm"
+		title="Playback"
+		description="How tracks start, end and blend into each other."
+	/>
+	<Field label="Crossfade" orientation="horizontal">
+		<Switch defaultChecked />
+	</Field>
+	<Field label="Normalize volume" orientation="horizontal">
+		<Switch />
+	</Field>
+</section>`
+    },
+    {
+      label: "A section with two actions",
+      code: `<section aria-labelledby="playlists" className="flex flex-col gap-4">
+	<SectionHeader
+		titleId="playlists"
+		title="Your playlists"
+		actions={
+			<>
+				<Button variant="ghost" size="sm" iconStart={<Icon name="filter" />}>Filter</Button>
+				<Button size="sm" iconStart={<Icon name="plus" />}>New playlist</Button>
+			</>
+		}
+	/>
+	<Stack gap={1}>
+		<Entity className="[--entity-px:0]" title="Late drives" subtitle="42 tracks" />
+		<Entity className="[--entity-px:0]" title="Focus" subtitle="18 tracks" />
+	</Stack>
+</section>`
+    },
+    {
+      label: "A subsection inside a section",
+      code: `<SectionHeader titleAs="h3" size="sm" title="Appears on" />`
+    }
+  ]
+};
+export {
+  sectionHeaderMeta
+};

package/dist/components/segmented-bar/index.js

@@ -0,0 +1,14 @@
+// src/components/segmented-bar/index.ts
+import {
+  SEGMENTED_BAR_TONES,
+  SegmentedBar
+} from "./segmented-bar.js";
+import { segmentedBarSegmentVariants, segmentedBarVariants } from "./segmented-bar.variants.js";
+import { segmentedBarMeta } from "./segmented-bar.meta.js";
+export {
+  SEGMENTED_BAR_TONES,
+  SegmentedBar,
+  segmentedBarMeta,
+  segmentedBarSegmentVariants,
+  segmentedBarVariants
+};

package/dist/components/segmented-bar/segmented-bar.js

@@ -0,0 +1,26 @@
+// src/components/segmented-bar/segmented-bar.tsx
+import { cn } from "../../lib/cn.js";
+import { segmentedBarSegmentVariants, segmentedBarVariants } from "./segmented-bar.variants.js";
+import { jsx } from "react/jsx-runtime";
+var SEGMENTED_BAR_TONES = ["edition", "collectible", "standard", "info", "primary", "neutral"];
+function SegmentedBar({ segments, label, locale, size, className, ...props }) {
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+  const summary = segments.map((s) => `${s.label} ${percent.format(total ? Math.max(0, s.value) / total : 0)}`).join(", ");
+  return /* @__PURE__ */ jsx("div", { role: "img", "aria-label": `${label}: ${summary}`, className: cn(segmentedBarVariants({ size }), className), ...props, children: segments.map(
+    (s, i) => s.value > 0 ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "segmented-bar-segment",
+        className: segmentedBarSegmentVariants({ tone: s.tone ?? SEGMENTED_BAR_TONES[i % SEGMENTED_BAR_TONES.length] }),
+        style: { flexGrow: s.value }
+      },
+      s.label
+    ) : null
+  ) });
+}
+SegmentedBar.displayName = "SegmentedBar";
+export {
+  SEGMENTED_BAR_TONES,
+  SegmentedBar
+};

package/dist/components/segmented-bar/segmented-bar.meta.js

@@ -0,0 +1,108 @@
+// src/components/segmented-bar/segmented-bar.meta.ts
+var segmentedBarMeta = {
+  name: "SegmentedBar",
+  summary: "One bar split into the parts of a whole \u2014 revenue by type, storage by kind, results by outcome. Segments size by their share of the total; the bar is one labelled image to assistive tech.",
+  keywords: ["breakdown", "stacked", "segmented", "proportion", "split", "distribution", "category", "bar", "share"],
+  usage: {
+    description: "Use SegmentedBar when a stat card or row needs to show how a total divides into a few categories. Pair it with a legend you compose (StatusDot + label + share), placed where the card has room. For one reading against a range (storage used, quota), use Meter; for task completion, use Progress.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Keep it to two to six segments and give the same category the same tone everywhere it appears."
+      },
+      {
+        guidance: "do",
+        description: `Show the legend's shares in text ("42%") \u2014 colour identifies a segment, but the number is what a reader compares.`
+      },
+      {
+        guidance: "dont",
+        description: "Use it for a single value against a limit; that is Meter, which carries the meter role and its value."
+      },
+      {
+        guidance: "dont",
+        description: "Rely on tone order alone to tell segments apart; a legend row per segment, with its label, is required."
+      }
+    ],
+    anatomy: [
+      { name: "Track", required: true, description: "The rounded bar; segments fill it edge to edge with a hairline gap." },
+      { name: "Segment", required: true, description: "One category, sized by its share of the total and filled with its tone." }
+    ]
+  },
+  related: {
+    components: ["Meter", "Progress", "StatusDot", "Card"],
+    patterns: ["DashboardPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "segments",
+      type: "{ label: string; value: number; tone?: SegmentedBarTone }[]",
+      description: "The categories, left to right. Values in any unit; zero or negative values are skipped."
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "What the bar breaks down. Prefixes the accessible summary of every segment's share."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      default: '"md"',
+      description: "Bar thickness \u2014 the same rails as Meter and Progress."
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "Locale for the spoken percentages."
+    }
+  ],
+  variants: {
+    size: ["sm", "md", "lg"],
+    tone: ["edition", "collectible", "standard", "info", "primary", "neutral", "success", "warning", "destructive"]
+  },
+  tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "primary",
+    "muted-foreground",
+    "success",
+    "tone-warning",
+    "destructive"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "SegmentedBar",
+      why: "A breakdown is a reading, present with the card that reports it; growing the segments in on load would act out a change that did not happen."
+    },
+    { slot: "response", recipe: "none", part: "SegmentedBar", why: "It reports and accepts no input." },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Segment",
+      why: "Each segment's share and colour ease on the motion tokens when the data changes (no recipe animates flex-grow), so the reader sees which part grew."
+    },
+    { slot: "activity", recipe: "none", part: "SegmentedBar", why: "No indeterminate state \u2014 an unknown breakdown is not drawn." }
+  ],
+  a11y: [
+    'Rendered role=img with an aria-label built from `label` and each segment\'s share ("Revenue by type: Editions 42%, Collectibles 27%"), so the whole breakdown is read in one stop.',
+    "Colour alone does not identify a segment: always show a legend with each segment's label beside the bar."
+  ],
+  examples: [
+    {
+      label: "With a legend",
+      code: 'const sales = [\n	{ label: "Editions", value: 42, tone: "edition" },\n	{ label: "Collectibles", value: 27, tone: "collectible" },\n	{ label: "Standard", value: 19, tone: "standard" },\n] as const\n\n<Stack gap={3}>\n	<SegmentedBar label="Revenue by type" segments={[...sales]} size="lg" />\n	<ul className="flex flex-col gap-1.5">\n		{sales.map((s) => (\n			<li key={s.label} className="flex items-center gap-2 text-body-sm">\n				<StatusDot tone={s.tone} />\n				<span className="flex-1 text-muted-foreground">{s.label}</span>\n				<span className="text-mono-caption">{s.value}%</span>\n			</li>\n		))}\n	</ul>\n</Stack>'
+    },
+    {
+      label: "Test results \u2014 status tones",
+      code: '<SegmentedBar\n	label="Test results"\n	segments={[\n		{ label: "Passed", value: 412, tone: "success" },\n		{ label: "Flaky", value: 9, tone: "warning" },\n		{ label: "Failed", value: 3, tone: "destructive" },\n	]}\n/>'
+    }
+  ]
+};
+export {
+  segmentedBarMeta
+};

package/dist/components/segmented-bar/segmented-bar.variants.js

@@ -0,0 +1,39 @@
+// src/components/segmented-bar/segmented-bar.variants.ts
+import { cva } from "class-variance-authority";
+var segmentedBarSegmentVariants = cva(
+  "h-full min-w-0.5 basis-0 transition-[flex-grow,background-color] duration-(--motion-duration-slow) ease-decelerate",
+  {
+    variants: {
+      tone: {
+        edition: "bg-tone-edition",
+        collectible: "bg-tone-collectible",
+        standard: "bg-tone-standard",
+        info: "bg-tone-info",
+        primary: "bg-primary",
+        neutral: "bg-muted-foreground",
+        success: "bg-success",
+        warning: "bg-tone-warning",
+        destructive: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      tone: "standard"
+    }
+  }
+);
+var segmentedBarVariants = cva("flex w-full gap-0.5 overflow-hidden rounded-full", {
+  variants: {
+    size: {
+      sm: "h-1.5",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  segmentedBarSegmentVariants,
+  segmentedBarVariants
+};

package/dist/components/select/index.js

@@ -0,0 +1,25 @@
+// src/components/select/index.ts
+import {
+  Select,
+  SelectPortal,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectGroupLabel,
+  SelectSeparator
+} from "./select.js";
+import { selectMeta } from "./select.meta.js";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectPortal,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  selectMeta
+};