@blenx-dev/components 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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