@stasho/ds 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -22,6 +22,7 @@
     "directory": "packages/ds"
   },
   "exports": {
+    "./accordion": "./src/components/accordion/accordion.tsx",
     "./alert": "./src/components/alert/alert.tsx",
     "./button": "./src/components/button/button.tsx",
     "./icon-button": "./src/components/button/icon-button.tsx",

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { CaretDown } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...rest }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-edge", className)}
+    {...rest}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...rest }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "group flex flex-1 items-center justify-between gap-4 py-4",
+        "text-left font-sans font-semibold text-foreground",
+        "transition-colors duration-200",
+        "hover:text-accent-500 dark:hover:text-accent",
+        "focus-visible:outline-2 focus-visible:outline-accent-500 dark:focus-visible:outline-accent focus-visible:outline-offset-2",
+        "motion-reduce:transition-none",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+      <CaretDown
+        weight="bold"
+        aria-hidden="true"
+        className={cn(
+          "size-4 shrink-0 text-accent-500 dark:text-accent",
+          "transition-transform duration-200",
+          "group-data-[state=open]:rotate-180",
+          "motion-reduce:transition-none",
+        )}
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+const AccordionContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...rest }, ref) => (
+  <AccordionPrimitive.Content ref={ref} {...rest}>
+    <div
+      className={cn(
+        "pb-4 text-sm leading-relaxed text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/badge/badge.tsx

@@ -22,8 +22,11 @@ const badgeVariants = cva(
         outline: "border",
       },
       size: {
-        sm: "px-3 py-0.5 text-[10px]",
-        md: "px-4 py-1 text-xs",
+        // Explicit line-height + min-height so icon-only badges match the
+        // height of text badges (a lone icon otherwise yields a shorter
+        // line-box than text, and the inherited line-height is non-deterministic).
+        sm: "px-3 py-0.5 text-[10px] leading-[14px] min-h-5",
+        md: "px-4 py-1 text-xs leading-[16px] min-h-[26px]",
       },
     },
     compoundVariants: [

package/src/components/tooltip/tooltip.tsx

@@ -16,8 +16,8 @@ const TooltipContent = forwardRef<
       sideOffset={sideOffset}
       className={cn(
         [
-          "z-50 rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
-          "text-sm text-foreground shadow-sm",
+          "z-50 max-w-[260px] rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
+          "text-xs leading-snug text-foreground shadow-sm",
           "animate-in fade-in-0 zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
           "data-[state=closed]:zoom-out-95",