@blenx-dev/components 0.0.0

package/src/DataTable/types.ts

@@ -0,0 +1,169 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  OnChangeFn,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  TableOptions,
+  VisibilityState,
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
+
+// ─── Data loading modes ──────────────────────────────────────────────────────
+
+export type TableMode = "client" | "server" | "infinite";
+
+// ─── Server-state metadata ───────────────────────────────────────────────────
+
+export interface ServerTableState {
+  pagination: PaginationState;
+  sorting: SortingState;
+  columnFilters: ColumnFiltersState;
+  globalFilter: string;
+}
+
+export interface ServerTableResponse<TData> {
+  rows: TData[];
+  totalCount: number;
+  pageCount: number;
+}
+
+// ─── Feature configuration ───────────────────────────────────────────────────
+
+export interface TableFeatures {
+  sorting?: boolean;
+  globalSearch?: boolean;
+  pagination?: boolean;
+  columnVisibility?: boolean;
+  rowSelection?: boolean;
+  columnResizing?: boolean;
+  columnPinning?: boolean;
+  stickyHeader?: boolean;
+  rowActions?: boolean;
+  bulkActions?: boolean;
+}
+
+// ─── Infinite scroll configuration ───────────────────────────────────────────
+
+export type InfiniteScrollMode = "auto" | "manual";
+
+export interface InfiniteScrollConfig {
+  mode: InfiniteScrollMode;
+  /** Root margin for IntersectionObserver. Default: "200px" */
+  rootMargin?: string;
+  /** IntersectionObserver threshold. Default: 0 */
+  threshold?: number;
+  /** Load-more button text for manual mode. Default: "Load more" */
+  loadMoreText?: string;
+  /** Loading text. Default: "Loading..." */
+  loadingText?: string;
+  /** No more data text. Default: "No more results" */
+  noMoreText?: string;
+}
+
+// ─── Column pinning configuration ────────────────────────────────────────────
+
+export interface ColumnPinningOptions {
+  left?: string[];
+  right?: string[];
+}
+
+// ─── Row action ──────────────────────────────────────────────────────────────
+
+export interface RowAction<TData> {
+  label: string;
+  icon?: ReactNode;
+  onClick: (row: TData) => void;
+  disabled?: boolean | ((row: TData) => boolean);
+  variant?: "default" | "destructive";
+}
+
+// ─── Bulk action ─────────────────────────────────────────────────────────────
+
+export interface BulkAction<TData> {
+  label: string;
+  icon?: ReactNode;
+  onClick: (selectedRows: TData[]) => void;
+  disabled?: boolean;
+  variant?: "default" | "destructive";
+}
+
+// ─── Component slots ─────────────────────────────────────────────────────────
+
+export interface TableSlots<TData> {
+  toolbar?: ReactNode;
+  pagination?: ReactNode;
+  empty?: ReactNode;
+  loading?: ReactNode;
+  error?: ReactNode;
+  rowActions?: (row: TData) => ReactNode;
+  bulkActions?: (selectedRows: TData[]) => ReactNode;
+}
+
+// ─── State callbacks ─────────────────────────────────────────────────────────
+
+export interface TableCallbacks<TData> {
+  onSortingChange?: OnChangeFn<SortingState>;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  onGlobalFilterChange?: OnChangeFn<string>;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  onRowClick?: (row: TData) => void;
+}
+
+// ─── Table size ──────────────────────────────────────────────────────────────
+
+export type TableSize = "sm" | "md" | "lg";
+
+// ─── DataTable unified props ─────────────────────────────────────────────────
+
+export interface DataTableProps<TData extends Record<string, unknown>> {
+  // ── Data ──
+  columns: ColumnDef<TData, unknown>[];
+  data: TData[] | undefined;
+  totalCount?: number;
+  pageCount?: number;
+
+  // ── Mode ──
+  mode?: TableMode;
+
+  // ── States ──
+  isLoading?: boolean;
+  isFetching?: boolean;
+  isError?: boolean;
+  errorMessage?: string;
+
+  // ── TanStack Query integration (server + infinite) ──
+  fetchNextPage?: () => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+
+  // ── Configuration ──
+  features?: TableFeatures;
+  size?: TableSize;
+  infiniteScroll?: InfiniteScrollConfig;
+  columnPinning?: ColumnPinningOptions;
+
+  // ── Slots ──
+  slots?: TableSlots<TData>;
+  rowActions?: RowAction<TData>[];
+
+  // ── State ──
+  initialSorting?: SortingState;
+  initialPagination?: PaginationState;
+  initialColumnFilters?: ColumnFiltersState;
+  initialGlobalFilter?: string;
+  initialColumnVisibility?: VisibilityState;
+  initialRowSelection?: RowSelectionState;
+
+  // ── Callbacks ──
+  callbacks?: TableCallbacks<TData>;
+
+  // ── Table options override ──
+  tableOptions?: Partial<TableOptions<TData>>;
+
+  // ── Styles ──
+  className?: string;
+  style?: React.CSSProperties;
+}

