@blenx-dev/components 0.0.0

package/src/components/Breadcrumbs/breadcrumbs.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  color: themeContract.contentSecondary,
+  fontSize: 14,
+});
+
+export const list = style({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: 6,
+  fontSize: themeContract.fontSize,
+  color: themeContract.contentSecondary,
+  "@media": {
+    "screen and (min-width: 768px)": {
+      gap: 10,
+    },
+  },
+});
+
+export const item = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+});
+
+export const link = style({
+  color: "inherit",
+  textDecoration: "none",
+  cursor: "pointer",
+  transitionProperty: "color",
+  transitionDuration: "150ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&:hover": {
+      color: themeContract.contentPrimary,
+    },
+  },
+});
+
+export const page = style({
+  fontWeight: 400,
+  color: themeContract.contentPrimary,
+});
+
+export const separator = style({
+  display: "inline-flex",
+  alignItems: "center",
+  opacity: 0.8,
+});
+
+export const ellipsis = style({
+  display: "inline-flex",
+  alignItems: "center",
+});
+
+export const srOnly = style({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0,
+});

package/src/components/Breadcrumbs/breadcrumbs.doc.tsx

@@ -0,0 +1,61 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumbs";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="small">
+      <Text variant="body2">Navigation path</Text>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/category">Category</BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </Stack>
+  );
+}
+
+export function WithEllipsis() {
+  return (
+    <Stack gap="small">
+      <Text variant="body2">With collapsed items</Text>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbEllipsis />
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/category/sub/deep">Deep page</BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </Stack>
+  );
+}

package/src/components/Breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { mergeProps, useRender } from "@base-ui/react";
+import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type { ComponentPropsWithoutRef } from "react";
+import { root, list, item, link, page, separator, ellipsis, srOnly } from "./breadcrumbs.css";
+
+type NavProps = useRender.ComponentProps<"nav"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Breadcrumb({ className, style, render, ...props }: NavProps) {
+  const merged = mergeProps({ className: clsx(root, className), style }, props, {
+    "aria-label": "breadcrumb",
+  });
+  return useRender({ defaultTagName: "nav", props: merged, render });
+}
+
+type OlProps = ComponentPropsWithoutRef<"ol"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function BreadcrumbList({ className, style, ...props }: OlProps) {
+  return <ol className={clsx(list, className)} style={style} {...props} />;
+}
+
+type LiProps = ComponentPropsWithoutRef<"li"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function BreadcrumbItem({ className, style, ...props }: LiProps) {
+  return <li className={clsx(item, className)} style={style} {...props} />;
+}
+
+type LinkProps = useRender.ComponentProps<"a"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function BreadcrumbLink({ className, style, render, ...props }: LinkProps) {
+  const merged = mergeProps({ className: clsx(link, className), style }, props);
+  return useRender({ defaultTagName: "a", props: merged, render });
+}
+
+type SpanProps = ComponentPropsWithoutRef<"span"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function BreadcrumbPage({ className, style, ...props }: SpanProps) {
+  return <span className={clsx(page, className)} style={style} aria-current="page" {...props} />;
+}
+
+export function BreadcrumbSeparator({ children, className, style, ...props }: LiProps) {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={clsx(separator, className)}
+      style={style}
+      {...props}
+    >
+      {children ?? <CaretRightIcon size={16} />}
+    </li>
+  );
+}
+
+export function BreadcrumbEllipsis({ className, style, ...props }: SpanProps) {
+  return (
+    <span role="presentation" className={clsx(ellipsis, className)} style={style} {...props}>
+      <DotsThreeIcon size={16} />
+      <span className={srOnly}>More</span>
+    </span>
+  );
+}

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Breadcrumbs",
+  "description": "A breadcrumb navigation trail with ARIA support for hierarchical page navigation.",
+  "category": "Navigation",
+  "status": "stable",
+  "keywords": ["breadcrumbs", "navigation", "breadcrumb", "trail", "hierarchy"],
+  "related": [],
+  "accessibility": {
+    "aria": ["aria-label", "aria-current"]
+  }
+}

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,9 @@
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumbs";

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumbs",
+  "type": "registry:ui",
+  "title": "Breadcrumbs",
+  "description": "Breadcrumbs component from Blenx UI.",
+  "files": [
+    {
+      "file": "breadcrumbs.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Breadcrumbs/breadcrumbs.tsx"
+    },
+    {
+      "file": "breadcrumbs.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Breadcrumbs/breadcrumbs.css.ts"
+    }
+  ]
+}

