@blenx-dev/components 0.0.1 → 0.0.3

package/src/components/Field/field.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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