@blenx-dev/components 0.0.0

package/src/components/Autocomplete/autocomplete.tsx

@@ -0,0 +1,226 @@
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+import { CaretUpDownIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type React from "react";
+import { Input } from "../Input/input";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  inputGroup,
+  inputSizeSm,
+  inputSizeDefault,
+  inputSizeLg,
+  startAddon,
+  startAddonDefault,
+  startAddonSmall,
+  adornment,
+  adornmentSmall,
+  adornmentDefault,
+  adornmentEndSmall,
+  adornmentEndDefault,
+  positioner,
+  popupShell,
+  popup,
+  group,
+  separator,
+  groupLabel,
+  empty,
+  list,
+  status,
+  item,
+} from "./autocomplete.css";
+import { CloseButton } from "../CloseButton";
+
+const Autocomplete: typeof AutocompletePrimitive.Root = AutocompletePrimitive.Root;
+
+export function AutocompleteItem(props: AutocompletePrimitive.Item.Props): React.ReactElement {
+  return <AutocompletePrimitive.Item className={item} data-slot="autocomplete-item" {...props} />;
+}
+
+export function AutocompleteSeparator(
+  props: AutocompletePrimitive.Separator.Props,
+): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Separator
+      className={separator}
+      data-slot="autocomplete-separator"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteGroup(props: AutocompletePrimitive.Group.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Group className={group} data-slot="autocomplete-group" {...props} />
+  );
+}
+
+function AutocompleteInput({
+  showTrigger = false,
+  showClear = false,
+  startAddon: startAddonNode,
+  size,
+  triggerProps,
+  clearProps,
+  render: renderProp,
+  className,
+  ...props
+}: Omit<AutocompletePrimitive.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  size?: "sm" | "default" | "lg";
+  ref?: React.Ref<HTMLInputElement>;
+  triggerProps?: AutocompletePrimitive.Trigger.Props;
+  clearProps?: AutocompletePrimitive.Clear.Props;
+}): React.ReactElement {
+  const resolvedSize = size ?? "default";
+  const inputCls = clsx(
+    resolvedSize === "sm" ? inputSizeSm : resolvedSize === "lg" ? inputSizeLg : inputSizeDefault,
+    className,
+  );
+
+  return (
+    <AutocompletePrimitive.InputGroup className={inputGroup} data-slot="autocomplete-input-group">
+      {startAddonNode && (
+        <div
+          aria-hidden="true"
+          className={clsx(startAddon, resolvedSize === "sm" ? startAddonSmall : startAddonDefault)}
+          data-slot="autocomplete-start-addon"
+        >
+          {startAddonNode}
+        </div>
+      )}
+      <AutocompletePrimitive.Input
+        data-slot="autocomplete-input"
+        render={renderProp ?? <Input />}
+        className={inputCls}
+        {...props}
+      />
+      {showTrigger && (
+        <AutocompletePrimitive.Trigger
+          className={clsx(
+            adornment,
+            resolvedSize === "sm" ? adornmentSmall : adornmentDefault,
+            resolvedSize === "sm" ? adornmentEndSmall : adornmentEndDefault,
+          )}
+          data-slot="autocomplete-trigger"
+          {...triggerProps}
+        >
+          <CaretUpDownIcon size={resolvedSize === "sm" ? 16 : 18} weight="regular" />
+        </AutocompletePrimitive.Trigger>
+      )}
+      {showClear && (
+        <AutocompletePrimitive.Clear
+          className={clsx(
+            adornment,
+            resolvedSize === "sm" ? adornmentSmall : adornmentDefault,
+            resolvedSize === "sm" ? adornmentEndSmall : adornmentEndDefault,
+          )}
+          data-slot="autocomplete-clear"
+          render={<CloseButton />}
+          {...clearProps}
+        />
+      )}
+    </AutocompletePrimitive.InputGroup>
+  );
+}
+
+export function AutocompletePopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  alignOffset,
+  align = "start",
+  anchor,
+  portalProps,
+  ...props
+}: AutocompletePrimitive.Popup.Props & {
+  align?: AutocompletePrimitive.Positioner.Props["align"];
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"];
+  side?: AutocompletePrimitive.Positioner.Props["side"];
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"];
+  portalProps?: AutocompletePrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Portal {...portalProps}>
+      <AutocompletePrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className={positioner}
+        data-slot="autocomplete-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <span className={clsx(popupShell, className)}>
+          <AutocompletePrimitive.Popup className={popup} data-slot="autocomplete-popup" {...props}>
+            {children}
+          </AutocompletePrimitive.Popup>
+        </span>
+      </AutocompletePrimitive.Positioner>
+    </AutocompletePrimitive.Portal>
+  );
+}
+
+export function AutocompleteGroupLabel(
+  props: AutocompletePrimitive.GroupLabel.Props,
+): React.ReactElement {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      className={groupLabel}
+      data-slot="autocomplete-group-label"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteEmpty(props: AutocompletePrimitive.Empty.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Empty className={empty} data-slot="autocomplete-empty" {...props} />
+  );
+}
+
+export function AutocompleteRow(props: AutocompletePrimitive.Row.Props): React.ReactElement {
+  return <AutocompletePrimitive.Row data-slot="autocomplete-row" {...props} />;
+}
+
+export function AutocompleteValue(props: AutocompletePrimitive.Value.Props): React.ReactElement {
+  return <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />;
+}
+
+export function AutocompleteList(props: AutocompletePrimitive.List.Props): React.ReactElement {
+  return (
+    <ScrollArea scrollbarGutter scrollFade>
+      <AutocompletePrimitive.List className={list} data-slot="autocomplete-list" {...props} />
+    </ScrollArea>
+  );
+}
+
+export function AutocompleteClear(props: AutocompletePrimitive.Clear.Props): React.ReactElement {
+  return <AutocompletePrimitive.Clear data-slot="autocomplete-clear" {...props} />;
+}
+
+export function AutocompleteStatus(props: AutocompletePrimitive.Status.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Status className={status} data-slot="autocomplete-status" {...props} />
+  );
+}
+
+export function AutocompleteCollection(
+  props: AutocompletePrimitive.Collection.Props,
+): React.ReactElement {
+  return <AutocompletePrimitive.Collection data-slot="autocomplete-collection" {...props} />;
+}
+
+export function AutocompleteTrigger(
+  props: AutocompletePrimitive.Trigger.Props,
+): React.ReactElement {
+  return <AutocompletePrimitive.Trigger data-slot="autocomplete-trigger" {...props} />;
+}
+
+export const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =
+  AutocompletePrimitive.useFilter;
+
+export { Autocomplete, AutocompleteInput };

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Autocomplete",
+  "description": "A typeahead autocomplete input that filters suggestions as the user types. Built with Base UI Autocomplete.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["autocomplete", "typeahead", "search", "suggestions", "filter"],
+  "related": ["Input", "ScrollArea", "Field", "Combobox"]
+}

