@jongh/ui 1.6.5 → 2.20260905.1

package/dist/index.js

@@ -0,0 +1,93 @@
+"use client";
+import { t as e } from "./chunks/component-accordion-fyrDP4PS.js";
+import { t } from "./chunks/component-avatar-Cl7qxXL7.js";
+import { t as n } from "./chunks/component-badge-BqDGL-KR.js";
+import { t as r } from "./chunks/component-box-BVJJ_2Ye.js";
+import { t as i } from "./chunks/component-button-6iooYVkM.js";
+import { t as a } from "./chunks/component-calendar-BIBA_BgQ.js";
+import { t as o } from "./chunks/component-center-rifwb_-x.js";
+import { t as s } from "./chunks/component-checkbox-KSwDeqdV.js";
+import { t as c } from "./chunks/component-dialog-xLex6FJh.js";
+import { t as l } from "./chunks/component-grid-aWgGm3Ad.js";
+import { t as u } from "./chunks/component-h-stack-Cj62v71l.js";
+import { t as d } from "./chunks/component-select-B35mHD7A.js";
+import { t as f } from "./chunks/component-slider-CPcl-o95.js";
+import { t as p } from "./chunks/component-tabs-2-w8TPID.js";
+import { t as m } from "./chunks/component-textfield-CaSHslMS.js";
+import { t as h } from "./chunks/component-v-stack-BzMHYpjP.js";
+import { createElement as g, forwardRef as _ } from "react";
+//#region ../../node_modules/.pnpm/lucide-react@0.475.0_@types+react@18.3.28_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var v = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), b = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, x = _(({ color: e = "currentColor", size: t = 24, strokeWidth: n = 2, absoluteStrokeWidth: r, className: i = "", children: a, iconNode: o, ...s }, c) => g("svg", {
+	ref: c,
+	...b,
+	width: t,
+	height: t,
+	stroke: e,
+	strokeWidth: r ? Number(n) * 24 / Number(t) : n,
+	className: y("lucide", i),
+	...s
+}, [...o.map(([e, t]) => g(e, t)), ...Array.isArray(a) ? a : [a]])), S = (e, t) => {
+	let n = _(({ className: n, ...r }, i) => g(x, {
+		ref: i,
+		iconNode: t,
+		className: y(`lucide-${v(e)}`, n),
+		...r
+	}));
+	return n.displayName = `${e}`, n;
+}, C = S("ChevronDown", [["path", {
+	d: "m6 9 6 6 6-6",
+	key: "qrunsl"
+}]]), w = S("ChevronLeft", [["path", {
+	d: "m15 18-6-6 6-6",
+	key: "1wnfg3"
+}]]), T = S("ChevronRight", [["path", {
+	d: "m9 18 6-6-6-6",
+	key: "mthhwq"
+}]]), E = S("X", [["path", {
+	d: "M18 6 6 18",
+	key: "1bl5f8"
+}], ["path", {
+	d: "m6 6 12 12",
+	key: "d8bk6v"
+}]]), D = {
+	sm: "480px",
+	md: "768px",
+	lg: "1280px",
+	xl: "1440px"
+}, O = /* @__PURE__ */ "color.display.flex-direction.gap.row-gap.column-gap.align-items.justify-content.justify-items.flex-wrap.flex-grow.flex-shrink.width.min-width.max-width.height.min-height.max-height.padding.padding-x.padding-y.padding-top.padding-right.padding-bottom.padding-left.margin.margin-x.margin-y.margin-top.margin-right.margin-bottom.margin-left.grid-template-columns.grid-template-rows.grid-auto-flow.grid-auto-columns.grid-auto-rows".split("."), k = ["base", ...Object.keys(D)], A = Object.fromEntries(O.flatMap((e) => k.map((t, n) => [`--layout-${e}-${t}`, n === 0 ? "initial" : `var(--layout-${e}-${k[n - 1]}, initial)`]))), j = (e) => Object.fromEntries(O.map((t) => [`--layout-${t}`, `var(--layout-${t}-${e}, initial)`]));
+({
+	...A,
+	...j("base")
+}), { ...Object.fromEntries(Object.keys(D).map((e) => [`_${e}`, j(e)])) };
+var M = (e) => e === "full" ? "100%" : e, N = (e) => {
+	if (e === "0") return 0;
+	if (typeof e != "string" || !/^-?\d+(?:\.\d+)?$/.test(e)) return e;
+	let t = e.startsWith("-"), n = `var(--spacing-${e.replace("-", "").replaceAll(".", "\\.")})`;
+	return t ? `calc(${n} * -1)` : n;
+}, P = (e) => {
+	let t = e, n = {}, r = (e, t, r = (e) => e) => {
+		if (t === void 0) return;
+		if (typeof t != "object" || !t || Array.isArray(t)) {
+			n[`--layout-${e}-base`] = r(t);
+			return;
+		}
+		let i = t;
+		for (let t of k) {
+			let a = i[t];
+			a !== void 0 && (n[`--layout-${e}-${t}`] = r(a));
+		}
+	};
+	return r("display", t.display), r("color", t.color, (e) => typeof e == "string" ? `var(--colors-${e.replaceAll(".", "-")})` : e), r("flex-direction", t.flexDirection), r("gap", t.gap, N), r("row-gap", t.rowGap, N), r("column-gap", t.columnGap, N), r("align-items", t.alignItems), r("justify-content", t.justifyContent), r("justify-items", t.justifyItems), r("flex-wrap", t.flexWrap), r("flex-grow", t.flexGrow), r("flex-shrink", t.flexShrink), r("width", t.width, M), r("min-width", t.minWidth, M), r("max-width", t.maxWidth, M), r("height", t.height, M), r("min-height", t.minHeight, M), r("max-height", t.maxHeight, M), r("padding", t.padding ?? t.p, N), r("padding-x", t.paddingX ?? t.px, N), r("padding-y", t.paddingY ?? t.py, N), r("padding-top", t.paddingTop ?? t.pt, N), r("padding-right", t.paddingRight ?? t.pr, N), r("padding-bottom", t.paddingBottom ?? t.pb, N), r("padding-left", t.paddingLeft ?? t.pl, N), r("margin", t.margin ?? t.m, N), r("margin-x", t.marginX ?? t.mx, N), r("margin-y", t.marginY ?? t.my, N), r("margin-top", t.marginTop ?? t.mt, N), r("margin-right", t.marginRight ?? t.mr, N), r("margin-bottom", t.marginBottom ?? t.mb, N), r("margin-left", t.marginLeft ?? t.ml, N), r("grid-template-columns", t.gridTemplateColumns), r("grid-template-rows", t.gridTemplateRows), r("grid-auto-flow", t.gridAutoFlow), r("grid-auto-columns", t.gridAutoColumns), r("grid-auto-rows", t.gridAutoRows), n;
+};
+//#endregion
+export { e as Accordion, t as Avatar, n as Badge, r as Box, i as Button, a as Calendar, o as Center, s as Checkbox, c as Dialog, l as Grid, u as HStack, d as Select, f as Slider, p as Tabs, m as TextField, h as VStack, C as a, w as i, E as n, T as r, P as t };

