@blenx-dev/components 0.0.2 → 0.0.3

package/src/DataTable/types.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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