@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/src/card.variants.ts

@@ -0,0 +1,293 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { TONES, type Tone } from "./tone";
+
+const VARIANT = {
+  outline: {},
+  plain: {
+    root: "border-transparent",
+    header: "border-transparent",
+    footer: "border-transparent",
+  },
+} as const;
+
+const RAISED = {
+  false: {},
+  true: { root: "shadow-elevation-raised" },
+} as const;
+
+// What a Card means (ADR 0026): the shared tone vocabulary, each tone on its
+// Feedback Role's tinted surface (ADR 0023) — `info` is feedback-info here as
+// on every other component, and a grey Card is `neutral`.
+const TONE = {
+  neutral: {
+    root: "bg-elevation-raised-surface text-foreground",
+    header: "text-foreground",
+    title: "text-foreground",
+    description: "text-ink-muted",
+    body: "text-foreground",
+    footer: "text-foreground",
+  },
+  success: {
+    root: "bg-[var(--reddb-color-feedback-success-surface)] text-[var(--reddb-color-feedback-success-foreground)]",
+    header: "text-[var(--reddb-color-feedback-success-foreground)]",
+    title: "text-[var(--reddb-color-feedback-success-foreground)]",
+    description: "text-[var(--reddb-color-feedback-success-foreground)]",
+    body: "text-[var(--reddb-color-feedback-success-foreground)]",
+    footer: "text-[var(--reddb-color-feedback-success-foreground)]",
+  },
+  warning: {
+    root: "bg-[var(--reddb-color-feedback-warning-surface)] text-[var(--reddb-color-feedback-warning-foreground)]",
+    header: "text-[var(--reddb-color-feedback-warning-foreground)]",
+    title: "text-[var(--reddb-color-feedback-warning-foreground)]",
+    description: "text-[var(--reddb-color-feedback-warning-foreground)]",
+    body: "text-[var(--reddb-color-feedback-warning-foreground)]",
+    footer: "text-[var(--reddb-color-feedback-warning-foreground)]",
+  },
+  danger: {
+    root: "bg-[var(--reddb-color-feedback-danger-surface)] text-[var(--reddb-color-feedback-danger-foreground)]",
+    header: "text-[var(--reddb-color-feedback-danger-foreground)]",
+    title: "text-[var(--reddb-color-feedback-danger-foreground)]",
+    description: "text-[var(--reddb-color-feedback-danger-foreground)]",
+    body: "text-[var(--reddb-color-feedback-danger-foreground)]",
+    footer: "text-[var(--reddb-color-feedback-danger-foreground)]",
+  },
+  info: {
+    root: "bg-[var(--reddb-color-feedback-info-surface)] text-[var(--reddb-color-feedback-info-foreground)]",
+    header: "text-[var(--reddb-color-feedback-info-foreground)]",
+    title: "text-[var(--reddb-color-feedback-info-foreground)]",
+    description: "text-[var(--reddb-color-feedback-info-foreground)]",
+    body: "text-[var(--reddb-color-feedback-info-foreground)]",
+    footer: "text-[var(--reddb-color-feedback-info-foreground)]",
+  },
+  /**
+   * @deprecated The accent is an emphasis, not a tone (ADR 0026): kept one
+   * release with its accent fill, then removed. Use a tone, or `neutral`.
+   */
+  brand: {
+    root: "bg-[var(--reddb-color-primary)] text-[var(--reddb-color-on-primary)]",
+    header: "text-[var(--reddb-color-on-primary)]",
+    title: "text-[var(--reddb-color-on-primary)]",
+    description: "text-[var(--reddb-color-on-primary)]",
+    body: "text-[var(--reddb-color-on-primary)]",
+    footer: "text-[var(--reddb-color-on-primary)]",
+  },
+} as const;
+
+const PADDING = {
+  none: { header: "p-0", body: "p-0", footer: "p-0" },
+  sm: {
+    header: "p-[var(--reddb-spatial-inset-sm)]",
+    body: "p-[var(--reddb-spatial-inset-sm)]",
+    footer: "p-[var(--reddb-spatial-inset-sm)]",
+  },
+  md: {
+    header: "p-[var(--reddb-spatial-inset-md)]",
+    body: "p-[var(--reddb-spatial-inset-md)]",
+    footer: "p-[var(--reddb-spatial-inset-md)]",
+  },
+} as const;
+
+const ACTIONS_ALIGN = {
+  start: { footer: "justify-start" },
+  center: { footer: "justify-center" },
+  end: { footer: "justify-end" },
+  between: { footer: "justify-between" },
+} as const;
+
+const ORIENTATION = {
+  vertical: {
+    root: "flex flex-col",
+    layout: "flex min-w-0 flex-1 flex-col",
+    media: "w-full",
+    content: "flex min-w-0 flex-1 flex-col",
+  },
+  horizontal: {
+    root: "",
+    layout: "flex min-w-0 flex-1 flex-col @sm/card:flex-row",
+    content: "flex min-w-0 flex-1 flex-col",
+  },
+} as const;
+
+const MEDIA_FIT = {
+  cover: { media: "[&>*]:object-cover" },
+  contain: { media: "[&>*]:object-contain" },
+} as const;
+
+const MEDIA_POSITION = {
+  center: { media: "[&>*]:object-center" },
+  top: { media: "[&>*]:object-top" },
+  bottom: { media: "[&>*]:object-bottom" },
+  start: { media: "[&>*]:object-left" },
+  end: { media: "[&>*]:object-right" },
+} as const;
+
+const MEDIA_RATIO = {
+  "16/9": { media: "aspect-video [&>*]:h-full" },
+  "4/3": { media: "aspect-[4/3] [&>*]:h-full" },
+  "1/1": { media: "aspect-square [&>*]:h-full" },
+  auto: { media: "aspect-auto [&>*]:h-auto" },
+} as const;
+
+const MEDIA_SPAN = {
+  third: {},
+  "two-fifths": {},
+  half: {},
+  background: {
+    root: "relative isolate",
+    media: "absolute inset-0 size-full",
+    content: "relative z-10",
+  },
+} as const;
+
+export const card = tv({
+  slots: {
+    root: "@container/card w-full overflow-hidden rounded-lg border",
+    layout: "",
+    media: "relative shrink-0 overflow-hidden [&>*]:block [&>*]:w-full",
+    content: "",
+    header: "flex flex-col gap-[var(--reddb-spatial-gap-sm)] border-b",
+    titleRow: "flex items-center gap-[var(--reddb-spatial-gap-sm)]",
+    icon: "shrink-0",
+    title: "text-base font-medium leading-tight",
+    description: "max-w-prose text-sm",
+    // Keep native inline flow (text + emphasis is still one sentence) while
+    // spacing direct body blocks. A flex column would split inline content.
+    body: "flow-root flex-1 space-y-[var(--reddb-spatial-layout-gap-sm)]",
+    footer: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-md)] border-t",
+  },
+  variants: {
+    variant: VARIANT,
+    raised: RAISED,
+    tone: TONE,
+    padding: PADDING,
+    actionsAlign: ACTIONS_ALIGN,
+    orientation: ORIENTATION,
+    fit: MEDIA_FIT,
+    position: MEDIA_POSITION,
+    ratio: MEDIA_RATIO,
+    span: MEDIA_SPAN,
+  },
+  compoundVariants: [
+    {
+      variant: "outline",
+      tone: "neutral",
+      class: { root: "border-muted", header: "border-muted", footer: "border-muted" },
+    },
+    {
+      variant: "outline",
+      tone: "brand",
+      class: {
+        root: "border-[var(--reddb-color-primary)]",
+        header: "border-[var(--reddb-color-primary)]",
+        footer: "border-[var(--reddb-color-primary)]",
+      },
+    },
+    {
+      variant: "outline",
+      tone: "success",
+      class: {
+        root: "border-[var(--reddb-color-feedback-success-border)]",
+        header: "border-[var(--reddb-color-feedback-success-border)]",
+        footer: "border-[var(--reddb-color-feedback-success-border)]",
+      },
+    },
+    {
+      variant: "outline",
+      tone: "warning",
+      class: {
+        root: "border-[var(--reddb-color-feedback-warning-border)]",
+        header: "border-[var(--reddb-color-feedback-warning-border)]",
+        footer: "border-[var(--reddb-color-feedback-warning-border)]",
+      },
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      class: {
+        root: "border-[var(--reddb-color-feedback-danger-border)]",
+        header: "border-[var(--reddb-color-feedback-danger-border)]",
+        footer: "border-[var(--reddb-color-feedback-danger-border)]",
+      },
+    },
+    {
+      variant: "outline",
+      tone: "info",
+      class: {
+        root: "border-[var(--reddb-color-feedback-info-border)]",
+        header: "border-[var(--reddb-color-feedback-info-border)]",
+        footer: "border-[var(--reddb-color-feedback-info-border)]",
+      },
+    },
+    {
+      raised: true,
+      tone: "neutral",
+      class: { root: "bg-elevation-raised-surface" },
+    },
+    {
+      raised: true,
+      variant: "outline",
+      tone: "neutral",
+      class: { root: "border-elevation-raised-border" },
+    },
+    {
+      orientation: "horizontal",
+      span: "third",
+      class: { media: "@sm/card:w-1/3" },
+    },
+    {
+      orientation: "horizontal",
+      span: "two-fifths",
+      class: { media: "@sm/card:w-2/5" },
+    },
+    {
+      orientation: "horizontal",
+      span: "half",
+      class: { media: "@sm/card:w-1/2" },
+    },
+  ],
+  defaultVariants: {
+    variant: "outline",
+    raised: false,
+    tone: "neutral",
+    padding: "md",
+    actionsAlign: "start",
+    orientation: "vertical",
+    fit: "cover",
+    position: "center",
+    ratio: "16/9",
+    span: "two-fifths",
+  },
+});
+
+export type CardVariants = VariantProps<typeof card>;
+export type CardVariant = NonNullable<CardVariants["variant"]>;
+export type CardTone = Tone;
+/** @deprecated `brand` is an emphasis, not a tone (ADR 0026). Removed next release. */
+export type DeprecatedCardTone = (typeof DEPRECATED_CARD_TONES)[number];
+export type CardPadding = NonNullable<CardVariants["padding"]>;
+export type CardActionsAlign = NonNullable<CardVariants["actionsAlign"]>;
+export type CardOrientation = NonNullable<CardVariants["orientation"]>;
+export type CardMediaFit = NonNullable<CardVariants["fit"]>;
+export type CardMediaPosition = NonNullable<CardVariants["position"]>;
+export type CardMediaRatio = NonNullable<CardVariants["ratio"]>;
+export type CardMediaSpan = NonNullable<CardVariants["span"]>;
+
+export const CARD_VARIANTS = Object.keys(VARIANT) as readonly CardVariant[];
+/** The tones a Card accepts: the shared vocabulary (ADR 0026). */
+export const CARD_TONES = TONES satisfies readonly CardTone[];
+/** Tone values kept for one release (ADR 0026): `brand` still draws its accent fill, and warns. */
+export const DEPRECATED_CARD_TONES = ["brand"] as const;
+export const CARD_PADDINGS = Object.keys(PADDING) as readonly CardPadding[];
+export const CARD_ACTIONS_ALIGNMENTS = Object.keys(
+  ACTIONS_ALIGN,
+) as readonly CardActionsAlign[];
+export const CARD_ORIENTATIONS = Object.keys(ORIENTATION) as readonly CardOrientation[];
+export const CARD_MEDIA_FITS = Object.keys(MEDIA_FIT) as readonly CardMediaFit[];
+export const CARD_MEDIA_POSITIONS = Object.keys(
+  MEDIA_POSITION,
+) as readonly CardMediaPosition[];
+export const CARD_MEDIA_RATIOS = Object.keys(MEDIA_RATIO) as readonly CardMediaRatio[];
+export const CARD_MEDIA_SPANS = Object.keys(MEDIA_SPAN) as readonly CardMediaSpan[];
+
+/** Numeric image ratios shared by native Card adapters. */
+export const CARD_RATIO_VALUES = { "16/9": 16 / 9, "4/3": 4 / 3, "1/1": 1 } as const;

