@blenx-dev/core 0.1.0

package/src/components/Command/command.css.ts

@@ -0,0 +1,130 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  maxHeight: "100%",
+  overflow: "hidden",
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.lg,
+  boxShadow: tokenVars.shadow.lg,
+  boxSizing: "border-box",
+  outline: "none",
+});
+
+export const inputWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.subtle,
+  boxSizing: "border-box",
+});
+
+export const inputIcon = style({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  color: semanticVars.text.disabled,
+});
+
+export const input = style({
+  width: "100%",
+  height: 44,
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  fontSize: tokenVars.fontSize.sm,
+  fontFamily: "inherit",
+  color: semanticVars.text.primary,
+  selectors: {
+    "&::placeholder": {
+      color: semanticVars.text.disabled,
+    },
+  },
+});
+
+export const list = style({
+  overflow: "auto",
+  maxHeight: 300,
+  padding: tokenVars.spacing.xs,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const groupHeading = style({
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.secondary,
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  boxSizing: "border-box",
+  minHeight: 32,
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  borderRadius: tokenVars.borderRadius.sm,
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: "1.4",
+  color: semanticVars.text.primary,
+  cursor: "pointer",
+  userSelect: "none",
+  outline: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const itemActive = style({
+  backgroundColor: semanticVars.background.subtle,
+});
+
+export const itemDisabled = style({
+  color: semanticVars.text.disabled,
+  cursor: "default",
+  selectors: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const separator = style({
+  height: 1,
+  marginTop: tokenVars.spacing.xs,
+  marginBottom: tokenVars.spacing.xs,
+  backgroundColor: semanticVars.border.subtle,
+});
+
+export const empty = style({
+  paddingTop: tokenVars.spacing.lg,
+  paddingBottom: tokenVars.spacing.lg,
+  textAlign: "center",
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.secondary,
+});

package/src/components/Command/command.tsx

@@ -0,0 +1,413 @@
+/* eslint-disable jsx-a11y/prefer-tag-over-role */
+
+import {
+  type ReactNode,
+  type KeyboardEvent,
+  type Dispatch,
+  type SetStateAction,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from "react";
+import clsx from "clsx";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import {
+  root,
+  inputWrapper,
+  inputIcon,
+  input as inputStyle,
+  list,
+  empty,
+  group as groupStyle,
+  groupHeading,
+  item,
+  itemActive,
+  itemDisabled,
+  separator,
+} from "./command.css";
+
+interface CommandItemData {
+  id: string;
+  value: string;
+  keywords?: string[];
+  disabled: boolean;
+}
+
+interface CommandContextValue {
+  query: string;
+  setQuery: Dispatch<SetStateAction<string>>;
+  filteredItems: CommandItemData[];
+  activeIndex: number;
+  setActiveIndex: Dispatch<SetStateAction<number>>;
+  onItemSelect: (value: string) => void;
+  registerItem: (item: CommandItemData) => () => void;
+  listboxId: string;
+}
+
+const CommandContext = createContext<CommandContextValue | null>(null);
+
+function useCommandContext() {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error("Command compound components must be used within <Command>");
+  }
+  return ctx;
+}
+
+interface CommandProps {
+  children: ReactNode;
+  onItemSelect?: (value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+let listboxIdCounter = 0;
+function nextListboxId(): string {
+  return `cmd-listbox-${++listboxIdCounter}`;
+}
+
+export function Command({ children, onItemSelect, className, style }: CommandProps) {
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [items, setItems] = useState<Map<string, CommandItemData>>(new Map());
+  const listboxId = useRef(nextListboxId()).current;
+
+  const handleItemSelect = useCallback(
+    (value: string) => {
+      onItemSelect?.(value);
+    },
+    [onItemSelect],
+  );
+
+  const registerItem = useCallback((item: CommandItemData) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(item.id, item);
+      return next;
+    });
+    return () => {
+      setItems((prev) => {
+        const next = new Map(prev);
+        next.delete(item.id);
+        return next;
+      });
+    };
+  }, []);
+
+  const filteredItems = useMemo(() => {
+    const allItems = [...items.values()];
+    if (!query.trim()) return allItems;
+    const q = query.toLowerCase().trim();
+    return allItems.filter((item) => {
+      if (item.disabled) return false;
+      if (item.value.toLowerCase().includes(q)) return true;
+      if (item.keywords?.some((k) => k.toLowerCase().includes(q))) return true;
+      return false;
+    });
+  }, [query, items]);
+
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [query]);
+
+  const contextValue = useMemo<CommandContextValue>(
+    () => ({
+      query,
+      setQuery,
+      filteredItems,
+      activeIndex,
+      setActiveIndex,
+      onItemSelect: handleItemSelect,
+      registerItem,
+      listboxId,
+    }),
+    [query, filteredItems, activeIndex, handleItemSelect, registerItem, listboxId],
+  );
+
+  return (
+    <CommandContext.Provider value={contextValue}>
+      <div
+        role="combobox"
+        aria-expanded
+        aria-haspopup="listbox"
+        aria-controls={listboxId}
+        className={clsx(root, className)}
+        style={style}
+      >
+        {children}
+      </div>
+    </CommandContext.Provider>
+  );
+}
+
+interface CommandInputProps {
+  placeholder?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandInput({
+  placeholder = "Search\u2026",
+  className,
+  style,
+}: CommandInputProps) {
+  const { query, setQuery } = useCommandContext();
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape" && query) {
+        e.preventDefault();
+        e.stopPropagation();
+        setQuery("");
+        return;
+      }
+      if (e.key === "Escape") {
+        (e.target as HTMLInputElement).blur();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const list = (e.currentTarget as HTMLElement).parentElement
+          ?.nextElementSibling as HTMLElement | null;
+        list?.focus();
+      }
+    },
+    [query, setQuery],
+  );
+
+  return (
+    <div className={clsx(inputWrapper, className)} style={style}>
+      <span className={inputIcon}>
+        <MagnifyingGlass size={16} weight="regular" />
+      </span>
+      <input
+        className={inputStyle}
+        role="searchbox"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck={false}
+      />
+    </div>
+  );
+}
+
+interface CommandListProps {
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandList({ children, className, style }: CommandListProps) {
+  const { filteredItems, activeIndex, setActiveIndex, onItemSelect, listboxId } =
+    useCommandContext();
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (filteredItems.length === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = prev < filteredItems.length - 1 ? prev + 1 : 0;
+            return next;
+          });
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = prev > 0 ? prev - 1 : filteredItems.length - 1;
+            return next;
+          });
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          const activeItem = filteredItems[activeIndex];
+          if (activeItem && !activeItem.disabled) {
+            onItemSelect(activeItem.value);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          (e.target as HTMLElement).blur();
+          break;
+        }
+      }
+    },
+    [filteredItems, setActiveIndex, onItemSelect, activeIndex],
+  );
+
+  return (
+    <div
+      ref={listRef}
+      id={listboxId}
+      role="listbox"
+      tabIndex={-1}
+      className={clsx(list, className)}
+      style={style}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CommandEmptyProps {
+  children?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandEmpty({ children, className, style }: CommandEmptyProps) {
+  const { query, filteredItems } = useCommandContext();
+
+  if (query.trim() && filteredItems.length === 0) {
+    return (
+      <div className={clsx(empty, className)} style={style}>
+        {children ?? "No results found."}
+      </div>
+    );
+  }
+
+  return null;
+}
+
+interface CommandGroupProps {
+  heading?: string;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandGroup({ heading, children, className, style }: CommandGroupProps) {
+  return (
+    <div role="group" aria-label={heading} className={clsx(groupStyle, className)} style={style}>
+      {heading && <div className={groupHeading}>{heading}</div>}
+      {children}
+    </div>
+  );
+}
+
+interface CommandItemProps {
+  value: string;
+  keywords?: string[];
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandItem({
+  value,
+  keywords,
+  disabled = false,
+  children,
+  className,
+  style,
+}: CommandItemProps) {
+  const { filteredItems, activeIndex, setActiveIndex, registerItem, onItemSelect } =
+    useCommandContext();
+
+  useEffect(() => {
+    const unregister = registerItem({
+      id: value,
+      value,
+      keywords,
+      disabled,
+    });
+    return () => {
+      unregister();
+    };
+  }, [value, keywords, disabled, registerItem]);
+
+  const isVisible = useMemo(
+    () => filteredItems.some((item) => item.id === value),
+    [filteredItems, value],
+  );
+
+  const itemIndex = useMemo(
+    () => filteredItems.findIndex((item) => item.id === value),
+    [filteredItems, value],
+  );
+
+  const isActive = activeIndex >= 0 && itemIndex === activeIndex;
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isActive && itemRef.current) {
+      itemRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isActive]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      onItemSelect(value);
+    }
+  }, [disabled, onItemSelect, value]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!disabled) {
+          onItemSelect(value);
+        }
+      }
+    },
+    [disabled, onItemSelect, value],
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    if (!disabled && itemIndex >= 0) {
+      setActiveIndex(itemIndex);
+    }
+  }, [disabled, setActiveIndex, itemIndex]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      ref={itemRef}
+      role="option"
+      aria-selected={isActive}
+      aria-disabled={disabled}
+      data-value={value}
+      tabIndex={-1}
+      className={clsx(item, isActive && itemActive, disabled && itemDisabled, className)}
+      style={style}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      onMouseEnter={handleMouseEnter}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CommandSeparatorProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CommandSeparator({ className, style }: CommandSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      className={clsx(separator, className)}
+      style={style}
+    />
+  );
+}

