@org-design-system/components 0.1.9 → 0.1.10

package/src/components/badge.tsx

@@ -16,6 +16,7 @@ const badgeVariants = cva(
       },
       intent: {
         primary: "",
+        accent: "", // Alias for primary to match Figma
         success: "",
         warning: "",
         error: "",
@@ -23,17 +24,30 @@ const badgeVariants = cva(
         neutral: "",
       },
       size: {
-        sm: "h-5 px-1 py-0.5 text-[10px] min-w-[20px] rounded-[var(--radius-md)]",
-        md: "h-6 px-1.5 py-1 text-[12px] min-w-[24px] rounded-[var(--radius-md)]",
-        lg: "h-6 px-1.5 py-1 text-[13px] min-w-[24px] rounded-[var(--radius-md)]",
+        sm: "h-5 px-1 py-0.5 text-[10px] min-w-[20px]",
+        md: "h-6 px-1.5 py-1 text-[12px] min-w-[24px]",
+        lg: "h-6 px-1.5 py-1 text-[13px] min-w-[24px]",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-[4px]",
+        md: "rounded-[6px]",
+        lg: "rounded-[8px]",
+        xl: "rounded-[8px]",
+        full: "rounded-full",
       },
     },
     compoundVariants: [
-      // Primary (Accent)
+      // Accent/Primary (Green in Figma)
       { variant: "solid", intent: "primary", className: "bg-[var(--color-surface-focus)] text-[var(--color-text-focus-subtle)]" },
       { variant: "soft", intent: "primary", className: "bg-[var(--color-surface-selected)] text-[var(--color-text-focus)]" },
       { variant: "surface", intent: "primary", className: "bg-[var(--color-surface-selected)] border-[var(--color-stroke-selected)] text-[var(--color-text-focus)]" },
       { variant: "outline", intent: "primary", className: "border-[var(--color-stroke-selected)] text-[var(--color-text-focus)]" },
+
+      { variant: "solid", intent: "accent", className: "bg-[var(--color-green-9)] text-white" },
+      { variant: "soft", intent: "accent", className: "bg-[var(--color-green-alpha-2)] text-[var(--color-green-11)]" },
+      { variant: "surface", intent: "accent", className: "bg-[var(--color-green-alpha-2)] border-[var(--color-green-alpha-4)] text-[var(--color-green-11)]" },
+      { variant: "outline", intent: "accent", className: "border-[var(--color-green-alpha-4)] text-[var(--color-green-11)]" },
       // Success
       { variant: "solid", intent: "success", className: "bg-[var(--color-surface-success)] text-white" },
       { variant: "soft", intent: "success", className: "bg-[var(--color-green-alpha-2)] text-[var(--color-text-selected)]" },
@@ -64,13 +78,14 @@ const badgeVariants = cva(
       variant: "soft",
       intent: "neutral",
       size: "md",
+      radius: "md",
     },
   }
 )
 
 interface BadgeProps
   extends React.ComponentProps<"span">,
-    VariantProps<typeof badgeVariants> {
+  VariantProps<typeof badgeVariants> {
   asChild?: boolean
 }
 
@@ -78,6 +93,7 @@ function Badge({
   className,
   variant,
   intent,
+  radius,
   size,
   asChild = false,
   ...props
@@ -87,10 +103,14 @@ function Badge({
   return (
     <Comp
       data-slot="badge"
-      className={cn(badgeVariants({ variant, intent, size }), className)}
+      data-variant={variant}
+      data-intent={intent}
+      data-size={size}
+      data-radius={radius}
+      className={cn(badgeVariants({ variant, intent, size, radius }), className)}
       {...props}
     />
   )
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants }

package/dist/index.css

@@ -1,30 +0,0 @@
-@import "tailwindcss";
-@import "@org-design-system/styles/index.css";
-@import "@org-design-system/styles/component.css";
-
-@source "./components/**/*.tsx";
-
-@theme {
-  /* Mapping for shadcn components that expect these variables */
-  --color-background: var(--color-surface-bg);
-  --color-foreground: var(--color-text-primary);
-  
-  --color-primary: var(--color-green-9);
-  --color-primary-foreground: var(--color-gray-1);
-  
-  --color-secondary: var(--color-gray-alpha-3);
-  --color-secondary-foreground: var(--color-text-primary);
-  
-  --color-muted: var(--color-gray-alpha-2);
-  --color-muted-foreground: var(--color-text-secondary);
-  
-  --color-accent: var(--color-green-alpha-2);
-  --color-accent-foreground: var(--color-text-focus);
-  
-  --color-destructive: var(--color-red-9);
-  --color-destructive-foreground: var(--color-gray-1);
-  
-  --color-border: var(--color-stroke-primary);
-  --color-input: var(--color-stroke-primary);
-  --color-ring: var(--color-surface-focus);
-}