package/dist/purple.css

@@ -0,0 +1,155 @@
+@layer tokens {
+[data-color-theme=purple] {
+    --colors-fg-brand: var(--colors-palette-light-purple-600);
+    --colors-fg-brand-contrast: var(--colors-palette-light-purple-700);
+    --colors-fg-critical: var(--colors-palette-light-red-700);
+    --colors-fg-critical-contrast: var(--colors-palette-light-red-900);
+    --colors-fg-disabled: var(--colors-palette-light-gray-500);
+    --colors-fg-informative: var(--colors-palette-light-blue-700);
+    --colors-fg-informative-contrast: var(--colors-palette-light-blue-900);
+    --colors-fg-neutral: var(--colors-palette-light-gray-1000);
+    --colors-fg-neutral-inverted: var(--colors-palette-light-gray-00);
+    --colors-fg-neutral-muted: var(--colors-palette-light-gray-800);
+    --colors-fg-neutral-subtle: var(--colors-palette-light-gray-700);
+    --colors-fg-placeholder: var(--colors-palette-light-gray-600);
+    --colors-fg-positive: var(--colors-palette-light-green-700);
+    --colors-fg-positive-contrast: var(--colors-palette-light-green-900);
+    --colors-fg-warning: var(--colors-palette-light-yellow-700);
+    --colors-fg-warning-contrast: var(--colors-palette-light-yellow-900);
+    --colors-bg-brand-solid: var(--colors-palette-light-purple-600);
+    --colors-bg-brand-solid-pressed: var(--colors-palette-light-purple-700);
+    --colors-bg-brand-weak: var(--colors-palette-light-purple-100);
+    --colors-bg-brand-weak-pressed: var(--colors-palette-light-purple-200);
+    --colors-bg-critical-solid: var(--colors-palette-light-red-700);
+    --colors-bg-critical-solid-pressed: var(--colors-palette-light-red-800);
+    --colors-bg-critical-weak: var(--colors-palette-light-red-100);
+    --colors-bg-critical-weak-pressed: var(--colors-palette-light-red-200);
+    --colors-bg-disabled: var(--colors-palette-light-gray-200);
+    --colors-bg-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-bg-informative-solid-pressed: var(--colors-palette-light-blue-800);
+    --colors-bg-informative-weak: var(--colors-palette-light-blue-100);
+    --colors-bg-informative-weak-pressed: var(--colors-palette-light-blue-200);
+    --colors-bg-layer: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-basement: var(--colors-palette-light-gray-200);
+    --colors-bg-layer-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-layer-floating: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-floating-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-magic-weak: #f9f2ee;
+    --colors-bg-neutral-inverted: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-inverted-pressed: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid: var(--colors-palette-light-gray-1000);
+    --colors-bg-neutral-solid-muted: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-weak: var(--colors-palette-light-gray-200);
+    --colors-bg-neutral-weak-alpha: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-neutral-weak-pressed: var(--colors-palette-light-gray-300);
+    --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+    --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+    --colors-bg-positive-solid: var(--colors-palette-light-green-700);
+    --colors-bg-positive-solid-pressed: var(--colors-palette-light-green-800);
+    --colors-bg-positive-weak: var(--colors-palette-light-green-100);
+    --colors-bg-positive-weak-pressed: var(--colors-palette-light-green-200);
+    --colors-bg-transparent: #00000000;
+    --colors-bg-transparent-pressed: var(--colors-palette-static-black-alpha-100);
+    --colors-bg-transparent-selected: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-transparent-selected-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-warning-solid: var(--colors-palette-light-yellow-300);
+    --colors-bg-warning-solid-pressed: var(--colors-palette-light-yellow-400);
+    --colors-bg-warning-weak: var(--colors-palette-light-yellow-100);
+    --colors-bg-warning-weak-pressed: var(--colors-palette-light-yellow-200);
+    --colors-stroke-brand-solid: var(--colors-palette-light-purple-700);
+    --colors-stroke-brand-weak: var(--colors-palette-light-purple-300);
+    --colors-stroke-critical-solid: var(--colors-palette-light-red-700);
+    --colors-stroke-critical-weak: var(--colors-palette-light-red-300);
+    --colors-stroke-focus-ring: var(--colors-palette-light-blue-600);
+    --colors-stroke-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-stroke-informative-weak: var(--colors-palette-light-blue-300);
+    --colors-stroke-neutral-contrast: var(--colors-palette-light-gray-1000);
+    --colors-stroke-neutral-muted: var(--colors-palette-static-black-alpha-300);
+    --colors-stroke-neutral-solid: var(--colors-palette-light-gray-800);
+    --colors-stroke-neutral-subtle: var(--colors-palette-static-black-alpha-200);
+    --colors-stroke-neutral-weak: var(--colors-palette-light-gray-400);
+    --colors-stroke-positive-solid: var(--colors-palette-light-green-700);
+    --colors-stroke-positive-weak: var(--colors-palette-light-green-300);
+    --colors-stroke-warning-solid: var(--colors-palette-light-yellow-700);
+    --colors-stroke-warning-weak: var(--colors-palette-light-yellow-300)
+}
+
+[data-color-theme=purple].dark {
+      --colors-fg-brand: var(--colors-palette-dark-purple-700);
+      --colors-fg-brand-contrast: var(--colors-palette-dark-purple-700);
+      --colors-fg-critical: var(--colors-palette-dark-red-700);
+      --colors-fg-critical-contrast: var(--colors-palette-dark-red-900);
+      --colors-fg-disabled: var(--colors-palette-dark-gray-500);
+      --colors-fg-informative: var(--colors-palette-dark-blue-700);
+      --colors-fg-informative-contrast: var(--colors-palette-dark-blue-900);
+      --colors-fg-neutral: var(--colors-palette-dark-gray-1000);
+      --colors-fg-neutral-inverted: var(--colors-palette-dark-gray-100);
+      --colors-fg-neutral-muted: var(--colors-palette-dark-gray-800);
+      --colors-fg-neutral-subtle: var(--colors-palette-dark-gray-700);
+      --colors-fg-placeholder: var(--colors-palette-dark-gray-600);
+      --colors-fg-positive: var(--colors-palette-dark-green-700);
+      --colors-fg-positive-contrast: var(--colors-palette-dark-green-900);
+      --colors-fg-warning: var(--colors-palette-dark-yellow-700);
+      --colors-fg-warning-contrast: var(--colors-palette-dark-yellow-900);
+      --colors-bg-brand-solid: var(--colors-palette-dark-purple-700);
+      --colors-bg-brand-solid-pressed: var(--colors-palette-dark-purple-800);
+      --colors-bg-brand-weak: var(--colors-palette-dark-purple-100);
+      --colors-bg-brand-weak-pressed: var(--colors-palette-dark-purple-200);
+      --colors-bg-critical-solid: var(--colors-palette-dark-red-600);
+      --colors-bg-critical-solid-pressed: var(--colors-palette-dark-red-700);
+      --colors-bg-critical-weak: var(--colors-palette-dark-red-100);
+      --colors-bg-critical-weak-pressed: var(--colors-palette-dark-red-200);
+      --colors-bg-disabled: var(--colors-palette-dark-gray-300);
+      --colors-bg-informative-solid: var(--colors-palette-dark-blue-600);
+      --colors-bg-informative-solid-pressed: var(--colors-palette-dark-blue-700);
+      --colors-bg-informative-weak: var(--colors-palette-dark-blue-100);
+      --colors-bg-informative-weak-pressed: var(--colors-palette-dark-blue-200);
+      --colors-bg-layer: var(--colors-palette-dark-gray-100);
+      --colors-bg-layer-basement: var(--colors-palette-dark-gray-00);
+      --colors-bg-layer-pressed: var(--colors-palette-dark-gray-300);
+      --colors-bg-layer-floating: var(--colors-palette-dark-gray-200);
+      --colors-bg-layer-floating-pressed: var(--colors-palette-dark-gray-300);
+      --colors-bg-magic-weak: #201f1f;
+      --colors-bg-neutral-inverted: var(--colors-palette-dark-gray-1000);
+      --colors-bg-neutral-inverted-pressed: var(--colors-palette-dark-gray-800);
+      --colors-bg-neutral-solid: var(--colors-palette-dark-gray-300);
+      --colors-bg-neutral-solid-muted: var(--colors-palette-dark-gray-400);
+      --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-dark-gray-500);
+      --colors-bg-neutral-weak: var(--colors-palette-dark-gray-300);
+      --colors-bg-neutral-weak-alpha: var(--colors-palette-static-white-alpha-200);
+      --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-white-alpha-300);
+      --colors-bg-neutral-weak-pressed: var(--colors-palette-dark-gray-400);
+      --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+      --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+      --colors-bg-positive-solid: var(--colors-palette-dark-green-500);
+      --colors-bg-positive-solid-pressed: var(--colors-palette-dark-green-600);
+      --colors-bg-positive-weak: var(--colors-palette-dark-green-100);
+      --colors-bg-positive-weak-pressed: var(--colors-palette-dark-green-200);
+      --colors-bg-transparent: #ffffff00;
+      --colors-bg-transparent-pressed: var(--colors-palette-static-white-alpha-50);
+      --colors-bg-transparent-selected: var(--colors-palette-static-white-alpha-100);
+      --colors-bg-transparent-selected-pressed: var(--colors-palette-static-white-alpha-200);
+      --colors-bg-warning-solid: var(--colors-palette-dark-yellow-800);
+      --colors-bg-warning-solid-pressed: var(--colors-palette-dark-yellow-900);
+      --colors-bg-warning-weak: var(--colors-palette-dark-yellow-100);
+      --colors-bg-warning-weak-pressed: var(--colors-palette-dark-yellow-200);
+      --colors-stroke-brand-solid: var(--colors-palette-dark-purple-700);
+      --colors-stroke-brand-weak: var(--colors-palette-dark-purple-300);
+      --colors-stroke-critical-solid: var(--colors-palette-dark-red-700);
+      --colors-stroke-critical-weak: var(--colors-palette-dark-red-300);
+      --colors-stroke-focus-ring: var(--colors-palette-dark-blue-600);
+      --colors-stroke-informative-solid: var(--colors-palette-dark-blue-700);
+      --colors-stroke-informative-weak: var(--colors-palette-dark-blue-300);
+      --colors-stroke-neutral-contrast: var(--colors-palette-dark-gray-1000);
+      --colors-stroke-neutral-muted: var(--colors-palette-static-white-alpha-100);
+      --colors-stroke-neutral-solid: var(--colors-palette-dark-gray-800);
+      --colors-stroke-neutral-subtle: var(--colors-palette-static-white-alpha-50);
+      --colors-stroke-neutral-weak: var(--colors-palette-dark-gray-400);
+      --colors-stroke-positive-solid: var(--colors-palette-dark-green-700);
+      --colors-stroke-positive-weak: var(--colors-palette-dark-green-300);
+      --colors-stroke-warning-solid: var(--colors-palette-dark-yellow-700);
+      --colors-stroke-warning-weak: var(--colors-palette-dark-yellow-300)
+        }
+}