package/src/DataTable/use-infinite-scroll.ts

@@ -0,0 +1,67 @@
+import { type RefObject, useCallback, useEffect, useRef } from "react";
+
+interface UseInfiniteScrollOptions {
+  /** Whether there are more pages to load */
+  hasNextPage: boolean;
+  /** Whether a fetch is currently in progress */
+  isFetchingNextPage: boolean;
+  /** Function to fetch the next page */
+  fetchNextPage: () => void;
+  /** IntersectionObserver root margin. Default: "200px" */
+  rootMargin?: string;
+  /** IntersectionObserver threshold. Default: 0 */
+  threshold?: number;
+  /** If true, the observer is disabled */
+  enabled?: boolean;
+}
+
+interface UseInfiniteScrollReturn {
+  /** Ref to attach to the sentinel element */
+  sentinelRef: RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Hook to observe a sentinel element and trigger fetchNextPage when visible.
+ *
+ * Uses IntersectionObserver with a configurable root margin and threshold.
+ * Respects hasNextPage, isFetchingNextPage, and enabled state to prevent
+ * duplicate requests.
+ */
+export function useInfiniteScroll({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  rootMargin = "200px",
+  threshold = 0,
+  enabled = true,
+}: UseInfiniteScrollOptions): UseInfiniteScrollReturn {
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries;
+      if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+    [hasNextPage, isFetchingNextPage, fetchNextPage],
+  );
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !enabled) return;
+
+    const observer = new IntersectionObserver(handleIntersection, {
+      rootMargin,
+      threshold,
+    });
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled, handleIntersection, rootMargin, threshold]);
+
+  return { sentinelRef };
+}

package/src/components/Accordion/accordion.css.ts

@@ -0,0 +1,93 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import {
+  borderWidth,
+  duration,
+  easing,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  spacing,
+} from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  boxSizing: "border-box",
+});
+
+export const rootVertical = style({
+  flexDirection: "column",
+});
+
+export const item = style({
+  borderBottomWidth: borderWidth.thin,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.borderSubtle,
+});
+
+export const itemDisabled = style({
+  opacity: 0.5,
+});
+
+export const trigger = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.xxsmall,
+  width: "100%",
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.xxsmall,
+  paddingRight: spacing.xxsmall,
+  boxSizing: "border-box",
+  fontSize: fontSize.small,
+  lineHeight: lineHeight.normal,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentPrimary,
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: themeContract.borderRadius,
+  appearance: "none",
+  fontFamily: "inherit",
+  textAlign: "left",
+  borderWidth: 0,
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  outline: "none",
+  outlineOffset: "2px",
+  transitionProperty: "background-color",
+  transitionDuration: duration.fast,
+  transitionTimingFunction: easing.standard,
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.surfaceHover,
+    },
+    "&:focus-visible": {
+      outline: `2px solid ${themeContract.focusRing}`,
+    },
+  },
+});
+
+export const triggerIcon = style({
+  flexShrink: 0,
+  color: themeContract.contentSecondary,
+  transform: "rotate(0deg)",
+  transitionProperty: "transform",
+  transitionDuration: duration.normal,
+  transitionTimingFunction: easing.standard,
+  selectors: {
+    "[data-panel-open] &": {
+      transform: "rotate(180deg)",
+    },
+  },
+});
+
+export const panel = style({
+  overflow: "hidden",
+  boxSizing: "border-box",
+  transitionProperty: "grid-template-rows, opacity",
+  padding: spacing.xsmall,
+  transitionDuration: duration.normal,
+  transitionTimingFunction: easing.standard,
+});