package/src/components/Button/button.css.ts

@@ -0,0 +1,209 @@
+import { createVar } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { fontSize, fonts, spacing } from "@blenx-dev/theme/tokens";
+
+export const intentVars = {
+  solidBg: createVar(),
+  solidFg: createVar(),
+  solidHoverBg: createVar(),
+  softBg: createVar(),
+  softFg: createVar(),
+  softHoverBg: createVar(),
+  border: createVar(),
+  borderHover: createVar(),
+  fg: createVar(),
+};
+
+export const variant = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.small,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: themeContract.borderRadius,
+    cursor: "pointer",
+    fontWeight: 500,
+    width: "fit-content",
+    height: "fit-content",
+    fontSize: themeContract.fontSize,
+    fontFamily: fonts.display,
+    textDecoration: "none",
+    position: "relative",
+    transition: "all 0.2s ease",
+    selectors: {
+      "&:disabled": {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
+    },
+  },
+  variants: {
+    intent: {
+      primary: {
+        vars: {
+          [intentVars.solidBg]: themeContract.primary,
+          [intentVars.solidFg]: themeContract.contentOnPrimary,
+          [intentVars.solidHoverBg]: themeContract.primaryHover,
+          [intentVars.softBg]: themeContract.primarySubtle,
+          [intentVars.softFg]: themeContract.primary,
+          [intentVars.softHoverBg]: themeContract.primarySubtle,
+          [intentVars.border]: themeContract.primary,
+          [intentVars.borderHover]: themeContract.primaryHover,
+          [intentVars.fg]: themeContract.primary,
+        },
+      },
+      neutral: {
+        vars: {
+          [intentVars.solidBg]: themeContract.surfaceRaised,
+          [intentVars.solidFg]: themeContract.contentPrimary,
+          [intentVars.solidHoverBg]: themeContract.surfaceHover,
+          [intentVars.softBg]: themeContract.backgroundSubtle,
+          [intentVars.softFg]: themeContract.contentPrimary,
+          [intentVars.softHoverBg]: themeContract.surfaceHover,
+          [intentVars.border]: themeContract.border,
+          [intentVars.borderHover]: themeContract.borderStrong,
+          [intentVars.fg]: themeContract.contentPrimary,
+        },
+      },
+      success: {
+        vars: {
+          [intentVars.solidBg]: themeContract.sentimentPositive,
+          [intentVars.solidFg]: themeContract.contentOnPrimary,
+          [intentVars.solidHoverBg]: themeContract.sentimentPositiveHover,
+          [intentVars.softBg]: themeContract.sentimentPositiveSubtle,
+          [intentVars.softFg]: themeContract.sentimentPositive,
+          [intentVars.softHoverBg]: themeContract.sentimentPositiveSubtle,
+          [intentVars.border]: themeContract.sentimentPositive,
+          [intentVars.borderHover]: themeContract.sentimentPositiveHover,
+          [intentVars.fg]: themeContract.sentimentPositive,
+        },
+      },
+      warning: {
+        vars: {
+          [intentVars.solidBg]: themeContract.sentimentWarning,
+          [intentVars.solidFg]: themeContract.contentOnPrimary,
+          [intentVars.solidHoverBg]: themeContract.sentimentWarningHover,
+          [intentVars.softBg]: themeContract.sentimentWarningSubtle,
+          [intentVars.softFg]: themeContract.sentimentWarning,
+          [intentVars.softHoverBg]: themeContract.sentimentWarningSubtle,
+          [intentVars.border]: themeContract.sentimentWarning,
+          [intentVars.borderHover]: themeContract.sentimentWarningHover,
+          [intentVars.fg]: themeContract.sentimentWarning,
+        },
+      },
+      danger: {
+        vars: {
+          [intentVars.solidBg]: themeContract.sentimentNegative,
+          [intentVars.solidFg]: themeContract.contentOnPrimary,
+          [intentVars.solidHoverBg]: themeContract.sentimentNegativeHover,
+          [intentVars.softBg]: themeContract.sentimentNegativeSubtle,
+          [intentVars.softFg]: themeContract.sentimentNegative,
+          [intentVars.softHoverBg]: themeContract.sentimentNegativeSubtle,
+          [intentVars.border]: themeContract.sentimentNegative,
+          [intentVars.borderHover]: themeContract.sentimentNegativeHover,
+          [intentVars.fg]: themeContract.sentimentNegative,
+        },
+      },
+      info: {
+        vars: {
+          [intentVars.solidBg]: themeContract.sentimentInfo,
+          [intentVars.solidFg]: themeContract.contentOnPrimary,
+          [intentVars.solidHoverBg]: themeContract.sentimentInfoHover,
+          [intentVars.softBg]: themeContract.sentimentInfoSubtle,
+          [intentVars.softFg]: themeContract.sentimentInfo,
+          [intentVars.softHoverBg]: themeContract.sentimentInfoSubtle,
+          [intentVars.border]: themeContract.sentimentInfo,
+          [intentVars.borderHover]: themeContract.sentimentInfoHover,
+          [intentVars.fg]: themeContract.sentimentInfo,
+        },
+      },
+      mono: {
+        vars: {
+          [intentVars.solidBg]: "#ffffff",
+          [intentVars.solidFg]: "#111111",
+          [intentVars.solidHoverBg]: "#f5f5f5",
+          [intentVars.softBg]: "#ffffff",
+          [intentVars.softFg]: "#111111",
+          [intentVars.softHoverBg]: "#f5f5f5",
+          [intentVars.border]: "#d4d4d4",
+          [intentVars.borderHover]: "#d4d4d4",
+          [intentVars.fg]: "#111111",
+        },
+      },
+    },
+    size: {
+      xsmall: {
+        padding: `${spacing.xxsmall} ${spacing.xsmall}`,
+        fontSize: fontSize.small,
+      },
+      small: {
+        padding: `${spacing.xsmall} ${spacing.small}`,
+        fontSize: fontSize.small,
+      },
+      icon: {
+        padding: `${spacing.xsmall} ${spacing.xsmall}`,
+      },
+      medium: { padding: `${spacing.small} ${spacing.medium}` },
+      large: {
+        padding: `${spacing.medium} ${spacing.large}`,
+        fontSize: fontSize.large,
+      },
+    },
+    variant: {
+      solid: {
+        backgroundColor: intentVars.solidBg,
+        borderColor: intentVars.border,
+        color: intentVars.solidFg,
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: intentVars.solidHoverBg,
+          },
+        },
+      },
+      soft: {
+        backgroundColor: `color-mix(in srgb, ${intentVars.softBg} 30%, transparent)`,
+        color: intentVars.solidBg,
+        borderColor: "transparent",
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: `color-mix(in srgb, ${intentVars.solidHoverBg} 20%, transparent)`,
+          },
+        },
+      },
+      outline: {
+        backgroundColor: "transparent",
+        borderColor: intentVars.border,
+        color: intentVars.fg,
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: `color-mix(in srgb, ${intentVars.solidBg} 10%, transparent)`,
+            borderColor: intentVars.borderHover,
+          },
+        },
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: intentVars.fg,
+        selectors: {
+          "&:hover:not(:disabled)": {
+            backgroundColor: `color-mix(in srgb, ${intentVars.solidBg} 12%, transparent)`,
+          },
+        },
+      },
+      link: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: intentVars.fg,
+        selectors: {
+          "&:hover:not(:disabled)": {
+            textDecoration: "underline",
+          },
+        },
+      },
+    },
+  },
+});