package/vendor/ds/kits/base/src/carousel.variants.ts

@@ -0,0 +1,19 @@
+// Carousel's token-only appearance seam; Button owns control appearance and
+// the component owns rotation and slide semantics.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const carousel = tv({
+  slots: {
+    root: "relative min-w-0",
+    viewport: "overflow-hidden rounded-md",
+    slide: "min-w-0",
+    controls: [
+      "mt-[var(--reddb-spatial-gap-sm)] flex items-center justify-between",
+      "gap-[var(--reddb-spatial-gap-sm)]",
+    ].join(" "),
+    position: "text-sm text-foreground",
+    rotation: "ms-auto",
+  },
+});
+
+export type CarouselVariants = VariantProps<typeof carousel>;

package/vendor/ds/kits/base/src/checkbox.variants.ts

@@ -0,0 +1,64 @@
+// Checkbox's appearance seam. The native input keeps checked, required,
+// disabled, focus and form behavior; this seam only draws it.
+//
+// A native checkbox paints itself (`appearance: auto`), so a border, a fill or
+// an invalid edge written on it never renders. The input is therefore the
+// pointer target only — a control-height square, never under WCAG 2.2's 24px
+// (SC 2.5.8) — and draws nothing; the two spans after it draw the choice from
+// tokens and follow its state through `peer-*`: the edge, the checked or mixed
+// fill, the invalid edge, the focus ring. The drawn box is a glyph, sized by
+// the icon role, so a spacious stop gives it room instead of ballooning it.
+// The check is two token-coloured strokes, not an icon: a Base component never
+// imports a glyph (ADR 0015), exactly as the Switch's thumb is drawn. A mixed
+// (`indeterminate`) checkbox draws a dash instead, as the native one did, and
+// the dash wins over a check exactly as it does natively.
+//
+// Forced colors repaint backgrounds, so there the drawing steps aside and the
+// platform's own checkbox comes back — with its focus outline: `outline-hidden`
+// is no outline at all until forced colors, where it becomes a system-coloured
+// one.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+/**
+ * The drawn box every native choice shares: Checkbox squares it and adds the
+ * mixed fill, RadioGroup rounds it. The mixed fill stays Checkbox's alone — a
+ * radio matches `:indeterminate` whenever its group has no choice yet.
+ */
+export const choiceBox = [
+  "pointer-events-none col-start-1 row-start-1 size-[var(--reddb-spatial-icon-size-md)]",
+  "border border-control-edge bg-background",
+  "peer-checked:border-primary peer-checked:bg-primary",
+  "peer-aria-invalid:border-feedback-danger-border",
+  "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
+  "forced-colors:hidden",
+].join(" ");
+
+export const checkbox = tv({
+  slots: {
+    root: [
+      "inline-grid size-[var(--reddb-spatial-control-height-sm)] shrink-0 place-items-center",
+      "has-disabled:opacity-50",
+    ].join(" "),
+    control: [
+      "peer col-start-1 row-start-1 m-0 size-full cursor-pointer appearance-none",
+      "focus-visible:outline-hidden disabled:cursor-not-allowed forced-colors:appearance-auto",
+    ].join(" "),
+    box: [choiceBox, "rounded-sm peer-indeterminate:border-primary peer-indeterminate:bg-primary"].join(" "),
+    // A short and a long stroke at right angles, turned 45°: the box's centre
+    // sits a tenth of the glyph below the check's, so it rises by as much.
+    // Mixed, the long stroke alone lies flat across the middle: a dash.
+    mark: [
+      "pointer-events-none invisible col-start-1 row-start-1 peer-checked:visible",
+      "aspect-[1/2] w-[calc(var(--reddb-spatial-icon-size-md)*0.3)]",
+      "-translate-y-[calc(var(--reddb-spatial-icon-size-md)*0.1)] rotate-45",
+      "border-r-2 border-b-2 border-on-primary",
+      "peer-indeterminate:visible peer-indeterminate:aspect-auto peer-indeterminate:h-0",
+      "peer-indeterminate:w-[calc(var(--reddb-spatial-icon-size-md)*0.5)]",
+      "peer-indeterminate:translate-y-0 peer-indeterminate:rotate-0 peer-indeterminate:border-r-0",
+      "forced-colors:hidden",
+    ].join(" "),
+  },
+});
+
+export type CheckboxVariants = VariantProps<typeof checkbox>;

