@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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