package/src/components/Autocomplete/index.ts

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

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "autocomplete",
+  "type": "registry:ui",
+  "title": "Autocomplete",
+  "description": "Autocomplete component from Blenx UI.",
+  "registryDependencies": ["input", "scroll-area"],
+  "files": [
+    {
+      "file": "autocomplete.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Autocomplete/autocomplete.tsx"
+    },
+    {
+      "file": "autocomplete.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Autocomplete/autocomplete.css.ts"
+    }
+  ]
+}

package/src/components/Avatar/avatar.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { spacing } from "@blenx-dev/theme/tokens";
+import { borderRadius } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: themeContract.borderRadius,
+  backgroundColor: themeContract.backgroundSubtle,
+  color: themeContract.contentSecondary,
+  overflow: "hidden",
+  flexShrink: 0,
+  outline: "none",
+  border: "none",
+  borderWidth: 0,
+});
+
+export const image = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block",
+  outline: "none",
+  border: "none",
+  borderWidth: 0,
+});
+
+export const fallback = style({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: themeContract.backgroundSubtle,
+  color: themeContract.contentSecondary,
+  fontSize: 12,
+  outline: "none",
+  border: "none",
+  borderWidth: 0,
+  fontWeight: 600,
+  lineHeight: 1,
+});
+
+export const size = recipe({
+  variants: {
+    size: {
+      small: { width: spacing.large, height: spacing.large },
+      medium: { width: spacing.xlarge, height: spacing.xlarge },
+      large: { width: spacing.xxlarge, height: spacing.xxlarge },
+      xlarge: { width: spacing.xxxlarge, height: spacing.xxxlarge },
+      hero: { width: spacing.titanic, height: spacing.titanic },
+    },
+  },
+});
+
+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/Avatar/avatar.doc.tsx

