@blenx-dev/components 0.0.0

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Separator",
+  "description": "A visual divider supporting horizontal and vertical orientations with subtle and strong tone variants. Optionally labeled.",
+  "category": "Layout",
+  "status": "stable",
+  "keywords": ["separator", "divider", "line", "rule", "hr"],
+  "related": ["ToggleGroup", "Menu"],
+  "accessibility": {
+    "aria": ["role", "aria-orientation"]
+  }
+}

package/src/components/Separator/index.ts

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

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

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

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

@@ -0,0 +1,60 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+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: themeContract.borderSubtle },
+      strong: { color: themeContract.borderStrong },
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    tone: "strong",
+  },
+});
+
+export const withLabel = style({
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  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: spacing.xsmall,
+  paddingRight: spacing.xsmall,
+  color: themeContract.contentSecondary,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  lineHeight: 1.2,
+  whiteSpace: "nowrap",
+});

package/src/components/Separator/separator.doc.tsx

@@ -0,0 +1,44 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Separator } from "./separator";
+
+export function HorizontalStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="body2">Above</Text>
+      <Separator orientation="horizontal" />
+      <Text variant="body2">Below</Text>
+    </Stack>
+  );
+}
+
+export function VerticalStory() {
+  return (
+    <Stack direction="row" gap="medium">
+      <Text variant="body2">Left</Text>
+      <Separator orientation="vertical" />
+      <Text variant="body2">Right</Text>
+    </Stack>
+  );
+}
+
+export function WithLabelStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="body2">Content above</Text>
+      <Separator orientation="horizontal" label="Section" />
+      <Text variant="body2">Content below</Text>
+    </Stack>
+  );
+}
+
+export function TonesStory() {
+  return (
+    <Stack gap="medium">
+      <Text variant="body2">Subtle tone</Text>
+      <Separator orientation="horizontal" tone="subtle" />
+      <Text variant="body2">Strong tone</Text>
+      <Separator orientation="horizontal" tone="strong" />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Sheet",
+  "description": "A slide-in panel component that enters from any edge of the viewport. Built on Base UI Dialog with custom side positioning.",
+  "category": "Overlay",
+  "status": "stable",
+  "keywords": ["sheet", "panel", "slide", "sidebar", "drawer", "overlay"],
+  "related": ["Drawer", "Dialog", "Button", "ScrollArea"],
+  "accessibility": {
+    "keyboard": ["Escape"],
+    "aria": ["role", "aria-modal", "aria-labelledby", "aria-describedby"]
+  }
+}

package/src/components/Sheet/index.ts

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

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

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

package/src/components/Sheet/sheet.css.ts

@@ -0,0 +1,192 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  zIndex: 50,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "opacity",
+  transitionDuration: "200ms",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  boxSizing: "border-box",
+});
+
+export const viewportBottom = style({
+  display: "grid",
+  gridTemplateRows: "1fr auto",
+  paddingTop: spacing.xxlarge,
+});
+
+export const viewportTop = style({
+  display: "grid",
+  gridTemplateRows: "auto 1fr",
+  paddingBottom: spacing.xxlarge,
+});
+
+export const viewportLeft = style({
+  display: "flex",
+  justifyContent: "flex-start",
+});
+
+export const viewportRight = style({
+  display: "flex",
+  justifyContent: "flex-end",
+});
+
+export const viewportInset = style({
+  "@media": {
+    "(min-width: 640px)": {
+      padding: spacing.medium,
+    },
+  },
+});
+
+export const popup = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "100%",
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  boxSizing: "border-box",
+  backgroundColor: themeContract.surface,
+  color: themeContract.contentPrimary,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  outline: "none",
+  boxShadow: themeContract.shadowLg,
+  willChange: "translate",
+  transitionProperty: "opacity, translate",
+  transitionDuration: "200ms",
+  transitionTimingFunction: "ease-in-out",
+  "::before": {
+    content: '""',
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const popupBottom = style({
+  gridRowStart: 2,
+  borderTopWidth: borderWidth.thin,
+  borderTopLeftRadius: borderRadius.xlarge,
+  borderTopRightRadius: borderRadius.xlarge,
+});
+
+export const popupTop = style({
+  borderBottomWidth: borderWidth.thin,
+  borderBottomLeftRadius: borderRadius.xlarge,
+  borderBottomRightRadius: borderRadius.xlarge,
+});
+
+export const popupLeft = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderRightWidth: borderWidth.thin,
+  borderTopRightRadius: borderRadius.xlarge,
+  borderBottomRightRadius: borderRadius.xlarge,
+});
+
+export const popupRight = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderLeftWidth: borderWidth.thin,
+  borderTopLeftRadius: borderRadius.xlarge,
+  borderBottomLeftRadius: borderRadius.xlarge,
+});
+
+export const popupInset = style({
+  borderRadius: 0,
+  borderWidth: 0,
+  "::before": {
+    content: "none",
+  },
+  "@media": {
+    "(min-width: 640px)": {
+      borderRadius: borderRadius.xlarge,
+      borderWidth: borderWidth.thin,
+    },
+  },
+});
+
+export const closeButton = style({
+  position: "absolute",
+  top: spacing.xsmall,
+  insetInlineEnd: spacing.xsmall,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing.small,
+  padding: spacing.large,
+  boxSizing: "border-box",
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: spacing.small,
+  paddingLeft: spacing.large,
+  paddingRight: spacing.large,
+  boxSizing: "border-box",
+  "@media": {
+    "(min-width: 640px)": {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+    },
+  },
+});
+
+export const footerDefault = style({
+  borderTopWidth: borderWidth.thin,
+  borderTopStyle: "solid",
+  borderTopColor: themeContract.borderSubtle,
+  backgroundColor: themeContract.backgroundSubtle,
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.medium,
+});
+
+export const footerBare = style({
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.large,
+});
+
+export const title = style({
+  fontSize: fontSize.xlarge,
+  lineHeight: 1,
+  fontWeight: fontWeight.semibold,
+});
+
+export const description = style({
+  fontSize: fontSize.small,
+  lineHeight: 1.4,
+  color: themeContract.contentSecondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: spacing.large,
+});

