@blenx-dev/components 0.0.0

package/src/components/Combobox/combobox.css.ts

@@ -0,0 +1,334 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const inputGroup = style({
+  position: "relative",
+  width: "100%",
+  minWidth: 0,
+  color: themeContract.contentPrimary,
+});
+
+export const inputSm = style({
+  paddingInlineStart: "30px",
+  paddingInlineEnd: "26px",
+});
+
+export const inputDefault = style({
+  paddingInlineStart: "32px",
+  paddingInlineEnd: "28px",
+});
+
+export const inputLg = style({
+  paddingInlineStart: "34px",
+  paddingInlineEnd: "30px",
+});
+
+export const startAddon = style({
+  pointerEvents: "none",
+  position: "absolute",
+  insetBlock: 0,
+  insetInlineStart: borderWidth.thin,
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.8,
+});
+
+export const startAddonSm = style({
+  paddingInlineStart: "9px",
+});
+
+export const startAddonDefault = style({
+  paddingInlineStart: "11px",
+});
+
+export const adornment = style({
+  position: "absolute",
+  top: "50%",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  transform: "translateY(-50%)",
+  borderRadius: borderRadius.medium,
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: "transparent",
+  opacity: 0.8,
+  outline: "none",
+  transitionProperty: "color, background-color, box-shadow, opacity",
+  transitionDuration: "150ms",
+});
+
+export const adornmentSm = style({
+  width: "28px",
+  height: "28px",
+});
+
+export const adornmentDefault = style({
+  width: "32px",
+  height: "32px",
+});
+
+export const adornmentEndSm = style({
+  insetInlineEnd: spacing["0"],
+});
+
+export const adornmentEndDefault = style({
+  insetInlineEnd: 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: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  backgroundColor: themeContract.surface,
+  boxShadow: themeContract.shadowLg,
+  transformOrigin: "var(--transform-origin)",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "150ms",
+  "::before": {
+    content: '""',
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit",
+    boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+  },
+});
+
+export const popup = style({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  maxHeight: "min(var(--available-height), 23rem)",
+  color: themeContract.contentPrimary,
+});
+
+export const separator = style({
+  height: "1px",
+  marginBlock: spacing.xsmall,
+  marginInline: spacing.small,
+  backgroundColor: themeContract.border,
+  selectors: {
+    "&:last-child": {
+      display: "none",
+    },
+  },
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const groupLabel = style({
+  paddingBlock: "6px",
+  paddingInline: spacing.small,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentSecondary,
+});
+
+export const empty = style({
+  padding: spacing.small,
+  textAlign: "center",
+  fontSize: fontSize.medium,
+  color: themeContract.contentSecondary,
+});
+
+export const row = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const value = style({
+  display: "block",
+});
+
+export const list = style({
+  padding: spacing.xsmall,
+  selectors: {
+    "&:not(:empty)": {
+      scrollPaddingBlock: spacing.xsmall,
+    },
+    "&:has([data-slot='combobox-item'])": {
+      paddingInlineEnd: spacing.small,
+    },
+  },
+});
+
+export const status = style({
+  paddingInline: spacing.medium,
+  paddingBlock: spacing.small,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentSecondary,
+  selectors: {
+    "&:empty": {
+      margin: 0,
+      padding: 0,
+    },
+  },
+});
+
+export const item = style({
+  display: "grid",
+  gridTemplateColumns: "1rem 1fr",
+  alignItems: "center",
+  columnGap: spacing.small,
+  minHeight: "32px",
+  paddingInlineStart: spacing.small,
+  paddingInlineEnd: spacing.medium,
+  paddingBlock: spacing["1"],
+  borderRadius: borderRadius.small,
+  cursor: "default",
+  userSelect: "none",
+  outline: "none",
+  fontSize: fontSize.medium,
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.surfaceHover,
+    },
+    "&[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.64,
+    },
+    "&[data-highlighted]": {
+      backgroundColor: themeContract.surfaceHover,
+      color: themeContract.contentPrimary,
+    },
+  },
+});
+
+export const itemIndicator = style({
+  gridColumn: "1",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export const itemContent = style({
+  gridColumn: "2",
+});
+
+export const chips = style({
+  position: "relative",
+  display: "inline-flex",
+  width: "100%",
+  minWidth: 0,
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: spacing.xxsmall,
+  minHeight: "36px",
+  padding: "calc(4px - 1px)",
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  backgroundColor: themeContract.background,
+  color: themeContract.contentPrimary,
+  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04)",
+  outline: "none",
+  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-size='sm'])": {
+      minHeight: "32px",
+    },
+    "&:has([data-size='lg'])": {
+      minHeight: "40px",
+    },
+  },
+});
+
+export const chipsStartAddon = style({
+  display: "flex",
+  flexShrink: 0,
+  alignItems: "center",
+  opacity: 0.8,
+  paddingInlineStart: spacing.small,
+});
+
+export const chipsStartAddonSm = style({
+  paddingInlineStart: "6px",
+});
+
+export const chipsInput = style({
+  flex: "1 1 0%",
+  minWidth: "3rem",
+  borderWidth: 0,
+  outline: "none",
+  backgroundColor: "transparent",
+  paddingBlock: "6px",
+  paddingInlineStart: spacing.xsmall,
+  paddingInlineEnd: spacing.xsmall,
+  fontSize: fontSize.medium,
+  lineHeight: 1.5,
+  color: themeContract.contentPrimary,
+  selectors: {
+    "&::placeholder": {
+      color: themeContract.contentDisabled,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+    "&:has(+ [data-slot='combobox-chip'])": {
+      paddingInlineStart: spacing.xxsmall,
+    },
+  },
+});
+
+export const chip = style({
+  display: "inline-flex",
+  alignItems: "center",
+  borderRadius: borderRadius.medium,
+  backgroundColor: themeContract.surfaceHover,
+  color: themeContract.contentPrimary,
+  paddingInlineStart: spacing.small,
+  fontSize: fontSize.small,
+  fontWeight: fontWeight.medium,
+  lineHeight: 1.2,
+  outline: "none",
+});
+
+export const chipRemove = style({
+  display: "inline-flex",
+  height: "100%",
+  alignItems: "center",
+  flexShrink: 0,
+  cursor: "pointer",
+  paddingInline: spacing.xsmall,
+  opacity: 0.8,
+  selectors: {
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+});

package/src/components/Combobox/combobox.tsx

@@ -0,0 +1,350 @@
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { CaretUpDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import * as React from "react";
+import { Input } from "../Input/input";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  inputGroup,
+  inputSm,
+  inputDefault,
+  inputLg,
+  startAddon,
+  startAddonSm,
+  startAddonDefault,
+  adornment,
+  adornmentSm,
+  adornmentDefault,
+  adornmentEndSm,
+  adornmentEndDefault,
+  positioner,
+  popupShell,
+  popup,
+  separator,
+  group,
+  groupLabel,
+  empty,
+  row,
+  list,
+  status,
+  item,
+  itemIndicator,
+  itemContent,
+  chips,
+  chipsStartAddon,
+  chipsInput,
+  chip,
+  chipRemove,
+} from "./combobox.css";
+import { CloseButton } from "../CloseButton";
+
+type InputSize = "sm" | "default" | "lg" | number;
+
+export const ComboboxContext: React.Context<{
+  chipsRef: React.RefObject<Element | null> | null;
+  multiple: boolean;
+}> = React.createContext<{
+  chipsRef: React.RefObject<Element | null> | null;
+  multiple: boolean;
+}>({
+  chipsRef: null,
+  multiple: false,
+});
+
+export function Combobox<Value, Multiple extends boolean | undefined = false>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+): React.ReactElement {
+  const chipsRef = React.useRef<Element | null>(null);
+  const contextValue = React.useMemo(
+    () => ({ chipsRef, multiple: Boolean(props.multiple) }),
+    [props.multiple],
+  );
+  return (
+    <ComboboxContext.Provider value={contextValue}>
+      <ComboboxPrimitive.Root {...props} />
+    </ComboboxContext.Provider>
+  );
+}
+
+export function ComboboxChipsInput({
+  size,
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  size?: InputSize;
+  ref?: React.Ref<HTMLInputElement>;
+}): React.ReactElement {
+  const resolvedSize = size ?? "default";
+  return (
+    <ComboboxPrimitive.Input
+      className={clsx(chipsInput, className)}
+      data-size={typeof resolvedSize === "string" ? resolvedSize : undefined}
+      data-slot="combobox-chips-input"
+      size={typeof resolvedSize === "number" ? resolvedSize : undefined}
+      {...props}
+    />
+  );
+}
+
+type ComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
+export function ComboboxTrigger({ className, ...props }: ComboboxTriggerProps): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Trigger className={className} data-slot="combobox-trigger" {...props} />
+  );
+}
+
+type ComboboxClearProps = ComboboxPrimitive.Clear.Props;
+export function ComboboxClear({
+  className,
+  children,
+  ...props
+}: ComboboxClearProps): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Clear
+      className={clsx(adornment, className)}
+      data-slot="combobox-clear"
+      {...props}
+    >
+      {children ?? <XIcon size={18} weight="regular" />}
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+export function ComboboxInput({
+  showTrigger = true,
+  showClear = false,
+  startAddon: startAddonNode,
+  size,
+  triggerProps,
+  clearProps,
+  render: renderProp,
+  className,
+  ...props
+}: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  size?: InputSize;
+  ref?: React.Ref<HTMLInputElement>;
+  triggerProps?: ComboboxPrimitive.Trigger.Props;
+  clearProps?: ComboboxPrimitive.Clear.Props;
+}): React.ReactElement {
+  const resolvedSize = size ?? "default";
+  const renderSize = resolvedSize === "sm" || resolvedSize === "lg" ? resolvedSize : "default";
+  const inputCls = clsx(
+    resolvedSize === "sm" ? inputSm : resolvedSize === "lg" ? inputLg : inputDefault,
+    className,
+  );
+
+  return (
+    <ComboboxPrimitive.InputGroup className={inputGroup} data-slot="combobox-input-group">
+      {startAddonNode && (
+        <div
+          aria-hidden="true"
+          className={clsx(startAddon, resolvedSize === "sm" ? startAddonSm : startAddonDefault)}
+          data-slot="combobox-start-addon"
+        >
+          {startAddonNode}
+        </div>
+      )}
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        render={renderProp ?? <Input size={renderSize} />}
+        className={inputCls}
+        {...props}
+      />
+      {showTrigger && (
+        <ComboboxPrimitive.Trigger
+          className={clsx(
+            adornment,
+            resolvedSize === "sm" ? adornmentSm : adornmentDefault,
+            resolvedSize === "sm" ? adornmentEndSm : adornmentEndDefault,
+          )}
+          data-slot="combobox-trigger"
+          {...triggerProps}
+        >
+          <CaretUpDownIcon size={resolvedSize === "sm" ? 16 : 18} weight="regular" />
+        </ComboboxPrimitive.Trigger>
+      )}
+      {showClear && (
+        <ComboboxClear
+          className={clsx(
+            adornment,
+            resolvedSize === "sm" ? adornmentSm : adornmentDefault,
+            resolvedSize === "sm" ? adornmentEndSm : adornmentEndDefault,
+          )}
+          render={<CloseButton />}
+          {...clearProps}
+        />
+      )}
+    </ComboboxPrimitive.InputGroup>
+  );
+}
+
+export function ComboboxPopup({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  alignOffset,
+  align = "start",
+  anchor: anchorProp,
+  portalProps,
+  className,
+  ...props
+}: ComboboxPrimitive.Popup.Props & {
+  align?: ComboboxPrimitive.Positioner.Props["align"];
+  sideOffset?: ComboboxPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: ComboboxPrimitive.Positioner.Props["alignOffset"];
+  side?: ComboboxPrimitive.Positioner.Props["side"];
+  anchor?: ComboboxPrimitive.Positioner.Props["anchor"];
+  portalProps?: ComboboxPrimitive.Portal.Props;
+}): React.ReactElement {
+  const { chipsRef } = React.useContext(ComboboxContext);
+  const anchor = anchorProp ?? chipsRef;
+
+  return (
+    <ComboboxPrimitive.Portal {...portalProps}>
+      <ComboboxPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className={positioner}
+        data-slot="combobox-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <span className={clsx(popupShell, className)}>
+          <ComboboxPrimitive.Popup className={popup} data-slot="combobox-popup" {...props}>
+            {children}
+          </ComboboxPrimitive.Popup>
+        </span>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+export function ComboboxItem({
+  children,
+  className,
+  ...props
+}: ComboboxPrimitive.Item.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Item className={clsx(item, className)} data-slot="combobox-item" {...props}>
+      <ComboboxPrimitive.ItemIndicator className={itemIndicator}>
+        <CheckIcon size={16} weight="bold" />
+      </ComboboxPrimitive.ItemIndicator>
+      <div className={itemContent}>{children}</div>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+export function ComboboxSeparator(props: ComboboxPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Separator className={separator} data-slot="combobox-separator" {...props} />
+  );
+}
+
+export function ComboboxGroup(props: ComboboxPrimitive.Group.Props): React.ReactElement {
+  return <ComboboxPrimitive.Group className={group} data-slot="combobox-group" {...props} />;
+}
+
+export function ComboboxGroupLabel(props: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      className={groupLabel}
+      data-slot="combobox-group-label"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxEmpty(props: ComboboxPrimitive.Empty.Props): React.ReactElement {
+  return <ComboboxPrimitive.Empty className={empty} data-slot="combobox-empty" {...props} />;
+}
+
+export function ComboboxRow(props: ComboboxPrimitive.Row.Props): React.ReactElement {
+  return <ComboboxPrimitive.Row className={row} data-slot="combobox-row" {...props} />;
+}
+
+export function ComboboxValue(props: ComboboxPrimitive.Value.Props): React.ReactElement {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+export function ComboboxList(props: ComboboxPrimitive.List.Props): React.ReactElement {
+  return (
+    <ScrollArea scrollbarGutter scrollFade>
+      <ComboboxPrimitive.List className={list} data-slot="combobox-list" {...props} />
+    </ScrollArea>
+  );
+}
+
+export function ComboboxStatus(props: ComboboxPrimitive.Status.Props): React.ReactElement {
+  return <ComboboxPrimitive.Status className={status} data-slot="combobox-status" {...props} />;
+}
+
+export function ComboboxCollection(props: ComboboxPrimitive.Collection.Props): React.ReactElement {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+export function ComboboxChips({
+  children,
+  startAddon: startAddonNode,
+  className,
+  ...props
+}: ComboboxPrimitive.Chips.Props & {
+  startAddon?: React.ReactNode;
+}): React.ReactElement {
+  const { chipsRef } = React.useContext(ComboboxContext);
+
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      ref={chipsRef as React.Ref<HTMLDivElement> | null}
+      className={clsx(chips, className)}
+      {...props}
+    >
+      {startAddonNode && (
+        <div aria-hidden="true" data-slot="combobox-start-addon" className={chipsStartAddon}>
+          {startAddonNode}
+        </div>
+      )}
+      {children}
+    </ComboboxPrimitive.Chips>
+  );
+}
+
+export function ComboboxChip({
+  children,
+  removeProps,
+  className,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  removeProps?: ComboboxPrimitive.ChipRemove.Props;
+}): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Chip className={clsx(chip, className)} data-slot="combobox-chip" {...props}>
+      {children}
+      <ComboboxChipRemove {...removeProps} />
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipRemove({
+  className,
+  ...props
+}: ComboboxPrimitive.ChipRemove.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.ChipRemove
+      aria-label="Remove"
+      className={clsx(chipRemove, className)}
+      data-slot="combobox-chip-remove"
+      {...props}
+    >
+      <XIcon size={16} weight="regular" />
+    </ComboboxPrimitive.ChipRemove>
+  );
+}
+
+export const useComboboxFilter: typeof ComboboxPrimitive.useFilter = ComboboxPrimitive.useFilter;
+
+export { ComboboxChipRemove };

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Combobox",
+  "description": "A combobox with single and multi-select (chip) support, built on Base UI Combobox with filtering and popup.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["combobox", "select", "autocomplete", "chips", "multi-select"],
+  "related": ["Input", "ScrollArea", "Field", "Autocomplete"]
+}

package/src/components/Combobox/index.ts

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

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox",
+  "type": "registry:ui",
+  "title": "Combobox",
+  "description": "A StyleX button component.",
+  "registryDependencies": ["input", "scroll-area"],
+  "files": [
+    {
+      "file": "combobox.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Combobox/combobox.tsx"
+    },
+    {
+      "file": "combobox.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Combobox/combobox.css.ts"
+    }
+  ]
+}