@agentero/design-system 0.8.4 → 0.9.0

package/src/data-table/table.js

@@ -0,0 +1,182 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { IconKeyboardArrowDown as n } from "./icons.js";
+import { createContext as r, use as i } from "react";
+import { tv as a } from "tailwind-variants";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/data-table/table.tsx
+var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = a({
+	slots: {
+		root: ["flex min-h-0 flex-1 flex-col overflow-hidden", "[--table-cell-padding-inline:1rem] [--table-cell-padding-inline-ends:1.5rem]"],
+		scroll: "min-h-0 flex-1 overflow-auto focus-visible:outline-none",
+		table: "w-full has-[[data-slot=table-empty-state]]:h-full"
+	},
+	variants: {
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		embed: { true: { root: "[--table-cell-padding-inline-ends:1rem]" } },
+		sticky: {
+			header: {},
+			headerAndFooter: {}
+		}
+	},
+	defaultVariants: { size: "md" }
+}), l = r(null), u = () => {
+	let e = i(l);
+	if (!e) throw Error("Table parts must be used within Table.Root");
+	return e;
+}, d = r("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
+	let { size: r, sticky: i, embed: a } = n, s = c(n);
+	return /* @__PURE__ */ o(l, {
+		value: {
+			header: y({ sticky: f(i) }),
+			cell: x({ size: r }),
+			headRow: _({ body: !1 }),
+			bodyRow: _({
+				body: !0,
+				divider: !a,
+				stickyFooter: p(i)
+			})
+		},
+		children: /* @__PURE__ */ o("div", {
+			"data-slot": "table-root",
+			className: s.root(),
+			children: /* @__PURE__ */ o("div", {
+				"data-slot": "table-scroll",
+				ref: t,
+				tabIndex: 0,
+				className: s.scroll(),
+				children: /* @__PURE__ */ o("table", {
+					"data-slot": "table",
+					className: s.table(),
+					children: e
+				})
+			})
+		})
+	});
+};
+m.displayName = "Table.Root";
+var h = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+	value: "head",
+	children: /* @__PURE__ */ o("thead", {
+		"data-slot": "table-head",
+		...t,
+		children: e
+	})
+});
+h.displayName = "Table.Head";
+var g = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+	value: "body",
+	children: /* @__PURE__ */ o("tbody", {
+		"data-slot": "table-body",
+		...t,
+		children: e
+	})
+});
+g.displayName = "Table.Body";
+var _ = a({
+	base: "transition-colors duration-150",
+	variants: {
+		body: {
+			true: [
+				"hover:bg-bg-default-base-secondary hover:has-[[data-slot=table-empty-state]]:bg-transparent",
+				"[&:hover_[data-slot=table-row-actions]>*]:opacity-100",
+				"[&:hover_[data-slot=table-row-actions]]:after:opacity-100"
+			],
+			false: ""
+		},
+		divider: {
+			true: "border-t border-border-default-base-primary",
+			false: ""
+		},
+		stickyFooter: {
+			true: "last:sticky last:bottom-0 last:z-[1] last:bg-bg-default-base-primary last:shadow-[0_-0.03125rem_0_0_var(--color-border-default-base-primary)]",
+			false: ""
+		}
+	}
+}), v = ({ className: t, ...n }) => {
+	let { headRow: r, bodyRow: a } = u(), s = i(d) === "body";
+	return /* @__PURE__ */ o("tr", {
+		"data-slot": "table-row",
+		className: e(s ? a : r, t),
+		...n
+	});
+};
+v.displayName = "Table.Row";
+var y = a({
+	base: `h-12 text-left align-middle text-sm font-light whitespace-nowrap text-text-default-base-tertiary ${s}`,
+	variants: { sticky: {
+		true: "sticky top-0 z-[1] bg-bg-default-base-primary shadow-[0_0.03125rem_0_0_var(--color-border-default-base-primary)]",
+		false: ""
+	} }
+}), b = ({ className: t, ...n }) => {
+	let { header: r } = u();
+	return /* @__PURE__ */ o("th", {
+		"data-slot": "table-header",
+		className: e(r, t),
+		...n
+	});
+};
+b.displayName = "Table.Header";
+var x = a({
+	base: `align-middle text-sm whitespace-nowrap ${s}`,
+	variants: { size: {
+		sm: "h-12",
+		md: "h-16",
+		lg: "h-22"
+	} },
+	defaultVariants: { size: "md" }
+}), S = ({ className: t, ...n }) => {
+	let { cell: r } = u();
+	return /* @__PURE__ */ o("td", {
+		"data-slot": "table-cell",
+		className: e(r, t),
+		...n
+	});
+};
+S.displayName = "Table.Cell";
+var C = a({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: i, className: a, ...s }) => /* @__PURE__ */ o(t, {
+	variant: "ghost",
+	onClick: r,
+	className: e(C(), a),
+	"data-state": i ? "open" : "default",
+	"data-slot": "table-expand-button",
+	...s,
+	children: /* @__PURE__ */ o(n, {})
+});
+w.displayName = "Table.ExpandButton";
+var T = ({ className: t, ...n }) => /* @__PURE__ */ o("tr", {
+	"data-slot": "table-expanded-row",
+	className: e("border-t border-border-default-base-primary", t),
+	...n
+});
+T.displayName = "Table.ExpandedRow";
+var E = a({ base: [
+	"relative flex w-fit gap-1",
+	"after:absolute after:inset-y-0 after:right-0 after:left-[calc(var(--table-cell-padding-inline)*-1)] after:opacity-0 after:transition-opacity after:duration-150 after:content-[\"\"]",
+	"after:[background:linear-gradient(to_right,transparent_0,var(--color-bg-default-base-secondary)_var(--table-cell-padding-inline))]",
+	"[&>*]:relative [&>*]:z-[1] [&>*]:opacity-0 [&>*]:transition-opacity [&>*]:duration-150",
+	"[@media(hover:none)_and_(pointer:coarse)]:[&>*]:opacity-100"
+] }), D = ({ children: e }) => /* @__PURE__ */ o("div", {
+	"data-slot": "table-row-actions",
+	className: E(),
+	children: e
+});
+D.displayName = "Table.RowActions";
+var O = {
+	Root: m,
+	Head: h,
+	Body: g,
+	Row: v,
+	Header: b,
+	Cell: S,
+	ExpandButton: w,
+	ExpandedRow: T,
+	RowActions: D
+};
+//#endregion
+export { O as Table, c as tableRecipe };

