@blenx-dev/components 0.0.0

package/src/components/Text/text.doc.tsx

@@ -0,0 +1,53 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "./text";
+
+export function VariantsStory() {
+  return (
+    <Stack gap="small">
+      <Text variant="h1">Heading 1</Text>
+      <Text variant="h2">Heading 2</Text>
+      <Text variant="h3">Heading 3</Text>
+      <Text variant="h4">Heading 4</Text>
+      <Text variant="h5">Heading 5</Text>
+      <Text variant="h6">Heading 6</Text>
+      <Text variant="body1">Body 1</Text>
+      <Text variant="body2">Body 2</Text>
+      <Text variant="body3">Body 3</Text>
+      <Text variant="body4">Body 4</Text>
+      <Text variant="caption">Caption text</Text>
+      <Text variant="p">Paragraph text</Text>
+    </Stack>
+  );
+}
+
+export function ColorsStory() {
+  return (
+    <Stack gap="small">
+      <Text color="primary">Primary color</Text>
+      <Text color="secondary">Secondary color</Text>
+      <Text color="disabled">Disabled color</Text>
+      <Text color="error">Error color</Text>
+    </Stack>
+  );
+}
+
+export function WeightsStory() {
+  return (
+    <Stack gap="small">
+      <Text weight="regular">Regular weight</Text>
+      <Text weight="medium">Medium weight</Text>
+      <Text weight="semibold">Semibold weight</Text>
+      <Text weight="bold">Bold weight</Text>
+    </Stack>
+  );
+}
+
+export function AlignmentsStory() {
+  return (
+    <Stack gap="small">
+      <Text textAlign="left">Left aligned</Text>
+      <Text textAlign="center">Center aligned</Text>
+      <Text textAlign="right">Right aligned</Text>
+    </Stack>
+  );
+}

package/src/components/Text/text.tsx

@@ -0,0 +1,64 @@
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import { textVariants } from "./text.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { BaseSprinkles } from "../../utils/sprinkles.css";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils";
+const variantTag = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+
+  body1: "p",
+  body2: "p",
+  body3: "p",
+  body4: "p",
+  p: "p",
+
+  caption: "span",
+  creatorNote: "aside",
+  code: "code",
+  div: "div",
+} as const satisfies Record<string, keyof React.JSX.IntrinsicElements>;
+
+export type TextProps = useRender.ComponentProps<"div"> &
+  BaseSprinkles &
+  RecipeVariants<typeof textVariants> & { span?: boolean };
+
+export function Text({
+  variant = "body1",
+  textAlign,
+  weight,
+  className,
+  color = "primary",
+  style,
+  size,
+  render,
+  span,
+  transform = "none",
+  ...props
+}: TextProps): React.ReactElement {
+  const [baseStyles, htmlProps] = applyBaseSprinkles({ ...props, color });
+  const rootCls = clsx(
+    baseStyles,
+    textVariants({ variant, textAlign, weight, transform, size }),
+    className,
+  );
+  const mergedProps = { className: rootCls, style, ...htmlProps };
+  if (span) {
+    return useRender({
+      defaultTagName: "span",
+      props: mergedProps,
+      render,
+    });
+  }
+  return useRender({
+    defaultTagName: variantTag[variant],
+    props: mergedProps,
+    render,
+  });
+}

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Textarea",
+  "description": "A multi-line text input with size presets and numeric row control. Built on Base UI Field.Control.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["textarea", "text", "input", "multiline", "form"],
+  "related": ["Field", "InputGroup"]
+}

package/src/components/Textarea/index.ts

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

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

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

package/src/components/Textarea/textarea.css.ts