@@ -0,0 +1,32 @@
+import { Stack } from "../Stack/stack";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+export function SizesStory() {
+  return (
+    <Stack gap="medium" direction="row" align="center">
+      <Avatar size="small">
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <Avatar size="medium">
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+      <Avatar size="large">
+        <AvatarFallback>CD</AvatarFallback>
+      </Avatar>
+      <Avatar size="xlarge">
+        <AvatarFallback>EF</AvatarFallback>
+      </Avatar>
+    </Stack>
+  );
+}
+
+export function WithImageStory() {
+  return (
+    <Stack gap="medium" direction="row" align="center">
+      <Avatar size="large">
+        <AvatarImage src="https://i.pravatar.cc/150?u=avatar" alt="User avatar" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    </Stack>
+  );
+}

package/src/components/Avatar/avatar.tsx

@@ -0,0 +1,49 @@
+import { Avatar as AvatarPrimitive, type AvatarRootProps } from "@base-ui/react/avatar";
+import clsx from "clsx";
+import { root, image, fallback, size as sizeRecipe, radius as radiusRecipe } from "./avatar.css";
+
+interface AvatarProps extends AvatarRootProps {
+  size?: "small" | "medium" | "large" | "xlarge" | "hero";
+  radius?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "full";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+type AvatarImageProps = AvatarPrimitive.Image.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type AvatarFallbackProps = AvatarPrimitive.Fallback.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function Avatar({ children, size, radius: r, className, style }: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      className={clsx(
+        root,
+        size && sizeRecipe({ size }),
+        r && radiusRecipe({ radius: r }),
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </AvatarPrimitive.Root>
+  );
+}
+
+function AvatarImage({ className, style, ...props }: AvatarImageProps) {
+  return <AvatarPrimitive.Image className={clsx(image, className)} style={style} {...props} />;
+}
+
+function AvatarFallback({ className, style, ...props }: AvatarFallbackProps) {
+  return (
+    <AvatarPrimitive.Fallback className={clsx(fallback, className)} style={style} {...props} />
+  );
+}
+
+export type { AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export { Avatar, AvatarFallback, AvatarImage };

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Avatar",
+  "description": "An avatar component with image and fallback support. Displays a user profile image or initials placeholder.",
+  "category": "Data Display",
+  "status": "stable",
+  "keywords": ["avatar", "profile", "image", "user", "fallback"],
+  "related": ["Badge"]
+}

package/src/components/Avatar/index.ts

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

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "title": "Avatar",
+  "description": "Avatar component from Blenx UI.",
+  "files": [
+    {
+      "file": "avatar.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Avatar/avatar.tsx"
+    },
+    {
+      "file": "avatar.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Avatar/avatar.css.ts"
+    }
+  ]
+}

package/src/components/Badge/badge.css.ts

@@ -0,0 +1,40 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { spacing } from "@blenx-dev/theme/tokens";
+
+export const badgeRecipe = recipe({
+  base: {
+    display: "inline-block",
+    padding: spacing.xsmall,
+    borderRadius: themeContract.borderRadius,
+    fontSize: 12,
+    lineHeight: 1.2,
+  },
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: themeContract.surfaceRaised,
+        color: themeContract.contentPrimary,
+      },
+      primary: {
+        backgroundColor: themeContract.primary,
+        color: themeContract.contentOnPrimary,
+      },
+      secondary: {
+        backgroundColor: themeContract.secondary,
+        color: themeContract.contentPrimary,
+      },
+      danger: {
+        backgroundColor: themeContract.sentimentNegative,
+        color: themeContract.contentOnPrimary,
+      },
+      sucess: {
+        backgroundColor: themeContract.sentimentPositive,
+        color: themeContract.contentOnPrimary,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});

package/src/components/Badge/badge.demo.tsx

@@ -0,0 +1,18 @@
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Badge } from "./badge";
+
+export function BadgeDemo() {
+  return (
+    <VStack gap="xsmall">
+      <Text variant="h6">Variants</Text>
+      <HStack wrap>
+        <Badge variant="default">Default</Badge>
+        <Badge variant="primary">Primary</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+      </HStack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: BadgeDemo }];

