@blenx-dev/components 0.0.2 → 0.0.3

package/src/components/Autocomplete/autocomplete.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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