@blenx-dev/components 0.0.0

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

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

package/src/components/Surface/surface.css.ts

@@ -0,0 +1,40 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+
+export const variantRecipe = recipe({
+  base: { textDecoration: "none" },
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: themeContract.surface,
+      },
+      outline: {
+        backgroundColor: themeContract.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: themeContract.border,
+      },
+      raised: {
+        backgroundColor: themeContract.surfaceRaised,
+        boxShadow: themeContract.shadowMd,
+      },
+      sunken: {
+        backgroundColor: themeContract.surfaceSubtle,
+      },
+    },
+    interactive: {
+      true: {
+        cursor: "pointer",
+        selectors: {
+          "&:hover": {
+            backgroundColor: themeContract.surfaceHover,
+          },
+          "&:focus-visible": {
+            outline: `2px solid ${themeContract.focusRing}`,
+            outlineOffset: "2px",
+          },
+        },
+      },
+    },
+  },
+});

package/src/components/Surface/surface.doc.tsx

@@ -0,0 +1,32 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Surface } from "./surface";
+
+export function VariantsStory() {
+  return (
+    <Stack gap="medium">
+      <Surface variant="default" padding="medium">
+        <Text variant="body2">Default surface</Text>
+      </Surface>
+      <Surface variant="outline" padding="medium">
+        <Text variant="body2">Outline surface</Text>
+      </Surface>
+      <Surface variant="raised" padding="medium">
+        <Text variant="body2">Raised surface</Text>
+      </Surface>
+      <Surface variant="sunken" padding="medium">
+        <Text variant="body2">Sunken surface</Text>
+      </Surface>
+    </Stack>
+  );
+}
+
+export function InteractiveStory() {
+  return (
+    <Stack gap="medium">
+      <Surface variant="outline" padding="medium" interactive>
+        <Text variant="body2">Interactive (hover me)</Text>
+      </Surface>
+    </Stack>
+  );
+}

package/src/components/Surface/surface.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import type { BoxProps } from "../Box/box";
+import { Box } from "../Box/box";
+import { variantRecipe } from "./surface.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+type SurfaceProps = BoxProps & RecipeVariants<typeof variantRecipe>;
+
+function Surface({ variant, interactive, className, style, ...props }: SurfaceProps) {
+  return (
+    <Box
+      className={clsx(variantRecipe({ variant, interactive }), className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export type { SurfaceProps };
+export { Surface };

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Switch",
+  "description": "A toggle switch with thumb knob for on/off states. Built on Base UI Switch primitive.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["switch", "toggle", "on/off", "toggle switch"],
+  "related": ["Field"],
+  "accessibility": {
+    "keyboard": ["Enter", "Space"],
+    "aria": ["aria-checked", "aria-labelledby"]
+  }
+}

package/src/components/Switch/index.ts

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

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

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

package/src/components/Switch/switch.css.ts

@@ -0,0 +1,47 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, spacing } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  width: spacing.xxlarge,
+  height: spacing.large,
+  display: "inline-flex",
+  alignItems: "center",
+  padding: spacing.xxsmall,
+  borderRadius: borderRadius.full,
+  backgroundColor: themeContract.border,
+  cursor: "pointer",
+  transitionProperty: "background-color",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: themeContract.borderStrong,
+    },
+  },
+});
+
+export const rootChecked = style({
+  backgroundColor: themeContract.primary,
+});
+
+export const rootDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.35,
+});
+
+export const thumb = style({
+  width: spacing.large,
+  height: spacing.large,
+  borderRadius: borderRadius.full,
+  backgroundColor: themeContract.primary,
+  transitionProperty: "transform, background-color",
+  transitionDuration: "150ms",
+  transform: "translateX(0)",
+});
+
+export const thumbChecked = style({
+  backgroundColor: themeContract.surface,
+  transform: `translateX(${spacing.large})`,
+});

package/src/components/Switch/switch.demo.tsx

