@blenx-dev/components 0.0.2 → 0.0.3

package/src/components/Command/command.tsx

@@ -1,413 +0,0 @@
-/* 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

@@ -1,21 +0,0 @@
-{
-  "$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

@@ -1,7 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "$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

@@ -1,40 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,9 +0,0 @@
-{
-  "$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

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

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

@@ -1,20 +0,0 @@
-{
-  "$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

@@ -1,11 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-{
-  "$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

@@ -1,12 +0,0 @@
-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>
-  );
-}