package/src/components/Badge/badge.doc.tsx

@@ -0,0 +1,12 @@
+import { HStack } from "../Stack/stack";
+import { Badge } from "./badge";
+
+export function VariantsStory() {
+  return (
+    <HStack gap="medium" align="center">
+      <Badge>Default</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+    </HStack>
+  );
+}

package/src/components/Badge/badge.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import { badgeRecipe } from "./badge.css";
+import { Box, type BoxProps } from "../Box/box";
+
+type Variant = "default" | "primary" | "secondary" | "danger" | "sucess";
+
+type Props = BoxProps & {
+  variant?: Variant;
+};
+
+export function Badge({ variant = "default", className, style, ...props }: Props) {
+  return <Box className={clsx(badgeRecipe({ variant }), className)} style={style} {...props} />;
+}

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Badge",
+  "description": "An inline badge or pill component with variant color presets for status, labels, and counts.",
+  "category": "Data Display",
+  "status": "stable",
+  "keywords": ["badge", "pill", "chip", "label", "status", "count"],
+  "related": ["Text", "Avatar"]
+}

package/src/components/Badge/index.ts

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

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "title": "Badge",
+  "description": "Badge component from Blenx UI.",
+  "files": [
+    {
+      "file": "badge.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Badge/badge.tsx"
+    },
+    {
+      "file": "badge.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Badge/badge.css.ts"
+    }
+  ]
+}

package/src/components/Box/box.css.ts

@@ -0,0 +1,7 @@
+import { themeContract } from "@blenx-dev/theme/contract";
+import { style } from "@vanilla-extract/css";
+
+export const baseBox = style({
+  borderRadius: themeContract.borderRadius,
+  minWidth: 0,
+});

package/src/components/Box/box.doc.tsx

@@ -0,0 +1,19 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Box } from "./box";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <Box padding="medium" withBorder radius="medium">
+        <Text variant="body2">Box with border, padding, radius</Text>
+      </Box>
+      <Box padding="large" radius="xlarge" display="flex">
+        <Text variant="body2">Box as flex with full radius</Text>
+      </Box>
+      <Box fullWidth padding="small" withBorder>
+        <Text variant="body2">Full width box</Text>
+      </Box>
+    </Stack>
+  );
+}

package/src/components/Box/box.tsx

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import { baseBox } from "./box.css";
+import type { BaseSprinkles } from "../../utils/sprinkles.css";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils";
+
+type BoxProps = useRender.ComponentProps<"div"> & BaseSprinkles;
+
+function Box({ render, className, ...props }: BoxProps) {
+  const [styleProps, htmlProps] = applyBaseSprinkles(props);
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: {
+      ...htmlProps,
+      className: clsx(baseBox, styleProps, className),
+    },
+  });
+}
+export type { BoxProps };
+export { Box };

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Box",
+  "description": "A low-level polymorphic layout primitive. The foundational building block for all layout components.",
+  "category": "Layout",
+  "status": "stable",
+  "keywords": ["box", "layout", "div", "polymorphic", "primitive"],
+  "related": ["Container", "Grid", "Stack", "Surface"]
+}

package/src/components/Box/index.ts

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

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

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