@agentero/design-system 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/mcp/manifests/components.html +380 -6
  2. package/mcp/manifests/components.json +1 -1
  3. package/package.json +5 -1
  4. package/src/tag/index.d.ts +2 -0
  5. package/src/tag/index.js +2 -0
  6. package/src/tag/tag.d.ts +160 -0
  7. package/src/tag/tag.js +129 -0
  8. package/theme/base.css +52 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentero/design-system",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -57,6 +57,10 @@
57
57
  "types": "./src/pagination/index.d.ts",
58
58
  "import": "./src/pagination/index.js"
59
59
  },
60
+ "./tag": {
61
+ "types": "./src/tag/index.d.ts",
62
+ "import": "./src/tag/index.js"
63
+ },
60
64
  "./toast": {
61
65
  "types": "./src/toast/index.d.ts",
62
66
  "import": "./src/toast/index.js"
package/src/tag/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Tag, tagRecipe } from './tag';
2
+ export type { TagProps, TagColor, TagVariant, TagSize } from './tag';
package/src/tag/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import { Tag as e, tagRecipe as t } from "./tag.js";
2
+ export { e as Tag, t as tagRecipe };
package/src/tag/tag.d.ts ADDED
@@ -0,0 +1,160 @@
1
+ import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
2
+ import { VariantProps } from 'tailwind-variants';
3
+ /**
4
+ * Style recipe for Tag. Each color maps to its dedicated `*-tag-*` semantic
5
+ * tokens (bg enable/hover, border, text/icon) defined in the theme — one ramp
6
+ * per color, so the recipe carries no raw palette values.
7
+ *
8
+ * @summary tailwind-variants recipe backing the Tag component styles
9
+ */
10
+ export declare const tagRecipe: import('tailwind-variants').TVReturnType<{
11
+ color: {
12
+ neutral: string;
13
+ positive: string;
14
+ danger: string;
15
+ warning: string;
16
+ informative: string;
17
+ creative: string;
18
+ dynamic: string;
19
+ playful: string;
20
+ };
21
+ variant: {
22
+ secondary: string;
23
+ tertiary: string;
24
+ ghost: string;
25
+ invisible: string;
26
+ };
27
+ size: {
28
+ xs: string;
29
+ sm: string;
30
+ md: string;
31
+ };
32
+ pill: {
33
+ true: string;
34
+ };
35
+ truncate: {
36
+ true: string;
37
+ };
38
+ interactive: {
39
+ true: string;
40
+ };
41
+ hasOnlyIcon: {
42
+ true: string;
43
+ };
44
+ }, undefined, string[], {
45
+ color: {
46
+ neutral: string;
47
+ positive: string;
48
+ danger: string;
49
+ warning: string;
50
+ informative: string;
51
+ creative: string;
52
+ dynamic: string;
53
+ playful: string;
54
+ };
55
+ variant: {
56
+ secondary: string;
57
+ tertiary: string;
58
+ ghost: string;
59
+ invisible: string;
60
+ };
61
+ size: {
62
+ xs: string;
63
+ sm: string;
64
+ md: string;
65
+ };
66
+ pill: {
67
+ true: string;
68
+ };
69
+ truncate: {
70
+ true: string;
71
+ };
72
+ interactive: {
73
+ true: string;
74
+ };
75
+ hasOnlyIcon: {
76
+ true: string;
77
+ };
78
+ }, undefined, import('tailwind-variants').TVReturnType<{
79
+ color: {
80
+ neutral: string;
81
+ positive: string;
82
+ danger: string;
83
+ warning: string;
84
+ informative: string;
85
+ creative: string;
86
+ dynamic: string;
87
+ playful: string;
88
+ };
89
+ variant: {
90
+ secondary: string;
91
+ tertiary: string;
92
+ ghost: string;
93
+ invisible: string;
94
+ };
95
+ size: {
96
+ xs: string;
97
+ sm: string;
98
+ md: string;
99
+ };
100
+ pill: {
101
+ true: string;
102
+ };
103
+ truncate: {
104
+ true: string;
105
+ };
106
+ interactive: {
107
+ true: string;
108
+ };
109
+ hasOnlyIcon: {
110
+ true: string;
111
+ };
112
+ }, undefined, string[], unknown, unknown, undefined>>;
113
+ /**
114
+ * @summary Tag color union (`neutral`, `positive`, `danger`, `warning`, `informative`, `creative`, `dynamic`, `playful`)
115
+ */
116
+ export type TagColor = NonNullable<VariantProps<typeof tagRecipe>['color']>;
117
+ /**
118
+ * Fill treatments: `secondary` (tinted fill + border), `tertiary` (tinted fill,
119
+ * no border — default), `ghost` (text only), and `invisible` (transparent until
120
+ * hovered).
121
+ *
122
+ * @summary Tag variant union (`secondary`, `tertiary`, `ghost`, `invisible`)
123
+ */
124
+ export type TagVariant = NonNullable<VariantProps<typeof tagRecipe>['variant']>;
125
+ /**
126
+ * @summary Tag size union (`xs`, `sm`, `md`)
127
+ */
128
+ export type TagSize = NonNullable<VariantProps<typeof tagRecipe>['size']>;
129
+ /**
130
+ * Tag props. Accepts all standard `<span>` attributes plus the style variants.
131
+ *
132
+ * @summary Props accepted by Tag; use `asChild` to render a different element
133
+ */
134
+ export type TagProps = Omit<ComponentPropsWithRef<'span'>, 'color'> & Omit<VariantProps<typeof tagRecipe>, 'interactive' | 'hasOnlyIcon'> & {
135
+ /**
136
+ * Render the single child element instead of a `<span>` (via Radix `Slot`),
137
+ * keeping Tag framework-agnostic. Marks the Tag interactive: adds the pointer
138
+ * cursor and the hover fill (a plain `<span>` Tag is a static badge).
139
+ */
140
+ asChild?: boolean;
141
+ children?: ReactNode;
142
+ ref?: Ref<HTMLElement>;
143
+ };
144
+ /**
145
+ * Tag is a compact label for statuses, categories, counts, and attributes. As a
146
+ * plain `<span>` it reads as a static badge with no hover. Pass `asChild` to
147
+ * render an interactive link or button instead — that adds the pointer cursor
148
+ * and the hover fill. Pick `color` for meaning and `variant` for fill emphasis.
149
+ *
150
+ * @summary Compact semantic label; renders a static badge `<span>` or, with `asChild`, an interactive element
151
+ *
152
+ * @example
153
+ * <Tag color="positive">Active</Tag>
154
+ *
155
+ * @example
156
+ * <Tag asChild color="informative">
157
+ * <a href="/carriers">View carriers</a>
158
+ * </Tag>
159
+ */
160
+ export declare const Tag: ({ children, asChild, color, variant, size, pill, truncate, className, ref, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
package/src/tag/tag.js ADDED
@@ -0,0 +1,129 @@
1
+ "use client";
2
+ import { cn as e } from "../../lib/utils.js";
3
+ import { tv as t } from "tailwind-variants";
4
+ import { jsx as n } from "react/jsx-runtime";
5
+ import { Children as r, isValidElement as i } from "react";
6
+ import { Slot as a, Slottable as o } from "@radix-ui/react-slot";
7
+ //#region src/tag/tag.tsx
8
+ var s = t({
9
+ base: [
10
+ "inline-flex w-fit min-w-fit items-center gap-1",
11
+ "rounded-md border border-solid border-transparent px-2",
12
+ "font-normal leading-normal no-underline",
13
+ "transition-[background-color,opacity] duration-200",
14
+ "[&_svg]:size-3.5"
15
+ ],
16
+ variants: {
17
+ color: {
18
+ neutral: "bg-bg-tag-neutral-enable text-text-tag-neutral border-border-tag-neutral [&_svg_path]:fill-icon-tag-neutral",
19
+ positive: "bg-bg-tag-positive-enable text-text-tag-positive border-border-tag-positive [&_svg_path]:fill-icon-tag-positive",
20
+ danger: "bg-bg-tag-danger-enable text-text-tag-danger border-border-tag-danger [&_svg_path]:fill-icon-tag-danger",
21
+ warning: "bg-bg-tag-warning-enable text-text-tag-warning border-border-tag-warning [&_svg_path]:fill-icon-tag-warning",
22
+ informative: "bg-bg-tag-informative-enable text-text-tag-informative border-border-tag-informative [&_svg_path]:fill-icon-tag-informative",
23
+ creative: "bg-bg-tag-creative-enable text-text-tag-creative border-border-tag-creative [&_svg_path]:fill-icon-tag-creative",
24
+ dynamic: "bg-bg-tag-dynamic-enable text-text-tag-dynamic border-border-tag-dynamic [&_svg_path]:fill-icon-tag-dynamic",
25
+ playful: "bg-bg-tag-playful-enable text-text-tag-playful border-border-tag-playful [&_svg_path]:fill-icon-tag-playful"
26
+ },
27
+ variant: {
28
+ secondary: "",
29
+ tertiary: "border-transparent",
30
+ ghost: "border-transparent bg-transparent",
31
+ invisible: "border-transparent bg-transparent opacity-0"
32
+ },
33
+ size: {
34
+ xs: "h-5 px-1.5 text-xs [&_svg]:size-3",
35
+ sm: "h-6 text-xs",
36
+ md: "h-8 text-sm"
37
+ },
38
+ pill: { true: "rounded-full" },
39
+ truncate: { true: "max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" },
40
+ interactive: { true: "cursor-pointer" },
41
+ hasOnlyIcon: { true: "justify-center px-0" }
42
+ },
43
+ compoundVariants: [
44
+ {
45
+ hasOnlyIcon: !0,
46
+ size: "xs",
47
+ class: "size-5"
48
+ },
49
+ {
50
+ hasOnlyIcon: !0,
51
+ size: "sm",
52
+ class: "size-6"
53
+ },
54
+ {
55
+ hasOnlyIcon: !0,
56
+ size: "md",
57
+ class: "size-8 [&_svg]:size-4"
58
+ },
59
+ {
60
+ color: "neutral",
61
+ interactive: !0,
62
+ class: "hover:bg-bg-tag-neutral-hover"
63
+ },
64
+ {
65
+ color: "positive",
66
+ interactive: !0,
67
+ class: "hover:bg-bg-tag-positive-hover"
68
+ },
69
+ {
70
+ color: "danger",
71
+ interactive: !0,
72
+ class: "hover:bg-bg-tag-danger-hover"
73
+ },
74
+ {
75
+ color: "warning",
76
+ interactive: !0,
77
+ class: "hover:bg-bg-tag-warning-hover"
78
+ },
79
+ {
80
+ color: "informative",
81
+ interactive: !0,
82
+ class: "hover:bg-bg-tag-informative-hover"
83
+ },
84
+ {
85
+ color: "creative",
86
+ interactive: !0,
87
+ class: "hover:bg-bg-tag-creative-hover"
88
+ },
89
+ {
90
+ color: "dynamic",
91
+ interactive: !0,
92
+ class: "hover:bg-bg-tag-dynamic-hover"
93
+ },
94
+ {
95
+ color: "playful",
96
+ interactive: !0,
97
+ class: "hover:bg-bg-tag-playful-hover"
98
+ },
99
+ {
100
+ variant: "invisible",
101
+ interactive: !0,
102
+ class: "hover:opacity-100"
103
+ }
104
+ ],
105
+ defaultVariants: {
106
+ color: "neutral",
107
+ variant: "tertiary",
108
+ size: "sm"
109
+ }
110
+ }), c = ({ children: t, asChild: c, color: l, variant: u, size: d, pill: f, truncate: p, className: m, ref: h, ...g }) => {
111
+ let _ = c ? a : "span", v = c && i(t) ? t.props.children : t, y = r.toArray(v), b = e(s({
112
+ color: l,
113
+ variant: u,
114
+ size: d,
115
+ pill: f,
116
+ truncate: p,
117
+ interactive: c,
118
+ hasOnlyIcon: y.length > 0 && y.every(i)
119
+ }), m);
120
+ return /* @__PURE__ */ n(_, {
121
+ "data-slot": "tag",
122
+ ...g,
123
+ className: b,
124
+ ref: h,
125
+ children: c ? /* @__PURE__ */ n(o, { children: t }) : t
126
+ });
127
+ };
128
+ //#endregion
129
+ export { c as Tag, s as tagRecipe };
package/theme/base.css CHANGED
@@ -682,6 +682,58 @@
682
682
  --color-focus-ring-button-positive: var(--color-positive-500);
683
683
  --color-focus-ring-button-destructive: var(--color-danger-500);
684
684
 
685
+ /* ========================================
686
+ * TAG
687
+ * ======================================== */
688
+
689
+ --color-bg-tag-neutral-enable: var(--color-slate-050);
690
+ --color-bg-tag-neutral-hover: var(--color-slate-100);
691
+ --color-border-tag-neutral: var(--color-slate-200);
692
+ --color-text-tag-neutral: var(--color-slate-700);
693
+ --color-icon-tag-neutral: var(--color-slate-700);
694
+
695
+ --color-bg-tag-positive-enable: var(--color-positive-050);
696
+ --color-bg-tag-positive-hover: var(--color-positive-100);
697
+ --color-border-tag-positive: var(--color-positive-200);
698
+ --color-text-tag-positive: var(--color-positive-700);
699
+ --color-icon-tag-positive: var(--color-positive-700);
700
+
701
+ --color-bg-tag-danger-enable: var(--color-danger-050);
702
+ --color-bg-tag-danger-hover: var(--color-danger-100);
703
+ --color-border-tag-danger: var(--color-danger-200);
704
+ --color-text-tag-danger: var(--color-danger-500);
705
+ --color-icon-tag-danger: var(--color-danger-500);
706
+
707
+ --color-bg-tag-warning-enable: var(--color-warning-050);
708
+ --color-bg-tag-warning-hover: var(--color-warning-050);
709
+ --color-border-tag-warning: var(--color-warning-300);
710
+ --color-text-tag-warning: var(--color-warning-700);
711
+ --color-icon-tag-warning: var(--color-warning-700);
712
+
713
+ --color-bg-tag-informative-enable: var(--color-blue-050);
714
+ --color-bg-tag-informative-hover: var(--color-blue-100);
715
+ --color-border-tag-informative: var(--color-blue-200);
716
+ --color-text-tag-informative: var(--color-blue-600);
717
+ --color-icon-tag-informative: var(--color-blue-600);
718
+
719
+ --color-bg-tag-creative-enable: var(--color-purple-050);
720
+ --color-bg-tag-creative-hover: var(--color-purple-100);
721
+ --color-border-tag-creative: var(--color-purple-200);
722
+ --color-text-tag-creative: var(--color-purple-600);
723
+ --color-icon-tag-creative: var(--color-purple-600);
724
+
725
+ --color-bg-tag-dynamic-enable: var(--color-orange-050);
726
+ --color-bg-tag-dynamic-hover: var(--color-orange-100);
727
+ --color-border-tag-dynamic: var(--color-orange-200);
728
+ --color-text-tag-dynamic: var(--color-orange-500);
729
+ --color-icon-tag-dynamic: var(--color-orange-500);
730
+
731
+ --color-bg-tag-playful-enable: var(--color-pink-050);
732
+ --color-bg-tag-playful-hover: var(--color-pink-100);
733
+ --color-border-tag-playful: var(--color-pink-200);
734
+ --color-text-tag-playful: var(--color-pink-400);
735
+ --color-icon-tag-playful: var(--color-pink-400);
736
+
685
737
  /* ========================================
686
738
  * SPACING
687
739
  * ======================================== */