package/src/components/Sheet/sheet.demo.tsx

@@ -0,0 +1,53 @@
+import { Button } from "../Button/button";
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  Sheet,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetPanel,
+  SheetPopup,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+export function SheetDemo() {
+  return (
+    <VStack gap="medium">
+      <Text variant="h6">Sheet</Text>
+      <Sheet>
+        <SheetTrigger
+          render={
+            <Button variant="outline" size="small">
+              Open Sheet
+            </Button>
+          }
+        />
+        <SheetPopup side="right">
+          <SheetHeader>
+            <SheetTitle>Edit Profile</SheetTitle>
+            <SheetDescription>Make changes to your profile information.</SheetDescription>
+          </SheetHeader>
+          <SheetPanel>
+            <VStack gap="small">
+              <Text variant="body2">Name</Text>
+              <Text variant="body2" color="secondary">
+                Your display name as it appears to others.
+              </Text>
+            </VStack>
+          </SheetPanel>
+          <SheetFooter>
+            <HStack gap="small" justify="end" wrap>
+              <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
+              <Button>Save</Button>
+            </HStack>
+          </SheetFooter>
+        </SheetPopup>
+      </Sheet>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: SheetDemo }];

package/src/components/Sheet/sheet.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  backdrop,
+  viewport,
+  viewportBottom,
+  viewportTop,
+  viewportLeft,
+  viewportRight,
+  viewportInset,
+  popup,
+  popupBottom,
+  popupTop,
+  popupLeft,
+  popupRight,
+  popupInset,
+  closeButton as closeButtonStyle,
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+} from "./sheet.css";
+import { CloseButton } from "../CloseButton";
+import type { _BaseDivProps } from "../../utils/types";
+
+type Side = "right" | "left" | "top" | "bottom";
+
+export const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;
+
+export const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;
+
+export function SheetTrigger(props: SheetPrimitive.Trigger.Props): React.ReactElement {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+export function SheetClose(props: SheetPrimitive.Close.Props): React.ReactElement {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+export function SheetBackdrop({
+  className,
+  ...props
+}: SheetPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <SheetPrimitive.Backdrop
+      className={clsx(backdrop, className)}
+      data-slot="sheet-backdrop"
+      {...props}
+    />
+  );
+}
+
+type SheetViewportProps = SheetPrimitive.Viewport.Props & {
+  side?: Side;
+  variant?: "default" | "inset";
+};
+
+export function SheetViewport({
+  className,
+  side,
+  variant = "default",
+  ...props
+}: SheetViewportProps): React.ReactElement {
+  return (
+    <SheetPrimitive.Viewport
+      className={clsx(
+        viewport,
+        side === "bottom" && viewportBottom,
+        side === "top" && viewportTop,
+        side === "left" && viewportLeft,
+        side === "right" && viewportRight,
+        variant === "inset" && viewportInset,
+        className,
+      )}
+      data-slot="sheet-viewport"
+      {...props}
+    />
+  );
+}
+
+export function SheetPopup({
+  children,
+  showCloseButton = true,
+  side = "right",
+  variant = "default",
+  closeProps,
+  portalProps,
+  className,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  side?: Side;
+  variant?: "default" | "inset";
+  closeProps?: SheetPrimitive.Close.Props;
+  portalProps?: SheetPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <SheetPortal {...portalProps}>
+      <SheetBackdrop />
+      <SheetViewport side={side} variant={variant}>
+        <SheetPrimitive.Popup
+          className={clsx(
+            popup,
+            side === "bottom" && popupBottom,
+            side === "top" && popupTop,
+            side === "left" && popupLeft,
+            side === "right" && popupRight,
+            variant === "inset" && popupInset,
+            className,
+          )}
+          data-slot="sheet-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              aria-label="Close"
+              render={<CloseButton variant="ghost" className={closeButtonStyle} />}
+              {...closeProps}
+            />
+          )}
+        </SheetPrimitive.Popup>
+      </SheetViewport>
+    </SheetPortal>
+  );
+}
+
+type HeaderProps = _BaseDivProps;
+
+export function SheetHeader({ className, render, ...props }: HeaderProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "sheet-header",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+type FooterProps = _BaseDivProps & {
+  variant?: "default" | "bare";
+};
+
+export function SheetFooter({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: FooterProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(
+        footer,
+        variant === "default" && footerDefault,
+        variant === "bare" && footerBare,
+        className,
+      ),
+      "data-slot": "sheet-footer",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function SheetTitle(props: SheetPrimitive.Title.Props): React.ReactElement {
+  return <SheetPrimitive.Title className={title} data-slot="sheet-title" {...props} />;
+}
+
+export function SheetDescription(props: SheetPrimitive.Description.Props): React.ReactElement {
+  return (
+    <SheetPrimitive.Description className={description} data-slot="sheet-description" {...props} />
+  );
+}
+
+type PanelProps = _BaseDivProps & {
+  scrollFade?: boolean;
+};
+
+export function SheetPanel({
+  scrollFade = true,
+  render,
+  className,
+  ...props
+}: PanelProps): React.ReactElement {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      {useRender({
+        defaultTagName: "div",
+        props: {
+          className: clsx(panel, className),
+          "data-slot": "sheet-panel",
+          ...props,
+        } as never,
+        render,
+      })}
+    </ScrollArea>
+  );
+}
+
+export type { SheetViewportProps };
+
+export { SheetBackdrop as SheetOverlay, SheetPopup as SheetContent };

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Slider",
+  "description": "A range slider supporting single and multi-thumb values with orientation, min/max, and thumb alignment. Built on Base UI Slider.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["slider", "range", "input", "range slider", "thumb"],
+  "related": ["Field"],
+  "accessibility": {
+    "keyboard": ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"],
+    "aria": ["role", "aria-valuenow", "aria-valuemin", "aria-valuemax"]
+  }
+}

package/src/components/Slider/index.ts

@@ -0,0 +1 @@
+export { Slider, SliderValue } from "./slider";