@blenx-dev/core 0.1.0

package/src/components/Text/text.css.ts

@@ -0,0 +1,118 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const textVariants = recipe({
+  base: {
+    margin: 0,
+    textDecoration: "none",
+    lineHeight: tokenVars.lineHeight.normal,
+  },
+  variants: {
+    variant: {
+      h1: {
+        fontSize: tokenVars.fontSize.displayLg,
+        fontWeight: tokenVars.fontWeight.bold,
+        letterSpacing: tokenVars.letterSpacing.tight,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      h2: {
+        fontSize: tokenVars.fontSize.xxxl,
+        fontWeight: tokenVars.fontWeight.bold,
+        letterSpacing: tokenVars.letterSpacing.tight,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      h3: {
+        fontSize: tokenVars.fontSize.xl,
+        fontWeight: tokenVars.fontWeight.semibold,
+        letterSpacing: tokenVars.letterSpacing.snug,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      h4: {
+        fontSize: tokenVars.fontSize.lg,
+        fontWeight: tokenVars.fontWeight.semibold,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      h5: {
+        fontSize: tokenVars.fontSize.md,
+        fontWeight: tokenVars.fontWeight.semibold,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      h6: {
+        fontSize: tokenVars.fontSize.sm,
+        fontWeight: tokenVars.fontWeight.semibold,
+        margin: 0,
+        scrollMarginTop: "80px",
+      },
+      body1: {
+        fontWeight: tokenVars.fontWeight.regular,
+        margin: 0,
+      },
+      body2: {
+        fontSize: tokenVars.fontSize.sm,
+        fontWeight: tokenVars.fontWeight.regular,
+        margin: 0,
+      },
+      body3: {
+        fontSize: tokenVars.fontSize.xs,
+        fontWeight: tokenVars.fontWeight.regular,
+        margin: 0,
+      },
+      body4: {
+        fontSize: tokenVars.fontSize.xxs,
+        fontWeight: tokenVars.fontWeight.medium,
+        letterSpacing: tokenVars.letterSpacing.wide,
+        margin: 0,
+      },
+      caption: {
+        fontSize: tokenVars.fontSize.xs,
+        fontWeight: tokenVars.fontWeight.medium,
+        letterSpacing: tokenVars.letterSpacing.wide,
+        margin: 0,
+      },
+      creatorNote: {
+        fontSize: tokenVars.fontSize.lg,
+        lineHeight: "28px",
+        fontWeight: tokenVars.fontWeight.regular,
+        fontStyle: "italic",
+        margin: 0,
+      },
+      p: {
+        fontSize: tokenVars.fontSize.md,
+        fontWeight: tokenVars.fontWeight.regular,
+        margin: 0,
+      },
+      div: {
+        fontSize: tokenVars.fontSize.md,
+        fontWeight: tokenVars.fontWeight.regular,
+        margin: 0,
+      },
+      code: {
+        margin: 0,
+        backgroundColor: semanticVars.background.subtle,
+        borderRadius: tokenVars.borderRadius.sm,
+      },
+    },
+    textAlign: {
+      left: { textAlign: "left" },
+      center: { textAlign: "center" },
+      right: { textAlign: "right" },
+    },
+    weight: {
+      regular: { fontWeight: tokenVars.fontWeight.regular },
+      medium: { fontWeight: tokenVars.fontWeight.medium },
+      semibold: { fontWeight: tokenVars.fontWeight.semibold },
+      bold: { fontWeight: tokenVars.fontWeight.bold },
+    },
+    transform: {
+      uppercase: { textTransform: "uppercase" },
+      capitalize: { textTransform: "capitalize" },
+      none: { textTransform: "none" },
+      lowercase: { textTransform: "lowercase" },
+    },
+  },
+});

package/src/components/Text/text.tsx

@@ -0,0 +1,66 @@
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import { textVariants } from "./text.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import type { BaseSprinkles } from "../../utils/sprinkles.css";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils";
+const variantTag = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+
+  body1: "p",
+  body2: "p",
+  body3: "p",
+  body4: "p",
+  p: "p",
+
+  caption: "span",
+  creatorNote: "aside",
+  code: "code",
+  div: "div",
+} as const satisfies Record<string, keyof React.JSX.IntrinsicElements>;
+
+export type TextProps = useRender.ComponentProps<"div"> &
+  BaseSprinkles &
+  RecipeVariants<typeof textVariants> & { span?: boolean } & {
+    size?: BaseSprinkles["fontSize"];
+  };
+
+export function Text({
+  variant = "body1",
+  textAlign,
+  weight,
+  className,
+  color = "primary",
+  style,
+  size,
+  render,
+  span,
+  transform = "none",
+  ...props
+}: TextProps): React.ReactElement {
+  const [baseStyles, htmlProps] = applyBaseSprinkles({ ...props, color, fontSize: size });
+  const rootCls = clsx(
+    baseStyles,
+    textVariants({ variant, textAlign, weight, transform }),
+    className,
+  );
+  const mergedProps = { className: rootCls, style, ...htmlProps };
+  if (span) {
+    return useRender({
+      defaultTagName: "span",
+      props: mergedProps,
+      render,
+    });
+  }
+  return useRender({
+    defaultTagName: variantTag[variant],
+    props: mergedProps,
+    render,
+  });
+}

package/src/components/Textarea/index.ts

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

package/src/components/Textarea/textarea.css.ts

@@ -0,0 +1,66 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const shell = style({
+  display: "inline-flex",
+  width: "100%",
+  position: "relative",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.default,
+  backgroundColor: semanticVars.surface.default,
+  color: semanticVars.text.primary,
+  boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+  boxSizing: "border-box",
+  outline: "none",
+  transitionProperty: "box-shadow, border-color",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:has(:focus-visible)": {
+      borderColor: semanticVars.border.strong,
+      boxShadow: `0 0 0 3px ${semanticVars.border.strong}`,
+    },
+    "&:has([aria-invalid])": {
+      borderColor: semanticVars.status.danger.default,
+    },
+    "&:has([aria-invalid]:focus-visible)": {
+      boxShadow: `0 0 0 3px ${semanticVars.status.danger.default}`,
+    },
+    "&:has(:disabled)": {
+      opacity: 0.64,
+    },
+  },
+});
+
+export const textarea = style({
+  fieldSizing: "content",
+  minHeight: "70px",
+  width: "100%",
+  borderRadius: "inherit",
+  borderWidth: 0,
+  paddingTop: "calc(12px - 1px)",
+  paddingBottom: "calc(12px - 1px)",
+  paddingLeft: "calc(12px - 1px)",
+  paddingRight: "calc(12px - 1px)",
+  fontSize: "16px",
+  lineHeight: 1.5,
+  outline: "none",
+  resize: "none",
+  color: semanticVars.text.primary,
+  backgroundColor: "transparent",
+});
+
+export const textareaSm = style({
+  minHeight: "66px",
+  paddingTop: "calc(8px - 1px)",
+  paddingBottom: "calc(8px - 1px)",
+  paddingLeft: "calc(10px - 1px)",
+  paddingRight: "calc(10px - 1px)",
+});
+
+export const textareaLg = style({
+  minHeight: "74px",
+  paddingTop: "calc(16px - 1px)",
+  paddingBottom: "calc(16px - 1px)",
+});

package/src/components/Textarea/textarea.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import clsx from "clsx";
+import type * as React from "react";
+import { shell, textarea, textareaLg, textareaSm } from "./textarea.css";
+
+export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> &
+  React.RefAttributes<HTMLTextAreaElement> & {
+    size?: "sm" | "default" | "lg" | number;
+    className?: string;
+    style?: React.CSSProperties;
+  };
+
+export function Textarea({
+  size = "default",
+  className,
+  style,
+  ref,
+  ...props
+}: TextareaProps): React.ReactElement {
+  return (
+    <span className={shell} data-size={size} data-slot="textarea-control" style={style}>
+      <FieldPrimitive.Control
+        ref={ref}
+        value={props.value}
+        defaultValue={props.defaultValue}
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        render={(defaultProps: React.ComponentProps<"textarea">) => (
+          <textarea
+            ref={ref}
+            className={clsx(
+              textarea,
+              size === "sm" && textareaSm,
+              size === "lg" && textareaLg,
+              className,
+            )}
+            data-slot="textarea"
+            {...defaultProps}
+            {...props}
+          />
+        )}
+      />
+    </span>
+  );
+}

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/toggle.css.ts

@@ -0,0 +1,91 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const base = style({
+  position: "relative",
+  display: "inline-flex",
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  gap: tokenVars.spacing.sm,
+  whiteSpace: "nowrap",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderRadius: tokenVars.borderRadius.default,
+  fontWeight: tokenVars.fontWeight.medium,
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: 1.4,
+  cursor: "pointer",
+  userSelect: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  transition: "box-shadow 0.15s ease",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+    "&:disabled": {
+      pointerEvents: "none",
+      opacity: 0.64,
+    },
+  },
+});
+
+export const toggleRecipes = recipe({
+  variants: {
+    size: {
+      sm: {
+        height: tokenVars.spacing.lg,
+        minWidth: tokenVars.spacing.lg,
+        paddingLeft: tokenVars.spacing.sm,
+        paddingRight: tokenVars.spacing.sm,
+      },
+      default: {
+        height: tokenVars.spacing.lg,
+        minWidth: 36,
+        paddingLeft: tokenVars.spacing.sm,
+        paddingRight: tokenVars.spacing.sm,
+      },
+      lg: {
+        height: tokenVars.spacing.xl,
+        paddingLeft: tokenVars.spacing.md,
+        paddingRight: tokenVars.spacing.md,
+      },
+    },
+    radius: {
+      default: { borderRadius: tokenVars.borderRadius.default },
+      none: { borderRadius: 0 },
+      xs: { borderRadius: tokenVars.borderRadius.xs },
+      sm: { borderRadius: tokenVars.borderRadius.sm },
+      md: { borderRadius: tokenVars.borderRadius.md },
+      lg: { borderRadius: tokenVars.borderRadius.lg },
+      xl: { borderRadius: tokenVars.borderRadius.xl },
+      xxl: { borderRadius: tokenVars.borderRadius.xxl },
+      full: { borderRadius: tokenVars.borderRadius.full },
+    },
+    variant: {
+      default: {
+        borderColor: "transparent",
+        color: semanticVars.text.primary,
+        backgroundColor: semanticVars.surface.default,
+      },
+      outline: {
+        borderColor: semanticVars.border.default,
+        color: semanticVars.text.primary,
+        backgroundColor: semanticVars.background.subtle,
+      },
+    },
+  },
+});
+
+export const pressed = {
+  default: style({
+    backgroundColor: semanticVars.surface.raised,
+  }),
+  outline: style({
+    outlineWidth: tokenVars.borderWidth.thin,
+    backgroundColor: semanticVars.surface.overlay,
+    borderColor: semanticVars.border.strong,
+  }),
+};

package/src/components/Toggle/toggle.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import clsx from "clsx";
+import { base, pressed, toggleRecipes } from "./toggle.css";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+export type ToggleSize = "default" | "sm" | "lg";
+export type ToggleVariants = RecipeVariants<typeof toggleRecipes>;
+
+export type ToggleProps = TogglePrimitive.Props &
+  ToggleVariants & {
+    size?: ToggleSize;
+  };
+
+export function Toggle({
+  children,
+  className,
+  variant = "default",
+  radius = "default",
+  size = "default",
+  ...props
+}: ToggleProps) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      {...props}
+      render={(renderProps, state) => {
+        return (
+          <button
+            {...renderProps}
+            className={clsx(
+              base,
+              toggleRecipes({ size, variant, radius }),
+              state.pressed && pressed[variant],
+              className,
+            )}
+          >
+            {children}
+          </button>
+        );
+      }}
+    />
+  );
+}

