@stasho/ds 0.1.0

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@stasho/ds",
+  "version": "0.1.0",
+  "description": "stasho design system",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/cpascariello/stasho-ds#readme",
+  "bugs": {
+    "url": "https://github.com/cpascariello/stasho-ds/issues"
+  },
+  "files": [
+    "src/",
+    "!src/**/*.test.tsx",
+    "!src/**/*.test.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cpascariello/stasho-ds.git",
+    "directory": "packages/ds"
+  },
+  "exports": {
+    "./alert": "./src/components/alert/alert.tsx",
+    "./button": "./src/components/button/button.tsx",
+    "./checkbox": "./src/components/checkbox/checkbox.tsx",
+    "./input": "./src/components/input/input.tsx",
+    "./textarea": "./src/components/textarea/textarea.tsx",
+    "./select": "./src/components/select/select.tsx",
+    "./switch": "./src/components/switch/switch.tsx",
+    "./form-field": "./src/components/form-field/form-field.tsx",
+    "./badge": "./src/components/badge/badge.tsx",
+    "./breadcrumb": "./src/components/breadcrumb/breadcrumb.tsx",
+    "./card": "./src/components/card/card.tsx",
+    "./status-dot": "./src/components/status-dot/status-dot.tsx",
+    "./table": "./src/components/table/table.tsx",
+    "./tabs": "./src/components/tabs/tabs.tsx",
+    "./tooltip": "./src/components/tooltip/tooltip.tsx",
+    "./combobox": "./src/components/combobox/combobox.tsx",
+    "./slider": "./src/components/slider/slider.tsx",
+    "./radio-group": "./src/components/radio-group/radio-group.tsx",
+    "./ui/skeleton": "./src/components/ui/skeleton.tsx",
+    "./ui/spinner": "./src/components/ui/spinner.tsx",
+    "./multi-select": "./src/components/multi-select/multi-select.tsx",
+    "./pagination": "./src/components/pagination/pagination.tsx",
+    "./copyable-text": "./src/components/copyable-text/copyable-text.tsx",
+    "./dialog": "./src/components/dialog/dialog.tsx",
+    "./logo": "./src/components/logo/logo.tsx",
+    "./progress-bar": "./src/components/progress-bar/progress-bar.tsx",
+    "./stepper": "./src/components/stepper/stepper.tsx",
+    "./lib/cn": "./src/lib/cn.ts",
+    "./styles/tokens.css": "./src/styles/tokens.css"
+  },
+  "scripts": {
+    "lint": "oxlint --import-plugin src/",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "check": "npm run lint && npm run typecheck && npm run test"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "2.1.10",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "radix-ui": "1.4.3",
+    "tailwind-merge": "3.5.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/jsdom": "28.0.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.4",
+    "jsdom": "28.1.0",
+    "oxlint": "1.50.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18"
+  }
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { XCircle } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+type AlertVariant = "warning" | "error" | "info" | "success";
+
+const VARIANT_LABELS: Record<AlertVariant, string> = {
+  warning: "Warning",
+  error: "Error",
+  info: "Info",
+  success: "Success",
+};
+
+const VARIANT_BG_CLASS: Record<AlertVariant, string> = {
+  warning: "alert-bg-warning",
+  error: "alert-bg-error",
+  info: "alert-bg-info",
+  success: "alert-bg-success",
+};
+
+const alertVariants = cva(
+  [
+    "relative overflow-hidden rounded-sm border",
+    "px-3 py-2",
+    "transition-all duration-200",
+    "motion-reduce:transition-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        warning: "border-warning-400",
+        error: "border-error-300",
+        info: "border-primary-300",
+        success: "border-success-400",
+      },
+    },
+    defaultVariants: {
+      variant: "warning",
+    },
+  },
+);
+
+const labelVariants = cva(
+  "font-heading font-extrabold italic text-xs uppercase leading-normal pb-1",
+  {
+    variants: {
+      variant: {
+        warning: "text-warning-600 dark:text-warning-300",
+        error: "text-error-600 dark:text-error-300",
+        info: "text-primary-600 dark:text-primary-300",
+        success: "text-success-600 dark:text-success-300",
+      },
+    },
+  },
+);
+
+const progressVariants = cva("absolute bottom-0 left-0 h-0.5", {
+  variants: {
+    variant: {
+      warning: "bg-warning-400",
+      error: "bg-error-400",
+      info: "bg-primary-400",
+      success: "bg-success-400",
+    },
+  },
+});
+
+type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> &
+  VariantProps<typeof alertVariants> & {
+    title?: string;
+    onDismiss?: () => void;
+    dismissAfter?: number;
+    children: ReactNode;
+  };
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = "warning",
+      title,
+      onDismiss,
+      dismissAfter,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [isDismissing, setIsDismissing] = useState(false);
+    const [progressActive, setProgressActive] = useState(false);
+    const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+    const resolvedVariant: AlertVariant = variant ?? "warning";
+
+    const label = VARIANT_LABELS[resolvedVariant];
+
+    useEffect(() => {
+      if (!dismissAfter || !onDismiss) return;
+
+      requestAnimationFrame(() => {
+        setProgressActive(true);
+      });
+
+      timerRef.current = setTimeout(() => {
+        setIsDismissing(true);
+      }, dismissAfter);
+
+      return () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+      };
+    }, [dismissAfter, onDismiss]);
+
+    function handleDismiss() {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setIsDismissing(true);
+    }
+
+    function handleTransitionEnd() {
+      if (isDismissing && onDismiss) {
+        onDismiss();
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          alertVariants({ variant }),
+          VARIANT_BG_CLASS[resolvedVariant],
+          isDismissing && "opacity-0 -translate-y-2",
+          className,
+        )}
+        onTransitionEnd={handleTransitionEnd}
+        {...rest}
+      >
+        <span className={labelVariants({ variant })}>
+          {label}
+        </span>
+
+        {title ? (
+          <p
+            data-alert-title=""
+            className="font-sans font-bold text-sm text-foreground mt-0.5"
+          >
+            {title}
+          </p>
+        ) : null}
+
+        {/* eslint-disable-next-line -- nested selectors for auto-styled links */}
+        <div className={cn(
+          "font-sans italic text-xs text-foreground leading-relaxed",
+          "[&_a]:font-bold [&_a]:not-italic [&_a]:underline",
+          "[&_a]:after:content-['↗'] [&_a]:after:ml-0.5 [&_a]:after:text-[10px] [&_a]:after:no-underline [&_a]:after:inline-block",
+        )}>
+          {children}
+        </div>
+
+        {onDismiss ? (
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className={cn(
+              "absolute top-2 right-2 cursor-pointer",
+              labelVariants({ variant }),
+            )}
+            aria-label="Dismiss"
+          >
+            <XCircle weight="fill" className="size-3.5" />
+          </button>
+        ) : null}
+
+        {dismissAfter && onDismiss ? (
+          <div
+            data-alert-progress=""
+            className={cn(
+              progressVariants({ variant }),
+              "motion-reduce:transition-none",
+            )}
+            style={{
+              width: progressActive ? "0%" : "100%",
+              transitionProperty: "width",
+              transitionDuration: `${dismissAfter}ms`,
+              transitionTimingFunction: "linear",
+            }}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Alert.displayName = "Alert";
+
+export { Alert, alertVariants, type AlertProps };

package/src/components/badge/badge.tsx

@@ -0,0 +1,139 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const badgeVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-1.5",
+    "rounded-md font-heading font-extrabold italic uppercase",
+    "whitespace-nowrap select-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "",
+        success: "",
+        warning: "",
+        error: "",
+        info: "",
+      },
+      fill: {
+        solid: "",
+        outline: "border",
+      },
+      size: {
+        sm: "px-3 py-0.5 text-[10px]",
+        md: "px-4 py-1 text-xs",
+      },
+    },
+    compoundVariants: [
+      {
+        fill: "solid",
+        variant: "default",
+        className: "gradient-fill-info text-neutral-950",
+      },
+      {
+        fill: "solid",
+        variant: "success",
+        className: "gradient-fill-success text-neutral-950",
+      },
+      {
+        fill: "solid",
+        variant: "warning",
+        className: "gradient-fill-warning text-neutral-950",
+      },
+      {
+        fill: "solid",
+        variant: "error",
+        className: "gradient-fill-error text-neutral-950",
+      },
+      {
+        fill: "solid",
+        variant: "info",
+        className: [
+          "bg-neutral-100 text-neutral-700",
+          "dark:bg-neutral-800 dark:text-neutral-200",
+        ].join(" "),
+      },
+      {
+        fill: "outline",
+        variant: "default",
+        className: [
+          "border-primary-300 bg-primary-100 text-neutral-950",
+          "dark:bg-primary-900/20 dark:text-neutral-200",
+        ].join(" "),
+      },
+      {
+        fill: "outline",
+        variant: "success",
+        className: [
+          "border-success-400 bg-success-100 text-neutral-950",
+          "dark:bg-success-900/20 dark:text-neutral-200",
+        ].join(" "),
+      },
+      {
+        fill: "outline",
+        variant: "warning",
+        className: [
+          "border-warning-400 bg-warning-100 text-neutral-950",
+          "dark:bg-warning-900/20 dark:text-neutral-200",
+        ].join(" "),
+      },
+      {
+        fill: "outline",
+        variant: "error",
+        className: [
+          "border-error-400 bg-error-100 text-neutral-950",
+          "dark:bg-error-900/20 dark:text-neutral-200",
+        ].join(" "),
+      },
+      {
+        fill: "outline",
+        variant: "info",
+        className: [
+          "border-neutral-400 bg-neutral-100/50 text-neutral-700",
+          "dark:border-neutral-600 dark:bg-neutral-800/50 dark:text-neutral-300",
+        ].join(" "),
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      fill: "solid",
+      size: "md",
+    },
+  },
+);
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof badgeVariants> & {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+  };
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    { variant, fill, size, iconLeft, iconRight, className, children, ...rest },
+    ref,
+  ) => {
+    const iconSize = size === "sm" ? "size-2.5" : "size-3";
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, fill, size }), className)}
+        {...rest}
+      >
+        {iconLeft && (
+          <span className={cn(iconSize, "shrink-0")}>{iconLeft}</span>
+        )}
+        {children}
+        {iconRight && (
+          <span className={cn(iconSize, "shrink-0")}>{iconRight}</span>
+        )}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants, type BadgeProps };

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { Slot } from "radix-ui";
+import { cn } from "@ac/lib/cn";
+
+/* ── Breadcrumb (nav wrapper) ────────────────── */
+
+const Breadcrumb = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
+  ({ className, ...rest }, ref) => (
+    <nav
+      ref={ref}
+      aria-label="Breadcrumb"
+      className={cn(className)}
+      {...rest}
+    />
+  ),
+);
+
+Breadcrumb.displayName = "Breadcrumb";
+
+/* ── BreadcrumbList (ol) ─────────────────────── */
+
+const BreadcrumbList = forwardRef<
+  HTMLOListElement,
+  HTMLAttributes<HTMLOListElement>
+>(({ className, ...rest }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1",
+      "font-heading font-extrabold italic uppercase text-xs",
+      className,
+    )}
+    {...rest}
+  />
+));
+
+BreadcrumbList.displayName = "BreadcrumbList";
+
+/* ── BreadcrumbItem (li) ─────────────────────── */
+
+const BreadcrumbItem = forwardRef<
+  HTMLLIElement,
+  HTMLAttributes<HTMLLIElement>
+>(({ className, ...rest }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center", className)}
+    {...rest}
+  />
+));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+/* ── BreadcrumbLink (a, with asChild) ────────── */
+
+type BreadcrumbLinkProps = HTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean;
+  href?: string;
+};
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Comp = asChild ? Slot.Root : "a";
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "text-foreground",
+          "transition-colors duration-150",
+          "hover:text-primary-600 dark:hover:text-primary-400",
+          "motion-reduce:transition-none",
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+/* ── BreadcrumbSeparator (li, visual only) ───── */
+
+type BreadcrumbSeparatorProps = HTMLAttributes<HTMLLIElement> & {
+  children?: ReactNode;
+};
+
+const BreadcrumbSeparator = forwardRef<
+  HTMLLIElement,
+  BreadcrumbSeparatorProps
+>(({ children, className, ...rest }, ref) => (
+  <li
+    ref={ref}
+    aria-hidden="true"
+    className={cn("text-primary opacity-40", className)}
+    {...rest}
+  >
+    {children ?? "/"}
+  </li>
+));
+
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+/* ── BreadcrumbPage (current page) ───────────── */
+
+const BreadcrumbPage = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement>
+>(({ className, ...rest }, ref) => (
+  <span
+    ref={ref}
+    aria-current="page"
+    className={cn("text-neutral opacity-40", className)}
+    {...rest}
+  />
+));
+
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+/* ── Exports ─────────────────────────────────── */
+
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  type BreadcrumbLinkProps,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};