@agentero/design-system 0.26.2 → 0.27.0

package/src/checkbox/checkbox.d.ts

@@ -0,0 +1,74 @@
+import { ComponentPropsWithRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+/** Style recipe for Checkbox. Slots: `root` (the box), `indicator` (the glyph). */
+export declare const checkboxRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+/** Radix Checkbox root props; the ones redeclared here are the ones docgen would otherwise omit. */
+export type CheckboxProps = Omit<ComponentPropsWithRef<typeof CheckboxPrimitive.Root>, 'children'> & {
+    /** Controlled state. `'indeterminate'` renders a dash and announces `aria-checked="mixed"`. */
+    checked?: CheckboxPrimitive.CheckboxProps['checked'];
+    /** Initial state for an uncontrolled checkbox. */
+    defaultChecked?: CheckboxPrimitive.CheckboxProps['defaultChecked'];
+    /** Fires with the next state (`true`, `false` or `'indeterminate'`) on click and on Space. */
+    onCheckedChange?: CheckboxPrimitive.CheckboxProps['onCheckedChange'];
+    /** Blocks interaction and greys the box out; the value is not submitted. */
+    disabled?: boolean;
+    /** Marks the control required for the browser and assistive technology. */
+    required?: boolean;
+    /** Form field name. Needed for uncontrolled form usage. */
+    name?: string;
+    /** Value submitted when checked. Defaults to `'on'`. */
+    value?: string;
+    /** Drives the destructive border and fill. Point `aria-describedby` at the error message. */
+    'aria-invalid'?: ComponentPropsWithRef<'button'>['aria-invalid'];
+};
+/**
+ * Base control for a boolean the user confirms later: one item of a
+ * multi-select, a terms tick, a row picked for a bulk action. Supports the
+ * mixed state for a parent that summarises a partially selected group.
+ * Keeps the legacy 16px surface, glyphs and state colours during adoption.
+ *
+ * Headless like [Input](?path=/docs/components-input--docs): pair it with
+ * [Label](?path=/docs/components-label--docs) and `htmlFor`, or give it an
+ * `aria-label`. There is no `status` prop — set `aria-invalid`.
+ *
+ * Use [Switch](?path=/docs/components-switch--docs) when the change applies
+ * immediately, and [CheckList](?path=/docs/components-check-list--docs) for a
+ * read-only list of ticked items.
+ *
+ * @summary Base checkbox control, with mixed state, unaware of form libraries
+ *
+ * @example
+ * <Label htmlFor="terms">I accept the terms</Label>
+ * <Checkbox id="terms" name="terms" required />
+ */
+export declare const Checkbox: ({ className, ref, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/src/checkbox/checkbox.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/utils.js";
+import { IconCheck as t, IconMinus as n } from "./icons.js";
+import { tv as r } from "tailwind-variants";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-checkbox";
+//#region src/checkbox/checkbox.tsx
+var s = r({ slots: {
+	root: [
+		"group/checkbox box-border inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-sm",
+		"border border-solid border-border-input-default bg-bg-input-normal",
+		"cursor-pointer transition-colors duration-200 ease-in-out",
+		"data-[state=checked]:border-bg-checkbox-selected data-[state=checked]:bg-bg-checkbox-selected",
+		"data-[state=indeterminate]:border-bg-checkbox-selected data-[state=indeterminate]:bg-bg-checkbox-selected",
+		"outline-solid outline-2 outline-offset-2 outline-transparent",
+		"focus-visible:outline-focus-ring-button-primary",
+		"aria-invalid:border-border-input-destructive",
+		"aria-invalid:focus-visible:outline-focus-ring-button-destructive",
+		"aria-invalid:data-[state=checked]:border-bg-default-danger-primary aria-invalid:data-[state=checked]:bg-bg-default-danger-primary",
+		"aria-invalid:data-[state=indeterminate]:border-bg-default-danger-primary aria-invalid:data-[state=indeterminate]:bg-bg-default-danger-primary",
+		"disabled:cursor-not-allowed disabled:border-border-checkbox-disabled",
+		"disabled:data-[state=checked]:border-bg-checkbox-disabled disabled:data-[state=checked]:bg-bg-checkbox-disabled",
+		"disabled:data-[state=indeterminate]:border-bg-checkbox-disabled disabled:data-[state=indeterminate]:bg-bg-checkbox-disabled",
+		"aria-invalid:disabled:border-bg-checkbox-invalid-disabled",
+		"aria-invalid:disabled:data-[state=checked]:border-bg-checkbox-invalid-disabled aria-invalid:disabled:data-[state=checked]:bg-bg-checkbox-invalid-disabled",
+		"aria-invalid:disabled:data-[state=indeterminate]:border-bg-checkbox-invalid-disabled aria-invalid:disabled:data-[state=indeterminate]:bg-bg-checkbox-invalid-disabled"
+	],
+	indicator: "flex items-center justify-center text-text-default-base-inverse-primary"
+} }), c = ({ className: r, ref: c, ...l }) => {
+	let u = s();
+	return /* @__PURE__ */ i(o.Root, {
+		ref: c,
+		"data-slot": "checkbox",
+		className: e(u.root(), r),
+		...l,
+		children: /* @__PURE__ */ a(o.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: u.indicator(),
+			children: [/* @__PURE__ */ i(t, { className: "hidden size-3.5 group-data-[state=checked]/checkbox:block" }), /* @__PURE__ */ i(n, { className: "hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" })]
+		})
+	});
+};
+//#endregion
+export { c as Checkbox, s as checkboxRecipe };

package/src/checkbox/icons.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+/** @summary Material Sharp check used by the legacy checkbox */
+export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/** @summary Rounded minus used by the legacy checkbox's mixed state */
+export declare const IconMinus: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/checkbox/icons.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/checkbox/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	stroke: "currentColor",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M5 12h14" })
+});
+//#endregion
+export { t as IconCheck, n as IconMinus };

package/src/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, checkboxRecipe } from './checkbox';
+export type { CheckboxProps } from './checkbox';

package/src/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox as e, checkboxRecipe as t } from "./checkbox.js";
+export { e as Checkbox, t as checkboxRecipe };

package/src/table/index.d.ts

@@ -40,7 +40,6 @@ export declare const Table: {
             rounded?: boolean;
             align?: "center" | "start" | "end" | "justify";
             fitContent?: boolean;
-            scaleOnPress?: boolean;
             ref?: import('react').Ref<HTMLButtonElement | HTMLAnchorElement>;
         } & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
             asChild?: boolean;

package/theme/base.css

@@ -325,6 +325,11 @@
 	--color-bg-button-brand-enable: var(--color-brand-600);
 	--color-bg-button-brand-hover: var(--color-brand-700);
 
+	--color-bg-checkbox-selected: var(--color-neutrals-900);
+	--color-bg-checkbox-disabled: var(--color-neutrals-200);
+	--color-bg-checkbox-invalid-disabled: var(--color-danger-200);
+	--color-border-checkbox-disabled: var(--color-neutrals-100);
+
 	/* Border Tokens */
 	--color-border-input-default: var(--color-slate-200);
 	--color-border-input-hover: var(--color-slate-400);