@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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