@blenx-dev/components 0.0.0

package/src/components/Drawer/drawer.tsx

@@ -0,0 +1,574 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowRightIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type React from "react";
+import { createContext, useContext, useMemo } from "react";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  swipeArea,
+  swipeAreaBottom,
+  swipeAreaTop,
+  swipeAreaLeft,
+  swipeAreaRight,
+  backdrop,
+  viewport,
+  viewportBottom,
+  viewportTop,
+  viewportLeft,
+  viewportRight,
+  viewportInset,
+  popup,
+  popupDefault,
+  popupStraight,
+  popupInset,
+  popupBottom,
+  popupTop,
+  popupLeft,
+  popupRight,
+  closeButton as closeButtonStyle,
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+  bar,
+  barHorizontal,
+  barVertical,
+  barTop,
+  barBottom,
+  barLeft,
+  barRight,
+  menu,
+  menuItem,
+  menuItemDestructive,
+  separator,
+  menuGroup,
+  menuGroupLabel,
+  menuTrigger,
+  menuTriggerIcon,
+  menuCheckbox,
+  menuCheckboxDefault,
+  menuCheckboxSwitch,
+  menuCheckboxSwitchLabel,
+  menuCheckboxSwitchIndicator,
+  menuCheckboxSwitchThumb,
+  menuCheckboxIndicator,
+  menuCheckboxLabel,
+  menuRadio,
+  menuRadioIndicator,
+  menuRadioLabel,
+} from "./drawer.css";
+import { CloseButton } from "../CloseButton";
+import type { _BaseDivProps } from "../../utils/types";
+
+type DrawerPosition = "right" | "left" | "top" | "bottom";
+
+const DrawerContext: React.Context<{ position: DrawerPosition }> = createContext<{
+  position: DrawerPosition;
+}>({
+  position: "bottom",
+});
+
+const directionMap: Record<DrawerPosition, DrawerPrimitive.Root.Props["swipeDirection"]> = {
+  bottom: "down",
+  left: "left",
+  right: "right",
+  top: "up",
+};
+
+export const DrawerCreateHandle: typeof DrawerPrimitive.createHandle = DrawerPrimitive.createHandle;
+
+export function Drawer({
+  swipeDirection,
+  position = "bottom",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  position?: DrawerPosition;
+}): React.ReactElement {
+  const contextValue = useMemo(() => ({ position }), [position]);
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root swipeDirection={swipeDirection ?? directionMap[position]} {...props} />
+    </DrawerContext.Provider>
+  );
+}
+
+export const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
+
+export function DrawerTrigger(props: DrawerPrimitive.Trigger.Props): React.ReactElement {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+export function DrawerClose(props: DrawerPrimitive.Close.Props): React.ReactElement {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+export function DrawerSwipeArea({
+  className,
+  position: positionProp,
+  ...props
+}: DrawerPrimitive.SwipeArea.Props & {
+  position?: DrawerPosition;
+}): React.ReactElement {
+  const { position: contextPosition } = useContext(DrawerContext);
+  const resolvedPosition = positionProp ?? contextPosition;
+
+  return (
+    <DrawerPrimitive.SwipeArea
+      className={clsx(
+        swipeArea,
+        resolvedPosition === "bottom" && swipeAreaBottom,
+        resolvedPosition === "top" && swipeAreaTop,
+        resolvedPosition === "left" && swipeAreaLeft,
+        resolvedPosition === "right" && swipeAreaRight,
+        className,
+      )}
+      data-slot="drawer-swipe-area"
+      {...props}
+    />
+  );
+}
+
+export function DrawerBackdrop({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <DrawerPrimitive.Backdrop
+      className={clsx(backdrop, className)}
+      data-slot="drawer-backdrop"
+      {...props}
+    />
+  );
+}
+
+export function DrawerViewport({
+  className,
+  position: positionProp,
+  variant = "default",
+  ...props
+}: DrawerPrimitive.Viewport.Props & {
+  position?: DrawerPosition;
+  variant?: "default" | "straight" | "inset";
+}): React.ReactElement {
+  const { position: contextPosition } = useContext(DrawerContext);
+  const resolvedPosition = positionProp ?? contextPosition;
+
+  return (
+    <DrawerPrimitive.Viewport
+      className={clsx(
+        viewport,
+        resolvedPosition === "bottom" && viewportBottom,
+        resolvedPosition === "top" && viewportTop,
+        resolvedPosition === "left" && viewportLeft,
+        resolvedPosition === "right" && viewportRight,
+        variant === "inset" && viewportInset,
+        className,
+      )}
+      data-slot="drawer-viewport"
+      {...props}
+    />
+  );
+}
+
+export function DrawerPopup({
+  children,
+  showCloseButton = false,
+  position: positionProp,
+  variant = "default",
+  showBar = false,
+  portalProps,
+  className,
+  ...props
+}: DrawerPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  position?: DrawerPosition;
+  variant?: "default" | "straight" | "inset";
+  showBar?: boolean;
+  portalProps?: DrawerPrimitive.Portal.Props;
+}): React.ReactElement {
+  const { position: contextPosition } = useContext(DrawerContext);
+  const resolvedPosition = positionProp ?? contextPosition;
+
+  return (
+    <DrawerPortal {...portalProps}>
+      <DrawerBackdrop />
+      <DrawerViewport position={resolvedPosition} variant={variant}>
+        <DrawerPrimitive.Popup
+          className={clsx(
+            popup,
+            resolvedPosition === "bottom" && popupBottom,
+            resolvedPosition === "top" && popupTop,
+            resolvedPosition === "left" && popupLeft,
+            resolvedPosition === "right" && popupRight,
+            variant === "default" && popupDefault,
+            variant === "straight" && popupStraight,
+            variant === "inset" && popupInset,
+            className,
+          )}
+          data-slot="drawer-popup"
+          {...props}
+        >
+          {showCloseButton && (
+            <DrawerPrimitive.Close
+              aria-label="Close"
+              render={<CloseButton variant="ghost" className={closeButtonStyle} />}
+            />
+          )}{" "}
+          {children}
+          {showBar && <DrawerBar />}
+        </DrawerPrimitive.Popup>
+      </DrawerViewport>
+    </DrawerPortal>
+  );
+}
+
+export function DrawerHeader({
+  className,
+  allowSelection = false,
+  render,
+  ...props
+}: _BaseDivProps & {
+  allowSelection?: boolean;
+}): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "drawer-header",
+      ...props,
+    } as never,
+    render: allowSelection ? <DrawerContent render={render} /> : render,
+  });
+}
+
+export function DrawerFooter({
+  className,
+  variant = "default",
+  allowSelection = true,
+  render,
+  ...props
+}: _BaseDivProps & {
+  variant?: "default" | "bare";
+  allowSelection?: boolean;
+}): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(
+        footer,
+        variant === "default" && footerDefault,
+        variant === "bare" && footerBare,
+        className,
+      ),
+      "data-slot": "drawer-footer",
+      ...props,
+    } as never,
+    render: allowSelection ? <DrawerContent render={render} /> : render,
+  });
+}
+
+export function DrawerTitle(props: DrawerPrimitive.Title.Props): React.ReactElement {
+  return <DrawerPrimitive.Title className={title} data-slot="drawer-title" {...props} />;
+}
+
+export function DrawerDescription(props: DrawerPrimitive.Description.Props): React.ReactElement {
+  return (
+    <DrawerPrimitive.Description
+      className={description}
+      data-slot="drawer-description"
+      {...props}
+    />
+  );
+}
+
+export function DrawerPanel({
+  scrollFade = true,
+  scrollable = true,
+  allowSelection = true,
+  render,
+  className,
+  ...props
+}: _BaseDivProps & {
+  scrollFade?: boolean;
+  scrollable?: boolean;
+  allowSelection?: boolean;
+}): React.ReactElement {
+  const content = useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(panel, className),
+      "data-slot": "drawer-panel",
+      ...props,
+    } as never,
+    render: allowSelection ? <DrawerContent render={render} /> : render,
+  });
+
+  if (scrollable) {
+    return <ScrollArea scrollFade={scrollFade}>{content}</ScrollArea>;
+  }
+
+  return content;
+}
+
+export function DrawerBar({
+  className,
+  position: positionProp,
+  render,
+  ...props
+}: _BaseDivProps & {
+  position?: DrawerPosition;
+}): React.ReactElement {
+  const { position: contextPosition } = useContext(DrawerContext);
+  const resolvedPosition = positionProp ?? contextPosition;
+  const isHorizontal = resolvedPosition === "left" || resolvedPosition === "right";
+
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(
+        bar,
+        isHorizontal && barHorizontal,
+        !isHorizontal && barVertical,
+        resolvedPosition === "top" && barTop,
+        resolvedPosition === "bottom" && barBottom,
+        resolvedPosition === "left" && barLeft,
+        resolvedPosition === "right" && barRight,
+        className,
+      ),
+      "aria-hidden": true,
+      "data-slot": "drawer-bar",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export const DrawerContent: typeof DrawerPrimitive.Content = DrawerPrimitive.Content;
+
+export function DrawerMenu({ className, render, ...props }: _BaseDivProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "nav",
+    props: {
+      className: clsx(menu, className),
+      "data-slot": "drawer-menu",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DrawerMenuItem({
+  className,
+  variant = "default",
+  render,
+  disabled,
+  ...props
+}: _BaseDivProps & {
+  variant?: "default" | "destructive";
+  disabled?: boolean;
+}): React.ReactElement {
+  return useRender({
+    defaultTagName: "button",
+    props: {
+      className: clsx(menuItem, variant === "destructive" && menuItemDestructive, className),
+      "data-slot": "drawer-menu-item",
+      "data-variant": variant,
+      disabled,
+      type: "button" as const,
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DrawerMenuSeparator({
+  className,
+  render,
+  ...props
+}: _BaseDivProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(separator, className),
+      "data-slot": "drawer-menu-separator",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DrawerMenuGroup({
+  className,
+  render,
+  ...props
+}: _BaseDivProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(menuGroup, className),
+      "data-slot": "drawer-menu-group",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DrawerMenuGroupLabel({
+  className,
+  render,
+  ...props
+}: _BaseDivProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(menuGroupLabel, className),
+      "data-slot": "drawer-menu-group-label",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DrawerMenuTrigger({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <DrawerTrigger
+      className={clsx(menuTrigger, className)}
+      data-slot="drawer-menu-trigger"
+      {...props}
+    >
+      {children}
+      <ArrowRightIcon className={menuTriggerIcon} />
+    </DrawerTrigger>
+  );
+}
+
+export function DrawerMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  variant = "default",
+  disabled,
+  render,
+  ...props
+}: CheckboxPrimitive.Root.Props & {
+  variant?: "default" | "switch";
+  render?: React.ReactElement;
+}): React.ReactElement {
+  return (
+    <CheckboxPrimitive.Root
+      checked={checked}
+      className={clsx(
+        menuCheckbox,
+        variant === "switch" && menuCheckboxSwitch,
+        variant !== "switch" && menuCheckboxDefault,
+        className,
+      )}
+      data-slot="drawer-menu-checkbox-item"
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onCheckedChange={onCheckedChange}
+      render={render}
+      {...props}
+    >
+      {variant === "switch" ? (
+        <>
+          <span className={menuCheckboxSwitchLabel}>{children}</span>
+          <CheckboxPrimitive.Indicator className={menuCheckboxSwitchIndicator} keepMounted>
+            <span className={menuCheckboxSwitchThumb} />
+          </CheckboxPrimitive.Indicator>
+        </>
+      ) : (
+        <>
+          <CheckboxPrimitive.Indicator className={menuCheckboxIndicator}>
+            <svg
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>fd</title>
+              <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+            </svg>
+          </CheckboxPrimitive.Indicator>
+          <span className={menuCheckboxLabel}>{children}</span>
+        </>
+      )}
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export function DrawerMenuRadioGroup({
+  className,
+  ...props
+}: RadioGroupPrimitive.Props): React.ReactElement {
+  return (
+    <RadioGroupPrimitive
+      className={clsx(menuGroup, className)}
+      data-slot="drawer-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DrawerMenuRadioItem({
+  className,
+  children,
+  value,
+  disabled,
+  render,
+  ...props
+}: RadioPrimitive.Root.Props & {
+  value: string;
+  render?: React.ReactElement;
+}): React.ReactElement {
+  return (
+    <RadioPrimitive.Root
+      className={clsx(menuRadio, className)}
+      data-slot="drawer-menu-radio-item"
+      disabled={disabled}
+      render={render}
+      value={value}
+      {...props}
+    >
+      <RadioPrimitive.Indicator className={menuRadioIndicator}>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>fd</title>
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </RadioPrimitive.Indicator>
+      <span className={menuRadioLabel}>{children}</span>
+    </RadioPrimitive.Root>
+  );
+}
+
+export { DrawerMenuRadioItem };

package/src/components/Drawer/index.ts

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

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

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

package/src/components/Field/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Field",
+  "description": "A form field wrapper with accessible label, description, error, and validity wiring for form controls.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["field", "form", "label", "error", "validation", "input"],
+  "related": ["Input", "Select", "Textarea", "ColorPicker", "DatePicker"]
+}

package/src/components/Field/field.css.ts

@@ -0,0 +1,35 @@
+import { style } from "@vanilla-extract/css";
+import { fontSize } from "@blenx-dev/theme/tokens";
+
+export const field = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "8px",
+  flex: 1,
+});
+
+export const label = style({
+  display: "inline-flex",
+  alignItems: "center",
+  fontWeight: 400,
+  fontSize: fontSize.medium,
+  color: "inherit",
+});
+
+export const item = style({
+  display: "flex",
+  flex: 1,
+});
+
+export const description = style({
+  fontSize: "12px",
+  lineHeight: 1.4,
+  color: "var(--muted-foreground, inherit)",
+});
+
+export const error = style({
+  fontSize: "12px",
+  lineHeight: 1.4,
+  color: "var(--destructive-foreground, inherit)",
+});

package/src/components/Field/field.doc.tsx

@@ -0,0 +1,19 @@
+import { Input } from "../Input/input";
+import { Stack } from "../Stack/stack";
+import { Field, FieldError, FieldLabel } from "./field";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <Field>
+        <FieldLabel>Email</FieldLabel>
+        <Input type="email" placeholder="you@example.com" />
+      </Field>
+      <Field invalid>
+        <FieldLabel>Password</FieldLabel>
+        <Input type="password" placeholder="Enter password" error="Required" />
+        <FieldError>This field is required</FieldError>
+      </Field>
+    </Stack>
+  );
+}