package/src/components/ToggleGroup/index.ts

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

package/src/components/ToggleGroup/toggle-group.css.ts

@@ -0,0 +1,77 @@
+import { style } from "@vanilla-extract/css";
+import { tokenVars } from "@blenx-dev/theme/contract";
+
+export const groupBase = style({
+  display: "inline-flex",
+  position: "relative",
+});
+
+export const groupHorizontal = style({
+  flexDirection: "row",
+  alignItems: "center",
+});
+
+export const groupVertical = style({
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+export const groupDefault = style({
+  gap: tokenVars.spacing.xxs,
+});
+
+export const groupOutline = style({
+  gap: 0,
+});
+
+export const outlineItemHorizontal = style({
+  selectors: {
+    "&:first-child": {
+      borderStartStartRadius: tokenVars.borderRadius.md,
+      borderEndStartRadius: tokenVars.borderRadius.md,
+    },
+    "&:last-child": {
+      borderStartEndRadius: tokenVars.borderRadius.md,
+      borderEndEndRadius: tokenVars.borderRadius.md,
+    },
+    "&:not(:first-child)": {
+      borderInlineStartWidth: 0,
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0,
+    },
+    "&:not(:last-child)": {
+      borderInlineEndWidth: 0,
+      borderStartEndRadius: 0,
+      borderEndEndRadius: 0,
+    },
+    "&:focus-visible": {
+      zIndex: 10,
+    },
+  },
+});
+
+export const outlineItemVertical = style({
+  selectors: {
+    "&:first-child": {
+      borderStartStartRadius: tokenVars.borderRadius.md,
+      borderStartEndRadius: tokenVars.borderRadius.md,
+    },
+    "&:last-child": {
+      borderEndStartRadius: tokenVars.borderRadius.md,
+      borderEndEndRadius: tokenVars.borderRadius.md,
+    },
+    "&:not(:first-child)": {
+      borderBlockStartWidth: 0,
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+    },
+    "&:not(:last-child)": {
+      borderBlockEndWidth: 0,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    },
+    "&:focus-visible": {
+      zIndex: 10,
+    },
+  },
+});

package/src/components/ToggleGroup/toggle-group.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import clsx from "clsx";
+import * as React from "react";
+import type { SeparatorProps } from "../Separator/separator";
+import { Separator } from "../Separator/separator";
+import {
+  Toggle as ToggleComponent,
+  type ToggleProps as ToggleComponentProps,
+  type ToggleProps,
+  type ToggleSize,
+} from "../Toggle/toggle";
+import {
+  groupBase,
+  groupHorizontal,
+  groupVertical,
+  groupDefault,
+  groupOutline,
+  outlineItemHorizontal,
+  outlineItemVertical,
+} from "./toggle-group.css";
+
+type ToggleGroupVariant = ToggleProps["variant"];
+type ToggleGroupSize = ToggleSize;
+
+type ToggleGroupContextValue = {
+  variant: ToggleGroupVariant;
+  size: ToggleGroupSize;
+  orientation: "horizontal" | "vertical";
+};
+
+export const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null);
+
+export type ToggleGroupProps = ToggleGroupPrimitive.Props & {
+  variant?: ToggleGroupVariant;
+  size?: ToggleGroupSize;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function ToggleGroup({
+  className,
+  style,
+  variant = "default",
+  size = "default",
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupProps): React.ReactElement {
+  const isHorizontal = orientation === "horizontal";
+  const isOutline = variant === "outline";
+
+  const contextValue = React.useMemo(
+    () => ({ variant, size, orientation }),
+    [variant, size, orientation],
+  );
+
+  return (
+    <ToggleGroupPrimitive
+      className={clsx(
+        groupBase,
+        isHorizontal ? groupHorizontal : groupVertical,
+        isOutline ? groupOutline : groupDefault,
+        className,
+      )}
+      style={style}
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      orientation={orientation}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+export function ToggleGroupItem({
+  className,
+  style,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleComponentProps & {
+  variant?: ToggleGroupVariant;
+  size?: ToggleGroupSize;
+  className?: string;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  const context = React.useContext(ToggleGroupContext);
+
+  const resolvedVariant = variant ?? context?.variant ?? "default";
+  const resolvedSize = size ?? context?.size ?? "default";
+  const orientation = context?.orientation ?? "horizontal";
+  const isOutline = resolvedVariant === "outline";
+
+  return (
+    <ToggleComponent
+      className={clsx(
+        isOutline && (orientation === "horizontal" ? outlineItemHorizontal : outlineItemVertical),
+        className,
+      )}
+      style={style}
+      data-size={resolvedSize}
+      data-variant={resolvedVariant}
+      size={resolvedSize}
+      variant={resolvedVariant}
+      {...props}
+    >
+      {children}
+    </ToggleComponent>
+  );
+}
+
+export function ToggleGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+} & SeparatorProps): React.ReactElement {
+  const context = React.useContext(ToggleGroupContext);
+  const resolvedOrientation =
+    orientation ?? (context?.orientation === "vertical" ? "horizontal" : "vertical");
+
+  return <Separator className={clsx(className)} orientation={resolvedOrientation} {...props} />;
+}