@blenx-dev/core 0.1.0

package/src/components/Grid/grid.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+const spanEntries: Record<number, { gridColumn: string }> = {};
+for (let i = 1; i <= 12; i++) {
+  spanEntries[i] = { gridColumn: `span ${i} / span ${i}` };
+}
+export const gridSpanVariants = spanEntries;
+
+export const gridItem = style({
+  boxSizing: "border-box",
+  minWidth: 0,
+});

package/src/components/Grid/grid.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { Box, type BoxProps } from "../Box/box";
+import { gridSprinkles } from "../../utils/sprinkles.css";
+import { gridSpanVariants, gridItem } from "./grid.css";
+import { applyGridSprinkles } from "../../utils/ve-style.utils";
+
+type GridSprinkles = Parameters<typeof gridSprinkles>[0];
+
+export type GridProps = Omit<BoxProps, "columns" | "gap" | "align"> & GridSprinkles;
+
+export type GridItemProps = BoxProps & {
+  span?: keyof typeof gridSpanVariants;
+};
+
+function Grid({ className, style, ...props }: GridProps) {
+  const [gridStyles, restProps] = applyGridSprinkles(props);
+  return (
+    <Box display="grid" className={clsx(gridStyles, className)} style={style} {...restProps} />
+  );
+}
+
+function GridItem({ span: spanProp, className, style, ...props }: GridItemProps) {
+  return (
+    <Box
+      className={clsx(gridItem, spanProp && gridSpanVariants[spanProp], className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+
+export { Grid, GridItem };

package/src/components/Grid/index.ts

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

package/src/components/Icon/icon.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const iconWrapper = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "fit-content",
+  height: "fit-content",
+  flexShrink: 0,
+});

package/src/components/Icon/icon.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { iconWrapper } from "./icon.css";
+import { Box, type BoxProps } from "../Box/box";
+
+type IconProps = BoxProps;
+
+export function Icon({ children, className, style, ...props }: IconProps) {
+  return (
+    <Box className={clsx(iconWrapper, className)} style={style} {...props}>
+      {children}
+    </Box>
+  );
+}
+
+export type { IconProps };

package/src/components/Icon/index.ts

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

package/src/components/IconButton/icon-button.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+
+export const base = style({
+  maxWidth: "100px",
+  width: "fit-content",
+});

package/src/components/IconButton/icon-button.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx";
+import { Button, type ButtonProps } from "../Button/button";
+import { base } from "./icon-button.css";
+
+type IconButtonProps = Omit<ButtonProps, "size">;
+
+export function IconButton({ className, ...props }: IconButtonProps) {
+  return <Button {...props} size="icon" className={clsx(base, className)} />;
+}
+
+export type { IconButtonProps };

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./icon-button";
+export type { IconButtonProps } from "./icon-button";

package/src/components/Input/index.ts

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

package/src/components/Input/input.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const label = style({
+  fontSize: 14,
+  display: "inline-flex",
+  gap: 4,
+  lineHeight: 1.4,
+  fontWeight: 400,
+  color: semanticVars.text.secondary,
+});
+
+export const input = style({
+  width: "100%",
+  boxSizing: "border-box",
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.md,
+  fontSize: 16,
+  lineHeight: 1.5,
+  color: semanticVars.text.primary,
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.default,
+  outline: "none",
+  selectors: {
+    "&::placeholder": {
+      color: semanticVars.text.disabled,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+    "&:focus-visible": {
+      borderColor: semanticVars.border.strong,
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+    "&:focus-visible[aria-invalid='true']": {
+      borderColor: semanticVars.status.danger.default,
+      boxShadow: `0 0 0 3px ${semanticVars.status.danger}`,
+    },
+  },
+});
+
+export const inputSm = style({
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  fontSize: 16,
+});
+
+export const inputLg = style({
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.md,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  fontSize: 16,
+});
+
+export const inputError = style({
+  borderColor: semanticVars.status.danger.default,
+});
+
+export const error = style({
+  fontSize: 12,
+  lineHeight: 1.4,
+  color: semanticVars.status.danger.default,
+});

package/src/components/Input/input.tsx

@@ -0,0 +1,50 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type * as React from "react";
+import { useId } from "react";
+import { input, inputSm, inputLg, inputError, label } from "./input.css";
+
+type InputSize = "sm" | "default" | "lg";
+type _BaseInputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size">;
+export type InputProps = _BaseInputProps & {
+  size?: InputSize;
+  error?: string;
+  wrapperStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type LabelProps = useRender.ComponentProps<"label"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Label({ render, className, style, ...props }: LabelProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "label",
+    props: { className: clsx(label, className), style, "data-slot": "label", ...props },
+    render,
+  });
+}
+
+export function Input({ error, className, style, size = "default", ...props }: InputProps) {
+  const generatedId = useId();
+  const fieldId = props.id ?? generatedId;
+
+  return (
+    <InputPrimitive
+      id={fieldId}
+      data-slot="input"
+      className={clsx(
+        input,
+        size === "sm" && inputSm,
+        size === "lg" && inputLg,
+        error ? inputError : null,
+        className,
+      )}
+      style={style}
+      {...props}
+    />
+  );
+}

package/src/components/InputGroup/index.ts

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

package/src/components/InputGroup/input-group.css.ts

@@ -0,0 +1,156 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const group = style({
+  position: "relative",
+  display: "inline-flex",
+  width: "100%",
+  minWidth: 0,
+  alignItems: "center",
+  borderRadius: tokenVars.borderRadius.lg,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  color: semanticVars.text.primary,
+  fontSize: tokenVars.fontSize.sm,
+  boxSizing: "border-box",
+  minHeight: "40px",
+  overflow: "hidden",
+  transitionProperty: "border-color, box-shadow",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-within": {
+      borderColor: semanticVars.border.strong,
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+    "&:has([aria-invalid='true'])": {
+      borderColor: semanticVars.status.danger.default,
+    },
+    "&:has([aria-invalid='true']:focus-visible)": {
+      borderColor: semanticVars.status.danger.default,
+      boxShadow: `0 0 0 2px ${semanticVars.status.danger}`,
+    },
+    "&:has(:disabled)": {
+      opacity: 0.64,
+      cursor: "not-allowed",
+    },
+    "&:has([data-align='block-start'], [data-align='block-end'])": {
+      flexDirection: "column",
+    },
+  },
+});
+
+export const addon = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "text",
+  flexShrink: 0,
+  color: semanticVars.text.secondary,
+  userSelect: "none",
+  fontSize: tokenVars.fontSize.sm,
+  selectors: {
+    "&:has(:last-child[data-slot='badge'])": {
+      marginInlineStart: 0,
+    },
+  },
+});
+
+export const addonInlineStart = style({
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: "8px",
+  paddingRight: "4px",
+  alignSelf: "center",
+});
+
+export const addonInlineEnd = style({
+  order: 1,
+  paddingLeft: "4px",
+  paddingRight: "4px",
+  alignSelf: "stretch",
+  display: "flex",
+  alignItems: "center",
+});
+
+export const addonBlockStart = style({
+  order: -1,
+  width: "100%",
+  justifyContent: "flex-start",
+  paddingTop: "4px",
+  paddingLeft: "4px",
+  paddingRight: "4px",
+});
+
+export const addonBlockEnd = style({
+  order: 1,
+  width: "100%",
+  justifyContent: "flex-start",
+  paddingBottom: "4px",
+  paddingLeft: "4px",
+  paddingRight: "4px",
+});
+
+export const text = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  whiteSpace: "nowrap",
+  lineHeight: 1,
+  color: semanticVars.text.secondary,
+});
+
+export const menu = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const input = style({
+  flex: 1,
+  minWidth: 0,
+  width: "100%",
+  height: "100%",
+  border: "none",
+  outline: "none",
+  backgroundColor: "inherit",
+  paddingTop: "8px",
+  paddingBottom: "6px",
+  paddingLeft: "8px",
+  paddingRight: "8px",
+  borderWidth: 0,
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.primary,
+  boxSizing: "border-box",
+  lineHeight: 1.5,
+  selectors: {
+    "&::placeholder": {
+      color: semanticVars.text.disabled,
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const textarea = style({
+  flex: 1,
+  minWidth: 0,
+  width: "100%",
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  borderWidth: 0,
+  paddingLeft: "10px",
+  paddingRight: "10px",
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.primary,
+  resize: "none",
+  selectors: {
+    "&::placeholder": {
+      color: semanticVars.text.disabled,
+    },
+  },
+});

package/src/components/InputGroup/input-group.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useRender } from "@base-ui/react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import clsx from "clsx";
+import type * as React from "react";
+import {
+  group,
+  addon,
+  addonInlineStart,
+  addonInlineEnd,
+  addonBlockStart,
+  addonBlockEnd,
+  text as textStyle,
+  menu,
+  input as inputStyle,
+  textarea as textareaStyle,
+} from "./input-group.css";
+import type { _BaseDivProps } from "../../utils/types";
+
+type Align = "inline-start" | "inline-end" | "block-start" | "block-end";
+
+type InputGroupProps = useRender.ComponentProps<"fieldset">;
+
+function InputGroup({ className, ...props }: InputGroupProps): React.ReactElement {
+  return <fieldset className={clsx(group, className)} data-slot="input-group" {...props} />;
+}
+
+type InputGroupAddonProps = _BaseDivProps & {
+  align?: Align;
+};
+
+function InputGroupAddon({
+  align = "inline-start",
+  className,
+  ...props
+}: InputGroupAddonProps): React.ReactElement {
+  return (
+    <div
+      className={clsx(
+        addon,
+        align === "inline-start" && addonInlineStart,
+        align === "inline-end" && addonInlineEnd,
+        align === "block-start" && addonBlockStart,
+        align === "block-end" && addonBlockEnd,
+        className,
+      )}
+      data-align={align}
+      data-slot="input-group-addon"
+      role="presentation"
+      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
+        const target = e.target as HTMLElement;
+        const isInteractive = target.closest(
+          "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
+        );
+        if (isInteractive) return;
+        e.preventDefault();
+        const parent = e.currentTarget.parentElement;
+        const input = parent?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+          "input, textarea",
+        );
+        if (input && !parent?.querySelector("input:focus, textarea:focus")) {
+          input.focus();
+        }
+      }}
+      {...props}
+    />
+  );
+}
+
+type InputGroupTextProps = React.ComponentProps<"span">;
+
+function InputGroupText({ className, ...props }: InputGroupTextProps): React.ReactElement {
+  return <span className={clsx(textStyle, className)} {...props} />;
+}
+
+type InputGroupInputProps = Omit<
+  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
+  "style"
+>;
+
+function InputGroupInput({ className, ...props }: InputGroupInputProps): React.ReactElement {
+  return (
+    <InputPrimitive className={clsx(inputStyle, className)} data-slot="input-control" {...props} />
+  );
+}
+
+type InputGroupTextareaProps = Omit<React.ComponentPropsWithoutRef<"textarea">, "style">;
+
+function InputGroupTextarea({ ...props }: InputGroupTextareaProps): React.ReactElement {
+  return <textarea className={textareaStyle} rows={4} data-slot="textarea-control" {...props} />;
+}
+
+function InputGroupMenu({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"nav">): React.ReactElement {
+  return useRender({
+    defaultTagName: "nav",
+    props: {
+      className: clsx(menu, className),
+      "data-slot": "input-group-menu",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+const InputGroupCheckboxItem = CheckboxPrimitive.Root;
+const InputGroupRadioGroup = RadioGroupPrimitive;
+const InputGroupRadioItem = RadioPrimitive.Root;
+
+export type {
+  InputGroupAddonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextareaProps,
+};
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupCheckboxItem,
+  InputGroupInput,
+  InputGroupMenu,
+  InputGroupRadioGroup,
+  InputGroupRadioItem,
+  InputGroupText,
+  InputGroupTextarea,
+};

package/src/components/Menu/index.ts

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

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

@@ -0,0 +1,121 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+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: tokenVars.borderRadius.md,
+  transition: "background-color 0.15s ease, box-shadow 0.15s ease",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+  },
+});
+
+export const popup = style({
+  backgroundColor: semanticVars.surface.default,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.subtle,
+  borderRadius: tokenVars.borderRadius.lg,
+  boxShadow: tokenVars.shadow.xl,
+  zIndex: 1000,
+  padding: tokenVars.spacing.xs,
+  display: "flex",
+  gap: tokenVars.spacing["1"],
+  flexDirection: "column",
+  minWidth: 224,
+  overflow: "hidden",
+  outline: "none",
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  minHeight: 24,
+  padding: `${tokenVars.spacing.xs} ${tokenVars.spacing.sm}`,
+  borderRadius: tokenVars.borderRadius.default,
+  color: semanticVars.text.primary,
+  fontSize: tokenVars.fontSize.sm,
+  fontWeight: tokenVars.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: semanticVars.background.subtle,
+      color: semanticVars.text.primary,
+    },
+    "&:focus-visible": {
+      backgroundColor: semanticVars.background.subtle,
+      color: semanticVars.text.primary,
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong} inset`,
+    },
+    "&:active": {
+      backgroundColor: semanticVars.border.subtle,
+    },
+  },
+});
+
+export const itemDestructive = style({
+  color: semanticVars.status.danger.default,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.status.dangerBg,
+      color: semanticVars.status.danger.default,
+    },
+    "&:focus-visible": {
+      backgroundColor: semanticVars.status.dangerBg,
+      color: semanticVars.status.danger.default,
+      boxShadow: `0 0 0 2px ${semanticVars.status.danger} inset`,
+    },
+    "&:active": {
+      backgroundColor: semanticVars.status.dangerBg,
+    },
+  },
+});
+
+export const separator = style({
+  height: 1,
+  backgroundColor: semanticVars.border.subtle,
+  border: "none",
+});
+
+export const groupLabel = style({
+  padding: `${tokenVars.spacing.sm} ${tokenVars.spacing.md} ${tokenVars.spacing.xs}`,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: tokenVars.letterSpacing.wide,
+});
+
+export const inset = style({
+  paddingLeft: 40,
+});
+
+export const shortcut = style({
+  marginLeft: "auto",
+  color: semanticVars.text.disabled,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+});