@blenx-dev/core 0.1.0

package/src/components/Badge/badge.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import {
+  badgeBase,
+  badgeDanger,
+  badgeDefault,
+  badgeOutline,
+  badgePrimary,
+  badgeRecipe,
+  badgeSecondary,
+  badgeSoft,
+  badgeSolid,
+  badgeSuccess,
+} from "./badge.css";
+import { Box, type BoxProps } from "../Box/box";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+
+type Props = BoxProps & RecipeVariants<typeof badgeRecipe>;
+
+export const variantStyles: Record<string, string> = {
+  default: badgeDefault,
+  primary: badgePrimary,
+  secondary: badgeSecondary,
+  success: badgeSuccess,
+  danger: badgeDanger,
+};
+
+export const appearanceStyles: Record<string, string> = {
+  solid: badgeSolid,
+  outline: badgeOutline,
+  soft: badgeSoft,
+};
+export function getBadgeStyles(variant: string, appearance: string): string {
+  const base = badgeBase;
+  const v = variantStyles[variant] ?? badgeDefault;
+  const a = appearanceStyles[appearance] ?? badgeSolid;
+  return `${base} ${v} ${a}`;
+}
+
+export function Badge({ variant, appearance, className, style, ...props }: Props) {
+  return (
+    <Box
+      className={clsx(badgeRecipe({ variant, appearance }), className)}
+      style={style}
+      {...props}
+    />
+  );
+}

package/src/components/Badge/index.ts

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

package/src/components/Box/box.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const baseBox = style({
+  minWidth: 0,
+});

package/src/components/Box/box.tsx

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import { baseBox } from "./box.css";
+import type { BaseSprinkles } from "../../utils/sprinkles.css";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils";
+
+type BoxProps = useRender.ComponentProps<"div"> & BaseSprinkles;
+
+function Box({ render, className, ...props }: BoxProps) {
+  const [styleProps, htmlProps] = applyBaseSprinkles(props);
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: {
+      ...htmlProps,
+      className: clsx(baseBox, styleProps, className),
+    },
+  });
+}
+export type { BoxProps };
+export { Box };

package/src/components/Box/index.ts

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

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

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  color: semanticVars.text.secondary,
+  fontSize: 14,
+});
+
+export const list = style({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: 6,
+  fontSize: tokenVars.fontSize.md,
+  color: semanticVars.text.secondary,
+  "@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: semanticVars.text.primary,
+    },
+  },
+});
+
+export const page = style({
+  fontWeight: 400,
+  color: semanticVars.text.primary,
+});
+
+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.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/index.ts

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

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

@@ -0,0 +1,200 @@
+import { createVar } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const intentVars = {
+  solidBg: createVar(),
+  solidFg: createVar(),
+  solidHoverBg: createVar(),
+  softBg: createVar(),
+  softFg: createVar(),
+  softHoverBg: createVar(),
+  border: createVar(),
+  fg: createVar(),
+};
+
+export const variant = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokenVars.spacing.sm,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: tokenVars.borderRadius.default,
+    cursor: "pointer",
+    fontWeight: 500,
+    width: "fit-content",
+    height: "fit-content",
+    fontSize: tokenVars.fontSize.md,
+    fontFamily: tokenVars.font.body,
+    textDecoration: "none",
+    position: "relative",
+    transition: "all 0.2s ease",
+    selectors: {
+      "&:disabled": {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
+    },
+  },
+  variants: {
+    intent: {
+      primary: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.interactive.primary.default,
+          [intentVars.solidFg]: semanticVars.interactive.primaryFg,
+          [intentVars.solidHoverBg]: semanticVars.interactive.primary.hover,
+          [intentVars.softBg]: semanticVars.interactive.primaryBg.default,
+          [intentVars.softFg]: semanticVars.interactive.primary.default,
+          [intentVars.softHoverBg]: semanticVars.interactive.primaryBg.hover,
+          [intentVars.border]: semanticVars.interactive.primary.active,
+          [intentVars.fg]: semanticVars.interactive.primary.default,
+        },
+      },
+      neutral: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.surface.raised,
+          [intentVars.solidFg]: semanticVars.text.primary,
+          [intentVars.solidHoverBg]: semanticVars.background.subtle,
+          [intentVars.softBg]: semanticVars.background.subtle,
+          [intentVars.softFg]: semanticVars.text.primary,
+          [intentVars.softHoverBg]: semanticVars.background.subtle,
+          [intentVars.border]: semanticVars.border.default,
+          [intentVars.fg]: semanticVars.text.primary,
+        },
+      },
+      success: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.status.success.default,
+          [intentVars.solidFg]: semanticVars.text.inverse,
+          [intentVars.solidHoverBg]: semanticVars.status.success.hover,
+          [intentVars.softBg]: semanticVars.status.successBg,
+          [intentVars.softFg]: semanticVars.status.success.default,
+          [intentVars.softHoverBg]: semanticVars.status.successBg,
+          [intentVars.border]: semanticVars.status.success.active,
+          [intentVars.fg]: semanticVars.status.success.default,
+        },
+      },
+      warning: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.status.warning.default,
+          [intentVars.solidFg]: semanticVars.text.inverse,
+          [intentVars.solidHoverBg]: semanticVars.status.warning.hover,
+          [intentVars.softBg]: semanticVars.status.warningBg,
+          [intentVars.softFg]: semanticVars.status.warning.default,
+          [intentVars.softHoverBg]: semanticVars.status.warningBg,
+          [intentVars.border]: semanticVars.status.warning.active,
+          [intentVars.fg]: semanticVars.status.warning.default,
+        },
+      },
+      danger: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.status.danger.default,
+          [intentVars.solidFg]: semanticVars.text.inverse,
+          [intentVars.solidHoverBg]: semanticVars.status.danger.hover,
+          [intentVars.softBg]: semanticVars.status.dangerBg,
+          [intentVars.softFg]: semanticVars.status.danger.default,
+          [intentVars.softHoverBg]: semanticVars.status.dangerBg,
+          [intentVars.border]: semanticVars.status.danger.active,
+          [intentVars.fg]: semanticVars.status.danger.default,
+        },
+      },
+      info: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.status.info.default,
+          [intentVars.solidFg]: semanticVars.text.inverse,
+          [intentVars.solidHoverBg]: semanticVars.status.info.hover,
+          [intentVars.softBg]: semanticVars.status.infoBg,
+          [intentVars.softFg]: semanticVars.status.info.default,
+          [intentVars.softHoverBg]: semanticVars.status.infoBg,
+          [intentVars.border]: semanticVars.status.info.active,
+          [intentVars.fg]: semanticVars.status.info.default,
+        },
+      },
+      mono: {
+        vars: {
+          [intentVars.solidBg]: semanticVars.background.default,
+          [intentVars.solidFg]: semanticVars.text.primary,
+          [intentVars.solidHoverBg]: semanticVars.background.subtle,
+          [intentVars.softBg]: semanticVars.background.default,
+          [intentVars.softFg]: semanticVars.text.primary,
+          [intentVars.softHoverBg]: semanticVars.background.subtle,
+          [intentVars.border]: semanticVars.border.default,
+          [intentVars.fg]: semanticVars.text.primary,
+        },
+      },
+    },
+    size: {
+      xs: {
+        padding: `${tokenVars.spacing.xxs} ${tokenVars.spacing.xs}`,
+        fontSize: tokenVars.fontSize.sm,
+      },
+      sm: {
+        padding: `${tokenVars.spacing.xs} ${tokenVars.spacing.sm}`,
+        fontSize: tokenVars.fontSize.sm,
+      },
+      icon: {
+        padding: `${tokenVars.spacing.xs} ${tokenVars.spacing.xs}`,
+      },
+      md: { padding: `${tokenVars.spacing.sm} ${tokenVars.spacing.md}` },
+      lg: {
+        padding: `${tokenVars.spacing.md} ${tokenVars.spacing.lg}`,
+        fontSize: tokenVars.fontSize.lg,
+      },
+    },
+    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.border,
+          },
+        },
+      },
+      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.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 = "sm",
+  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/index.ts

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

