@aleph-front/ds 0.0.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@aleph-front/ds",
+  "version": "0.0.0",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "src/",
+    "!src/**/*.test.tsx",
+    "!src/**/*.test.ts"
+  ],
+  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aleph-im/aleph-cloud-ds.git",
+    "directory": "packages/ds"
+  },
+  "exports": {
+    "./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",
+    "./card": "./src/components/card/card.tsx",
+    "./status-dot": "./src/components/status-dot/status-dot.tsx",
+    "./table": "./src/components/table/table.tsx",
+    "./tooltip": "./src/components/tooltip/tooltip.tsx",
+    "./radio-group": "./src/components/radio-group/radio-group.tsx",
+    "./ui/skeleton": "./src/components/ui/skeleton.tsx",
+    "./ui/spinner": "./src/components/ui/spinner.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": "pnpm lint && pnpm typecheck && pnpm test"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.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/badge/badge.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, type HTMLAttributes } 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",
+    "rounded font-sans font-semibold",
+    "whitespace-nowrap select-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary-100 text-primary-700",
+          "dark:bg-primary-900 dark:text-primary-300",
+        ].join(" "),
+        success: [
+          "bg-success-100 text-success-700",
+          "dark:bg-success-900 dark:text-success-300",
+        ].join(" "),
+        warning: [
+          "bg-warning-100 text-warning-800",
+          "dark:bg-warning-900 dark:text-warning-200",
+        ].join(" "),
+        error: [
+          "bg-error-100 text-error-700",
+          "dark:bg-error-900 dark:text-error-300",
+        ].join(" "),
+        info: [
+          "bg-neutral-100 text-neutral-700",
+          "dark:bg-neutral-800 dark:text-neutral-300",
+        ].join(" "),
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof badgeVariants>;
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ variant, size, className, ...rest }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, size }), className)}
+        {...rest}
+      />
+    );
+  },
+);
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants, type BadgeProps };

package/src/components/button/button.tsx

@@ -0,0 +1,153 @@
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+import { Spinner } from "@ac/components/ui/spinner";
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "font-heading font-bold",
+    "rounded-full border-3 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+    "disabled:pointer-events-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: [
+          "gradient-fill-main text-white border-transparent",
+          "disabled:opacity-50",
+        ].join(" "),
+        secondary: [
+          "gradient-fill-lime text-neutral-950 border-neutral-950",
+          "disabled:opacity-50",
+        ].join(" "),
+        outline: [
+          "border-gradient-main text-primary-700",
+          "hover:text-primary-800",
+          "active:text-primary-800",
+          "disabled:opacity-50",
+        ].join(" "),
+        text: [
+          "bg-transparent text-primary-600 dark:text-primary-300 border-transparent",
+          "hover:bg-primary-100 hover:text-primary-700",
+          "dark:hover:bg-primary-800 dark:hover:text-primary-200",
+          "active:bg-primary-200 active:text-primary-800",
+          "dark:active:bg-primary-700 dark:active:text-primary-100",
+          "disabled:bg-transparent disabled:text-primary-600/50",
+          "dark:disabled:text-primary-300/50",
+        ].join(" "),
+        destructive: [
+          "bg-error-600/20 text-error-700 dark:text-error-300 border-error-600",
+          "hover:bg-error-600/30 hover:border-error-700",
+          "active:bg-error-600/40 active:border-error-800",
+          "disabled:bg-error-600/10 disabled:text-error-700/50 disabled:border-error-600/50",
+        ].join(" "),
+        warning: [
+          "bg-warning-500/20 text-warning-800 dark:text-warning-200 border-warning-500",
+          "hover:bg-warning-500/30 hover:border-warning-600",
+          "active:bg-warning-500/40 active:border-warning-700",
+          "disabled:bg-warning-500/10 disabled:text-warning-800/50 disabled:border-warning-500/50",
+        ].join(" "),
+      },
+      size: {
+        xs: "py-1 px-4 text-sm gap-1",
+        sm: "py-1.5 px-5 text-base gap-1.5",
+        md: "py-2 px-6 text-base gap-2",
+        lg: "py-2.5 px-8 text-lg gap-2",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+
+const iconSize = {
+  xs: "size-3.5",
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5",
+} as const;
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    loading?: boolean;
+    asChild?: boolean;
+  };
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant,
+      size,
+      iconLeft,
+      iconRight,
+      loading = false,
+      disabled = false,
+      asChild = false,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const sizeKey = size ?? "md";
+    const classes = cn(
+      buttonVariants({ variant, size }),
+      loading && "pointer-events-none",
+      className,
+    );
+
+    const iconClass = cn("shrink-0", iconSize[sizeKey], "[&>svg]:size-full");
+
+    const content = (
+      <>
+        {loading ? (
+          <Spinner className={cn("shrink-0", iconSize[sizeKey])} />
+        ) : iconLeft ? (
+          <span className={iconClass}>{iconLeft}</span>
+        ) : null}
+        <span>{children}</span>
+        {!loading && iconRight ? (
+          <span className={iconClass}>{iconRight}</span>
+        ) : null}
+      </>
+    );
+
+    if (asChild && isValidElement(children)) {
+      return cloneElement(children as ReactElement<Record<string, unknown>>, {
+        className: classes,
+        ref,
+        ...rest,
+      });
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        disabled={disabled}
+        aria-busy={loading || undefined}
+        {...rest}
+      >
+        {content}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants, type ButtonProps };

