@stasho/ds 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/accordion/accordion.tsx

@@ -45,6 +45,7 @@ const AccordionTrigger = forwardRef<
           "size-4 shrink-0 text-accent-500 dark:text-accent",
           "transition-transform duration-200",
           "group-data-[state=open]:rotate-180",
+          "group-data-[state=closed]:group-hover:translate-y-[3px]",
           "motion-reduce:transition-none",
         )}
       />
@@ -57,10 +58,21 @@ const AccordionContent = forwardRef<
   HTMLDivElement,
   ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...rest }, ref) => (
-  <AccordionPrimitive.Content ref={ref} {...rest}>
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "group overflow-hidden",
+      "motion-safe:data-[state=open]:animate-accordion-down",
+      "motion-safe:data-[state=closed]:animate-accordion-up",
+    )}
+    {...rest}
+  >
     <div
       className={cn(
         "pb-4 text-sm leading-relaxed text-muted-foreground",
+        "opacity-0 -translate-y-1 transition-[opacity,transform] duration-200 ease-out",
+        "group-data-[state=open]:opacity-100 group-data-[state=open]:translate-y-0",
+        "motion-reduce:transition-none motion-reduce:opacity-100 motion-reduce:translate-y-0",
         className,
       )}
     >

package/src/components/logo/logo.tsx

@@ -64,5 +64,71 @@ const LogoFull = forwardRef<SVGSVGElement, LogoProps>(
 
 LogoFull.displayName = "LogoFull";
 
-export { Logo, LogoFull };
+/**
+ * stasho wordmark only, no icon (placeholder logotype, rebrand still deferred).
+ * Set in Anybody 800 italic to match the brand headings; the consuming app must
+ * load Anybody or it falls back to sans-serif. viewBox is fitted to "stasho" at
+ * that cut. Inherits color from parent via `currentColor`.
+ */
+const LogoWordmark = forwardRef<SVGSVGElement, LogoProps>(
+  ({ className, ...rest }, ref) => (
+    <svg
+      ref={ref}
+      viewBox="0 0 654 229"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn("shrink-0", className)}
+      {...rest}
+    >
+      <text
+        x="0"
+        y="180"
+        fill="currentColor"
+        fontFamily="Anybody, sans-serif"
+        fontSize="200"
+        fontWeight="800"
+        fontStyle="italic"
+      >
+        stasho
+      </text>
+    </svg>
+  ),
+);
+
+LogoWordmark.displayName = "LogoWordmark";
+
+/**
+ * stasho letter mark "s", for collapsed / compact placements (placeholder
+ * logotype, rebrand still deferred). Set in Anybody 800 italic to match the
+ * brand headings; the consuming app must load Anybody or it falls back to
+ * sans-serif. Inherits color from parent via `currentColor`.
+ */
+const LogoLetter = forwardRef<SVGSVGElement, LogoProps>(
+  ({ className, ...rest }, ref) => (
+    <svg
+      ref={ref}
+      viewBox="0 0 119 229"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn("shrink-0", className)}
+      {...rest}
+    >
+      <text
+        x="0"
+        y="180"
+        fill="currentColor"
+        fontFamily="Anybody, sans-serif"
+        fontSize="200"
+        fontWeight="800"
+        fontStyle="italic"
+      >
+        s
+      </text>
+    </svg>
+  ),
+);
+
+LogoLetter.displayName = "LogoLetter";
+
+export { Logo, LogoFull, LogoWordmark, LogoLetter };
 export type { LogoProps };

package/src/styles/tokens.css

@@ -375,4 +375,27 @@
     animation: none;
     opacity: 1;
   }
+}
+
+/* ── Accordion open/close (height) ───────────── */
+
+/* Registered as real Tailwind utilities so the `data-[state=...]:` variant can
+   compose (a plain `.animate-accordion-*` CSS class can't carry a Tailwind
+   variant). Applied in the component as `motion-safe:data-[state=open]:…` — the
+   `data-[state]` attribute selector out-specifies `motion-reduce:animate-none`,
+   so reduced motion is honored by gating the animation INTO motion-safe rather
+   than disabling it OUT, which sidesteps the specificity conflict entirely. */
+@theme {
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
 }