@@ -0,0 +1,26 @@
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Switch } from "./switch";
+
+export function SwitchDemo() {
+  return (
+    <VStack gap="medium">
+      <HStack gap="medium" align="center">
+        <Switch defaultChecked />
+        <Text variant="body2">Airplane Mode</Text>
+      </HStack>
+      <HStack gap="medium" align="center">
+        <Switch />
+        <Text variant="body2">Wi-Fi</Text>
+      </HStack>
+      <HStack gap="medium" align="center">
+        <Switch disabled />
+        <Text variant="body2" color="secondary">
+          Bluetooth (disabled)
+        </Text>
+      </HStack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: SwitchDemo }];

package/src/components/Switch/switch.doc.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { HStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Switch } from "./switch";
+
+export function DefaultStory() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <HStack gap="medium" align="center">
+      <Switch checked={checked} onCheckedChange={setChecked} />
+      <Text variant="body2">Switch is {checked ? "on" : "off"}</Text>
+    </HStack>
+  );
+}
+
+export function DisabledStory() {
+  return (
+    <HStack gap="medium" align="center">
+      <Switch disabled />
+      <Text variant="body2" color="disabled">
+        Disabled switch
+      </Text>
+    </HStack>
+  );
+}

package/src/components/Switch/switch.tsx

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import clsx from "clsx";
+import { root, rootChecked, rootDisabled, thumb, thumbChecked } from "./switch.css";
+
+type Props = Omit<SwitchPrimitive.Root.Props, "style" | "className"> & {
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export function Switch({ className, style, ...props }: Props) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      render={(renderProps, { checked, disabled }) => (
+        <span
+          {...renderProps}
+          className={clsx(root, checked && rootChecked, disabled && rootDisabled, className)}
+          style={style}
+        >
+          <SwitchPrimitive.Thumb className={clsx(thumb, checked && thumbChecked)} />
+        </span>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Table",
+  "description": "A styled table component with column definitions, row data, cell alignment, and optional row event handlers.",
+  "category": "Data Display",
+  "status": "stable",
+  "keywords": ["table", "data", "grid", "rows", "columns"],
+  "related": [],
+  "accessibility": {
+    "aria": ["role", "aria-colcount"]
+  }
+}

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export type { Column, TableProps } from "./table";
+export { Table } from "./table";

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "title": "Table",
+  "description": "A simple styled table component with column definitions and row rendering.",
+  "files": [
+    {
+      "file": "table.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Table/table.tsx"
+    },
+    {
+      "file": "table.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Table/table.css.ts"
+    }
+  ]
+}

package/src/components/Table/table.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { spacing } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  width: "100%",
+  borderCollapse: "collapse",
+  color: themeContract.contentSecondary,
+  boxSizing: "border-box",
+});
+
+export const head = style({
+  backgroundColor: themeContract.backgroundSubtle,
+});
+
+export const header = style({
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  fontSize: themeContract.fontSize,
+  fontWeight: 600,
+  color: themeContract.contentSecondary,
+  textAlign: "left",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.border,
+  whiteSpace: "nowrap",
+  userSelect: "none",
+});
+
+export const row = style({
+  transition: "background-color 0.15s ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.surfaceHover,
+    },
+  },
+});
+
+export const cell = style({
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  fontSize: themeContract.fontSize,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.borderSubtle,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
+
+export const wrapper = style({
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: themeContract.borderRadius,
+  maxWidth: "100%",
+  overflowX: "auto",
+});
+
+export const alignLeft = style({ textAlign: "left" });
+export const alignCenter = style({ textAlign: "center" });
+export const alignRight = style({ textAlign: "right" });
+
+export const colorSecondary = style({
+  color: themeContract.contentSecondary,
+});

package/src/components/Table/table.demo.tsx

@@ -0,0 +1,58 @@
+import { Badge } from "../Badge/badge";
+import { VStack } from "../Stack/stack";
+import { Table } from "./table";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "inactive";
+}
+
+const users: User[] = [
+  {
+    id: "1",
+    name: "Alice Johnson",
+    email: "alice@example.com",
+    role: "Admin",
+    status: "active",
+  },
+  {
+    id: "2",
+    name: "Bob Smith",
+    email: "bob@example.com",
+    role: "Editor",
+    status: "active",
+  },
+  {
+    id: "3",
+    name: "Carol Davis",
+    email: "carol@example.com",
+    role: "Viewer",
+    status: "inactive",
+  },
+];
+
+export function TableDemo() {
+  const columns = [
+    { key: "name" as keyof User, header: "Name" },
+    { key: "email" as keyof User, header: "Email" },
+    { key: "role" as keyof User, header: "Role" },
+    {
+      key: "status" as keyof User,
+      header: "Status",
+      cell: (row: User) => (
+        <Badge variant={row.status === "active" ? "primary" : "default"}>{row.status}</Badge>
+      ),
+    },
+  ];
+
+  return (
+    <VStack gap="medium">
+      <Table columnData={columns} rowData={users} rowKey="id" />
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: TableDemo }];

package/src/components/Table/table.tsx

@@ -0,0 +1,116 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import {
+  root,
+  head,
+  header,
+  cell,
+  wrapper,
+  alignLeft,
+  alignCenter,
+  alignRight,
+  colorSecondary,
+} from "./table.css";
+import * as tableCss from "./table.css";
+
+export interface Column<TData> {
+  key: keyof TData;
+  header: ReactNode;
+  cell?: (row: TData) => ReactNode;
+  width?: string;
+  align?: "left" | "center" | "right";
+  cellProps?: Record<string, unknown>;
+}
+
+export interface TableProps<TData> {
+  columnData: Column<TData>[];
+  rowData: TData[];
+  rowKey?: keyof TData & string;
+  getRowProps?: (
+    row: TData,
+    index: number,
+  ) => {
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    style?: React.CSSProperties;
+    [key: string]: unknown;
+  };
+  style?: React.CSSProperties;
+  className?: string;
+  color?: "secondary";
+}
+
+const cellAlignMap = {
+  left: alignLeft,
+  center: alignCenter,
+  right: alignRight,
+} as const;
+
+function getCellValue<TData>(col: Column<TData>, row: TData): React.ReactNode {
+  if (col?.cell) {
+    return col.cell(row);
+  }
+  return row[col.key] as React.ReactNode;
+}
+
+export function Table<TData>({
+  columnData,
+  rowData,
+  rowKey,
+  getRowProps,
+  style,
+  className,
+  color,
+}: TableProps<TData>) {
+  return (
+    <div className={clsx(wrapper, color && colorSecondary, className)} style={style}>
+      <table className={clsx(root, color && colorSecondary)}>
+        <thead className={head}>
+          <tr>
+            {columnData.map((col) => (
+              <th
+                key={col.key.toString()}
+                style={col.width ? { width: col.width } : undefined}
+                className={clsx(header, col.align && cellAlignMap[col.align])}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rowData.map((dataRow, index) => {
+            const key = rowKey ? (dataRow[rowKey] as string) : index.toString();
+            const rowProps = getRowProps?.(dataRow, index);
+            return (
+              <tr
+                key={key}
+                {...rowProps}
+                className={clsx(
+                  tableCss.row,
+                  (rowProps as Record<string, unknown> | undefined)?.className as
+                    | string
+                    | undefined,
+                )}
+              >
+                {columnData.map((col) => (
+                  <td
+                    key={col.key.toString()}
+                    {...col.cellProps}
+                    className={clsx(
+                      cell,
+                      col.align && cellAlignMap[col.align],
+                      (col.cellProps?.className as string | undefined) || undefined,
+                    )}
+                  >
+                    {getCellValue(col, dataRow)}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Tabs",
+  "description": "A tabbed navigation component with underline, ghost, and segmented variants. Built on Base UI Tabs.",
+  "category": "Navigation",
+  "status": "stable",
+  "keywords": ["tabs", "tab", "navigation", "panel", "tabbed"],
+  "related": ["Accordion", "SegmentedControl"],
+  "accessibility": {
+    "keyboard": ["ArrowLeft", "ArrowRight", "Home", "End"],
+    "aria": ["role", "aria-orientation", "aria-selected", "aria-labelledby", "role"]
+  }
+}

package/src/components/Tabs/index.ts

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

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

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