@@ -0,0 +1,66 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+
+export const shell = style({
+  display: "inline-flex",
+  width: "100%",
+  position: "relative",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderColor: themeContract.border,
+  borderRadius: themeContract.borderRadius,
+  backgroundColor: themeContract.surface,
+  color: themeContract.contentPrimary,
+  boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+  boxSizing: "border-box",
+  outline: "none",
+  transitionProperty: "box-shadow, border-color",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:has(:focus-visible)": {
+      borderColor: themeContract.borderStrong,
+      boxShadow: `0 0 0 3px ${themeContract.borderStrong}`,
+    },
+    "&:has([aria-invalid])": {
+      borderColor: themeContract.sentimentNegative,
+    },
+    "&:has([aria-invalid]:focus-visible)": {
+      boxShadow: `0 0 0 3px ${themeContract.sentimentNegative}`,
+    },
+    "&:has(:disabled)": {
+      opacity: 0.64,
+    },
+  },
+});
+
+export const textarea = style({
+  fieldSizing: "content",
+  minHeight: "70px",
+  width: "100%",
+  borderRadius: "inherit",
+  borderWidth: 0,
+  paddingTop: "calc(12px - 1px)",
+  paddingBottom: "calc(12px - 1px)",
+  paddingLeft: "calc(12px - 1px)",
+  paddingRight: "calc(12px - 1px)",
+  fontSize: "16px",
+  lineHeight: 1.5,
+  outline: "none",
+  resize: "none",
+  color: themeContract.contentPrimary,
+  backgroundColor: "transparent",
+});
+
+export const textareaSm = style({
+  minHeight: "66px",
+  paddingTop: "calc(8px - 1px)",
+  paddingBottom: "calc(8px - 1px)",
+  paddingLeft: "calc(10px - 1px)",
+  paddingRight: "calc(10px - 1px)",
+});
+
+export const textareaLg = style({
+  minHeight: "74px",
+  paddingTop: "calc(16px - 1px)",
+  paddingBottom: "calc(16px - 1px)",
+});

package/src/components/Textarea/textarea.doc.tsx

@@ -0,0 +1,23 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Textarea } from "./textarea";
+
+export function SizesStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">Sizes</Text>
+      <Textarea size="sm" placeholder="Small textarea" />
+      <Textarea size="default" placeholder="Default textarea" />
+      <Textarea size="lg" placeholder="Large textarea" />
+    </Stack>
+  );
+}
+
+export function DisabledStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">Disabled</Text>
+      <Textarea placeholder="Disabled textarea" disabled />
+    </Stack>
+  );
+}