package/vendor/ds/kits/base/src/code-block.variants.ts

@@ -0,0 +1,58 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const codeBlock = tv({
+  slots: {
+    // The root does not clip: an overflowing pre draws the canonical focus
+    // ring 2px outside itself (wave 5A), and clipping would cut it off.
+    root: "min-w-0 [contain:inline-size] rounded-lg border border-muted bg-transparent text-foreground",
+    toolbar:
+      "flex items-center justify-between gap-[var(--reddb-spatial-gap-md)] border-b border-muted px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+    language: "min-w-0 truncate text-sm text-ink-muted",
+    // Its own panel is the root: the pre states no edge or ground, so a
+    // document around it (Prose) cannot add a second one.
+    // While it overflows it is a focusable region (wave 5A) with the ink ring.
+    // Its bottom corners follow the panel's, so its scrollbar stays inside.
+    pre: [
+      "m-0 overflow-x-auto rounded-t-none rounded-b-lg border-0 bg-transparent p-[var(--reddb-spatial-inset-md)]",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    ].join(" "),
+    code: "block whitespace-pre font-mono text-sm leading-relaxed text-foreground",
+  },
+});
+
+export type CodeBlockVariants = VariantProps<typeof codeBlock>;
+
+/** One span of highlighted source: its exact text and the grammar's kind for it. */
+export interface CodeToken {
+  /** Grammar-owned kind; `keyword`, `string`, `number` and `comment` have a role, the rest read as text. */
+  kind: string;
+  /** Exact source text of the span; the spans concatenate back to the code. */
+  value: string;
+}
+
+/**
+ * A synchronous tokenizer. It runs wherever the CodeBlock renders — on the
+ * server too — so the highlighted spans are in the prerendered HTML and
+ * hydration adopts them instead of repainting the block. The Data Kit's
+ * `CodeFieldGrammar` satisfies it, so one grammar highlights both.
+ */
+export interface CodeTokenizer {
+  tokenize(code: string): readonly CodeToken[];
+}
+
+/** Token kinds with a highlight role; every other kind keeps the block's foreground. */
+export const CODE_TOKEN_CLASSES: Readonly<Record<string, string>> = {
+  keyword: "text-primary-text",
+  string: "text-[var(--reddb-color-feedback-success-foreground)]",
+  number: "text-[var(--reddb-color-feedback-info-foreground)]",
+  comment: "text-ink-muted italic",
+};
+
+/** The tokens, or the whole code as one text token when they would not reproduce it. */
+export function codeTokens(code: string, tokenizer?: CodeTokenizer): readonly CodeToken[] {
+  if (!tokenizer) return [{ kind: "text", value: code }];
+  const tokens = tokenizer.tokenize(code);
+  // A grammar that drops or rewrites text would show something other than what
+  // the copy button copies; the exact source wins.
+  return tokens.map((token) => token.value).join("") === code ? tokens : [{ kind: "text", value: code }];
+}

