@blenx-dev/components 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,165 +0,0 @@
-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,
-};