@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,82 +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)",
-});
-
-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

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