@blenx-dev/components 0.0.0

package/src/components/Field/field.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import clsx from "clsx";
+import type React from "react";
+import { field, label, item, description, error } from "./field.css";
+
+export function Field({
+  className,
+  style,
+  ...props
+}: FieldPrimitive.Root.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <FieldPrimitive.Root
+      className={clsx(field, className)}
+      style={style}
+      data-slot="field"
+      {...props}
+    />
+  );
+}
+
+export function FieldLabel({
+  className,
+  style,
+  ...props
+}: FieldPrimitive.Label.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <FieldPrimitive.Label
+      className={clsx(label, className)}
+      style={style}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+export function FieldItem({
+  className,
+  style,
+  ...props
+}: FieldPrimitive.Item.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <FieldPrimitive.Item
+      className={clsx(item, className)}
+      style={style}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({
+  className,
+  style,
+  ...props
+}: FieldPrimitive.Description.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <FieldPrimitive.Description
+      className={clsx(description, className)}
+      style={style}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+function FieldError({
+  className,
+  style,
+  ...props
+}: FieldPrimitive.Error.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <FieldPrimitive.Error
+      className={clsx(error, className)}
+      style={style}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+export const FieldControl: typeof FieldPrimitive.Control = FieldPrimitive.Control;
+export const FieldValidity: typeof FieldPrimitive.Validity = FieldPrimitive.Validity;
+
+export { FieldError };

package/src/components/Field/index.ts

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

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

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

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Grid",
+  "description": "A CSS Grid layout component with column presets, gap tokens, and alignment control. Includes a GridItem sub-component for spanning.",
+  "category": "Layout",
+  "status": "experimental",
+  "keywords": ["grid", "layout", "columns", "css grid", "responsive"],
+  "related": ["Box", "Stack"]
+}

package/src/components/Grid/grid.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+const spanEntries: Record<number, { gridColumn: string }> = {};
+for (let i = 1; i <= 12; i++) {
+  spanEntries[i] = { gridColumn: `span ${i} / span ${i}` };
+}
+export const gridSpanVariants = spanEntries;
+
+export const gridItem = style({
+  boxSizing: "border-box",
+  minWidth: 0,
+});

package/src/components/Grid/grid.doc.tsx

@@ -0,0 +1,148 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Grid, GridItem } from "./grid";
+
+export function ColumnsStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">3 columns</Text>
+      <Grid columns={3} gap="small">
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            1
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            2
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            3
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            4
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            5
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            6
+          </div>
+        </GridItem>
+      </Grid>
+      <Text variant="h4">4 columns with spans</Text>
+      <Grid columns={4} gap="small">
+        <GridItem span={2}>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            Span 2
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            1 col
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            1 col
+          </div>
+        </GridItem>
+        <GridItem>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            1 col
+          </div>
+        </GridItem>
+        <GridItem span={3}>
+          <div
+            style={{
+              background: "var(--surface)",
+              padding: 16,
+              borderRadius: 8,
+              border: "1px solid var(--border)",
+            }}
+          >
+            Span 3
+          </div>
+        </GridItem>
+      </Grid>
+    </Stack>
+  );
+}

package/src/components/Grid/grid.tsx

