@blenx-dev/core 0.1.0

package/src/components/Autocomplete/autocomplete.css.ts

@@ -0,0 +1,167 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const inputGroup = style({
+  position: "relative",
+  width: "100%",
+  minWidth: 0,
+  color: semanticVars.text.primary,
+});
+
+export const inputSize = style({
+  vars: {
+    "--autocomplete-input-padding-inline-start": "33px",
+    "--autocomplete-input-padding-inline-end": "28px",
+  },
+});
+
+export const inputSizeSm = style({
+  paddingInlineStart: "31px",
+  paddingInlineEnd: "26px",
+});
+
+export const inputSizeDefault = style({
+  paddingInlineStart: "33px",
+  paddingInlineEnd: "28px",
+});
+
+export const inputSizeLg = style({
+  paddingInlineStart: "35px",
+  paddingInlineEnd: "30px",
+});
+
+export const startAddon = style({
+  pointerEvents: "none",
+  position: "absolute",
+  insetBlock: 0,
+  insetInlineStart: tokenVars.borderWidth.thin,
+  zIndex: 1,
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.8,
+});
+
+export const startAddonDefault = style({
+  paddingInlineStart: "11px",
+});
+
+export const startAddonSmall = style({
+  paddingInlineStart: "9px",
+});
+
+export const adornment = style({
+  position: "absolute",
+  top: "50%",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  transform: "translateY(-50%)",
+  borderRadius: tokenVars.borderRadius.md,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: "transparent",
+  opacity: 0.8,
+  outline: "none",
+  transitionProperty: "color, background-color, box-shadow, opacity",
+  transitionDuration: "150ms",
+});
+
+export const adornmentSmall = style({
+  width: "28px",
+  height: "28px",
+});
+
+export const adornmentDefault = style({
+  width: "32px",
+  height: "32px",
+});
+
+export const adornmentEndSmall = style({
+  insetInlineEnd: tokenVars.spacing["0"],
+});
+
+export const adornmentEndDefault = style({
+  insetInlineEnd: tokenVars.spacing["0.5"],
+});
+
+export const positioner = style({
+  outline: "none",
+});
+
+export const popupShell = style({
+  position: "relative",
+  display: "flex",
+  maxHeight: "100%",
+  minWidth: "var(--anchor-width)",
+  maxWidth: "var(--available-width)",
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.lg,
+  backgroundColor: semanticVars.surface.default,
+  boxShadow: tokenVars.shadow.lg,
+  transformOrigin: "var(--transform-origin)",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "150ms",
+});
+
+export const popup = style({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  maxHeight: "min(var(--available-height), 23rem)",
+  color: semanticVars.text.primary,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const separator = style({
+  height: "1px",
+  marginBlock: tokenVars.spacing.xs,
+  marginInline: tokenVars.spacing.sm,
+  backgroundColor: semanticVars.border.default,
+});
+
+export const groupLabel = style({
+  paddingBlock: tokenVars.spacing["1"],
+  paddingInline: tokenVars.spacing["2"],
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.secondary,
+});
+
+export const empty = style({
+  padding: tokenVars.spacing.sm,
+  textAlign: "center",
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.secondary,
+});
+
+export const list = style({
+  padding: tokenVars.spacing.xs,
+});
+
+export const status = style({
+  paddingInline: tokenVars.spacing.md,
+  paddingBlock: tokenVars.spacing.sm,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.secondary,
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  paddingInline: tokenVars.spacing.sm,
+  paddingBlock: tokenVars.spacing["1"],
+  borderRadius: tokenVars.borderRadius.md,
+  cursor: "default",
+  userSelect: "none",
+  outline: "none",
+  minHeight: "32px",
+  fontSize: tokenVars.fontSize.md,
+});

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/index.ts

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

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

@@ -0,0 +1,65 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: tokenVars.borderRadius.default,
+  backgroundColor: semanticVars.background.subtle,
+  color: semanticVars.text.secondary,
+  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: semanticVars.background.subtle,
+  color: semanticVars.text.secondary,
+  fontSize: 12,
+  outline: "none",
+  border: "none",
+  borderWidth: 0,
+  fontWeight: 600,
+  lineHeight: 1,
+});
+
+export const avatarRecipes = recipe({
+  variants: {
+    size: {
+      sm: { width: tokenVars.spacing.lg, height: tokenVars.spacing.lg },
+      md: { width: tokenVars.spacing.xl, height: tokenVars.spacing.xl },
+      lg: { width: tokenVars.spacing.xxl, height: tokenVars.spacing.xxl },
+      xl: { width: tokenVars.spacing.xxxl, height: tokenVars.spacing.xxxl },
+      hero: { width: tokenVars.spacing.titanic, height: tokenVars.spacing.titanic },
+    },
+    radius: {
+      none: { borderRadius: 0 },
+      xs: { borderRadius: tokenVars.borderRadius.xs },
+      small: { borderRadius: tokenVars.borderRadius.sm },
+      medium: { borderRadius: tokenVars.borderRadius.md },
+      large: { borderRadius: tokenVars.borderRadius.lg },
+      xlarge: { borderRadius: tokenVars.borderRadius.xl },
+      xxlarge: { borderRadius: tokenVars.borderRadius.xxl },
+      full: { borderRadius: tokenVars.borderRadius.full },
+    },
+  },
+});

package/src/components/Avatar/avatar.tsx

