@blenx-dev/core 0.1.0

package/src/components/ScrollArea/scroll-area.css.ts

@@ -0,0 +1,79 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  height: "100%",
+  minHeight: 0,
+  width: "100%",
+  boxSizing: "border-box",
+});
+
+export const viewport = style({
+  height: "100%",
+  minWidth: 0,
+  borderRadius: tokenVars.borderRadius.default,
+  outline: "none",
+  boxSizing: "border-box",
+  overscrollBehaviorY: "contain",
+  overscrollBehaviorX: "contain",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+  },
+});
+
+export const viewportFade = style({
+  WebkitMaskImage:
+    "linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent)",
+  maskImage:
+    "linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent)",
+});
+
+export const viewportGutter = style({
+  paddingRight: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.sm,
+});
+
+export const contentFill = style({
+  height: "100%",
+  width: "100%",
+});
+
+export const scrollbar = style({
+  margin: tokenVars.spacing.xs,
+  display: "flex",
+  opacity: 0,
+  boxSizing: "border-box",
+  transitionProperty: "opacity",
+  transitionDuration: "300ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&[data-hovering]": {
+      opacity: 1,
+      transitionDelay: "0ms",
+      transitionDuration: "100ms",
+    },
+    "&[data-scrolling]": {
+      opacity: 1,
+      transitionDelay: "0ms",
+      transitionDuration: "100ms",
+    },
+  },
+});
+
+export const scrollbarHorizontal = style({
+  height: "6px",
+  flexDirection: "column",
+});
+
+export const scrollbarVertical = style({
+  width: "6px",
+});
+
+export const thumb = style({
+  position: "relative",
+  flexGrow: 1,
+  borderRadius: tokenVars.borderRadius.default,
+  backgroundColor: semanticVars.border.strong,
+});