@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import { Box, type BoxProps } from "../Box/box";
+import { gridSprinkles } from "../../utils/sprinkles.css";
+import { gridSpanVariants, gridItem } from "./grid.css";
+
+type GridSprinkles = Parameters<typeof gridSprinkles>[0];
+
+export type GridProps = Omit<BoxProps, "columns" | "gap" | "align"> & GridSprinkles;
+
+export type GridItemProps = BoxProps & {
+  span?: keyof typeof gridSpanVariants;
+};
+
+function Grid({
+  columns,
+  flow,
+  align,
+  justify,
+  gap,
+  rowGap,
+  columnGap,
+  className,
+  style,
+  ...props
+}: GridProps) {
+  return (
+    <Box
+      display="grid"
+      className={clsx(
+        gridSprinkles({
+          columns,
+          flow,
+          align,
+          justify,
+          gap,
+          rowGap,
+          columnGap,
+        }),
+        className,
+      )}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+function GridItem({ span: spanProp, className, style, ...props }: GridItemProps) {
+  return (
+    <Box
+      className={clsx(gridItem, spanProp && gridSpanVariants[spanProp], className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export { Grid, GridItem };

package/src/components/Grid/index.ts

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

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

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

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Icon",
+  "description": "A standardized wrapper for SVG icons with token-based sizing and theme-aware color support. Built for use inside buttons, inputs, badges, and other UI components.",
+  "category": "Utility",
+  "status": "stable",
+  "keywords": ["icon", "svg", "size", "color", "wrapper"],
+  "related": ["IconButton", "Button", "Badge"],
+  "accessibility": {
+    "keyboard": [],
+    "aria": ["aria-hidden"]
+  }
+}

package/src/components/Icon/icon.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const iconWrapper = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "fit-content",
+  height: "fit-content",
+  flexShrink: 0,
+});

package/src/components/Icon/icon.demo.tsx

@@ -0,0 +1,97 @@
+import {
+  CheckIcon,
+  InfoIcon,
+  WarningIcon,
+  XIcon,
+  UserIcon,
+  PaperPlaneTiltIcon,
+} from "@phosphor-icons/react";
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Icon } from "./icon";
+
+export function IconDemo() {
+  return (
+    <VStack gap="medium">
+      <VStack gap="small">
+        <Text variant="h6">Sizes</Text>
+        <HStack align="center" gap="small">
+          <Icon>
+            <UserIcon size={24} />
+          </Icon>
+          <Icon>
+            <UserIcon size={24} />
+          </Icon>
+          <Icon>
+            <UserIcon />
+          </Icon>
+          <Icon>
+            <UserIcon size={44} />
+          </Icon>
+          <Icon>
+            <UserIcon size={64} />
+          </Icon>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Colors</Text>
+        <HStack align="center" gap="small">
+          <Icon color="primary">
+            <PaperPlaneTiltIcon />
+          </Icon>
+          <Icon color="secondary">
+            <PaperPlaneTiltIcon />
+          </Icon>
+          <Icon>
+            <PaperPlaneTiltIcon />
+          </Icon>
+          <Icon color="error">
+            <XIcon />
+          </Icon>
+          <Icon color="success">
+            <CheckIcon />
+          </Icon>
+          <Icon color="warning">
+            <WarningIcon />
+          </Icon>
+          <Icon color="info">
+            <InfoIcon />
+          </Icon>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Background Colors</Text>
+        <HStack align="center" gap="small">
+          <Icon backgroundColor="primary" color="primary" radius="small">
+            <InfoIcon />
+          </Icon>
+          <Icon backgroundColor="error" color="error" radius="small">
+            <XIcon />
+          </Icon>
+          <Icon backgroundColor="success" color="success" radius="small">
+            <CheckIcon />
+          </Icon>
+          <Icon backgroundColor="warning" color="warning" radius="small">
+            <WarningIcon />
+          </Icon>
+          <Icon backgroundColor="info" color="info" radius="small">
+            <InfoIcon />
+          </Icon>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Color Inherited from Parent</Text>
+        <HStack align="center" gap="small">
+          <Icon>
+            <UserIcon />
+          </Icon>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: IconDemo }];

package/src/components/Icon/icon.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { iconWrapper } from "./icon.css";
+import { Box, type BoxProps } from "../Box/box";
+
+type IconProps = BoxProps;
+
+export function Icon({ children, className, style, ...props }: IconProps) {
+  return (
+    <Box className={clsx(iconWrapper, className)} style={style} {...props}>
+      {children}
+    </Box>
+  );
+}
+
+export type { IconProps };

package/src/components/Icon/index.ts

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

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icon",
+  "type": "registry:ui",
+  "title": "Icon",
+  "description": "Icon component from Blenx UI.",
+  "registryDependencies": [],
+  "files": [
+    {
+      "file": "icon.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Icon/icon.tsx"
+    },
+    {
+      "file": "icon.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Icon/icon.css.ts"
+    }
+  ]
+}

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "IconButton",
+  "description": "A square icon-only button with accessible label requirements, variant and intent styling, loading state, and consistent sizing.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["icon", "button", "icon-button", "action", "toolbar"],
+  "related": ["Icon", "Button", "Spinner"],
+  "accessibility": {
+    "keyboard": ["Enter", "Space"],
+    "aria": ["aria-label", "aria-disabled"]
+  }
+}

package/src/components/IconButton/icon-button.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+
+export const base = style({
+  maxWidth: "100px",
+  width: "fit-content",
+});

package/src/components/IconButton/icon-button.demo.tsx

@@ -0,0 +1,102 @@
+import { PaperPlaneTiltIcon, TrashIcon, ArrowClockwiseIcon, BellIcon } from "@phosphor-icons/react";
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { IconButton } from "./icon-button";
+
+export function IconButtonDemo() {
+  return (
+    <VStack gap="medium">
+      <VStack gap="small">
+        <Text variant="h6">Variants</Text>
+        <HStack wrap>
+          <IconButton aria-label="Send" variant="solid">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="soft">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="outline">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="ghost">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="soft">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="link">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Intents</Text>
+        <HStack wrap>
+          <IconButton aria-label="Send" intent="primary">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Delete" intent="danger">
+            <TrashIcon />
+          </IconButton>
+          <IconButton aria-label="Success" intent="success">
+            <BellIcon />
+          </IconButton>
+          <IconButton aria-label="Warning" intent="warning">
+            <BellIcon />
+          </IconButton>
+          <IconButton aria-label="Info" intent="info">
+            <BellIcon />
+          </IconButton>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Variant + Intent</Text>
+        <HStack wrap>
+          <IconButton aria-label="Delete" variant="ghost" intent="danger">
+            <TrashIcon />
+          </IconButton>
+          <IconButton aria-label="Delete" variant="outline" intent="danger">
+            <TrashIcon />
+          </IconButton>
+          <IconButton aria-label="Delete" variant="soft" intent="danger">
+            <TrashIcon />
+          </IconButton>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">Sizes</Text>
+        <HStack wrap align="center">
+          <IconButton aria-label="Send" variant="outline">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="outline">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="outline">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+          <IconButton aria-label="Send" variant="outline">
+            <PaperPlaneTiltIcon />
+          </IconButton>
+        </HStack>
+      </VStack>
+
+      <VStack gap="small">
+        <Text variant="h6">States</Text>
+        <HStack wrap>
+          <IconButton aria-label="Refresh" loading>
+            <ArrowClockwiseIcon />
+          </IconButton>
+          <IconButton aria-label="Send" disabled>
+            <PaperPlaneTiltIcon />
+          </IconButton>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: IconButtonDemo }];

package/src/components/IconButton/icon-button.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx";
+import { Button, type ButtonProps } from "../Button/button";
+import { base } from "./icon-button.css";
+
+type IconButtonProps = Omit<ButtonProps, "size">;
+
+export function IconButton({ className, ...props }: IconButtonProps) {
+  return <Button {...props} size="icon" className={clsx(base, className)} />;
+}
+
+export type { IconButtonProps };

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./icon-button";
+export type { IconButtonProps } from "./icon-button";