@blibliki/ui 0.9.2

package/scripts/check-css-palette.mjs

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+const ROOT = process.cwd();
+const SRC_DIR = join(ROOT, "src");
+
+const CSS_EXTENSION = ".css";
+const IGNORED_FILES = new Set(["tokens.css", "src/tokens.css"]);
+
+const RAW_COLOR_PATTERN =
+  /#(?:[\da-fA-F]{3,4}|[\da-fA-F]{6}|[\da-fA-F]{8})\b|(?:rgb|rgba|hsl|hsla|oklch)\(/;
+
+function collectCssFiles(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  const files = [];
+
+  for (const entry of entries) {
+    const fullPath = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...collectCssFiles(fullPath));
+      continue;
+    }
+
+    if (entry.isFile() && entry.name.endsWith(CSS_EXTENSION)) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+function checkCssFile(absolutePath) {
+  const packageRelativePath = relative(ROOT, absolutePath);
+  if (IGNORED_FILES.has(packageRelativePath)) {
+    return [];
+  }
+
+  const source = readFileSync(absolutePath, "utf8");
+  const lines = source.split("\n");
+  const violations = [];
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (line.includes("palette-ignore-line")) {
+      continue;
+    }
+
+    if (!RAW_COLOR_PATTERN.test(line)) {
+      continue;
+    }
+
+    violations.push({
+      file: packageRelativePath,
+      line: index + 1,
+      content: line.trim(),
+    });
+  }
+
+  return violations;
+}
+
+function main() {
+  if (!existsSync(SRC_DIR) || !statSync(SRC_DIR).isDirectory()) {
+    console.log("No src directory found, palette check skipped.");
+    return;
+  }
+
+  const cssFiles = collectCssFiles(SRC_DIR);
+  const violations = cssFiles.flatMap((file) => checkCssFile(file));
+
+  if (violations.length === 0) {
+    console.log("CSS palette check passed: no raw color literals found.");
+    return;
+  }
+
+  console.error("CSS palette check failed.");
+  console.error("Use variables from tokens.css instead of raw color values.");
+  console.error(
+    "Add 'palette-ignore-line' on a line only when you intentionally need an exception.",
+  );
+  console.error("");
+
+  for (const violation of violations) {
+    console.error(`${violation.file}:${violation.line}`);
+    console.error(`  ${violation.content}`);
+  }
+
+  process.exitCode = 1;
+}
+
+main();