package/src/components/Command/index.ts

@@ -0,0 +1,7 @@
+export { Command } from "./command";
+export { CommandInput } from "./command";
+export { CommandList } from "./command";
+export { CommandEmpty } from "./command";
+export { CommandGroup } from "./command";
+export { CommandItem } from "./command";
+export { CommandSeparator } from "./command";

package/src/components/Container/container.css.ts

@@ -0,0 +1,41 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const containerRecipe = recipe({
+  base: {
+    boxSizing: "border-box",
+    minWidth: 0,
+  },
+  variants: {
+    size: {
+      xxs: { width: "min(240px, 100%)" },
+      xs: { width: "min(320px, 100%)" },
+      sm: { width: "min(480px, 100%)" },
+      md: { width: "min(640px, 100%)" },
+      lg: { width: "min(768px, 100%)" },
+      xl: { width: "min(1024px, 100%)" },
+      xxl: { width: "min(1280px, 100%)" },
+      xxxl: { width: "min(1440px, 100%)" },
+      xxxxl: { width: "min(1536px, 100%)" },
+      full: { maxWidth: "100%", width: "100%" },
+    },
+    centered: {
+      true: {
+        marginLeft: "auto",
+        marginRight: "auto",
+      },
+    },
+
+    contentCentered: {
+      true: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+    centered: true,
+  },
+});

package/src/components/Container/container.tsx

@@ -0,0 +1,25 @@
+import type { BoxProps } from "../Box/box";
+import { Box } from "../Box/box";
+import clsx from "clsx";
+import { containerRecipe } from "./container.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+export type ContainerVariants = RecipeVariants<typeof containerRecipe>;
+
+type Props = BoxProps & ContainerVariants;
+export type ContainerProps = Props;
+export function Container({ size, centered = true, contentCentered, className, ...props }: Props) {
+  return (
+    <Box
+      {...props}
+      flexShrink={0}
+      className={clsx(
+        containerRecipe({
+          size,
+          centered,
+          contentCentered,
+        }),
+        className,
+      )}
+    />
+  );
+}

package/src/components/Container/index.ts

@@ -0,0 +1 @@
+export * from "./container";

package/src/components/CopyButton/copy-button.css.ts

@@ -0,0 +1,11 @@
+import { style } from "@vanilla-extract/css";
+
+export const icon = style({
+  width: "16px",
+  height: "16px",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+});

package/src/components/CopyButton/copy-button.tsx

@@ -0,0 +1,45 @@
+import { useState, useCallback, type MouseEvent } from "react";
+import { IconButton, type IconButtonProps } from "../IconButton/icon-button";
+import { icon } from "./copy-button.css";
+
+export type CopyButtonProps = Omit<IconButtonProps, "onClick"> & {
+  copyValue?: string;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export function CopyButton({ copyValue, onClick, ...props }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (copyValue) {
+        navigator.clipboard.writeText(copyValue).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        });
+      }
+      onClick?.(e);
+    },
+    [copyValue, onClick],
+  );
+
+  return (
+    <IconButton
+      variant="soft"
+      {...props}
+      title={copied ? "Copied!" : `Copy ${copyValue ?? ""}`}
+      onClick={handleClick}
+    >
+      {copied ? (
+        <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      ) : (
+        <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </IconButton>
+  );
+}

package/src/components/CopyButton/index.ts

@@ -0,0 +1,2 @@
+export { CopyButton } from "./copy-button";
+export type { CopyButtonProps } from "./copy-button";