package/dist/recipes/accordion-recipe.css

@@ -0,0 +1,118 @@
+@layer recipes.slots {
+  @layer _base {
+
+    .accordion__header,.accordion__trigger {
+      display: flex;
+}
+
+    .accordion__trigger {
+      flex: 1 1 0%;
+      padding-inline: var(--spacing-1);
+      padding-block: var(--spacing-2);
+      align-items: center;
+      color: var(--colors-fg-neutral);
+      cursor: pointer;
+      justify-content: space-between;
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-bold);
+      --transition-prop: color,background-color;
+      transition-property: color,background-color;
+      --transition-duration: var(--durations-d3);
+      transition-duration: var(--durations-d3);
+      --transition-easing: var(--easings-easing);
+      transition-timing-function: var(--easings-easing);
+}
+
+    .accordion__trigger > svg {
+      transition-property: var(--transition-prop, transform);
+      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+      transition-duration: var(--transition-duration, 150ms);
+      color: var(--colors-fg-neutral-subtle);
+      flex-shrink: 0;
+      height: 1rem;
+      width: 1rem;
+}
+
+    .accordion__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: not-allowed;
+}
+
+    .accordion__trigger[data-state=open] > svg {
+      transform: rotate(180deg);
+      --transition-duration: var(--durations-d4);
+      transition-duration: var(--durations-d4);
+      --transition-easing: var(--easings-enter);
+      transition-timing-function: var(--easings-enter);
+}
+
+    .accordion__trigger[data-state=closed] > svg {
+      --transition-duration: var(--durations-d3);
+      transition-duration: var(--durations-d3);
+      --transition-easing: var(--easings-exit);
+      transition-timing-function: var(--easings-exit);
+}
+
+    .accordion__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--colors-stroke-focus-ring);
+      outline-offset: var(--spacing-0\.5);
+}
+
+    .accordion__content {
+      overflow: hidden;
+      color: var(--colors-fg-neutral-subtle);
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-regular);
+}
+
+    .accordion__content[data-state=closed] {
+      animation-duration: var(--durations-d3);
+      animation-name: accordion-up_radix;
+      animation-timing-function: var(--easings-exit);
+}
+
+    .accordion__content[data-state=open] {
+      animation-duration: var(--durations-d4);
+      animation-name: accordion-down_radix;
+      animation-timing-function: var(--easings-enter);
+}
+
+    .accordion__contentWrapper {
+      padding-inline: var(--spacing-1);
+      padding-block: var(--spacing-1);
+}
+}
+
+  .accordion__item--variant_outline {
+    border-color: var(--colors-stroke-neutral-subtle);
+    border-bottom-width: 1px;
+}
+
+  .accordion__trigger--variant_outline:is(:active, [data-active]) {
+    background: var(--colors-bg-transparent-pressed);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .accordion__trigger--variant_outline:is(:hover, [data-hover]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+}
+
+  .accordion__item--variant_subtle,.accordion__header--variant_subtle,.accordion__trigger--variant_subtle {
+    border-radius: var(--radii-r1_5);
+}
+
+  .accordion__trigger--variant_subtle:is(:active, [data-active]) {
+    background: var(--colors-bg-transparent-pressed);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .accordion__trigger--variant_subtle:is(:hover, [data-hover]) {
+      background: var(--colors-bg-transparent-pressed);
+      border-radius: var(--radii-r1_5);
+}
+}
+}