package/theme/base.css

@@ -676,20 +676,6 @@
 	--color-focus-ring-button-primary: var(--color-slate-800);
 	--color-focus-ring-button-destructive: var(--color-danger-500);
 
-	/* ========================================
-    * STATUS BALL
-    * ======================================== */
-
-	/* Status Ball Backgrounds */
-	--color-bg-status-ball-success: var(--color-positive-700);
-	--color-bg-status-ball-info: var(--color-blue-600);
-	--color-bg-status-ball-warning: var(--color-warning-700);
-	--color-bg-status-ball-danger: var(--color-danger-500);
-	--color-bg-status-ball-creative: var(--color-purple-500);
-	--color-bg-status-ball-dynamic: var(--color-orange-500);
-	--color-bg-status-ball-playful: var(--color-pink-500);
-	--color-bg-status-ball-neutral: var(--color-neutrals-300);
-
 	/* Focus Ring */
 	--color-focus-ring-button-primary: var(--color-slate-800);
 	--color-focus-ring-button-brand: var(--color-slate-800);

package/src/status-ball/index.d.ts

@@ -1,2 +0,0 @@
-export { StatusBall, statusBallRecipe } from './status-ball';
-export type { StatusBallProps, StatusBallVariants } from './status-ball';

package/src/status-ball/index.js

@@ -1,2 +0,0 @@
-import { StatusBall as e, statusBallRecipe as t } from "./status-ball.js";
-export { e as StatusBall, t as statusBallRecipe };

package/src/status-ball/status-ball.d.ts

