@stasho/ds 0.12.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "./pagination": "./src/components/pagination/pagination.tsx",
     "./copyable-text": "./src/components/copyable-text/copyable-text.tsx",
     "./dialog": "./src/components/dialog/dialog.tsx",
+    "./drawer": "./src/components/drawer/drawer.tsx",
     "./logo": "./src/components/logo/logo.tsx",
     "./progress-bar": "./src/components/progress-bar/progress-bar.tsx",
     "./stepper": "./src/components/stepper/stepper.tsx",

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+} from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { X } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+/* ── Direct re-exports ─────────────────────────── */
+
+const Drawer = DialogPrimitive.Root;
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerClose = DialogPrimitive.Close;
+
+/* ── DrawerContent (Portal + Overlay + Content) ── */
+
+type DrawerSide = "bottom" | "left" | "right";
+
+const sideClasses: Record<DrawerSide, string> = {
+  bottom: cn(
+    "inset-x-0 bottom-0 max-h-[85dvh] w-full rounded-t-xl border-t",
+    "motion-safe:data-[state=open]:animate-drawer-in-bottom",
+    "motion-safe:data-[state=closed]:animate-drawer-out-bottom",
+  ),
+  left: cn(
+    "inset-y-0 left-0 h-dvh w-80 max-w-[85vw] border-r",
+    "motion-safe:data-[state=open]:animate-drawer-in-left",
+    "motion-safe:data-[state=closed]:animate-drawer-out-left",
+  ),
+  right: cn(
+    "inset-y-0 right-0 h-dvh w-80 max-w-[85vw] border-l",
+    "motion-safe:data-[state=open]:animate-drawer-in-right",
+    "motion-safe:data-[state=closed]:animate-drawer-out-right",
+  ),
+};
+
+type DrawerContentProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> & {
+  side?: DrawerSide;
+};
+
+const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  ({ className, children, side = "bottom", ...rest }, ref) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className={cn(
+          "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "motion-reduce:animate-none",
+        )}
+      />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed z-50 border-edge bg-surface p-6",
+          "overflow-y-auto overscroll-contain",
+          sideClasses[side],
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute top-4 right-4 rounded-sm",
+            "text-muted-foreground transition-colors hover:text-foreground",
+            "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+          )}
+          aria-label="Close"
+        >
+          <X weight="bold" className="size-4" />
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  ),
+);
+
+DrawerContent.displayName = "DrawerContent";
+
+/* ── DrawerTitle ───────────────────────────────── */
+
+const DrawerTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...rest }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "font-heading font-bold text-lg text-foreground",
+      className,
+    )}
+    {...rest}
+  />
+));
+
+DrawerTitle.displayName = "DrawerTitle";
+
+/* ── DrawerDescription ─────────────────────────── */
+
+const DrawerDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...rest }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...rest}
+  />
+));
+
+DrawerDescription.displayName = "DrawerDescription";
+
+/* ── Exports ───────────────────────────────────── */
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+  type DrawerContentProps,
+};

package/src/components/tabs/tabs.tsx

@@ -193,7 +193,9 @@ type OverflowTriggerProps = {
 
 const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
   ({ isPill, isSmall, hiddenTabs, hasActiveHidden, visible }, ref) => (
-    <DropdownMenu.Root>
+    // Non-modal: Radix's modal scroll-lock pads <body> for the missing
+    // scrollbar, visibly shifting/squeezing the page on mobile viewports.
+    <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
         <button
           ref={ref}

package/src/styles/tokens.css

@@ -398,4 +398,49 @@
 @keyframes accordion-up {
   from { height: var(--radix-accordion-content-height); }
   to   { height: 0; }
+}
+
+/* ── Drawer slide in/out (per side) ────────────── */
+
+/* Same mechanism as the Accordion utilities above: registered in @theme so
+   the `data-[state=...]:` variant composes, and applied in the component as
+   `motion-safe:data-[state=…]:animate-drawer-*` so reduced motion is honored
+   by gating the animation INTO motion-safe. */
+@theme {
+  --animate-drawer-in-bottom: drawer-in-bottom 300ms ease-out;
+  --animate-drawer-out-bottom: drawer-out-bottom 300ms ease-in;
+  --animate-drawer-in-left: drawer-in-left 300ms ease-out;
+  --animate-drawer-out-left: drawer-out-left 300ms ease-in;
+  --animate-drawer-in-right: drawer-in-right 300ms ease-out;
+  --animate-drawer-out-right: drawer-out-right 300ms ease-in;
+}
+
+@keyframes drawer-in-bottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes drawer-out-bottom {
+  from { transform: translateY(0); }
+  to   { transform: translateY(100%); }
+}
+
+@keyframes drawer-in-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-out-left {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-100%); }
+}
+
+@keyframes drawer-in-right {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-out-right {
+  from { transform: translateX(0); }
+  to   { transform: translateX(100%); }
 }