package/src/components/Calendar/calendar.css.ts

@@ -0,0 +1,187 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "inline-block",
+  width: "100%",
+});
+
+export const months = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const monthCaption = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  paddingBottom: tokenVars.spacing.sm,
+  minHeight: 40,
+});
+
+export const captionLabel = style({
+  fontSize: tokenVars.fontSize.md,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.primary,
+  margin: 0,
+  padding: 0,
+});
+
+export const nav = style({
+  height: "fit-content",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  position: "absolute",
+  inset: 0,
+  padding: tokenVars.spacing.xs,
+  pointerEvents: "none",
+  zIndex: 10,
+});
+
+export const buttonNav = style({
+  pointerEvents: "auto",
+  appearance: "none",
+  backgroundColor: "transparent",
+  border: "none",
+  padding: 0,
+  font: "inherit",
+  WebkitTapHighlightColor: "transparent",
+  width: 28,
+  height: 28,
+  borderRadius: tokenVars.borderRadius.default,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: semanticVars.text.secondary,
+  cursor: "pointer",
+  flexShrink: 0,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const monthGrid = style({
+  width: "100%",
+  borderCollapse: "collapse",
+});
+
+export const weekday = style({
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.secondary,
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: tokenVars.spacing.xxs,
+  width: 40,
+  height: 32,
+  boxSizing: "border-box",
+});
+
+export const day = style({
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: 1,
+  width: 40,
+  height: 40,
+  boxSizing: "border-box",
+});
+
+export const dayButton = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  minWidth: 32,
+  minHeight: 32,
+  maxWidth: 36,
+  maxHeight: 36,
+  borderRadius: tokenVars.borderRadius.default,
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.primary,
+  outline: "none",
+  margin: "0 auto",
+  padding: 0,
+  fontFamily: "inherit",
+  lineHeight: 1,
+  transitionProperty: "background-color, color",
+  transitionDuration: "100ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const dayButtonSelected = style({
+  backgroundColor: semanticVars.interactive.primary.default,
+  color: semanticVars.interactive.primaryFg,
+  fontWeight: tokenVars.fontWeight.semibold,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.interactive.primary.default,
+    },
+  },
+});
+
+export const dayButtonToday = style({
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const dayButtonDisabled = style({
+  color: semanticVars.text.disabled,
+  cursor: "not-allowed",
+  opacity: 0.5,
+  selectors: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const dayButtonOutside = style({
+  color: semanticVars.text.disabled,
+  opacity: 0.5,
+});
+
+export const footer = style({
+  paddingTop: tokenVars.spacing.sm,
+});
+
+export const dropdowns = style({
+  display: "flex",
+  gap: tokenVars.spacing.xs,
+  alignItems: "center",
+});
+
+export const dropdown = style({
+  appearance: "none",
+  backgroundColor: semanticVars.background.subtle,
+  border: `1px solid ${semanticVars.border.default}`,
+  borderRadius: tokenVars.borderRadius.default,
+  color: semanticVars.text.primary,
+  fontSize: tokenVars.fontSize.sm,
+  padding: `${tokenVars.spacing.xxs} ${tokenVars.spacing.sm}`,
+  cursor: "pointer",
+  outline: "none",
+  selectors: {
+    "&:focus-visible": {
+      borderColor: semanticVars.border.strong,
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+  },
+});