package/src/components/Textarea/textarea.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import clsx from "clsx";
+import type * as React from "react";
+import { shell, textarea, textareaLg, textareaSm } from "./textarea.css";
+
+export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> &
+  React.RefAttributes<HTMLTextAreaElement> & {
+    size?: "sm" | "default" | "lg" | number;
+    className?: string;
+    style?: React.CSSProperties;
+  };
+
+export function Textarea({
+  size = "default",
+  className,
+  style,
+  ref,
+  ...props
+}: TextareaProps): React.ReactElement {
+  return (
+    <span className={shell} data-size={size} data-slot="textarea-control" style={style}>
+      <FieldPrimitive.Control
+        ref={ref}
+        value={props.value}
+        defaultValue={props.defaultValue}
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        render={(defaultProps: React.ComponentProps<"textarea">) => (
+          <textarea
+            ref={ref}
+            className={clsx(
+              textarea,
+              size === "sm" && textareaSm,
+              size === "lg" && textareaLg,
+              className,
+            )}
+            data-slot="textarea"
+            {...defaultProps}
+            {...props}
+          />
+        )}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Toggle",
+  "description": "A two-state toggle button with variant and size presets. Built on Base UI Toggle.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["toggle", "button", "on/off", "pressed", "toggle button"],
+  "related": ["ToggleGroup", "SegmentedControl"],
+  "accessibility": {
+    "aria": ["aria-pressed"]
+  }
+}

package/src/components/Toggle/index.ts

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

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

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

package/src/components/Toggle/toggle.css.ts

@@ -0,0 +1,101 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const base = style({
+  position: "relative",
+  display: "inline-flex",
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  gap: spacing.small,
+  whiteSpace: "nowrap",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderRadius: themeContract.borderRadius,
+  fontWeight: fontWeight.medium,
+  fontSize: fontSize.small,
+  lineHeight: 1.4,
+  cursor: "pointer",
+  userSelect: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  transition: "box-shadow 0.15s ease",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
+    },
+    "&:disabled": {
+      pointerEvents: "none",
+      opacity: 0.64,
+    },
+  },
+});
+
+export const size = recipe({
+  variants: {
+    size: {
+      sm: {
+        height: spacing.large,
+        minWidth: spacing.large,
+        paddingLeft: spacing.small,
+        paddingRight: spacing.small,
+      },
+      default: {
+        height: spacing.large,
+        minWidth: 36,
+        paddingLeft: spacing.small,
+        paddingRight: spacing.small,
+      },
+      lg: {
+        height: spacing.xlarge,
+        paddingLeft: spacing.medium,
+        paddingRight: spacing.medium,
+      },
+    },
+  },
+});
+
+export const variant = recipe({
+  variants: {
+    variant: {
+      default: {
+        borderColor: "transparent",
+        color: themeContract.contentPrimary,
+        backgroundColor: themeContract.surface,
+      },
+      outline: {
+        borderColor: themeContract.border,
+        color: themeContract.contentPrimary,
+        backgroundColor: themeContract.backgroundSubtle,
+      },
+    },
+  },
+});
+
+export const pressed = {
+  default: style({
+    backgroundColor: themeContract.surfaceRaised,
+  }),
+  outline: style({
+    outlineWidth: borderWidth.thin,
+    backgroundColor: themeContract.surfaceOverlay,
+    borderColor: themeContract.borderStrong,
+  }),
+};
+
+export const radius = recipe({
+  variants: {
+    radius: {
+      none: { borderRadius: 0 },
+      xsmall: { borderRadius: borderRadius.xsmall },
+      small: { borderRadius: borderRadius.small },
+      medium: { borderRadius: borderRadius.medium },
+      large: { borderRadius: borderRadius.large },
+      xlarge: { borderRadius: borderRadius.xlarge },
+      xxlarge: { borderRadius: borderRadius.xxlarge },
+      full: { borderRadius: borderRadius.full },
+    },
+  },
+});

package/src/components/Toggle/toggle.doc.tsx

