@blenx-dev/components 0.0.0

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/docs-meta.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Command",
+  "description": "A searchable command palette with keyboard navigation, groups, and filtering.",
+  "category": "Overlay",
+  "status": "experimental",
+  "keywords": ["command", "palette", "search", "filter", "kbar", "spotlight", "keyboard"],
+  "related": ["Dialog", "Select", "Menu"],
+  "accessibility": {
+    "keyboard": ["ArrowDown", "ArrowUp", "Enter", "Escape"],
+    "aria": [
+      "role",
+      "combobox",
+      "listbox",
+      "option",
+      "aria-selected",
+      "aria-expanded",
+      "aria-haspopup"
+    ]
+  }
+}

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/Command/registry-meta.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "title": "Command",
+  "description": "A searchable command palette with groups, filtering, and keyboard navigation.",
+  "registryDependencies": ["scroll-area"],
+  "files": [
+    {
+      "file": "command.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Command/command.tsx"
+    },
+    {
+      "file": "command.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Command/command.css.ts"
+    }
+  ]
+}

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

@@ -0,0 +1,40 @@
+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%)" },
+      "2xl": { maxWidth: "1280px", width: "100%" },
+      "3xl": { maxWidth: "1440px", width: "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.doc.tsx

@@ -0,0 +1,28 @@
+import { VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Container } from "./container";
+
+export function SizesStory() {
+  return (
+    <VStack gap="medium">
+      <Text variant="h4">Container — sm</Text>
+      <Container size="sm" centered>
+        <div style={{ background: "var(--surface)", padding: 16, borderRadius: 8 }}>
+          <Text variant="body2">Small container (max 640px)</Text>
+        </div>
+      </Container>
+      <Text variant="h4">Container — md</Text>
+      <Container size="md" centered>
+        <div style={{ background: "var(--surface)", padding: 16, borderRadius: 8 }}>
+          <Text variant="body2">Medium container (max 768px)</Text>
+        </div>
+      </Container>
+      <Text variant="h4">Container — full</Text>
+      <Container size="full" centered>
+        <div style={{ background: "var(--surface)", padding: 16, borderRadius: 8 }}>
+          <Text variant="body2">Full width container</Text>
+        </div>
+      </Container>
+    </VStack>
+  );
+}

package/src/components/Container/container.tsx

@@ -0,0 +1,24 @@
+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, ...props }: Props) {
+  return (
+    <Box
+      {...props}
+      flexShrink={0}
+      className={clsx(
+        containerRecipe({
+          size,
+          centered,
+          contentCentered,
+        }),
+      )}
+    />
+  );
+}

package/src/components/Container/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Container",
+  "description": "A centered layout wrapper that constrains content width with configurable max-width presets.",
+  "category": "Layout",
+  "status": "stable",
+  "keywords": ["container", "layout", "wrapper", "center", "max-width"],
+  "related": ["Box", "Stack"]
+}

package/src/components/Container/index.ts

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

package/src/components/Container/registry-meta.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "container",
+  "type": "registry:ui",
+  "title": "Container",
+  "description": "A StyleX Container component.",
+  "registryDependencies": ["box"],
+  "files": [
+    {
+      "file": "container.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Container/container.tsx"
+    },
+    {
+      "file": "container.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Container/container.css.ts"
+    }
+  ]
+}

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";

package/src/components/CopyButton/registry-meta.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "copy-button",
+  "type": "registry:ui",
+  "title": "CopyButton",
+  "description": "Copy button component using IconButton from Blenx UI.",
+  "registryDependencies": ["icon-button"],
+  "files": [
+    {
+      "file": "copy-button.tsx",
+      "type": "registry:ui",
+      "target": "@ui/CopyButton/copy-button.tsx"
+    }
+  ]
+}

package/src/components/DatePicker/date-picker.doc.tsx

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { Stack } from "../Stack/stack";
+import { DatePicker } from "./date-picker";
+
+export function DefaultStory() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  return (
+    <Stack gap="medium">
+      <DatePicker value={date} onChange={setDate} label="Pick a date" />
+    </Stack>
+  );
+}