package/src/UIProvider.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "@/lib/cn";
+import {
+  createTheme,
+  type UIMode,
+  type UITheme,
+  themeToCssVariables,
+} from "@/theme";
+
+export interface UIProviderProps {
+  children: React.ReactNode;
+  mode?: UIMode;
+  theme?: UITheme;
+  className?: string;
+}
+
+export function UIProvider({
+  children,
+  mode = "light",
+  theme,
+  className,
+}: UIProviderProps): React.JSX.Element {
+  const resolvedTheme = React.useMemo(() => createTheme(theme), [theme]);
+  const variables = React.useMemo(
+    () => themeToCssVariables(resolvedTheme, mode),
+    [resolvedTheme, mode],
+  );
+
+  return (
+    <div
+      className={cn(mode === "dark" && "dark", className)}
+      data-theme={mode}
+      style={variables}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/badge.tsx

@@ -0,0 +1,57 @@
+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 badgeVariants = cva("ui-badge", {
+  variants: {
+    tone: {
+      neutral: "ui-badge--tone-neutral",
+      primary: "ui-badge--tone-primary",
+      secondary: "ui-badge--tone-secondary",
+      success: "ui-badge--tone-success",
+      warning: "ui-badge--tone-warning",
+      error: "ui-badge--tone-error",
+      info: "ui-badge--tone-info",
+    },
+    variant: {
+      soft: "ui-badge--variant-soft",
+      solid: "ui-badge--variant-solid",
+      outline: "ui-badge--variant-outline",
+    },
+    size: {
+      sm: "ui-badge--size-sm",
+      md: "ui-badge--size-md",
+    },
+  },
+  defaultVariants: {
+    tone: "neutral",
+    variant: "soft",
+    size: "md",
+  },
+});
+
+type BadgeElement = HTMLSpanElement;
+
+export interface BadgeProps
+  extends HTMLAttributes<BadgeElement>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+}
+
+const Badge = forwardRef<BadgeElement, BadgeProps>(
+  ({ className, tone, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(badgeVariants({ tone, variant, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -0,0 +1,65 @@
+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 buttonVariants = cva("ui-button", {
+  variants: {
+    variant: {
+      contained: "ui-button--variant-contained",
+      outlined: "ui-button--variant-outlined",
+      text: "ui-button--variant-text",
+    },
+    color: {
+      primary: "ui-button--color-primary",
+      neutral: "ui-button--color-neutral",
+      secondary: "ui-button--color-secondary",
+      error: "ui-button--color-error",
+      warning: "ui-button--color-warning",
+      info: "ui-button--color-info",
+      success: "ui-button--color-success",
+    },
+    size: {
+      md: "ui-button--size-md",
+      sm: "ui-button--size-sm",
+      lg: "ui-button--size-lg",
+      icon: "ui-button--size-icon",
+    },
+  },
+  defaultVariants: {
+    variant: "contained",
+    color: "primary",
+    size: "md",
+  },
+});
+
+type ButtonElement = HTMLButtonElement;
+
+export interface ButtonProps
+  extends
+    Omit<React.ButtonHTMLAttributes<ButtonElement>, "color">,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<ButtonElement, ButtonProps>(
+  (
+    { className, variant, color, size, asChild = false, type, ...props },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, color, size }), className)}
+        type={asChild ? undefined : (type ?? "button")}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/card.tsx

@@ -0,0 +1,44 @@
+import { type ComponentProps, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+
+const Card = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn("ui-card", className)} {...props} />;
+  },
+);
+
+Card.displayName = "Card";
+
+function CardHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-header", className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-title", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-description", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-action", className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-content", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("ui-card-footer", className)} {...props} />;
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/components/context-menu.tsx

@@ -0,0 +1,239 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/cn";
+
+function MenuCheckIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M3.5 8.5 6.5 11.5 12.5 4.5"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MenuDotIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden {...props}>
+      <circle cx="8" cy="8" r="3" />
+    </svg>
+  );
+}
+
+function MenuChevronRightIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M6 3.5 10.5 8 6 12.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ContextMenu(props: ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root {...props} />;
+}
+
+function ContextMenuTrigger(
+  props: ComponentProps<typeof ContextMenuPrimitive.Trigger>,
+) {
+  return <ContextMenuPrimitive.Trigger {...props} />;
+}
+
+function ContextMenuGroup(
+  props: ComponentProps<typeof ContextMenuPrimitive.Group>,
+) {
+  return <ContextMenuPrimitive.Group {...props} />;
+}
+
+function ContextMenuPortal(
+  props: ComponentProps<typeof ContextMenuPrimitive.Portal>,
+) {
+  return <ContextMenuPrimitive.Portal {...props} />;
+}
+
+function ContextMenuSub(
+  props: ComponentProps<typeof ContextMenuPrimitive.Sub>,
+) {
+  return <ContextMenuPrimitive.Sub {...props} />;
+}
+
+function ContextMenuRadioGroup(
+  props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>,
+) {
+  return <ContextMenuPrimitive.RadioGroup {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset = false,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-inset={inset ? "true" : undefined}
+      className={cn("ui-dropdown-item ui-dropdown-sub-trigger", className)}
+      {...props}
+    >
+      {children}
+      <MenuChevronRightIcon className="ui-dropdown-chevron" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        "ui-dropdown-content ui-dropdown-sub-content ui-context-content ui-context-sub-content",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn("ui-dropdown-content ui-context-content", className)}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset = false,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-variant={variant}
+      className={cn("ui-dropdown-item", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "ui-dropdown-item ui-dropdown-item--with-indicator",
+        className,
+      )}
+      {...props}
+    >
+      <span className="ui-dropdown-indicator" aria-hidden>
+        <ContextMenuPrimitive.ItemIndicator>
+          <MenuCheckIcon className="ui-dropdown-indicator-icon" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        "ui-dropdown-item ui-dropdown-item--with-indicator",
+        className,
+      )}
+      {...props}
+    >
+      <span className="ui-dropdown-indicator" aria-hidden>
+        <ContextMenuPrimitive.ItemIndicator>
+          <MenuDotIcon className="ui-dropdown-indicator-icon" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset = false,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-inset={inset ? "true" : undefined}
+      className={cn("ui-dropdown-label", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn("ui-dropdown-separator", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: ComponentProps<"span">) {
+  return <span className={cn("ui-dropdown-shortcut", className)} {...props} />;
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/components/dialog.tsx

@@ -0,0 +1,127 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function DialogTrigger(
+  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,
+) {
+  return <DialogPrimitive.Trigger {...props} />;
+}
+
+function DialogPortal(
+  props: React.ComponentProps<typeof DialogPrimitive.Portal>,
+) {
+  return <DialogPrimitive.Portal {...props} />;
+}
+
+function DialogClose(
+  props: React.ComponentProps<typeof DialogPrimitive.Close>,
+) {
+  return <DialogPrimitive.Close {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn("ui-dialog-overlay", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogCloseIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+interface DialogContentProps extends React.ComponentProps<
+  typeof DialogPrimitive.Content
+> {
+  hideCloseButton?: boolean;
+}
+
+function DialogContent({
+  className,
+  children,
+  hideCloseButton = false,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn("ui-dialog-content", className)}
+        {...props}
+      >
+        {children}
+        {!hideCloseButton && (
+          <DialogPrimitive.Close className="ui-dialog-close">
+            <DialogCloseIcon className="ui-dialog-close-icon" />
+            <span className="ui-visually-hidden">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("ui-dialog-header", className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("ui-dialog-footer", className)} {...props} />;
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("ui-dialog-title", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("ui-dialog-description", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  type DialogContentProps,
+};

package/src/components/divider.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+const dividerVariants = cva("ui-divider", {
+  variants: {
+    orientation: {
+      horizontal: "ui-divider--horizontal",
+      vertical: "ui-divider--vertical",
+    },
+    tone: {
+      subtle: "ui-divider--tone-subtle",
+      strong: "ui-divider--tone-strong",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    tone: "subtle",
+  },
+});
+
+type DividerElement = HTMLDivElement;
+
+export interface DividerProps
+  extends
+    React.HTMLAttributes<DividerElement>,
+    VariantProps<typeof dividerVariants> {}
+
+const Divider = React.forwardRef<DividerElement, DividerProps>(
+  ({ className, orientation, tone, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation ?? "horizontal"}
+        className={cn(dividerVariants({ orientation, tone }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Divider.displayName = "Divider";
+
+export { Divider, dividerVariants };