@stasho/ds 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.4.1",
+  "version": "0.6.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",
@@ -40,6 +41,7 @@
     "./combobox": "./src/components/combobox/combobox.tsx",
     "./slider": "./src/components/slider/slider.tsx",
     "./radio-group": "./src/components/radio-group/radio-group.tsx",
+    "./selectable-card": "./src/components/selectable-card/selectable-card.tsx",
     "./ui/skeleton": "./src/components/ui/skeleton.tsx",
     "./multi-select": "./src/components/multi-select/multi-select.tsx",
     "./pagination": "./src/components/pagination/pagination.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/selectable-card/selectable-card.tsx

@@ -0,0 +1,106 @@
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Check } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const selectableCardVariants = cva(
+  [
+    "relative rounded-2xl border border-edge bg-surface text-left",
+    "transition-[colors,box-shadow]",
+    "hover:border-edge-hover",
+    "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-edge",
+    // selected (data-[state=on]) — only SelectableCard receives this state
+    "data-[state=on]:border-accent data-[state=on]:bg-accent/5",
+  ].join(" "),
+  {
+    variants: {
+      padding: {
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8",
+      },
+    },
+    defaultVariants: {
+      padding: "md",
+    },
+  },
+);
+
+type CardPadding = VariantProps<typeof selectableCardVariants>;
+
+type ActionCardProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  CardPadding & {
+    children: ReactNode;
+  };
+
+const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(
+  ({ padding, className, children, type, ...rest }, ref) => (
+    <button
+      ref={ref}
+      type={type ?? "button"}
+      className={cn(selectableCardVariants({ padding }), className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  ),
+);
+ActionCard.displayName = "ActionCard";
+
+type SelectableCardGroupProps = ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+>;
+
+const SelectableCardGroup = forwardRef<
+  HTMLDivElement,
+  SelectableCardGroupProps
+>(({ className, ...rest }, ref) => (
+  <ToggleGroupPrimitive.Root ref={ref} className={className} {...rest} />
+));
+SelectableCardGroup.displayName = "SelectableCardGroup";
+
+type SelectableCardProps = ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> &
+  CardPadding;
+
+const SelectableCard = forwardRef<HTMLButtonElement, SelectableCardProps>(
+  ({ padding, className, children, ...rest }, ref) => (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(selectableCardVariants({ padding }), className)}
+      {...rest}
+    >
+      <span
+        data-testid="selectable-card-check"
+        aria-hidden="true"
+        className={cn(
+          "absolute right-3 top-3 text-accent",
+          "opacity-0 transition-opacity",
+          "[[data-state=on]_&]:opacity-100",
+        )}
+      >
+        <Check weight="bold" />
+      </span>
+      {children}
+    </ToggleGroupPrimitive.Item>
+  ),
+);
+SelectableCard.displayName = "SelectableCard";
+
+export {
+  ActionCard,
+  SelectableCard,
+  SelectableCardGroup,
+  selectableCardVariants,
+  type ActionCardProps,
+  type SelectableCardProps,
+  type SelectableCardGroupProps,
+};