@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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