@@ -0,0 +1,44 @@
+import { Avatar as AvatarPrimitive, type AvatarRootProps } from "@base-ui/react/avatar";
+import clsx from "clsx";
+import { root, image, fallback, avatarRecipes } from "./avatar.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+
+type AvatarProps = AvatarRootProps &
+  RecipeVariants<typeof avatarRecipes> & {
+    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, avatarRecipes({ size, 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/index.ts

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

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

@@ -0,0 +1,180 @@
+import { createVar, style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const badgeVars = {
+  bg: createVar(),
+  fg: createVar(),
+  borderColor: createVar(),
+};
+
+export const badgeBase = style({
+  display: "inline-block",
+  padding: tokenVars.spacing.xs,
+  borderRadius: tokenVars.borderRadius.default,
+  fontSize: 12,
+  lineHeight: 1.2,
+  border: "1px solid transparent",
+});
+
+export const badgeSolid = style({
+  backgroundColor: badgeVars.bg,
+  color: badgeVars.fg,
+  borderColor: badgeVars.borderColor,
+});
+
+export const badgeOutline = style({
+  backgroundColor: "transparent",
+  color: badgeVars.borderColor,
+  borderColor: badgeVars.borderColor,
+});
+
+export const badgeSoft = style({
+  backgroundColor: `color-mix(in srgb, ${badgeVars.bg} 25%, transparent)`,
+  color: badgeVars.fg,
+  borderColor: "transparent",
+});
+
+export const badgeDefault = style({
+  vars: {
+    [badgeVars.bg]: semanticVars.surface.raised,
+    [badgeVars.fg]: semanticVars.text.primary,
+    [badgeVars.borderColor]: semanticVars.border.default,
+  },
+});
+
+export const badgePrimary = style({
+  vars: {
+    [badgeVars.bg]: semanticVars.interactive.primary.default,
+    [badgeVars.fg]: semanticVars.interactive.primaryFg,
+    [badgeVars.borderColor]: semanticVars.interactive.primary.default,
+  },
+});
+
+export const badgeSecondary = style({
+  vars: {
+    [badgeVars.bg]: semanticVars.interactive.secondary.default,
+    [badgeVars.fg]: semanticVars.interactive.secondaryFg,
+    [badgeVars.borderColor]: semanticVars.interactive.secondary.default,
+  },
+});
+
+export const badgeSuccess = style({
+  vars: {
+    [badgeVars.bg]: semanticVars.status.success.default,
+    [badgeVars.fg]: semanticVars.text.inverse,
+    [badgeVars.borderColor]: semanticVars.status.success.default,
+  },
+});
+
+export const badgeDanger = style({
+  vars: {
+    [badgeVars.bg]: semanticVars.status.danger.default,
+    [badgeVars.fg]: semanticVars.text.inverse,
+    [badgeVars.borderColor]: semanticVars.status.danger.default,
+  },
+});
+
+import { recipe } from "@vanilla-extract/recipes";
+export const badgeRecipe = recipe({
+  base: {
+    display: "inline-block",
+    padding: tokenVars.spacing.xs,
+    borderRadius: tokenVars.borderRadius.default,
+    fontSize: 12,
+    lineHeight: 1.2,
+    border: "1px solid transparent",
+  },
+
+  variants: {
+    appearance: {
+      solid: {},
+      soft: {
+        backgroundColor: "color-mix(in srgb, var(--badge-bg) 25%, transparent)",
+      },
+      outline: {
+        backgroundColor: "transparent",
+      },
+    },
+
+    variant: {
+      default: {
+        vars: {
+          [badgeVars.bg]: semanticVars.surface.raised,
+          [badgeVars.fg]: semanticVars.text.primary,
+          [badgeVars.borderColor]: semanticVars.border.default,
+        },
+      },
+
+      primary: {
+        vars: {
+          [badgeVars.bg]: semanticVars.interactive.primary.default,
+          [badgeVars.fg]: semanticVars.interactive.primaryFg,
+          [badgeVars.borderColor]: semanticVars.interactive.primary.default,
+        },
+      },
+
+      secondary: {
+        vars: {
+          [badgeVars.bg]: semanticVars.interactive.secondary.default,
+          [badgeVars.fg]: semanticVars.interactive.secondaryFg,
+          [badgeVars.borderColor]: semanticVars.interactive.secondary.default,
+        },
+      },
+
+      success: {
+        vars: {
+          [badgeVars.bg]: semanticVars.status.success.default,
+          [badgeVars.fg]: semanticVars.text.inverse,
+          [badgeVars.borderColor]: semanticVars.status.success.default,
+        },
+      },
+
+      danger: {
+        vars: {
+          [badgeVars.bg]: semanticVars.status.danger.default,
+          [badgeVars.fg]: semanticVars.text.inverse,
+          [badgeVars.borderColor]: semanticVars.status.danger.default,
+        },
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: {
+        appearance: "solid",
+      },
+      style: {
+        backgroundColor: badgeVars.bg,
+        color: badgeVars.fg,
+        borderColor: badgeVars.borderColor,
+      },
+    },
+
+    {
+      variants: {
+        appearance: "outline",
+      },
+      style: {
+        backgroundColor: "transparent",
+        color: badgeVars.borderColor,
+        borderColor: badgeVars.borderColor,
+      },
+    },
+
+    {
+      variants: {
+        appearance: "soft",
+      },
+      style: {
+        backgroundColor: `color-mix(in srgb, ${badgeVars.borderColor} 25%, transparent)`,
+        color: badgeVars.fg,
+      },
+    },
+  ],
+
+  defaultVariants: {
+    appearance: "solid",
+    variant: "default",
+  },
+});