@blibliki/ui 0.9.2

package/src/components/stack.tsx

@@ -0,0 +1,90 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+const stackVariants = cva("ui-stack", {
+  variants: {
+    direction: {
+      row: "ui-stack--row",
+      column: "ui-stack--column",
+    },
+    align: {
+      start: "ui-stack--align-start",
+      center: "ui-stack--align-center",
+      end: "ui-stack--align-end",
+      stretch: "ui-stack--align-stretch",
+      baseline: "ui-stack--align-baseline",
+    },
+    justify: {
+      start: "ui-stack--justify-start",
+      center: "ui-stack--justify-center",
+      end: "ui-stack--justify-end",
+      between: "ui-stack--justify-between",
+      around: "ui-stack--justify-around",
+      evenly: "ui-stack--justify-evenly",
+    },
+    gap: {
+      0: "ui-stack--gap-0",
+      1: "ui-stack--gap-1",
+      2: "ui-stack--gap-2",
+      3: "ui-stack--gap-3",
+      4: "ui-stack--gap-4",
+      5: "ui-stack--gap-5",
+      6: "ui-stack--gap-6",
+    },
+    wrap: {
+      true: "ui-stack--wrap",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    direction: "column",
+    align: "stretch",
+    justify: "start",
+    gap: 2,
+    wrap: false,
+  },
+});
+
+type StackElement = HTMLDivElement;
+
+export interface StackProps
+  extends
+    React.HTMLAttributes<StackElement>,
+    VariantProps<typeof stackVariants> {
+  asChild?: boolean;
+}
+
+const Stack = React.forwardRef<StackElement, StackProps>(
+  (
+    {
+      className,
+      direction,
+      align,
+      justify,
+      gap,
+      wrap,
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          stackVariants({ direction, align, justify, gap, wrap }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Stack.displayName = "Stack";
+
+export { Stack, stackVariants };

package/src/components/surface.tsx

@@ -0,0 +1,88 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+const surfaceVariants = cva("ui-surface", {
+  variants: {
+    tone: {
+      canvas: "ui-surface--tone-canvas",
+      panel: "ui-surface--tone-panel",
+      raised: "ui-surface--tone-raised",
+      subtle: "ui-surface--tone-subtle",
+    },
+    border: {
+      none: "",
+      subtle: "ui-surface--border-subtle",
+    },
+    radius: {
+      none: "ui-surface--radius-none",
+      sm: "ui-surface--radius-sm",
+      md: "ui-surface--radius-md",
+      lg: "ui-surface--radius-lg",
+    },
+    shadow: {
+      none: "",
+      sm: "ui-surface--shadow-sm",
+      md: "ui-surface--shadow-md",
+      lg: "ui-surface--shadow-lg",
+      xl: "ui-surface--shadow-xl",
+    },
+    intent: {
+      neutral: "",
+      success: "ui-surface--intent-success",
+      warning: "ui-surface--intent-warning",
+      error: "ui-surface--intent-error",
+      info: "ui-surface--intent-info",
+    },
+  },
+  defaultVariants: {
+    tone: "raised",
+    border: "none",
+    radius: "md",
+    shadow: "none",
+    intent: "neutral",
+  },
+});
+
+type SurfaceElement = HTMLDivElement;
+
+export interface SurfaceProps
+  extends
+    React.HTMLAttributes<SurfaceElement>,
+    VariantProps<typeof surfaceVariants> {
+  asChild?: boolean;
+}
+
+const Surface = React.forwardRef<SurfaceElement, SurfaceProps>(
+  (
+    {
+      className,
+      tone,
+      border,
+      radius,
+      shadow,
+      intent,
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          surfaceVariants({ tone, border, radius, shadow, intent }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Surface.displayName = "Surface";
+
+export { Surface, surfaceVariants };

package/src/components/switch.tsx

@@ -0,0 +1,72 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+const switchVariants = cva("ui-switch", {
+  variants: {
+    size: {
+      sm: "ui-switch--size-sm",
+      md: "ui-switch--size-md",
+    },
+    color: {
+      primary: "ui-switch--color-primary",
+      secondary: "ui-switch--color-secondary",
+      error: "ui-switch--color-error",
+      warning: "ui-switch--color-warning",
+      info: "ui-switch--color-info",
+      success: "ui-switch--color-success",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+  },
+});
+
+export interface SwitchProps
+  extends
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onChange">,
+    VariantProps<typeof switchVariants> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      checked = false,
+      onCheckedChange,
+      className,
+      size,
+      color,
+      type,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        role="switch"
+        aria-checked={checked}
+        data-state={checked ? "checked" : "unchecked"}
+        className={cn(switchVariants({ size, color }), className)}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            onCheckedChange?.(!checked);
+          }
+        }}
+        {...props}
+      >
+        <span aria-hidden className="ui-switch__thumb" />
+      </button>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/components/text.tsx

@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const textVariants = cva("ui-text", {
+  variants: {
+    tone: {
+      primary: "ui-text--tone-primary",
+      secondary: "ui-text--tone-secondary",
+      muted: "ui-text--tone-muted",
+      success: "ui-text--tone-success",
+      warning: "ui-text--tone-warning",
+      error: "ui-text--tone-error",
+      info: "ui-text--tone-info",
+    },
+    size: {
+      xs: "ui-text--size-xs",
+      sm: "ui-text--size-sm",
+      md: "ui-text--size-md",
+      lg: "ui-text--size-lg",
+    },
+    weight: {
+      regular: "ui-text--weight-regular",
+      medium: "ui-text--weight-medium",
+      semibold: "ui-text--weight-semibold",
+    },
+  },
+  defaultVariants: {
+    tone: "primary",
+    size: "sm",
+    weight: "regular",
+  },
+});
+
+type TextElement = HTMLParagraphElement;
+
+export interface TextProps
+  extends HTMLAttributes<TextElement>, VariantProps<typeof textVariants> {
+  asChild?: boolean;
+}
+
+const Text = forwardRef<TextElement, TextProps>(
+  ({ className, tone, size, weight, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(textVariants({ tone, size, weight }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Text.displayName = "Text";
+
+export { Text, textVariants };

package/src/components/textarea.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const textareaVariants = cva("ui-textarea", {
+  variants: {
+    size: {
+      sm: "ui-textarea--size-sm",
+      md: "ui-textarea--size-md",
+    },
+    resize: {
+      none: "ui-textarea--resize-none",
+      vertical: "ui-textarea--resize-vertical",
+      both: "ui-textarea--resize-both",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    resize: "vertical",
+  },
+});
+
+export interface TextareaProps
+  extends
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">,
+    VariantProps<typeof textareaVariants> {}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, size, resize, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        data-size={size ?? "md"}
+        className={cn(textareaVariants({ size, resize }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaVariants };

package/src/index.ts

@@ -0,0 +1,120 @@
+export { Button, buttonVariants, type ButtonProps } from "./components/button";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/card";
+export {
+  Surface,
+  surfaceVariants,
+  type SurfaceProps,
+} from "./components/surface";
+export { Stack, stackVariants, type StackProps } from "./components/stack";
+export {
+  Divider,
+  dividerVariants,
+  type DividerProps,
+} from "./components/divider";
+export { IconButton, type IconButtonProps } from "./components/icon-button";
+export { Input, inputVariants, type InputProps } from "./components/input";
+export {
+  Textarea,
+  textareaVariants,
+  type TextareaProps,
+} from "./components/textarea";
+export { Label } from "./components/label";
+export { Text, textVariants, type TextProps } from "./components/text";
+export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
+export { Switch, type SwitchProps } from "./components/switch";
+export {
+  OptionSelect,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type OptionSelectProps,
+} from "./components/select";
+export {
+  Fader,
+  type FaderProps,
+  type MarkProps,
+  type TOrientation,
+} from "./components/fader";
+export { Encoder, type EncoderProps } from "./components/encoder";
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  type DialogContentProps,
+} from "./components/dialog";
+export {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from "./components/context-menu";
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "./components/dropdown-menu";
+export { UIProvider, type UIProviderProps } from "./UIProvider";
+export { cn } from "./lib/cn";
+export {
+  uiColorMix,
+  uiTone,
+  uiVars,
+  type UIIntentTone,
+  type UIIntentToneLevel,
+} from "./semantic";
+export {
+  createTheme,
+  themeToCssVariables,
+  type UIMode,
+  type UIResolvedTheme,
+  type UITheme,
+  type UIColorTokens,
+  type UIRadiusTokens,
+} from "./theme";
+
+export const UI_MAX_TAILWIND_CLASSES = 12;

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/semantic.ts

@@ -0,0 +1,72 @@
+const uiVars = {
+  surface: {
+    canvas: "var(--ui-color-surface-0)",
+    panel: "var(--ui-color-surface-1)",
+    raised: "var(--ui-color-surface-raised)",
+    subtle: "var(--ui-color-surface-2)",
+  },
+  text: {
+    primary: "var(--ui-color-text-primary)",
+    secondary: "var(--ui-color-text-secondary)",
+    muted: "var(--ui-color-text-muted)",
+  },
+  border: {
+    subtle: "var(--ui-color-border-subtle)",
+  },
+} as const;
+
+const toneVars = {
+  primary: {
+    "500": "var(--ui-color-primary-500)",
+    "600": "var(--ui-color-primary-600)",
+    contrast: "var(--ui-color-primary-contrast)",
+  },
+  secondary: {
+    "500": "var(--ui-color-secondary-500)",
+    "600": "var(--ui-color-secondary-600)",
+    contrast: "var(--ui-color-secondary-contrast)",
+  },
+  success: {
+    "500": "var(--ui-color-success-500)",
+    "600": "var(--ui-color-success-600)",
+    contrast: "var(--ui-color-success-contrast)",
+  },
+  warning: {
+    "500": "var(--ui-color-warning-500)",
+    "600": "var(--ui-color-warning-600)",
+    contrast: "var(--ui-color-warning-contrast)",
+  },
+  error: {
+    "500": "var(--ui-color-error-500)",
+    "600": "var(--ui-color-error-600)",
+    contrast: "var(--ui-color-error-contrast)",
+  },
+  info: {
+    "500": "var(--ui-color-info-500)",
+    "600": "var(--ui-color-info-600)",
+    contrast: "var(--ui-color-info-contrast)",
+  },
+} as const;
+
+type UIIntentTone = keyof typeof toneVars;
+type UIIntentToneLevel = keyof (typeof toneVars)[UIIntentTone];
+
+function uiTone(tone: UIIntentTone, level: UIIntentToneLevel = "500"): string {
+  return toneVars[tone][level];
+}
+
+function uiColorMix(
+  base: string,
+  mixWith: string,
+  mixWithPercent: number,
+): string {
+  return `color-mix(in oklab, ${base}, ${mixWith} ${mixWithPercent}%)`;
+}
+
+export {
+  uiColorMix,
+  uiTone,
+  uiVars,
+  type UIIntentTone,
+  type UIIntentToneLevel,
+};