@stasho/ds 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -24,6 +24,7 @@
   "exports": {
     "./alert": "./src/components/alert/alert.tsx",
     "./button": "./src/components/button/button.tsx",
+    "./icon-button": "./src/components/button/icon-button.tsx",
     "./checkbox": "./src/components/checkbox/checkbox.tsx",
     "./input": "./src/components/input/input.tsx",
     "./textarea": "./src/components/textarea/textarea.tsx",

package/src/components/button/button.tsx

@@ -101,6 +101,14 @@ const buttonVariants = cva(
           "dark:hover:bg-white/[0.04] dark:hover:text-white",
           "dark:disabled:text-white/30 dark:disabled:bg-transparent",
         ].join(" "),
+        link: [
+          // chrome-less inline text action: text-primary, underline on hover, no LED, no padding (zeroed per size below)
+          "bg-transparent font-normal underline-offset-2 text-primary",
+          "hover:underline active:translate-y-0",
+          "dark:text-accent",
+          "disabled:text-foreground/30 disabled:no-underline disabled:hover:no-underline",
+          "dark:disabled:text-white/30",
+        ].join(" "),
       },
       size: {
         xs: "py-[6px] px-3 text-[11px] gap-1.5",
@@ -115,6 +123,10 @@ const buttonVariants = cva(
       { variant: "outline", size: "sm", class: "py-[6px] px-[13px]" },
       { variant: "outline", size: "md", class: "py-[8px] px-[17px]" },
       { variant: "outline", size: "lg", class: "py-[12px] px-[23px]" },
+      { variant: "link", size: "xs", class: "p-0" },
+      { variant: "link", size: "sm", class: "p-0" },
+      { variant: "link", size: "md", class: "p-0" },
+      { variant: "link", size: "lg", class: "p-0" },
     ],
     defaultVariants: {
       variant: "primary",
@@ -152,6 +164,8 @@ const ledColorClass: Record<Variant, string> = {
   outline: "bg-primary/35 text-primary dark:bg-accent/50 dark:text-accent",
   // ghost: LED is never rendered for ghost, so this entry is a sentinel.
   ghost: "",
+  // link: LED is never rendered for link, so this entry is a sentinel.
+  link: "",
 };
 
 // iconLeft glow treatment per variant — applied to the wrapper span.
@@ -163,6 +177,7 @@ const iconGlowClass: Record<Variant, string> = {
   success: "text-success-foreground",
   outline: "text-primary dark:text-accent [filter:drop-shadow(0_0_4px_currentColor)]",
   ghost: "text-foreground/60 dark:text-white/60",
+  link: "text-primary dark:text-accent",
 };
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
@@ -199,8 +214,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     const leadingSlot = (() => {
-      // Loading replaces everything in the leading slot (except on ghost).
-      if (loading && v !== "ghost") {
+      // Loading replaces everything in the leading slot (except on ghost/link).
+      if (loading && v !== "ghost" && v !== "link") {
         return (
           <span
             data-led-chase
@@ -241,8 +256,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           </span>
         );
       }
-      // Resting state with static LED (non-ghost variants).
-      if (v !== "ghost") {
+      // Resting state with static LED (non-ghost/link variants).
+      if (v !== "ghost" && v !== "link") {
         return (
           <span
             data-led

package/src/components/button/icon-button.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+import { buttonVariants } from "./button";
+
+// Square inset per size. The glyph dimensions are consumer-controlled (e.g. <Bell size={18} />);
+// the button stays square because the padding is symmetric.
+const squareSizeClass = {
+  xs: "p-1",
+  sm: "p-1.5",
+  md: "p-2",
+  lg: "p-2.5",
+} as const;
+
+type Variant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type Size = keyof typeof squareSizeClass;
+
+// aria-label is required: an icon-only button must carry an accessible name.
+type IconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "aria-label"
+> & {
+  variant?: Variant;
+  size?: Size;
+  "aria-label": string;
+  children: ReactNode;
+};
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ variant = "ghost", size = "md", className, children, ...rest }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        // reuse Button's color/chassis; tailwind-merge collapses the default
+        // rectangular size padding into the square p-* appended after it.
+        buttonVariants({ variant }),
+        "justify-center shrink-0",
+        squareSizeClass[size],
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  ),
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton, type IconButtonProps };

package/src/components/switch/switch.tsx

@@ -8,21 +8,22 @@ const switchVariants = cva(
     "peer inline-flex shrink-0 cursor-pointer",
     "items-center rounded-[2px]",
     "border border-edge bg-muted dark:bg-neutral-900",
-    "shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
+    "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.7),inset_0_-1px_0_rgba(0,0,0,0.10)]",
+    "dark:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
     "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
-    "disabled:bg-muted dark:disabled:bg-background",
-    "disabled:border-edge/50 disabled:shadow-none",
+    "disabled:bg-edge dark:disabled:bg-background",
+    "disabled:border-edge-hover dark:disabled:border-edge/50 disabled:[box-shadow:none]",
     "disabled:cursor-not-allowed",
-    "disabled:data-[state=checked]:border-edge/50",
+    "disabled:data-[state=checked]:border-edge-hover dark:disabled:data-[state=checked]:border-edge/50",
     "data-[state=checked]:border-accent/30",
     "transition-colors",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "h-4 w-7",
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
+        xs: "h-[18px] w-8",
+        sm: "h-[22px] w-10",
+        md: "h-[26px] w-[47px]",
       },
     },
     defaultVariants: {
@@ -45,9 +46,9 @@ const thumbVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-3 data-[state=checked]:translate-x-[12px]",
-        sm: "size-4 data-[state=checked]:translate-x-[16px]",
-        md: "size-5 data-[state=checked]:translate-x-[20px]",
+        xs: "size-3 data-[state=checked]:translate-x-[16px]",
+        sm: "size-4 data-[state=checked]:translate-x-[20px]",
+        md: "size-5 data-[state=checked]:translate-x-[23px]",
       },
     },
     defaultVariants: {