package/vendor/ds/kits/base/src/collapsible.style.ts

@@ -0,0 +1,15 @@
+// Bits UI's Collapsible measures its content height in the browser; during
+// SSR the measurement does not exist yet, so the style it hands the content
+// element carries `--bits-collapsible-content-height: undefined`. Serving the
+// literal word "undefined" is a rendering defect (and the showcase's
+// renders-cleanly contract rejects it), so the declarations without a real
+// value are dropped before the spread reaches the DOM. The browser-side
+// measurement re-applies them after hydration.
+export function sanitizeCollapsibleStyle(style: unknown): string | undefined {
+  if (typeof style !== "string" || style.length === 0) return undefined;
+  const kept = style
+    .split(";")
+    .map((declaration) => declaration.trim())
+    .filter((declaration) => declaration.length > 0 && !/:\s*undefined$/.test(declaration));
+  return kept.length > 0 ? kept.join("; ") : undefined;
+}

package/vendor/ds/kits/base/src/combobox.variants.ts

@@ -0,0 +1,62 @@
+// Combobox's caller-owned options and token-only appearance seam.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export interface ComboboxOption {
+  /** Submitted value for the option. */
+  value: string;
+  /** Visible text and the text matched by typeahead filtering. */
+  label: string;
+  /** Removes only this option from interaction and selection. */
+  disabled?: boolean;
+}
+
+export const combobox = tv({
+  slots: {
+    root: "relative min-w-0",
+    control: "relative min-w-0",
+    input: "",
+    trigger: [
+      "absolute inset-e-0 top-0 inline-flex items-center justify-center text-foreground",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+    ].join(" "),
+    content: [
+      "max-h-[min(70dvh,var(--bits-combobox-content-available-height))] w-[var(--bits-combobox-anchor-width)] overflow-y-auto",
+      "p-[var(--reddb-spatial-inset-sm)]",
+    ].join(" "),
+    item: [
+      "flex cursor-default items-center justify-between rounded-md",
+      "min-h-[var(--reddb-spatial-control-height-md)] gap-[var(--reddb-spatial-gap-sm)]",
+      "px-[var(--reddb-spatial-inset-md)] text-sm",
+      // Highlight and selection are neutral: the Brand red marks the primary
+      // action, never the option under the cursor (DESIGN.md, "Interactive states").
+      "text-foreground data-[highlighted]:bg-foreground/10 data-[selected]:font-medium",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    ].join(" "),
+    indicator: "font-medium",
+    empty: "block px-[var(--reddb-spatial-inset-sm)] py-[var(--reddb-spatial-inset-sm)] text-sm text-ink-muted",
+  },
+  variants: {
+    // The input's clearance and the trigger's square are one control height,
+    // so the trigger sits flush whichever size the field is.
+    size: {
+      sm: {
+        input: "pe-[var(--reddb-spatial-control-height-sm)]",
+        trigger: "size-[var(--reddb-spatial-control-height-sm)]",
+      },
+      md: {
+        input: "pe-[var(--reddb-spatial-control-height-md)]",
+        trigger: "size-[var(--reddb-spatial-control-height-md)]",
+      },
+      lg: {
+        input: "pe-[var(--reddb-spatial-control-height-lg)]",
+        trigger: "size-[var(--reddb-spatial-control-height-lg)]",
+      },
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export type ComboboxVariants = VariantProps<typeof combobox>;
+export type ComboboxSize = NonNullable<ComboboxVariants["size"]>;

package/vendor/ds/kits/base/src/container.variants.ts

@@ -0,0 +1,27 @@
+// Container's public appearance seam. Its width is structural and DS-named
+// (ADR 0021): `prose` is the reading measure, `content` a single column,
+// `wide` the page frame (80rem, the former `max-w-7xl` and the default) and
+// `full` no limit. Only the inline inset belongs to Density, so that role
+// remains live in every scope.
+//
+// It declares no size container itself: containment would make it the
+// containing block of every fixed-position descendant a page places in it.
+// Components that step with width declare their own (ADR 0021).
+import { tv, type VariantProps } from "tailwind-variants";
+
+const SIZE = {
+  prose: "max-w-prose",
+  content: "max-w-content",
+  wide: "max-w-wide",
+  full: "max-w-none",
+} as const;
+
+export const container = tv({
+  base: "mx-auto box-border w-full px-[var(--reddb-spatial-inset-md)]",
+  variants: { size: SIZE },
+  defaultVariants: { size: "wide" },
+});
+
+export type ContainerVariants = VariantProps<typeof container>;
+export type ContainerSize = NonNullable<ContainerVariants["size"]>;
+export const CONTAINER_SIZES = Object.keys(SIZE) as readonly ContainerSize[];

package/vendor/ds/kits/base/src/content-mask.variants.ts

@@ -0,0 +1,57 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** The complete daisyUI Mask shape and half-mask vocabulary. */
+export const CONTENT_MASK_SHAPES = [
+  "squircle",
+  "heart",
+  "hexagon",
+  "hexagon-2",
+  "decagon",
+  "pentagon",
+  "diamond",
+  "square",
+  "circle",
+  "star",
+  "star-2",
+  "triangle",
+  "triangle-2",
+  "triangle-3",
+  "triangle-4",
+  "half-1",
+  "half-2",
+] as const;
+
+export type ContentMaskShape = (typeof CONTENT_MASK_SHAPES)[number];
+
+/** Structural clipping geometry. It names no appearance token or axis. */
+export const CONTENT_MASK_CLIP_PATHS: Readonly<Record<ContentMaskShape, string>> = {
+  squircle:
+    "polygon(50% 0%, 80% 5%, 95% 20%, 100% 50%, 95% 80%, 80% 95%, 50% 100%, 20% 95%, 5% 80%, 0% 50%, 5% 20%, 20% 5%)",
+  heart:
+    "polygon(50% 100%, 5% 55%, 0% 35%, 5% 15%, 20% 5%, 35% 5%, 50% 20%, 65% 5%, 80% 5%, 95% 15%, 100% 35%, 95% 55%)",
+  hexagon: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
+  "hexagon-2": "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
+  decagon:
+    "polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%)",
+  pentagon: "polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)",
+  diamond: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+  square: "inset(0%)",
+  circle: "circle(50%)",
+  star:
+    "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%)",
+  "star-2":
+    "polygon(50% 0%, 64% 29%, 98% 35%, 73% 59%, 79% 94%, 50% 78%, 21% 94%, 27% 59%, 2% 35%, 36% 29%)",
+  triangle: "polygon(50% 0%, 100% 100%, 0% 100%)",
+  "triangle-2": "polygon(0% 0%, 100% 0%, 50% 100%)",
+  "triangle-3": "polygon(0% 50%, 100% 0%, 100% 100%)",
+  "triangle-4": "polygon(0% 0%, 100% 50%, 0% 100%)",
+  "half-1": "inset(0% 50% 0% 0%)",
+  "half-2": "inset(0% 0% 0% 50%)",
+};
+
+/** Extension seam for the neutral clipping boundary. */
+export const contentMask = tv({
+  base: "inline-grid",
+});
+
+export type ContentMaskVariants = VariantProps<typeof contentMask>;

package/vendor/ds/kits/base/src/control-group.variants.ts

@@ -0,0 +1,22 @@
+// ControlGroup's public appearance seam. Its gap resolves through the local
+// Density scope; orientation changes arrangement, never an appearance axis.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const CONTROL_GROUP_ORIENTATIONS = ["horizontal", "vertical"] as const;
+export type ControlGroupOrientation = (typeof CONTROL_GROUP_ORIENTATIONS)[number];
+
+export const controlGroup = tv({
+  base: "flex gap-[var(--reddb-spatial-gap-sm)]",
+  variants: {
+    orientation: {
+      horizontal: "flex-row flex-wrap items-center",
+      vertical: "flex-col items-stretch",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export type ControlGroupVariants = VariantProps<typeof controlGroup>;