@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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