@@ -1,93 +0,0 @@
-import { ComponentProps } from 'react';
-import { VariantProps } from 'tailwind-variants';
-/**
- * Style recipe for StatusBall using tailwind-variants. Defines a single `base`
- * (a 8px circle via `size-2 rounded-full`) and a `color` variant that swaps
- * the background across 8 semantic-intent tokens (`--color-bg-status-ball-*`).
- * Consumers typically render `StatusBall` directly; import the recipe only
- * when styling a custom element to match a StatusBall.
- *
- * @summary Tailwind-variants recipe for the StatusBall component
- */
-export declare const statusBallRecipe: import('tailwind-variants').TVReturnType<{
-    color: {
-        success: string;
-        info: string;
-        warning: string;
-        danger: string;
-        creative: string;
-        dynamic: string;
-        playful: string;
-        neutral: string;
-    };
-}, undefined, "size-2 rounded-full", {
-    color: {
-        success: string;
-        info: string;
-        warning: string;
-        danger: string;
-        creative: string;
-        dynamic: string;
-        playful: string;
-        neutral: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    color: {
-        success: string;
-        info: string;
-        warning: string;
-        danger: string;
-        creative: string;
-        dynamic: string;
-        playful: string;
-        neutral: string;
-    };
-}, undefined, "size-2 rounded-full", unknown, unknown, undefined>>;
-export type StatusBallVariants = VariantProps<typeof statusBallRecipe>;
-export type StatusBallProps = ComponentProps<'div'> & {
-    /**
-     * Semantic intent of the dot. Defaults to `'neutral'`. Resolve a
-     * domain-specific status to an intent via your own lookup table
-     * (e.g., `active → success`, `expired → danger`).
-     * - `success` — positive / active / confirmed states
-     * - `info` — informational / scheduled / in-progress states
-     * - `warning` — pending / approaching-expiration states
-     * - `danger` — error / expired / blocking states
-     * - `creative`, `dynamic`, `playful` — category intents for domain statuses
-     *   without a direct success/info/warning/danger mapping (e.g., review,
-     *   flagged, attention)
-     * - `neutral` — inactive / unknown / default
-     */
-    color?: StatusBallVariants['color'];
-};
-/**
- * StatusBall renders a small colored dot used to mark the state of an adjacent
- * label — things like an appointment's confirmation state, a license's validity,
- * or any list-row entry where a single glyph of color conveys the status at a
- * glance. Pair it with text; the dot alone is not announced to assistive
- * technologies, so the surrounding label must carry the meaning.
- *
- * The 8 intents (`success`, `info`, `warning`, `danger`, `creative`,
- * `dynamic`, `playful`, `neutral`) map to semantic tokens
- * (`--color-bg-status-ball-*`) and mirror the convention used by
- * [Alert](?path=/docs/components-alert--docs). Consumers typically resolve a
- * domain-specific status to an intent via their own lookup table
- * (e.g., `active → success`, `expired → danger`).
- *
- * Do **not** use StatusBall as a progress or loading indicator — reach for
- * [Loading](?path=/docs/components-loading--docs) for async state. For
- * section-level alerts with copy, use [Alert](?path=/docs/components-alert--docs)
- * instead.
- *
- * @summary Small colored dot that signals the status of an adjacent label
- *
- * @example
- * <div className="flex items-center gap-2">
- *   <StatusBall color="success" />
- *   <span>Active</span>
- * </div>
- *
- * @example
- * <StatusBall color={statusToIntent[appointment.status]} />
- */
-export declare const StatusBall: ({ color, className, ...props }: StatusBallProps) => import("react/jsx-runtime").JSX.Element;

package/src/status-ball/status-ball.js

@@ -1,24 +0,0 @@
-import { cn as e } from "../../lib/utils.js";
-import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/status-ball/status-ball.tsx
-var r = t({
-	base: "size-2 rounded-full",
-	variants: { color: {
-		success: "bg-bg-status-ball-success",
-		info: "bg-bg-status-ball-info",
-		warning: "bg-bg-status-ball-warning",
-		danger: "bg-bg-status-ball-danger",
-		creative: "bg-bg-status-ball-creative",
-		dynamic: "bg-bg-status-ball-dynamic",
-		playful: "bg-bg-status-ball-playful",
-		neutral: "bg-bg-status-ball-neutral"
-	} },
-	defaultVariants: { color: "neutral" }
-}), i = ({ color: t, className: i, ...a }) => /* @__PURE__ */ n("div", {
-	"data-slot": "status-ball",
-	className: e(r({ color: t }), i),
-	...a
-});
-//#endregion
-export { i as StatusBall, r as statusBallRecipe };