package/src/components/ScrollArea/scroll-area.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import clsx from "clsx";
+import type React from "react";
+import type { CSSProperties } from "react";
+import {
+  root,
+  viewport,
+  viewportFade,
+  viewportGutter,
+  contentFill,
+  scrollbar,
+  scrollbarHorizontal,
+  scrollbarVertical,
+  thumb,
+} from "./scroll-area.css";
+import type { NamedHeight } from "../../utils/heights";
+
+type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & {
+  scrollFade?: boolean;
+  scrollbarGutter?: boolean;
+  fill?: boolean;
+  height?: NamedHeight | CSSProperties["height"];
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function ScrollArea({
+  children,
+  scrollFade = false,
+  scrollbarGutter = true,
+  fill = true,
+  height = "60svh",
+  className,
+  style,
+  ...props
+}: ScrollAreaProps): React.ReactElement {
+  const dynamicHeight: React.CSSProperties =
+    typeof height === "string" ? { height, maxHeight: height } : {};
+  return (
+    <ScrollAreaPrimitive.Root
+      className={clsx(root, className)}
+      style={{ ...dynamicHeight, ...style }}
+      data-slot="scroll-area-root"
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        className={clsx(viewport, scrollFade && viewportFade, scrollbarGutter && viewportGutter)}
+        data-slot="scroll-area-viewport"
+      >
+        <ScrollAreaPrimitive.Content
+          className={clsx(fill && contentFill)}
+          data-slot="scroll-area-content"
+        >
+          {children}
+        </ScrollAreaPrimitive.Content>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation="vertical" />
+      <ScrollBar orientation="horizontal" />
+      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+type ScrollBarProps = ScrollAreaPrimitive.Scrollbar.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function ScrollBar({
+  orientation = "vertical",
+  className,
+  style,
+  ...props
+}: ScrollBarProps): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={clsx(
+        scrollbar,
+        orientation === "horizontal" && scrollbarHorizontal,
+        orientation === "vertical" && scrollbarVertical,
+        className,
+      )}
+      style={style}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb className={thumb} data-slot="scroll-area-thumb" />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
+export type { ScrollAreaProps, ScrollBarProps };

package/src/components/SegmentedControl/index.ts

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

package/src/components/SegmentedControl/segmented-control.tsx

@@ -0,0 +1,42 @@
+import type { ToggleProps } from "../Toggle/toggle";
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from "../ToggleGroup/toggle-group";
+
+type Option<T extends string> = {
+  value: T;
+  label: string;
+};
+
+type SegmentedControlProps<T extends string> = Omit<ToggleGroupProps, "value" | "onValueChange"> & {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: Option<T>[];
+  radius?: ToggleProps["radius"];
+};
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  radius = "md",
+  variant = "outline",
+  ...props
+}: SegmentedControlProps<T>) {
+  return (
+    <ToggleGroup
+      value={[value]}
+      onValueChange={(values) => {
+        if (values.length === 0) {
+          return;
+        }
+        onValueChange(values[0] as T);
+      }}
+      variant={variant}
+      {...props}
+    >
+      {options.map((option) => (
+        <ToggleGroupItem key={option.value} value={option.value} radius={radius}>
+          {option.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}

package/src/components/Select/index.ts

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

package/src/components/Select/select.css.ts

@@ -0,0 +1,182 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const label = style({
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.secondary,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.xs,
+  paddingRight: tokenVars.spacing.xs,
+});
+
+export const trigger = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: tokenVars.spacing.sm,
+  boxSizing: "border-box",
+  width: "100%",
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.sm,
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: "1.5",
+  fontFamily: "inherit",
+  color: semanticVars.text.primary,
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.md,
+  outline: "none",
+  cursor: "pointer",
+  transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+  selectors: {
+    "&:hover": {
+      borderColor: semanticVars.border.strong,
+    },
+    "&:focus-visible": {
+      borderColor: semanticVars.interactive.primary.default,
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+    "&[data-placeholder]": {
+      color: semanticVars.text.disabled,
+    },
+  },
+});
+
+export const triggerSm = style({
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.xs,
+  fontSize: 14,
+});
+
+export const triggerLg = style({
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.md,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.md,
+  fontSize: 16,
+});
+
+export const icon = style({
+  display: "flex",
+  alignItems: "center",
+  color: semanticVars.text.secondary,
+  flexShrink: 0,
+});
+
+export const popup = style({
+  boxSizing: "border-box",
+  maxHeight: 300,
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.lg,
+  boxShadow: tokenVars.shadow.lg,
+  zIndex: 1400,
+  minWidth: "var(--anchor-width)",
+  maxWidth: "var(--available-width)",
+  outline: "none",
+  overflowY: "auto",
+  selectors: {
+    "&:focus-visible": {
+      outline: "none",
+    },
+  },
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  boxSizing: "border-box",
+  minHeight: 32,
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  marginLeft: tokenVars.spacing.xs,
+  marginRight: tokenVars.spacing.xs,
+  borderRadius: tokenVars.borderRadius.sm,
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: "1.4",
+  color: semanticVars.text.primary,
+  cursor: "pointer",
+  userSelect: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&[data-highlighted]": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&[data-selected]": {
+      backgroundColor: semanticVars.interactive.primary.default,
+      color: semanticVars.interactive.primaryFg,
+    },
+    "&[data-selected]:hover": {
+      backgroundColor: semanticVars.interactive.primary.default,
+    },
+    "&[data-selected][data-highlighted]": {
+      backgroundColor: semanticVars.interactive.primary.default,
+    },
+    "&[data-disabled]": {
+      color: semanticVars.text.disabled,
+      cursor: "default",
+    },
+    "&[data-disabled]:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const itemIndicator = style({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0,
+  width: 14,
+});
+
+export const separator = style({
+  height: 1,
+  marginTop: tokenVars.spacing.xs,
+  marginBottom: tokenVars.spacing.xs,
+  backgroundColor: semanticVars.border.subtle,
+});
+
+export const groupLabel = style({
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.secondary,
+});
+
+export const scrollArrow = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: 24,
+  color: semanticVars.text.secondary,
+  cursor: "pointer",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+  },
+});

package/src/components/Select/select.tsx

@@ -0,0 +1,165 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type * as React from "react";
+import { Field, FieldError, FieldLabel } from "../Field/field";
+import {
+  groupLabel,
+  icon as iconStyle,
+  item as itemStyle,
+  itemIndicator,
+  label as labelStyle,
+  popup,
+  scrollArrow,
+  separator as separatorStyle,
+  trigger as triggerStyle,
+  triggerLg,
+  triggerSm,
+} from "./select.css";
+
+type SelectSize = "sm" | "default" | "lg";
+
+type SelectItemProp = string | number | { label: React.ReactNode; value: unknown };
+
+type SelectRootProps = SelectPrimitive.Root.Props<SelectItemProp>;
+
+export function SelectRoot({ children, ...props }: SelectRootProps) {
+  return <SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>;
+}
+
+export function SelectLabel(props: SelectPrimitive.Label.Props) {
+  return <SelectPrimitive.Label className={labelStyle} {...props} />;
+}
+
+export function SelectTrigger({
+  size = "default",
+  className,
+  style,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: SelectSize;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      className={clsx(
+        triggerStyle,
+        size === "sm" && triggerSm,
+        size === "lg" && triggerLg,
+        className,
+      )}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export function SelectValue({ placeholder, ...props }: SelectPrimitive.Value.Props) {
+  return <SelectPrimitive.Value placeholder={placeholder} {...props} />;
+}
+
+export function SelectIcon(props: SelectPrimitive.Icon.Props) {
+  return (
+    <SelectPrimitive.Icon className={iconStyle} {...props}>
+      <CaretDownIcon size={16} />
+    </SelectPrimitive.Icon>
+  );
+}
+
+export function SelectPortal(props: SelectPrimitive.Portal.Props) {
+  return <SelectPrimitive.Portal {...props} />;
+}
+
+export function SelectPositioner({ sideOffset = 4, ...props }: SelectPrimitive.Positioner.Props) {
+  return <SelectPrimitive.Positioner sideOffset={sideOffset} {...props} />;
+}
+
+export function SelectPopup(props: SelectPrimitive.Popup.Props) {
+  return <SelectPrimitive.Popup className={popup} {...props} />;
+}
+
+export function SelectList(props: SelectPrimitive.List.Props) {
+  return <SelectPrimitive.List {...props} />;
+}
+
+export function SelectItem({
+  children,
+  ...props
+}: SelectPrimitive.Item.Props & { children: React.ReactNode }) {
+  return (
+    <SelectPrimitive.Item className={itemStyle} {...props}>
+      <SelectPrimitive.ItemIndicator className={itemIndicator}>
+        <CheckIcon size={14} weight="bold" />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectSeparator(props: SelectPrimitive.Separator.Props) {
+  return <SelectPrimitive.Separator className={separatorStyle} {...props} />;
+}
+
+export function SelectGroup(props: SelectPrimitive.Group.Props) {
+  return <SelectPrimitive.Group {...props} />;
+}
+
+export function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {
+  return <SelectPrimitive.GroupLabel className={groupLabel} {...props} />;
+}
+
+export function SelectScrollUpArrow(props: SelectPrimitive.ScrollUpArrow.Props) {
+  return (
+    <SelectPrimitive.ScrollUpArrow className={scrollArrow} {...props}>
+      <CaretUpIcon size={12} />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+export function SelectScrollDownArrow(props: SelectPrimitive.ScrollDownArrow.Props) {
+  return (
+    <SelectPrimitive.ScrollDownArrow className={scrollArrow} {...props}>
+      <CaretDownIcon size={12} />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+// ─── Convenience wrapper ──────────────────────────────────────────────────────
+
+interface SelectWrapperProps {
+  label?: string;
+  error?: string;
+  children: React.ReactNode;
+}
+
+export function SelectWrapper({ label, error, children }: SelectWrapperProps) {
+  return (
+    <Field invalid={Boolean(error)}>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      {children}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  );
+}
+
+// ─── Compound component namespace ─────────────────────────────────────────────
+
+export const Select = {
+  Root: SelectRoot,
+  Label: SelectLabel,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Portal: SelectPortal,
+  Positioner: SelectPositioner,
+  Popup: SelectPopup,
+  List: SelectList,
+  Item: SelectItem,
+  Separator: SelectSeparator,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  ScrollUpArrow: SelectScrollUpArrow,
+  ScrollDownArrow: SelectScrollDownArrow,
+  Wrapper: SelectWrapper,
+};

package/src/components/Separator/index.ts

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

package/src/components/Separator/separator.css.ts

@@ -0,0 +1,59 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const separator = recipe({
+  base: {
+    boxSizing: "border-box",
+    flexShrink: 0,
+    backgroundColor: "currentColor",
+  },
+  variants: {
+    orientation: {
+      horizontal: { flexGrow: 1, height: 1 },
+      vertical: { width: 1, height: "100%" },
+    },
+    tone: {
+      subtle: { color: semanticVars.border.subtle },
+      strong: { color: semanticVars.border.strong },
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    tone: "strong",
+  },
+});
+
+export const withLabel = style({
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  width: "100%",
+  selectors: {
+    "&::before": {
+      content: '""',
+      flex: 1,
+      height: 1,
+      backgroundColor: "currentColor",
+      opacity: 1,
+    },
+    "&::after": {
+      content: '""',
+      flex: 1,
+      height: 1,
+      backgroundColor: "currentColor",
+      opacity: 1,
+    },
+  },
+});
+
+export const label = style({
+  paddingLeft: tokenVars.spacing.xs,
+  paddingRight: tokenVars.spacing.xs,
+  color: semanticVars.text.secondary,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  lineHeight: 1.2,
+  whiteSpace: "nowrap",
+});

package/src/components/Separator/separator.tsx

@@ -0,0 +1,34 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import clsx from "clsx";
+import type * as React from "react";
+import { separator, withLabel, label as labelStyle } from "./separator.css";
+
+type Orientation = "horizontal" | "vertical";
+type SeparatorTone = "subtle" | "strong";
+
+export type SeparatorProps = Omit<SeparatorPrimitive.Props, "className" | "style"> & {
+  orientation?: Orientation;
+  label?: React.ReactNode;
+  tone?: SeparatorTone;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Separator({
+  orientation = "horizontal",
+  label,
+  tone = "subtle",
+  className,
+  style,
+  ...props
+}: SeparatorProps) {
+  const baseCls = separator({ orientation, tone });
+  if (orientation === "horizontal" && label) {
+    return (
+      <SeparatorPrimitive className={clsx(baseCls, withLabel, className)} style={style} {...props}>
+        <span className={labelStyle}>{label}</span>
+      </SeparatorPrimitive>
+    );
+  }
+  return <SeparatorPrimitive className={clsx(baseCls, className)} style={style} {...props} />;
+}

package/src/components/Sheet/index.ts

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