package/dist/recipes/avatar-recipe.css

@@ -0,0 +1,44 @@
+@layer recipes.slots {
+  @layer _base {
+    .avatar__root {
+      overflow: hidden;
+      border-radius: var(--radii-full);
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      height: 3rem;
+      width: 3rem;
+}
+
+    .avatar__root::after {
+      inset: 0;
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-stroke-neutral-subtle);
+      border-radius: var(--radii-full);
+      content: "";
+      position: absolute;
+      pointer-events: none;
+}
+
+    .avatar__image {
+      display: block;
+      aspect-ratio: square;
+      object-fit: cover;
+}
+
+    .avatar__image,.avatar__fallback {
+      height: 100%;
+      width: 100%;
+}
+
+    .avatar__fallback {
+      background: var(--colors-bg-neutral-weak);
+      border-radius: var(--radii-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral);
+}
+    }
+}

package/dist/recipes/badge-recipe.css

@@ -0,0 +1,47 @@
+@layer recipes.slots {
+  @layer _base {
+    .badge__root {
+      align-items: center;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex-shrink: 0;
+      text-align: start;
+      -webkit-user-select: none;
+      user-select: none;
+}
+
+    .badge__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+}
+
+  .badge__root--size_sm {
+    border-radius: var(--radii-r1);
+    padding-block: var(--spacing-0\.5);
+    padding-inline: var(--spacing-1\.5);
+    font-size: var(--font-sizes-t1);
+    line-height: var(--line-heights-t1);
+    font-weight: var(--font-weights-medium);
+    max-width: 6.75rem;
+    min-height: 1.25rem;
+}
+
+  .badge__root--size_md {
+    border-radius: var(--radii-r1_5);
+    padding-block: var(--spacing-1);
+    padding-inline: var(--spacing-2);
+    font-size: var(--font-sizes-t2);
+    line-height: var(--line-heights-t2);
+    font-weight: var(--font-weights-medium);
+    max-width: 7.5rem;
+    min-height: 1.5rem;
+}
+
+  .badge__root--variant_outline {
+    border-style: solid;
+    border-width: 1px;
+    font-weight: var(--font-weights-bold);
+}
+}