@@ -0,0 +1,24 @@
+import { Stack } from "../Stack/stack";
+import { Toggle } from "./toggle";
+
+export function VariantsStory() {
+  return (
+    <Stack gap="medium">
+      <Stack gap="small" direction="row" align="center">
+        <Toggle>Default</Toggle>
+        <Toggle variant="outline">Outline</Toggle>
+      </Stack>
+      <Stack gap="small" direction="row" align="center">
+        <Toggle size="sm">Small</Toggle>
+        <Toggle size="default">Default</Toggle>
+        <Toggle size="lg">Large</Toggle>
+      </Stack>
+      <Stack gap="small" direction="row" align="center">
+        <Toggle disabled>Disabled</Toggle>
+        <Toggle variant="outline" disabled>
+          Disabled
+        </Toggle>
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/Toggle/toggle.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import clsx from "clsx";
+import { base, pressed, radius, size, variant } from "./toggle.css";
+
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "default" | "sm" | "lg";
+export type ToggleRadius =
+  | "none"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge"
+  | "full";
+
+export interface ToggleProps extends Omit<TogglePrimitive.Props, "className" | "style"> {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  className?: string;
+  style?: React.CSSProperties;
+  radius?: ToggleRadius;
+}
+
+export function Toggle({
+  children,
+  className,
+  style,
+  variant: v = "default",
+  radius: r,
+  size: s = "default",
+  ...props
+}: ToggleProps) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      {...props}
+      render={(renderProps, state) => {
+        return (
+          <button
+            {...renderProps}
+            className={clsx(
+              base,
+              size({ size: s }),
+              variant({ variant: v }),
+              state.pressed && pressed[v],
+              r && radius({ radius: r }),
+              className,
+            )}
+            style={style}
+          >
+            {children}
+          </button>
+        );
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Toggle Group",
+  "description": "A group of toggle buttons with variant, size, and orientation control. Built on Base UI ToggleGroup.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["toggle group", "button group", "toggle", "button bar"],
+  "related": ["Toggle", "SegmentedControl", "Separator"]
+}

package/src/components/ToggleGroup/index.ts

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

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

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

package/src/components/ToggleGroup/toggle-group.css.ts

@@ -0,0 +1,77 @@
+import { style } from "@vanilla-extract/css";
+import { borderRadius, spacing } from "@blenx-dev/theme/tokens";
+
+export const groupBase = style({
+  display: "inline-flex",
+  position: "relative",
+});
+
+export const groupHorizontal = style({
+  flexDirection: "row",
+  alignItems: "center",
+});
+
+export const groupVertical = style({
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+export const groupDefault = style({
+  gap: spacing.xxsmall,
+});
+
+export const groupOutline = style({
+  gap: 0,
+});
+
+export const outlineItemHorizontal = style({
+  selectors: {
+    "&:first-child": {
+      borderStartStartRadius: borderRadius.medium,
+      borderEndStartRadius: borderRadius.medium,
+    },
+    "&:last-child": {
+      borderStartEndRadius: borderRadius.medium,
+      borderEndEndRadius: borderRadius.medium,
+    },
+    "&:not(:first-child)": {
+      borderInlineStartWidth: 0,
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0,
+    },
+    "&:not(:last-child)": {
+      borderInlineEndWidth: 0,
+      borderStartEndRadius: 0,
+      borderEndEndRadius: 0,
+    },
+    "&:focus-visible": {
+      zIndex: 10,
+    },
+  },
+});
+
+export const outlineItemVertical = style({
+  selectors: {
+    "&:first-child": {
+      borderStartStartRadius: borderRadius.medium,
+      borderStartEndRadius: borderRadius.medium,
+    },
+    "&:last-child": {
+      borderEndStartRadius: borderRadius.medium,
+      borderEndEndRadius: borderRadius.medium,
+    },
+    "&:not(:first-child)": {
+      borderBlockStartWidth: 0,
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+    },
+    "&:not(:last-child)": {
+      borderBlockEndWidth: 0,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    },
+    "&:focus-visible": {
+      zIndex: 10,
+    },
+  },
+});

package/src/components/ToggleGroup/toggle-group.doc.tsx

@@ -0,0 +1,38 @@
+import { Stack } from "../Stack/stack";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <ToggleGroup>
+        <ToggleGroupItem value="a">Option A</ToggleGroupItem>
+        <ToggleGroupItem value="b">Option B</ToggleGroupItem>
+        <ToggleGroupItem value="c">Option C</ToggleGroupItem>
+      </ToggleGroup>
+    </Stack>
+  );
+}
+
+export function OutlineStory() {
+  return (
+    <Stack gap="medium">
+      <ToggleGroup variant="outline">
+        <ToggleGroupItem value="x">Option X</ToggleGroupItem>
+        <ToggleGroupItem value="y">Option Y</ToggleGroupItem>
+        <ToggleGroupItem value="z">Option Z</ToggleGroupItem>
+      </ToggleGroup>
+    </Stack>
+  );
+}
+
+export function VerticalStory() {
+  return (
+    <Stack gap="medium">
+      <ToggleGroup orientation="vertical">
+        <ToggleGroupItem value="a">Option A</ToggleGroupItem>
+        <ToggleGroupItem value="b">Option B</ToggleGroupItem>
+        <ToggleGroupItem value="c">Option C</ToggleGroupItem>
+      </ToggleGroup>
+    </Stack>
+  );
+}