package/src/components/card/card.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const cardVariants = cva("rounded-xl", {
+  variants: {
+    variant: {
+      default: "bg-surface text-surface-foreground border border-edge",
+      noise: "card-noise text-surface-foreground",
+      ghost: "bg-transparent",
+    },
+    padding: {
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: "md",
+  },
+});
+
+type CardProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants> & {
+    title?: ReactNode;
+  };
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant, padding, title, className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, padding }), className)}
+        {...rest}
+      >
+        {title ? (
+          <h3 className="mb-4 text-lg font-heading font-bold">{title}</h3>
+        ) : null}
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";
+
+export { Card, cardVariants, type CardProps };

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,82 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const checkboxVariants = cva(
+  [
+    "peer shrink-0 bg-surface",
+    "border-3 border-edge",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+    "data-[state=checked]:text-primary-foreground",
+    "transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "size-4 rounded",
+        sm: "size-6 rounded-md",
+        md: "size-7 rounded-md",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type CheckboxProps = Omit<
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+  "size"
+> &
+  VariantProps<typeof checkboxVariants> & {
+    error?: boolean;
+  };
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ size, error = false, className, ...rest }, ref) => {
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+          checkboxVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator
+          forceMount
+          className={cn(
+            "flex size-full items-center justify-center text-current",
+            "[clip-path:circle(0%_at_0%_75%)]",
+            "data-[state=checked]:[clip-path:circle(100%_at_50%_50%)]",
+            "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={3}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-[65%]"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox, checkboxVariants, type CheckboxProps };

package/src/components/form-field/form-field.tsx

@@ -0,0 +1,71 @@
+import {
+  cloneElement,
+  isValidElement,
+  useId,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "@ac/lib/cn";
+
+type FormFieldProps = {
+  label: string;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+function FormField({
+  label,
+  required = false,
+  helperText,
+  error,
+  children,
+  className,
+}: FormFieldProps) {
+  const id = useId();
+  const inputId = `${id}-input`;
+  const messageId = `${id}-message`;
+  const hasMessage = Boolean(error ?? helperText);
+
+  const hasError = Boolean(error);
+
+  const child = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        id: inputId,
+        ...(hasMessage ? { "aria-describedby": messageId } : {}),
+        ...(hasError ? { error: true, "aria-invalid": true } : {}),
+      })
+    : children;
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <label
+        htmlFor={inputId}
+        className="text-sm font-medium text-foreground"
+      >
+        {label}
+        {required && (
+          <span className="text-error-600 ml-0.5" aria-hidden="true">
+            *
+          </span>
+        )}
+      </label>
+      {child}
+      {error ? (
+        <p id={messageId} role="alert" className="text-xs text-error-600">
+          {error}
+        </p>
+      ) : helperText ? (
+        <p id={messageId} className="text-xs text-muted-foreground">
+          {helperText}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+FormField.displayName = "FormField";
+
+export { FormField, type FormFieldProps };

package/src/components/input/input.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const inputVariants = cva(
+  [
+    "w-full font-sans text-foreground bg-surface dark:bg-base-800",
+    "border-0 shadow-brand rounded-full",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 transition-[color,box-shadow]",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
+  VariantProps<typeof inputVariants> & {
+    error?: boolean;
+  };
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ size, error = false, className, ...rest }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          inputVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input, inputVariants, type InputProps };

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const radioItemVariants = cva(
+  [
+    "peer shrink-0 rounded-full bg-surface",
+    "border-3 border-edge",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[state=checked]:border-primary",
+    "transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "size-4",
+        sm: "size-6",
+        md: "size-7",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type RadioGroupProps = ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Root
+> & {
+  size?: "xs" | "sm" | "md";
+};
+
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <RadioGroupPrimitive.Root
+        ref={ref}
+        className={cn("flex flex-col gap-2", className)}
+        {...rest}
+      />
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+type RadioGroupItemProps = Omit<
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+  "size"
+> &
+  VariantProps<typeof radioItemVariants>;
+
+const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ size, className, ...rest }, ref) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(radioItemVariants({ size }), className)}
+        {...rest}
+      >
+        <RadioGroupPrimitive.Indicator
+          forceMount
+          className={cn(
+            "flex size-full items-center justify-center",
+            "[clip-path:circle(0%_at_50%_50%)]",
+            "data-[state=checked]:[clip-path:circle(100%_at_50%_50%)]",
+            "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
+          )}
+        >
+          <span className="block size-[65%] rounded-full bg-primary" />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export {
+  RadioGroup,
+  RadioGroupItem,
+  radioItemVariants,
+  type RadioGroupProps,
+  type RadioGroupItemProps,
+};