@blenx-dev/components 0.0.0

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/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Segmented Control",
+  "description": "A convenience wrapper around ToggleGroup providing a single-select segmented control with options array.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["segmented", "control", "toggle", "segment", "button group"],
+  "related": ["ToggleGroup", "Toggle"]
+}

package/src/components/SegmentedControl/index.ts

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

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

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "segmented-control",
+  "type": "registry:ui",
+  "title": "SegmentedControl",
+  "description": "A StyleX SegmentedControl component.",
+  "registryDependencies": ["toggle"],
+  "files": [
+    {
+      "file": "segmented-control.tsx",
+      "type": "registry:ui",
+      "target": "@ui/SegmentedControl/segmented-control.tsx"
+    }
+  ]
+}

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

@@ -0,0 +1,28 @@
+import { Stack } from "../Stack/stack";
+import { SegmentedControl } from "./segmented-control";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <SegmentedControl
+        value="day"
+        onValueChange={() => {}}
+        options={[
+          { value: "day", label: "Day" },
+          { value: "week", label: "Week" },
+          { value: "month", label: "Month" },
+        ]}
+      />
+      <SegmentedControl
+        value="small"
+        onValueChange={() => {}}
+        variant="default"
+        options={[
+          { value: "small", label: "Small" },
+          { value: "medium", label: "Medium" },
+          { value: "large", label: "Large" },
+        ]}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,42 @@
+import type { BorderRadiusProp } from "../../utils/types";
+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?: BorderRadiusProp;
+};
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  radius,
+  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/docs-meta.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Select",
+  "description": "A fully compound select component with trigger, popup, list, items, groups, scroll arrows, and a convenience SelectWrapper for forms.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["select", "dropdown", "combobox", "listbox", "form"],
+  "related": ["Field", "ScrollArea"],
+  "accessibility": {
+    "keyboard": ["ArrowUp", "ArrowDown", "Enter", "Escape"],
+    "aria": ["role", "aria-expanded", "aria-labelledby"]
+  }
+}

package/src/components/Select/index.ts

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

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

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

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

@@ -0,0 +1,183 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const label = style({
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentSecondary,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.xsmall,
+  paddingRight: spacing.xsmall,
+});
+
+export const trigger = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: spacing.small,
+  boxSizing: "border-box",
+  width: "100%",
+  paddingTop: spacing.small,
+  paddingBottom: spacing.small,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.small,
+  fontSize: fontSize.small,
+  lineHeight: "1.5",
+  fontFamily: "inherit",
+  color: themeContract.contentPrimary,
+  backgroundColor: themeContract.surface,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.medium,
+  outline: "none",
+  cursor: "pointer",
+  transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+  selectors: {
+    "&:hover": {
+      borderColor: themeContract.borderStrong,
+    },
+    "&:focus-visible": {
+      borderColor: themeContract.primary,
+      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+    "&[data-placeholder]": {
+      color: themeContract.contentDisabled,
+    },
+  },
+});
+
+export const triggerSm = style({
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.xsmall,
+  fontSize: 14,
+});
+
+export const triggerLg = style({
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.medium,
+  paddingLeft: spacing.large,
+  paddingRight: spacing.medium,
+  fontSize: 16,
+});
+
+export const icon = style({
+  display: "flex",
+  alignItems: "center",
+  color: themeContract.contentSecondary,
+  flexShrink: 0,
+});
+
+export const popup = style({
+  boxSizing: "border-box",
+  maxHeight: 300,
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  backgroundColor: themeContract.surface,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  boxShadow: themeContract.shadowLg,
+  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: spacing.small,
+  boxSizing: "border-box",
+  minHeight: 32,
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  marginLeft: spacing.xsmall,
+  marginRight: spacing.xsmall,
+  borderRadius: borderRadius.small,
+  fontSize: fontSize.small,
+  lineHeight: "1.4",
+  color: themeContract.contentPrimary,
+  cursor: "pointer",
+  userSelect: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+    "&[data-highlighted]": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+    "&[data-selected]": {
+      backgroundColor: themeContract.primary,
+      color: themeContract.contentOnPrimary,
+    },
+    "&[data-selected]:hover": {
+      backgroundColor: themeContract.primary,
+    },
+    "&[data-selected][data-highlighted]": {
+      backgroundColor: themeContract.primary,
+    },
+    "&[data-disabled]": {
+      color: themeContract.contentDisabled,
+      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: spacing.xsmall,
+  marginBottom: spacing.xsmall,
+  backgroundColor: themeContract.borderSubtle,
+});
+
+export const groupLabel = style({
+  paddingTop: spacing.small,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentSecondary,
+});
+
+export const scrollArrow = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: 24,
+  color: themeContract.contentSecondary,
+  cursor: "pointer",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+  },
+});

package/src/components/Select/select.demo.tsx

@@ -0,0 +1,35 @@
+import {
+  SelectIcon,
+  SelectItem,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+export function SelectDemo() {
+  return (
+    <SelectRoot defaultValue="apple">
+      <SelectTrigger>
+        <SelectValue placeholder="Pick a fruit" />
+        <SelectIcon />
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectPositioner>
+          <SelectPopup>
+            <SelectList>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="orange">Orange</SelectItem>
+            </SelectList>
+          </SelectPopup>
+        </SelectPositioner>
+      </SelectPortal>
+    </SelectRoot>
+  );
+}
+
+export const demos = [{ name: "Default", component: SelectDemo }];

package/src/components/Select/select.doc.tsx

@@ -0,0 +1,65 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  Select,
+  SelectIcon,
+  SelectItem,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">Select</Text>
+      <Select.Root>
+        <SelectTrigger>
+          <SelectValue placeholder="Choose an option" />
+          <SelectIcon />
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectList>
+                <SelectItem value="option-1">Option 1</SelectItem>
+                <SelectItem value="option-2">Option 2</SelectItem>
+                <SelectItem value="option-3">Option 3</SelectItem>
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </Select.Root>
+    </Stack>
+  );
+}
+
+export function WithLabelStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="h4">With wrapper</Text>
+      <Select.Wrapper label="Theme">
+        <Select.Root>
+          <SelectTrigger>
+            <SelectValue placeholder="Select theme" />
+            <SelectIcon />
+          </SelectTrigger>
+          <SelectPortal>
+            <SelectPositioner>
+              <SelectPopup>
+                <SelectList>
+                  <SelectItem value="light">Light</SelectItem>
+                  <SelectItem value="dark">Dark</SelectItem>
+                  <SelectItem value="system">System</SelectItem>
+                </SelectList>
+              </SelectPopup>
+            </SelectPositioner>
+          </SelectPortal>
+        </Select.Root>
+      </Select.Wrapper>
+    </Stack>
+  );
+}

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,
+};