@blenx-dev/components 0.0.0

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

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

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Input",
+  "description": "A text input component with size presets, error state styling, and auto-generated IDs. Built on Base UI Input primitive.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["input", "text", "form", "field", "text input"],
+  "related": ["Field", "InputGroup", "Autocomplete", "Combobox"]
+}

package/src/components/Input/index.ts

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

package/src/components/Input/input.css.ts

@@ -0,0 +1,73 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { spacing } from "@blenx-dev/theme/tokens";
+
+export const label = style({
+  fontSize: 14,
+  display: "inline-flex",
+  gap: 4,
+  lineHeight: 1.4,
+  fontWeight: 400,
+  color: themeContract.contentSecondary,
+});
+
+export const input = style({
+  width: "100%",
+  boxSizing: "border-box",
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  fontSize: 16,
+  lineHeight: 1.5,
+  color: themeContract.contentPrimary,
+  backgroundColor: themeContract.surface,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: themeContract.borderRadius,
+  outline: "none",
+  selectors: {
+    "&::placeholder": {
+      color: themeContract.contentDisabled,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+    "&:focus-visible": {
+      borderColor: themeContract.borderStrong,
+      boxShadow: `0 0 0 2px ${themeContract.borderStrong}`,
+    },
+    "&:focus-visible[aria-invalid='true']": {
+      borderColor: themeContract.sentimentNegative,
+      boxShadow: `0 0 0 3px ${themeContract.sentimentNegative}`,
+    },
+  },
+});
+
+export const inputSm = style({
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  fontSize: 16,
+});
+
+export const inputLg = style({
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.medium,
+  paddingLeft: spacing.large,
+  paddingRight: spacing.large,
+  fontSize: 16,
+});
+
+export const inputError = style({
+  borderColor: themeContract.sentimentNegative,
+});
+
+export const error = style({
+  fontSize: 12,
+  lineHeight: 1.4,
+  color: themeContract.sentimentNegative,
+});

package/src/components/Input/input.demo.tsx

@@ -0,0 +1,24 @@
+import { VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Input } from "./input";
+
+export function InputDemo() {
+  return (
+    <VStack gap="medium">
+      <VStack gap="medium" padding="medium">
+        <Text variant="h6">Size</Text>
+        <Input size="sm" placeholder="Small input" />
+        <Input placeholder="Default input" />
+        <Input size="lg" placeholder="Large input" />
+      </VStack>
+      <VStack gap="medium" padding="medium">
+        <Text variant="h4">States</Text>
+        <Input placeholder="Normal input" />
+        <Input placeholder="Disabled input" disabled />
+        <Input placeholder="With error" error="This field is required" />
+      </VStack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: InputDemo }];

package/src/components/Input/input.doc.tsx

@@ -0,0 +1,25 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Input } from "./input";
+
+export function SizesStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">Sizess</Text>
+      <Input size="sm" placeholder="Small input" />
+      <Input size="default" placeholder="Default input" />
+      <Input size="lg" placeholder="Large input" />
+    </Stack>
+  );
+}
+
+export function StatesStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">States</Text>
+      <Input placeholder="Normal input" />
+      <Input placeholder="Disabled input" disabled />
+      <Input placeholder="With error" error="This field is required" />
+    </Stack>
+  );
+}

package/src/components/Input/input.tsx

