@blenx-dev/components 0.0.0

package/src/components/Menu/menu.css.ts

@@ -0,0 +1,128 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import {
+  borderRadius,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  spacing,
+} from "@blenx-dev/theme/tokens";
+
+export const trigger = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  appearance: "none",
+  border: "none",
+  padding: 0,
+  outline: "none",
+  borderWidth: 0,
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  color: "inherit",
+  borderRadius: borderRadius.medium,
+  transition: "background-color 0.15s ease, box-shadow 0.15s ease",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${themeContract.borderStrong}`,
+    },
+  },
+});
+
+export const popup = style({
+  backgroundColor: themeContract.surface,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.borderSubtle,
+  borderRadius: borderRadius.large,
+  boxShadow: themeContract.shadowXl,
+  zIndex: 1000,
+  padding: spacing.xsmall,
+  display: "flex",
+  gap: spacing["1"],
+  flexDirection: "column",
+  minWidth: 224,
+  overflow: "hidden",
+  outline: "none",
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  minHeight: 24,
+  padding: `${spacing.xsmall} ${spacing.small}`,
+  borderRadius: themeContract.borderRadius,
+  color: themeContract.contentPrimary,
+  fontSize: fontSize.small,
+  fontWeight: fontWeight.medium,
+  lineHeight: 1.2,
+  textDecoration: "none",
+  textAlign: "left",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  appearance: "none",
+  outline: "none",
+  transition: "background-color 0.15s ease, color 0.15s ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+      color: themeContract.contentPrimary,
+    },
+    "&:focus-visible": {
+      backgroundColor: themeContract.backgroundSubtle,
+      color: themeContract.contentPrimary,
+      boxShadow: `0 0 0 2px ${themeContract.borderStrong} inset`,
+    },
+    "&:active": {
+      backgroundColor: themeContract.borderSubtle,
+    },
+  },
+});
+
+export const itemDestructive = style({
+  color: themeContract.sentimentNegative,
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.sentimentNegativeSubtle,
+      color: themeContract.sentimentNegative,
+    },
+    "&:focus-visible": {
+      backgroundColor: themeContract.sentimentNegativeSubtle,
+      color: themeContract.sentimentNegative,
+      boxShadow: `0 0 0 2px ${themeContract.sentimentNegative} inset`,
+    },
+    "&:active": {
+      backgroundColor: themeContract.sentimentNegativeSubtle,
+    },
+  },
+});
+
+export const separator = style({
+  height: 1,
+  backgroundColor: themeContract.borderSubtle,
+  border: "none",
+});
+
+export const groupLabel = style({
+  padding: `${spacing.small} ${spacing.medium} ${spacing.xsmall}`,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentSecondary,
+  textTransform: "uppercase",
+  letterSpacing: letterSpacing.wide,
+});
+
+export const inset = style({
+  paddingLeft: 40,
+});
+
+export const shortcut = style({
+  marginLeft: "auto",
+  color: themeContract.contentDisabled,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+});

package/src/components/Menu/menu.demo.tsx

@@ -0,0 +1,40 @@
+import { Button } from "../Button/button";
+import {
+  Menu,
+  MenuGroupLabel,
+  MenuItem,
+  MenuPopup,
+  MenuSeparator,
+  MenuShortcut,
+  MenuTrigger,
+} from "./menu";
+
+export function DefaultStory() {
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline">Open Menu</Button>} />
+      <MenuPopup align="start" sideOffset={4}>
+        <MenuItem onSelect={() => {}}>Profile</MenuItem>
+        <MenuItem onSelect={() => {}}>
+          Settings
+          <MenuShortcut>⌘,</MenuShortcut>
+        </MenuItem>
+        <MenuItem onSelect={() => {}}>
+          Keyboard shortcuts
+          <MenuShortcut>⌘K</MenuShortcut>
+        </MenuItem>
+        <MenuSeparator />
+        <MenuGroupLabel>Account</MenuGroupLabel>
+        <MenuItem variant="destructive" onSelect={() => {}}>
+          Delete account
+        </MenuItem>
+      </MenuPopup>
+    </Menu>
+  );
+}
+export const demos = [
+  {
+    name: "Default",
+    component: DefaultStory,
+  },
+];

package/src/components/Menu/menu.tsx

@@ -0,0 +1,115 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import clsx from "clsx";
+import {
+  trigger,
+  popup,
+  item,
+  itemDestructive,
+  separator,
+  groupLabel,
+  inset,
+  shortcut,
+} from "./menu.css";
+
+interface MenuProps extends MenuPrimitive.Root.Props {
+  variant?: "default" | "destructive";
+}
+const Menu = MenuPrimitive.Root;
+
+function MenuTrigger({
+  className,
+  style,
+  ...props
+}: MenuPrimitive.Trigger.Props & { className?: string; style?: React.CSSProperties }) {
+  return <MenuPrimitive.Trigger className={clsx(trigger, className)} style={style} {...props} />;
+}
+
+type MenuPopupProps = MenuPrimitive.Popup.Props & {
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuPopup({
+  align = "start",
+  sideOffset = 4,
+  className,
+  style,
+  ...props
+}: MenuPopupProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner align={align} sideOffset={sideOffset}>
+        <MenuPrimitive.Popup className={clsx(popup, className)} style={style} {...props} />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+type MenuItemProps = MenuPrimitive.Item.Props & {
+  variant?: "default" | "destructive";
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuItem({ variant = "default", className, style, ...props }: MenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={clsx(item, variant === "destructive" && itemDestructive, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type MenuSeparatorProps = MenuPrimitive.Separator.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuSeparator({ className, style, ...props }: MenuSeparatorProps) {
+  return (
+    <MenuPrimitive.Separator className={clsx(separator, className)} style={style} {...props} />
+  );
+}
+
+type MenuGroupLabelProps = MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuGroupLabel({ inset: hasInset, className, style, ...props }: MenuGroupLabelProps) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={clsx(groupLabel, hasInset && inset, className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+type MenuShortcutProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function MenuShortcut({ children, className, style }: MenuShortcutProps) {
+  return (
+    <span className={clsx(shortcut, className)} style={style}>
+      {children}
+    </span>
+  );
+}
+
+export type {
+  MenuGroupLabelProps,
+  MenuItemProps,
+  MenuPopupProps,
+  MenuProps,
+  MenuSeparatorProps,
+  MenuShortcutProps,
+};
+export { Menu, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuShortcut, MenuTrigger };

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menu",
+  "type": "registry:ui",
+  "title": "Menu",
+  "description": "A StyleX Input Group component.",
+  "files": [
+    {
+      "file": "menu.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Menu/menu.tsx"
+    },
+    {
+      "file": "menu.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Menu/menu.css.ts"
+    }
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "OTPField",
+  "description": "A one-time password input component with individual character slots, separator support, and auto-submit. Built on Base UI OTP Field primitive.",
+  "category": "Forms",
+  "status": "experimental",
+  "keywords": ["otp", "password", "code", "verification", "2fa", "input"],
+  "related": ["Input", "Field"]
+}

package/src/components/OTPField/index.ts

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

package/src/components/OTPField/otp-field.css.ts

@@ -0,0 +1,55 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { fontSize, spacing } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing["1"],
+});
+
+export const input = recipe({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    borderRadius: themeContract.borderRadius,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: themeContract.border,
+    backgroundColor: themeContract.background,
+    color: themeContract.contentPrimary,
+    outline: "none",
+    caretColor: themeContract.primary,
+    transition: "box-shadow 0.15s ease, border-color 0.15s ease",
+    padding: 0,
+    margin: 0,
+  },
+  variants: {
+    size: {
+      default: {
+        width: spacing["9"],
+        height: spacing["9"],
+        fontSize: fontSize.medium,
+      },
+      lg: {
+        width: spacing["10"],
+        height: spacing["10"],
+        fontSize: fontSize.large,
+      },
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export const separator = style({
+  backgroundColor: themeContract.border,
+  borderRadius: "999px",
+  width: spacing["3"],
+  height: spacing["0.5"],
+  flexShrink: 0,
+});

package/src/components/OTPField/otp-field.demo.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as stylex from "@stylexjs/stylex";
+import { OTPField, OTPFieldInput, OTPFieldSeparator } from "./otp-field";
+
+const styles = stylex.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 24,
+    padding: 32,
+    maxWidth: 400,
+  },
+});
+
+export function OTPFieldDemo() {
+  return (
+    <div {...stylex.props(styles.wrapper)}>
+      <OTPField length={6} defaultValue="">
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+      </OTPField>
+    </div>
+  );
+}
+
+export function OTPFieldGroupedDemo() {
+  return (
+    <div {...stylex.props(styles.wrapper)}>
+      <OTPField length={12} defaultValue="" validationType="alphanumeric">
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldSeparator />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldSeparator />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+        <OTPFieldInput />
+      </OTPField>
+    </div>
+  );
+}
+
+export const demos = [
+  { name: "Default", component: OTPFieldDemo },
+  { name: "Grouped", component: OTPFieldGroupedDemo },
+];

package/src/components/OTPField/otp-field.tsx

@@ -0,0 +1,46 @@
+import { OTPField as OTPFieldPreview } from "@base-ui/react/otp-field";
+import clsx from "clsx";
+import type React from "react";
+import { root, input as inputRecipe, separator } from "./otp-field.css";
+
+type OTPFieldSize = "default" | "lg";
+
+type OTPFieldProps = Omit<React.ComponentProps<typeof OTPFieldPreview.Root>, "style"> & {
+  size?: OTPFieldSize;
+  className?: string;
+};
+
+type OTPFieldInputProps = Omit<
+  React.ComponentProps<typeof OTPFieldPreview.Input>,
+  "style" | "size"
+> & {
+  size?: OTPFieldSize;
+  className?: string;
+};
+
+type OTPFieldSeparatorProps = {
+  className?: string;
+};
+
+export function OTPField({ size = "default", className, ...props }: OTPFieldProps) {
+  return (
+    <OTPFieldPreview.Root
+      className={clsx(root, className)}
+      data-size={size}
+      {...(props as React.ComponentProps<typeof OTPFieldPreview.Root>)}
+    />
+  );
+}
+
+export function OTPFieldInput({ size = "default", className, ...props }: OTPFieldInputProps) {
+  return (
+    <OTPFieldPreview.Input
+      className={clsx(inputRecipe({ size }), className)}
+      {...(props as React.ComponentProps<typeof OTPFieldPreview.Input>)}
+    />
+  );
+}
+
+export function OTPFieldSeparator({ className }: OTPFieldSeparatorProps) {
+  return <OTPFieldPreview.Separator render={<div className={clsx(separator, className)} />} />;
+}

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

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

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Popover",
+  "description": "A floating popover with trigger, positioning, arrow, backdrop, and accessible title/description.",
+  "category": "Overlay",
+  "status": "stable",
+  "keywords": ["popover", "tooltip", "popup", "floating", "overlay"],
+  "related": ["Button", "ColorPicker", "DatePicker"],
+  "accessibility": {
+    "keyboard": ["Escape"],
+    "aria": ["role", "aria-labelledby", "aria-describedby"]
+  }
+}

package/src/components/Popover/index.ts

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

package/src/components/Popover/popover.css.ts

@@ -0,0 +1,82 @@
+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)",
+});
+
+export const positioner = style({
+  zIndex: 50,
+  outline: "none",
+});
+
+export const popup = style({
+  boxSizing: "border-box",
+  minWidth: 160,
+  width: "max(var(--anchor-width), 240px)",
+  maxWidth: "calc(100vw - 16px)",
+  padding: spacing.small,
+  backgroundColor: themeContract.surface,
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  boxShadow: themeContract.shadowLg,
+  outline: "none",
+  transformOrigin: "var(--transform-origin)",
+  transitionProperty: "opacity, scale",
+  transitionDuration: "150ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&[data-starting-style]": {
+      opacity: 0,
+      scale: 0.95,
+    },
+    "&[data-ending-style]": {
+      opacity: 0,
+      scale: 0.95,
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const arrow = style({
+  position: "absolute",
+  width: 10,
+  height: 10,
+});
+
+export const arrowFill = style({
+  width: "100%",
+  height: "100%",
+  backgroundColor: themeContract.surface,
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: 2,
+  transform: "rotate(45deg)",
+});
+
+export const title = style({
+  fontSize: fontSize.medium,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentPrimary,
+  margin: 0,
+  paddingBottom: spacing.xsmall,
+});
+
+export const description = style({
+  fontSize: fontSize.small,
+  color: themeContract.contentSecondary,
+  margin: 0,
+  paddingBottom: spacing.xsmall,
+});

package/src/components/Popover/popover.demo.tsx

@@ -0,0 +1,34 @@
+import { Button } from "../Button/button";
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./popover";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="small" align="start">
+      <Text variant="body2">Click the button to open a popover</Text>
+      <Popover>
+        <PopoverTrigger render={<Button variant="outline">Open Popover</Button>} />
+        <PopoverPopup>
+          <PopoverArrow />
+          <Stack gap="small" padding="medium">
+            <PopoverTitle>Popover Title</PopoverTitle>
+            <PopoverDescription>This is a popover. It can contain any content.</PopoverDescription>
+            <Button size="small" variant="solid">
+              Action
+            </Button>
+          </Stack>
+        </PopoverPopup>
+      </Popover>
+    </Stack>
+  );
+}
+
+export const demos = [{ name: "Default", component: DefaultStory }];