package/dist/recipes/button-recipe.css

@@ -0,0 +1,153 @@
+@layer recipes {
+  @layer _base {
+    .button {
+      gap: var(--spacing-1);
+      border-radius: var(--radii-r1_5);
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      font-size: var(--font-sizes-t6);
+      line-height: var(--line-heights-t6);
+      font-weight: var(--font-weights-medium);
+      --transition-duration: var(--durations-pressed-scale);
+      transition-duration: var(--durations-pressed-scale);
+      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      --transition-easing: var(--easings-pressed-scale);
+      transition-timing-function: var(--easings-pressed-scale);
+      white-space: nowrap;
+      min-height: 2.25rem;
+}
+
+    .button,.button svg {
+      flex-shrink: 0;
+}
+
+    .button:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .button:enabled:is(:active, [data-active]) {
+      transform: scale(0.97);
+}
+}
+
+  .button--size_md {
+    padding-inline: var(--spacing-4);
+    padding-block: var(--spacing-2);
+    height: 2.5rem;
+}
+
+  .button--size_md svg {
+    height: 1rem;
+    width: 1rem;
+}
+
+  .button--variant_primary {
+    background: var(--colors-bg-brand-solid);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_primary:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-brand-solid-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_primary:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-brand-solid-pressed);
+}
+}
+
+  .button--size_sm {
+    padding-inline: var(--spacing-3);
+    padding-block: var(--spacing-1\.5);
+    font-size: var(--font-sizes-t2);
+    line-height: var(--line-heights-t2);
+    font-weight: var(--font-weights-bold);
+    height: 2.25rem;
+}
+
+  .button--size_sm svg {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+  .button--size_lg {
+    padding-inline: var(--spacing-5);
+    padding-block: var(--spacing-2);
+    height: 2.75rem;
+}
+
+  .button--size_lg svg {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+  .button--variant_destructive {
+    background: var(--colors-bg-critical-solid);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_destructive:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-critical-solid-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_destructive:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-critical-solid-pressed);
+}
+}
+
+  .button--variant_link {
+    color: var(--colors-fg-brand);
+    text-underline-offset: 2px;
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_link:enabled:is(:hover, [data-hover]) {
+      text-decoration: underline;
+}
+}
+
+  .button--variant_outline {
+    background: var(--colors-bg-layer);
+    border: 1px_solid;
+    border-color: var(--colors-stroke-neutral-weak);
+    color: var(--colors-fg-neutral);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_outline:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-neutral-weak-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_outline:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-neutral-weak-pressed);
+}
+}
+
+  .button--variant_secondary {
+    background: var(--colors-bg-neutral-solid-muted);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_secondary:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-neutral-solid-muted-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_secondary:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-neutral-solid-muted-pressed);
+}
+}
+}