@@ -0,0 +1,50 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type * as React from "react";
+import { useId } from "react";
+import { input, inputSm, inputLg, inputError, label } from "./input.css";
+
+type InputSize = "sm" | "default" | "lg";
+type _BaseInputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size">;
+export type InputProps = _BaseInputProps & {
+  size?: InputSize;
+  error?: string;
+  wrapperStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type LabelProps = useRender.ComponentProps<"label"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Label({ render, className, style, ...props }: LabelProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "label",
+    props: { className: clsx(label, className), style, "data-slot": "label", ...props },
+    render,
+  });
+}
+
+export function Input({ error, className, style, size = "default", ...props }: InputProps) {
+  const generatedId = useId();
+  const fieldId = props.id ?? generatedId;
+
+  return (
+    <InputPrimitive
+      id={fieldId}
+      data-slot="input"
+      className={clsx(
+        input,
+        size === "sm" && inputSm,
+        size === "lg" && inputLg,
+        error ? inputError : null,
+        className,
+      )}
+      style={style}
+      {...props}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Input Group",
+  "description": "A compound form control group with addon, label, input, textarea, menu, checkbox, and radio sub-components.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["input group", "fieldset", "addon", "form", "group"],
+  "related": ["Input", "Field", "Checkbox", "Radio"]
+}

package/src/components/InputGroup/index.ts

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

package/src/components/InputGroup/input-group.css.ts

@@ -0,0 +1,157 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, fontSize, spacing } from "@blenx-dev/theme/tokens";
+
+export const group = style({
+  position: "relative",
+  display: "inline-flex",
+  width: "100%",
+  minWidth: 0,
+  alignItems: "center",
+  borderRadius: borderRadius.large,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  color: themeContract.contentPrimary,
+  fontSize: fontSize.small,
+  boxSizing: "border-box",
+  minHeight: "40px",
+  overflow: "hidden",
+  transitionProperty: "border-color, box-shadow",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-within": {
+      borderColor: themeContract.borderStrong,
+      boxShadow: `0 0 0 2px ${themeContract.borderStrong}`,
+    },
+    "&:has([aria-invalid='true'])": {
+      borderColor: themeContract.sentimentNegative,
+    },
+    "&:has([aria-invalid='true']:focus-visible)": {
+      borderColor: themeContract.sentimentNegative,
+      boxShadow: `0 0 0 2px ${themeContract.sentimentNegative}`,
+    },
+    "&:has(:disabled)": {
+      opacity: 0.64,
+      cursor: "not-allowed",
+    },
+    "&:has([data-align='block-start'], [data-align='block-end'])": {
+      flexDirection: "column",
+    },
+  },
+});
+
+export const addon = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "text",
+  flexShrink: 0,
+  color: themeContract.contentSecondary,
+  userSelect: "none",
+  fontSize: fontSize.small,
+  selectors: {
+    "&:has(:last-child[data-slot='badge'])": {
+      marginInlineStart: 0,
+    },
+  },
+});
+
+export const addonInlineStart = style({
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: "8px",
+  paddingRight: "4px",
+  alignSelf: "center",
+});
+
+export const addonInlineEnd = style({
+  order: 1,
+  paddingLeft: "4px",
+  paddingRight: "4px",
+  alignSelf: "stretch",
+  display: "flex",
+  alignItems: "center",
+});
+
+export const addonBlockStart = style({
+  order: -1,
+  width: "100%",
+  justifyContent: "flex-start",
+  paddingTop: "4px",
+  paddingLeft: "4px",
+  paddingRight: "4px",
+});
+
+export const addonBlockEnd = style({
+  order: 1,
+  width: "100%",
+  justifyContent: "flex-start",
+  paddingBottom: "4px",
+  paddingLeft: "4px",
+  paddingRight: "4px",
+});
+
+export const text = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  whiteSpace: "nowrap",
+  lineHeight: 1,
+  color: themeContract.contentSecondary,
+});
+
+export const menu = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const input = style({
+  flex: 1,
+  minWidth: 0,
+  width: "100%",
+  height: "100%",
+  border: "none",
+  outline: "none",
+  backgroundColor: "inherit",
+  paddingTop: "8px",
+  paddingBottom: "6px",
+  paddingLeft: "8px",
+  paddingRight: "8px",
+  borderWidth: 0,
+  fontSize: fontSize.small,
+  color: themeContract.contentPrimary,
+  boxSizing: "border-box",
+  lineHeight: 1.5,
+  selectors: {
+    "&::placeholder": {
+      color: themeContract.contentDisabled,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const textarea = style({
+  flex: 1,
+  minWidth: 0,
+  width: "100%",
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  borderWidth: 0,
+  paddingLeft: "10px",
+  paddingRight: "10px",
+  fontSize: fontSize.small,
+  color: themeContract.contentPrimary,
+  resize: "none",
+  selectors: {
+    "&::placeholder": {
+      color: themeContract.contentDisabled,
+    },
+  },
+});

package/src/components/InputGroup/input-group.demo.tsx

@@ -0,0 +1,53 @@
+import { MagnifyingGlassIcon, UserIcon } from "@phosphor-icons/react";
+import { Button } from "../Button/button";
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./input-group";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">With icon and button</Text>
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <MagnifyingGlassIcon size={16} />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search..." />
+        <InputGroupAddon align="inline-end">
+          <Button size="small" variant="ghost">
+            Go
+          </Button>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupAddon align="block-start">
+          <MagnifyingGlassIcon size={16} />
+        </InputGroupAddon>
+        <InputGroupTextarea placeholder="Search..." />
+        <InputGroupAddon align="block-end">
+          <Button size="small" variant="ghost">
+            Go
+          </Button>
+        </InputGroupAddon>
+      </InputGroup>
+      <Text variant="h4">With text addon</Text>
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <UserIcon size={16} />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Username" aria-invalid />
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>@example.com</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+    </Stack>
+  );
+}
+
+export const demos = [{ name: "Input group", component: DefaultStory }];

package/src/components/InputGroup/input-group.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useRender } from "@base-ui/react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import clsx from "clsx";
+import type * as React from "react";
+import {
+  group,
+  addon,
+  addonInlineStart,
+  addonInlineEnd,
+  addonBlockStart,
+  addonBlockEnd,
+  text as textStyle,
+  menu,
+  input as inputStyle,
+  textarea as textareaStyle,
+} from "./input-group.css";
+import type { _BaseDivProps } from "../../utils/types";
+
+type Align = "inline-start" | "inline-end" | "block-start" | "block-end";
+
+type InputGroupProps = useRender.ComponentProps<"fieldset">;
+
+function InputGroup({ className, ...props }: InputGroupProps): React.ReactElement {
+  return <fieldset className={clsx(group, className)} data-slot="input-group" {...props} />;
+}
+
+type InputGroupAddonProps = _BaseDivProps & {
+  align?: Align;
+};
+
+function InputGroupAddon({
+  align = "inline-start",
+  className,
+  ...props
+}: InputGroupAddonProps): React.ReactElement {
+  return (
+    <div
+      className={clsx(
+        addon,
+        align === "inline-start" && addonInlineStart,
+        align === "inline-end" && addonInlineEnd,
+        align === "block-start" && addonBlockStart,
+        align === "block-end" && addonBlockEnd,
+        className,
+      )}
+      data-align={align}
+      data-slot="input-group-addon"
+      role="presentation"
+      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
+        const target = e.target as HTMLElement;
+        const isInteractive = target.closest(
+          "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
+        );
+        if (isInteractive) return;
+        e.preventDefault();
+        const parent = e.currentTarget.parentElement;
+        const input = parent?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+          "input, textarea",
+        );
+        if (input && !parent?.querySelector("input:focus, textarea:focus")) {
+          input.focus();
+        }
+      }}
+      {...props}
+    />
+  );
+}
+
+type InputGroupTextProps = React.ComponentProps<"span">;
+
+function InputGroupText({ className, ...props }: InputGroupTextProps): React.ReactElement {
+  return <span className={clsx(textStyle, className)} {...props} />;
+}
+
+type InputGroupInputProps = Omit<
+  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
+  "style"
+>;
+
+function InputGroupInput({ className, ...props }: InputGroupInputProps): React.ReactElement {
+  return (
+    <InputPrimitive className={clsx(inputStyle, className)} data-slot="input-control" {...props} />
+  );
+}
+
+type InputGroupTextareaProps = Omit<React.ComponentPropsWithoutRef<"textarea">, "style">;
+
+function InputGroupTextarea({ ...props }: InputGroupTextareaProps): React.ReactElement {
+  return <textarea className={textareaStyle} rows={4} data-slot="textarea-control" {...props} />;
+}
+
+function InputGroupMenu({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"nav">): React.ReactElement {
+  return useRender({
+    defaultTagName: "nav",
+    props: {
+      className: clsx(menu, className),
+      "data-slot": "input-group-menu",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+const InputGroupCheckboxItem = CheckboxPrimitive.Root;
+const InputGroupRadioGroup = RadioGroupPrimitive;
+const InputGroupRadioItem = RadioPrimitive.Root;
+
+export type {
+  InputGroupAddonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextareaProps,
+};
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupCheckboxItem,
+  InputGroupInput,
+  InputGroupMenu,
+  InputGroupRadioGroup,
+  InputGroupRadioItem,
+  InputGroupText,
+  InputGroupTextarea,
+};

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

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

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Menu",
+  "description": "A dropdown menu with items, separators, group labels, and shortcuts. Built on Base UI Menu.",
+  "category": "Navigation",
+  "status": "stable",
+  "keywords": ["menu", "dropdown", "context menu", "navigation"],
+  "related": ["Button"],
+  "accessibility": {
+    "keyboard": ["ArrowUp", "ArrowDown", "Enter", "Escape"],
+    "aria": ["role", "aria-orientation"]
+  }
+}

package/src/components/Menu/index.ts

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