torch-glare 2.0.0 → 2.1.1

package/docs/reference/components.md

@@ -257,17 +257,18 @@ Grouped action buttons.
 Small status or label indicator.
 
 - **File**: [badge.md](../components/badge.md)
-- **Props**: `variant`, `size`, `theme`
-- **Variants**: 12 color variants (green, blue, red, purple, etc.)
-- **Use Cases**: Status indicators, labels, tags
+- **Props**: `badgeStyle`, `color`, `size`, `label`, `badgeIcon`, `showIcon`, `isClosable`, `onClose`, `theme`
+- **Styles**: `subtle` (default), `solid`
+- **Colors**: 10 — `gray`, `slate`, `red`, `orange`, `yellow`, `green`, `ocean`, `blue`, `purple`, `rose`
+- **Use Cases**: Status indicators, labels, removable tags/chips
 
 ### BadgeField
-Badge with label field.
+Tag input that renders selected items as Badges.
 
 - **File**: [badge-field.md](../components/badge-field.md)
-- **Props**: `label`, `value`, `variant`
-- **Features**: Label + badge combination
-- **Use Cases**: Status fields, labeled indicators
+- **Props**: `tags`, `size`, `variant`, `label`, `onChange`
+- **Features**: Multi-select with search, keyboard navigation, removable chips
+- **Use Cases**: Tag pickers, multi-select fields
 
 ### CountBadge
 Badge displaying a count.

package/docs/reference/types.md

@@ -381,42 +381,50 @@ interface TreeSubLayoutProps {
 
 ### Badge Types
 
-#### BadgeVariant
+#### BadgeStyle
 
 ```typescript
-type BadgeVariant =
-  | "PrimeStyle"
-  | "SecondStyle"
-  | "ContStyle"
-  | "BorderStyle";
-```
-
-#### BadgeProps
-
-```typescript
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-  theme?: Themes;
-  children: React.ReactNode;
-}
+type BadgeStyle = "subtle" | "solid";
 ```
 
 #### BadgeColor
 
 ```typescript
 type BadgeColor =
-  | "green"
-  | "green-light"
-  | "cocktail-green"
-  | "yellow"
-  | "red-orange"
+  | "gray"
+  | "slate"
   | "red"
-  | "rose"
-  | "purple"
-  | "blue-purple"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "ocean"
   | "blue"
-  | "navy"
-  | "gray";
+  | "purple"
+  | "rose";
+```
+
+#### BadgeSize
+
+```typescript
+type BadgeSize = "XS" | "S" | "M";
+```
+
+#### BadgeProps
+
+```typescript
+interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  label?: string;
+  badgeStyle?: BadgeStyle; // default: "subtle"
+  color?: BadgeColor;      // default: "gray"
+  size?: BadgeSize;        // default: "S"
+  showIcon?: boolean;      // default: true
+  badgeIcon?: React.ReactNode;
+  isClosable?: boolean;
+  onClose?: () => void;
+  theme?: Themes;
+  className?: string;
+}
 ```
 
 ### Avatar Types

package/docs/tutorials/theming-basics.md

@@ -354,46 +354,49 @@ function BorderColorExamples() {
 
 ## Step 6: Badge Color System
 
-TORCH Glare provides 12 badge color variants:
+TORCH Glare provides 10 badge colors, each with `subtle` and `solid` background tokens:
 
 ```tsx
+import { Badge } from '@/components/Badge';
+
 function BadgeColors() {
   const colors = [
-    'green',
-    'green-light',
-    'cocktail-green',
-    'yellow',
-    'red-orange',
+    'gray',
+    'slate',
     'red',
-    'rose',
-    'purple',
-    'blue-purple',
+    'orange',
+    'yellow',
+    'green',
+    'ocean',
     'blue',
-    'navy',
-    'gray',
-  ];
+    'purple',
+    'rose',
+  ] as const;
 
   return (
-    <div className="flex flex-wrap gap-2">
-      {colors.map((color) => (
-        <span
-          key={color}
-          className={`
-            px-3 py-1 rounded
-            bg-background-presentation-badge-${color}
-            text-content-presentation-badge-${color}
-            border border-border-presentation-badge-${color}
-            typography-labels-small-semibold
-          `}
-        >
-          {color}
-        </span>
-      ))}
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-2">
+        {colors.map((color) => (
+          <Badge key={color} color={color} badgeStyle="subtle" label={color} />
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {colors.map((color) => (
+          <Badge key={color} color={color} badgeStyle="solid" label={color} />
+        ))}
+      </div>
     </div>
   );
 }
 ```
 
+The underlying CSS variables follow this pattern:
+
+```
+--background-presentation-badge-{color}-subtle
+--background-presentation-badge-{color}-solid
+```
+
 ---
 
 ## Step 7: Create a Complete Themed Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -15,10 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsc -b",
-    "deploy": "npx tsc --build --force && npm publish --access public"
-  },
   "dependencies": {
     "commander": "^13.1.0",
     "inquirer": "^9.2.15"
@@ -27,5 +23,9 @@
     "@types/inquirer": "^9.0.7",
     "@types/node": "^22.14.0",
     "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "deploy": "npx tsc --build --force && npm publish --access public"
   }
-}
+}