package/src/components/Button/button.demo.tsx

@@ -0,0 +1,119 @@
+import { CaretRightIcon, PlayIcon } from "@phosphor-icons/react";
+import { HStack, Stack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Button } from "./button";
+
+export function ButtonDemo() {
+  return (
+    <VStack gap="medium">
+      <Stack gap="small">
+        <Text variant="h6">Variant + Intent</Text>
+        <HStack wrap>
+          <Button variant="solid" intent="primary">
+            Solid Primary
+          </Button>
+          <Button variant="solid" intent="neutral">
+            Solid Neutral
+          </Button>
+          <Button variant="solid" intent="success">
+            Solid Success
+          </Button>
+          <Button variant="solid" intent="warning">
+            Solid Warning
+          </Button>
+          <Button variant="solid" intent="danger">
+            Solid Danger
+          </Button>
+          <Button variant="solid" intent="info">
+            Solid Info
+          </Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">Outline + Intents</Text>
+        <HStack wrap>
+          <Button variant="outline" intent="primary">
+            Outline
+          </Button>
+          <Button variant="outline" intent="danger">
+            Outline Danger
+          </Button>
+          <Button variant="outline" intent="success">
+            Outline Success
+          </Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">Ghost + Intents</Text>
+        <HStack wrap>
+          <Button variant="ghost" intent="primary">
+            Ghost
+          </Button>
+          <Button variant="ghost" intent="danger">
+            Ghost Danger
+          </Button>
+          <Button variant="ghost" intent="neutral">
+            Ghost Neutral
+          </Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">Soft + Intents</Text>
+        <HStack wrap>
+          <Button variant="soft" intent="warning">
+            Soft Warning
+          </Button>
+          <Button variant="soft" intent="success">
+            Soft Success
+          </Button>
+          <Button variant="soft" intent="danger">
+            Soft Danger
+          </Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">Link + Intents</Text>
+        <HStack wrap>
+          <Button variant="link" intent="primary">
+            Link
+          </Button>
+          <Button variant="link" intent="neutral">
+            Link Neutral
+          </Button>
+          <Button variant="link" intent="danger">
+            Link Danger
+          </Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">Sizes</Text>
+        <HStack wrap>
+          <Button size="small">Small</Button>
+          <Button size="medium">Medium</Button>
+          <Button size="large">Large</Button>
+        </HStack>
+      </Stack>
+
+      <Stack gap="small">
+        <Text variant="h6">With Icons</Text>
+        <HStack wrap>
+          <Button>
+            <PlayIcon />
+            Play
+          </Button>
+          <Button variant="outline" intent="neutral">
+            Next
+            <CaretRightIcon />
+          </Button>
+        </HStack>
+      </Stack>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: ButtonDemo }];

