@blenx-dev/components 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,38 +0,0 @@
-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>
-  );
-}