package/src/components/Accordion/accordion.demo.tsx

@@ -0,0 +1,42 @@
+import { Text } from "../Text/text";
+import { Accordion } from "./accordion";
+
+export function AccordionDemo() {
+  return (
+    <Accordion.Root>
+      <Accordion.Item value="item-1">
+        <Accordion.Header>
+          <Accordion.Trigger>What is Blenx UI?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Blenx UI is a modern React component library built with StyleX and Base UI.
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="item-2">
+        <Accordion.Header>
+          <Accordion.Trigger>How do I install it?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Install via the shadcn CLI with:{" "}
+            <Text variant="code">npx shadcn@latest add button</Text>
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="item-3">
+        <Accordion.Header>
+          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Yes, all components are built on Base UI primitives with full ARIA support.
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+export const demos = [{ name: "Default", component: AccordionDemo }];

package/src/components/Accordion/accordion.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import {
+  root,
+  rootVertical,
+  item,
+  itemDisabled,
+  trigger,
+  triggerIcon,
+  panel,
+} from "./accordion.css";
+
+type AccordionRootProps = AccordionPrimitive.Root.Props;
+
+function AccordionRoot({ children, className, ...props }: AccordionRootProps) {
+  return (
+    <AccordionPrimitive.Root
+      className={(state) => clsx(root, state.orientation === "vertical" && rootVertical, className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Root>
+  );
+}
+
+type AccordionItemProps = AccordionPrimitive.Item.Props;
+
+function AccordionItem({ children, className, ...props }: AccordionItemProps) {
+  return (
+    <AccordionPrimitive.Item
+      className={(state) => clsx(item, state.disabled && itemDisabled, className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  );
+}
+
+type AccordionHeaderProps = AccordionPrimitive.Header.Props;
+
+function AccordionHeader({ children, className, ...props }: AccordionHeaderProps) {
+  return (
+    <AccordionPrimitive.Header className={className} {...props}>
+      {children}
+    </AccordionPrimitive.Header>
+  );
+}
+
+type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
+
+function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps) {
+  return (
+    <AccordionPrimitive.Trigger className={clsx(trigger, className)} {...props}>
+      <CaretDownIcon size={16} className={triggerIcon} />
+      {children}
+    </AccordionPrimitive.Trigger>
+  );
+}
+
+type AccordionPanelProps = AccordionPrimitive.Panel.Props;
+
+function AccordionPanel({ children, className, ...props }: AccordionPanelProps) {
+  return (
+    <AccordionPrimitive.Panel className={clsx(panel, className)} {...props}>
+      {children}
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { AccordionPanel, AccordionTrigger, AccordionHeader, AccordionItem, AccordionRoot };
+export type {
+  AccordionPanelProps,
+  AccordionTriggerProps,
+  AccordionHeaderProps,
+  AccordionItemProps,
+  AccordionRootProps,
+};
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+};

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Accordion",
+  "description": "A collapsible accordion for showing and hiding content sections. Supports single and multiple item expansion.",
+  "category": "Data Display",
+  "status": "stable",
+  "keywords": ["accordion", "collapsible", "expand", "collapse"],
+  "related": ["Tabs", "Dialog"],
+  "accessibility": {
+    "keyboard": ["Enter", "Space"],
+    "aria": ["aria-expanded", "aria-controls", "aria-labelledby"]
+  }
+}

package/src/components/Accordion/index.ts

@@ -0,0 +1,8 @@
+export {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from "./accordion";

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

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

package/src/components/Alert/alert.css.ts

@@ -0,0 +1,29 @@
+import { themeContract } from "@blenx-dev/theme/contract";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const alertVariants = recipe({
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: themeContract.sentimentInfoSubtle,
+        color: themeContract.sentimentInfo,
+        borderColor: themeContract.sentimentInfo,
+      },
+      success: {
+        backgroundColor: themeContract.sentimentPositiveSubtle,
+        color: themeContract.sentimentPositive,
+        borderColor: themeContract.sentimentPositive,
+      },
+      warning: {
+        backgroundColor: themeContract.sentimentWarningSubtle,
+        color: themeContract.sentimentWarning,
+        borderColor: themeContract.sentimentWarning,
+      },
+      error: {
+        backgroundColor: themeContract.sentimentNegativeSubtle,
+        color: themeContract.sentimentNegative,
+        borderColor: themeContract.sentimentNegative,
+      },
+    },
+  },
+});

package/src/components/Alert/alert.demo.tsx

@@ -0,0 +1,34 @@
+import { CheckIcon, InfoIcon, SkullIcon, WarningIcon } from "@phosphor-icons/react";
+import { Alert } from "./alert";
+import { VStack } from "../Stack/stack";
+
+function AlertDemo() {
+  return (
+    <VStack withBorder padding="medium">
+      <Alert variant="info" icon={<InfoIcon />} title="Info" description="This is an info alert" />
+      <Alert
+        variant="success"
+        icon={<CheckIcon />}
+        title="Success"
+        description="This is a success alert"
+      />
+      <Alert
+        variant="warning"
+        icon={<WarningIcon />}
+        title="Warning"
+        description="This is a warning alert"
+      />
+      <Alert
+        variant="error"
+        icon={<SkullIcon />}
+        title="Error"
+        description="This is an error alert"
+      />
+      <Alert variant="error" icon={<SkullIcon />}>
+        GOne
+      </Alert>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: AlertDemo }];

package/src/components/Alert/alert.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { Text } from "../Text";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import { alertVariants } from "./alert.css";
+import clsx from "clsx";
+import { HStack, VStack } from "../Stack/stack";
+import { Box } from "../Box/box";
+
+type Props = RecipeVariants<typeof alertVariants> & {
+  icon?: ReactNode;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+function Alert({ variant = "info", icon, title, description, children, className }: Props) {
+  return (
+    <HStack
+      align={icon ? "start" : "center"}
+      gap="xsmall"
+      p="small"
+      className={clsx(alertVariants({ variant }), className)}
+    >
+      <Box p={"xxs"}>{icon}</Box>
+      <VStack gap="xxsmall">
+        {title ? (
+          <Text variant="h6" padding="none" margin="none" color={variant}>
+            {title}
+          </Text>
+        ) : null}
+        {description ? <span style={{ color: "currentColor" }}>{description}</span> : null}
+        {children}
+      </VStack>
+    </HStack>
+  );
+}
+
+export { Alert };

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Alert",
+  "description": "A contextual feedback banner with four visual variants: info, success, warning, and error.",
+  "category": "Feedback",
+  "status": "stable",
+  "keywords": ["alert", "banner", "feedback", "info", "success", "warning", "error"],
+  "related": ["Text"],
+  "accessibility": {
+    "aria": ["role", "aria-live"]
+  }
+}

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from "./alert";

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "title": "Alert",
+  "description": "Alert component for displaying contextual feedback messages.",
+  "registryDependencies": [],
+  "files": [
+    {
+      "file": "alert.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Alert/alert.tsx"
+    },
+    {
+      "file": "alert.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Alert/alert.css.ts"
+    }
+  ]
+}