@blenx-dev/core 0.1.0

package/src/components/Menu/menu.tsx

@@ -0,0 +1,115 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import clsx from "clsx";
+import {
+  trigger,
+  popup,
+  item,
+  itemDestructive,
+  separator,
+  groupLabel,
+  inset,
+  shortcut,
+} from "./menu.css";
+
+interface MenuProps extends MenuPrimitive.Root.Props {
+  variant?: "default" | "destructive";
+}
+const Menu = MenuPrimitive.Root;
+
+function MenuTrigger({
+  className,
+  style,
+  ...props
+}: MenuPrimitive.Trigger.Props & { className?: string; style?: React.CSSProperties }) {
+  return <MenuPrimitive.Trigger className={clsx(trigger, className)} style={style} {...props} />;
+}
+
+type MenuPopupProps = MenuPrimitive.Popup.Props & {
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuPopup({
+  align = "start",
+  sideOffset = 4,
+  className,
+  style,
+  ...props
+}: MenuPopupProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner align={align} sideOffset={sideOffset}>
+        <MenuPrimitive.Popup className={clsx(popup, className)} style={style} {...props} />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+type MenuItemProps = MenuPrimitive.Item.Props & {
+  variant?: "default" | "destructive";
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuItem({ variant = "default", className, style, ...props }: MenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={clsx(item, variant === "destructive" && itemDestructive, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type MenuSeparatorProps = MenuPrimitive.Separator.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuSeparator({ className, style, ...props }: MenuSeparatorProps) {
+  return (
+    <MenuPrimitive.Separator className={clsx(separator, className)} style={style} {...props} />
+  );
+}
+
+type MenuGroupLabelProps = MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuGroupLabel({ inset: hasInset, className, style, ...props }: MenuGroupLabelProps) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={clsx(groupLabel, hasInset && inset, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type MenuShortcutProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuShortcut({ children, className, style }: MenuShortcutProps) {
+  return (
+    <span className={clsx(shortcut, className)} style={style}>
+      {children}
+    </span>
+  );
+}
+
+export type {
+  MenuGroupLabelProps,
+  MenuItemProps,
+  MenuPopupProps,
+  MenuProps,
+  MenuSeparatorProps,
+  MenuShortcutProps,
+};
+export { Menu, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuShortcut, MenuTrigger };

package/src/components/OTPField/index.ts

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

package/src/components/OTPField/otp-field.css.ts

@@ -0,0 +1,54 @@
+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: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing["1"],
+});
+
+export const input = recipe({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    borderRadius: tokenVars.borderRadius.default,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: semanticVars.border.default,
+    backgroundColor: semanticVars.background.default,
+    color: semanticVars.text.primary,
+    outline: "none",
+    caretColor: semanticVars.interactive.primary.default,
+    transition: "box-shadow 0.15s ease, border-color 0.15s ease",
+    padding: 0,
+    margin: 0,
+  },
+  variants: {
+    size: {
+      default: {
+        width: tokenVars.spacing["9"],
+        height: tokenVars.spacing["9"],
+        fontSize: tokenVars.fontSize.md,
+      },
+      lg: {
+        width: tokenVars.spacing["10"],
+        height: tokenVars.spacing["10"],
+        fontSize: tokenVars.fontSize.lg,
+      },
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export const separator = style({
+  backgroundColor: semanticVars.border.default,
+  borderRadius: "999px",
+  width: tokenVars.spacing["3"],
+  height: tokenVars.spacing["0.5"],
+  flexShrink: 0,
+});

package/src/components/OTPField/otp-field.tsx

@@ -0,0 +1,46 @@
+import { OTPField as OTPFieldPreview } from "@base-ui/react/otp-field";
+import clsx from "clsx";
+import type React from "react";
+import { root, input as inputRecipe, separator } from "./otp-field.css";
+
+type OTPFieldSize = "default" | "lg";
+
+type OTPFieldProps = Omit<React.ComponentProps<typeof OTPFieldPreview.Root>, "style"> & {
+  size?: OTPFieldSize;
+  className?: string;
+};
+
+type OTPFieldInputProps = Omit<
+  React.ComponentProps<typeof OTPFieldPreview.Input>,
+  "style" | "size"
+> & {
+  size?: OTPFieldSize;
+  className?: string;
+};
+
+type OTPFieldSeparatorProps = {
+  className?: string;
+};
+
+export function OTPField({ size = "default", className, ...props }: OTPFieldProps) {
+  return (
+    <OTPFieldPreview.Root
+      className={clsx(root, className)}
+      data-size={size}
+      {...(props as React.ComponentProps<typeof OTPFieldPreview.Root>)}
+    />
+  );
+}
+
+export function OTPFieldInput({ size = "default", className, ...props }: OTPFieldInputProps) {
+  return (
+    <OTPFieldPreview.Input
+      className={clsx(inputRecipe({ size }), className)}
+      {...(props as React.ComponentProps<typeof OTPFieldPreview.Input>)}
+    />
+  );
+}
+
+export function OTPFieldSeparator({ className }: OTPFieldSeparatorProps) {
+  return <OTPFieldPreview.Separator render={<div className={clsx(separator, className)} />} />;
+}

package/src/components/Popover/index.ts

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

package/src/components/Popover/popover.css.ts

@@ -0,0 +1,81 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  zIndex: 50,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+});
+
+export const positioner = style({
+  zIndex: 50,
+  outline: "none",
+});
+
+export const popup = style({
+  boxSizing: "border-box",
+  minWidth: 160,
+  width: "max(var(--anchor-width), 240px)",
+  maxWidth: "calc(100vw - 16px)",
+  padding: tokenVars.spacing.sm,
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.lg,
+  boxShadow: tokenVars.shadow.lg,
+  outline: "none",
+  transformOrigin: "var(--transform-origin)",
+  transitionProperty: "opacity, scale",
+  transitionDuration: "150ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&[data-starting-style]": {
+      opacity: 0,
+      scale: 0.95,
+    },
+    "&[data-ending-style]": {
+      opacity: 0,
+      scale: 0.95,
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const arrow = style({
+  position: "absolute",
+  width: 10,
+  height: 10,
+});
+
+export const arrowFill = style({
+  width: "100%",
+  height: "100%",
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: 2,
+  transform: "rotate(45deg)",
+});
+
+export const title = style({
+  fontSize: tokenVars.fontSize.md,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.primary,
+  margin: 0,
+  paddingBottom: tokenVars.spacing.xs,
+});
+
+export const description = style({
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.secondary,
+  margin: 0,
+  paddingBottom: tokenVars.spacing.xs,
+});

package/src/components/Popover/popover.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import clsx from "clsx";
+import type React from "react";
+import { backdrop, positioner, popup, arrow, arrowFill, title, description } from "./popover.css";
+
+export const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =
+  PopoverPrimitive.createHandle;
+
+export function Popover(props: PopoverPrimitive.Root.Props): React.ReactElement {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+export function PopoverTrigger(props: PopoverPrimitive.Trigger.Props): React.ReactElement {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+export function PopoverClose(props: PopoverPrimitive.Close.Props): React.ReactElement {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
+}
+
+export function PopoverPortal(props: PopoverPrimitive.Portal.Props): React.ReactElement {
+  return <PopoverPrimitive.Portal {...props} />;
+}
+
+export function PopoverPositioner({
+  sideOffset = 4,
+  side = "bottom",
+  align = "center",
+  className,
+  style,
+  ...props
+}: PopoverPrimitive.Positioner.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <PopoverPrimitive.Positioner
+      sideOffset={sideOffset}
+      side={side}
+      align={align}
+      className={clsx(positioner, className)}
+      style={style}
+      data-slot="popover-positioner"
+      {...props}
+    />
+  );
+}
+
+export function PopoverPopup({
+  className,
+  style,
+  ...props
+}: PopoverPrimitive.Popup.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return (
+    <PopoverPortal>
+      <PopoverPositioner>
+        <PopoverPrimitive.Popup
+          className={clsx(popup, className)}
+          style={style}
+          data-slot="popover-popup"
+          {...props}
+        />
+      </PopoverPositioner>
+    </PopoverPortal>
+  );
+}
+
+export function PopoverArrow(props: PopoverPrimitive.Arrow.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Arrow className={arrow} data-slot="popover-arrow" {...props}>
+      <div className={arrowFill} />
+    </PopoverPrimitive.Arrow>
+  );
+}
+
+export function PopoverBackdrop(props: PopoverPrimitive.Backdrop.Props): React.ReactElement {
+  return <PopoverPrimitive.Backdrop className={backdrop} data-slot="popover-backdrop" {...props} />;
+}
+
+export function PopoverTitle(props: PopoverPrimitive.Title.Props): React.ReactElement {
+  return <PopoverPrimitive.Title className={title} data-slot="popover-title" {...props} />;
+}
+
+export function PopoverDescription(props: PopoverPrimitive.Description.Props): React.ReactElement {
+  return (
+    <PopoverPrimitive.Description
+      className={description}
+      data-slot="popover-description"
+      {...props}
+    />
+  );
+}
+
+export const PopoverRoot = Popover;
+
+export const PopoverCompound = {
+  Root: Popover,
+  Trigger: PopoverTrigger,
+  Close: PopoverClose,
+  Portal: PopoverPortal,
+  Positioner: PopoverPositioner,
+  Popup: PopoverPopup,
+  Arrow: PopoverArrow,
+  Backdrop: PopoverBackdrop,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  createHandle: PopoverCreateHandle,
+};

package/src/components/Progress/index.ts

@@ -0,0 +1,7 @@
+export {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+} from "./progress";

package/src/components/Progress/progress.css.ts

@@ -0,0 +1,37 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  gap: tokenVars.spacing["2"],
+});
+
+export const track = style({
+  display: "block",
+  height: 6,
+  width: "100%",
+  overflow: "hidden",
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.surface.default,
+});
+
+export const indicator = style({
+  height: "100%",
+  backgroundColor: semanticVars.interactive.primary.default,
+  borderRadius: tokenVars.borderRadius.full,
+  transitionProperty: "width, background-color",
+  transitionDuration: tokenVars.duration.slow,
+  transitionTimingFunction: "ease",
+});
+
+export const progressLabel = style({
+  fontSize: tokenVars.fontSize.md,
+  fontWeight: tokenVars.fontWeight.medium,
+});
+
+export const value = style({
+  fontSize: tokenVars.fontSize.sm,
+  fontVariantNumeric: "tabular-nums",
+});

package/src/components/Progress/progress.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import clsx from "clsx";
+import * as styles from "./progress.css";
+import type { _BaseDivProps } from "../../utils/types";
+
+type ProgressRootProps = _BaseDivProps & ProgressPrimitive.Root.Props;
+
+function Progress({ children, className, style, ...props }: ProgressRootProps) {
+  return (
+    <ProgressPrimitive.Root className={clsx(styles.root, className)} style={style} {...props}>
+      {children ?? (
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      )}
+    </ProgressPrimitive.Root>
+  );
+}
+
+type ProgressLabelProps = _BaseDivProps & ProgressPrimitive.Label.Props;
+
+export function ProgressLabel({ className, style, ...props }: ProgressLabelProps) {
+  return (
+    <ProgressPrimitive.Label
+      className={clsx(styles.progressLabel, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type ProgressTrackProps = _BaseDivProps & ProgressPrimitive.Track.Props;
+
+export function ProgressTrack({ className, style, ...props }: ProgressTrackProps) {
+  return (
+    <ProgressPrimitive.Track className={clsx(styles.track, className)} style={style} {...props} />
+  );
+}
+
+type ProgressIndicatorProps = _BaseDivProps & ProgressPrimitive.Indicator.Props;
+
+export function ProgressIndicator({ className, style, ...props }: ProgressIndicatorProps) {
+  return (
+    <ProgressPrimitive.Indicator
+      className={clsx(styles.indicator, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type ProgressValueProps = _BaseDivProps & ProgressPrimitive.Value.Props;
+
+export function ProgressValue({ className, style, ...props }: ProgressValueProps) {
+  return (
+    <ProgressPrimitive.Value className={clsx(styles.value, className)} style={style} {...props} />
+  );
+}
+
+export { Progress };

package/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export { Radio, RadioGroup, RadioGroupItem } from "./radio";

package/src/components/Radio/radio.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  borderRadius: tokenVars.borderRadius.full,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  backgroundColor: semanticVars.background.default,
+  outline: "none",
+  transitionProperty: "box-shadow",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+  "@media": {
+    "screen and (min-width: 640px)": {
+      width: 16,
+      height: 16,
+    },
+  },
+});
+
+export const rootDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.64,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.sm,
+});
+
+export const indicator = style({
+  display: "none",
+  position: "absolute",
+  top: -1,
+  left: -1,
+  right: -1,
+  bottom: -1,
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: tokenVars.borderRadius.full,
+});
+
+export const indicatorChecked = style({
+  display: "flex",
+  backgroundColor: semanticVars.interactive.primary.default,
+});
+
+export const dot = style({
+  width: 8,
+  height: 8,
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.interactive.primaryFg,
+  "@media": {
+    "screen and (min-width: 640px)": {
+      width: 6,
+      height: 6,
+    },
+  },
+});

package/src/components/Radio/radio.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import clsx from "clsx";
+import { group, root, rootDisabled, indicator, indicatorChecked, dot } from "./radio.css";
+
+type RadioGroupProps = Omit<RadioGroupPrimitive.Props, "style" | "className"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type RadioProps = Omit<RadioPrimitive.Root.Props, "style" | "className"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function RadioGroup({ className, style, ...props }: RadioGroupProps) {
+  return (
+    <RadioGroupPrimitive
+      className={clsx(group, className)}
+      style={style}
+      data-slot="radio-group"
+      {...props}
+    />
+  );
+}
+
+export function Radio({ className, style, ...props }: RadioProps) {
+  return (
+    <RadioPrimitive.Root
+      {...props}
+      render={(rootProps, { checked, disabled }) => (
+        <span
+          {...rootProps}
+          className={clsx(root, disabled && rootDisabled, className)}
+          style={style}
+          data-slot="radio"
+        >
+          <RadioPrimitive.Indicator className={clsx(indicator, checked && indicatorChecked)}>
+            {checked && <span className={dot} />}
+          </RadioPrimitive.Indicator>
+        </span>
+      )}
+    />
+  );
+}
+
+export { Radio as RadioGroupItem };

package/src/components/ScrollArea/index.ts

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