package/src/components/Button/button.tsx

@@ -0,0 +1,55 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import clsx from "clsx";
+import { Spinner } from "../Spinner/spinner";
+import { variant as variantRecipe } from "./button.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { BaseSprinkles } from "../../utils/sprinkles.css";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils";
+
+type ButtonVariants = RecipeVariants<typeof variantRecipe>;
+
+type ButtonProps = ButtonPrimitive.Props &
+  BaseSprinkles &
+  ButtonVariants & {
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+  };
+
+function Button({
+  children,
+  variant = "solid",
+  intent,
+  size = "small",
+  disabled: disabledProp,
+  loading,
+  className,
+  ...props
+}: ButtonProps) {
+  const isDisabled = Boolean(loading || disabledProp);
+  const resolvedVariant = intent === "mono" ? "soft" : variant;
+  const [boxProps, restProps] = applyBaseSprinkles(props);
+  const rootCls = clsx(
+    boxProps,
+    variantRecipe({ variant: resolvedVariant, intent: intent ?? "primary", size }),
+    className,
+  );
+
+  return (
+    <ButtonPrimitive
+      className={rootCls}
+      aria-disabled={loading || undefined}
+      data-loading={loading ? "" : undefined}
+      data-slot="button"
+      nativeButton={!props.render}
+      disabled={isDisabled}
+      {...restProps}
+    >
+      {loading && <Spinner data-slot="button-loading-indicator" />}
+      {children}
+    </ButtonPrimitive>
+  );
+}
+
+export { Button };
+export type { ButtonProps };

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Button",
+  "description": "A polymorphic button component with loading state, variant and size presets, full-width mode, and custom border radius. Built on Base UI useRender.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["button", "action", "click", "submit", "loading", "variant"],
+  "related": ["Spinner", "IconButton", "Toggle"],
+  "accessibility": {
+    "keyboard": ["Enter", "Space"],
+    "aria": ["aria-disabled", "aria-label", "aria-describedby"]
+  }
+}

package/src/components/Button/index.ts

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

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

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