@blenx-dev/core 0.1.0

package/src/components/index.ts

@@ -0,0 +1,54 @@
+// ─── Design System: @/components/ui ───────────────────────────────────────────
+// Components
+
+export * from "./Accordion/accordion";
+export * from "./Alert/alert";
+export * from "./AlertDialog/alert-dialog";
+export * from "./AspectRatio/aspect-ratio";
+export * from "./Autocomplete/autocomplete";
+export * from "./Avatar/avatar";
+export * from "./Badge/badge";
+export * from "./Box/box";
+export * from "./Breadcrumbs/breadcrumbs";
+export * from "./Button/button";
+export * from "./Calendar/calendar";
+export * from "./Card/card";
+export * from "./Checkbox/checkbox";
+export * from "./Command/command";
+export * from "./ColorPicker/color-picker";
+export * from "./ColorSwatch/color-swatch";
+export * from "./Combobox/combobox";
+export * from "./Container/container";
+// Export * from "./DatePicker/date-picker";
+export * from "./Dialog/dialog";
+export * from "./Drawer/drawer";
+export * from "./Field/field";
+export * from "./Grid/grid";
+export * from "./Icon/icon";
+export * from "./IconButton";
+export * from "./CopyButton";
+export * from "./CloseButton";
+export * from "./Input/input";
+export * from "./InputGroup/input-group";
+export * from "./OTPField/otp-field";
+export * from "./Menu/menu";
+export * from "./Popover/popover";
+export * from "./Progress/progress";
+export * from "./Radio/radio";
+export * from "./ScrollArea/scroll-area";
+export * from "./SegmentedControl/segmented-control";
+export * from "./Select/select";
+export * from "./Separator/separator";
+export * from "./Sheet/sheet";
+export * from "./Slider/slider";
+export * from "./Spinner/spinner";
+export * from "./Splitter/splitter";
+export * from "./Stack/stack";
+export * from "./Surface/surface";
+export * from "./Switch/switch";
+export * from "./Table/table";
+export * from "./Tabs/tabs";
+export * from "./Text/text";
+export * from "./Textarea/textarea";
+export * from "./Toggle/toggle";
+export * from "./ToggleGroup/toggle-group";

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+
+export * from "./components/Text";

package/src/utils/drawer-styles.css.ts

@@ -0,0 +1,85 @@
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+import { style } from "@vanilla-extract/css";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "200ms",
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  display: "grid",
+  gridTemplateRows: "1fr auto 3fr",
+  justifyItems: "center",
+  padding: tokenVars.spacing.md,
+  boxSizing: "border-box",
+});
+
+export const popup = style({
+  position: "relative",
+  gridRowStart: 2,
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  maxWidth: "28rem",
+  minHeight: 0,
+  maxHeight: "calc(100svh - 80px)",
+  transformOrigin: "center",
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.default,
+  backgroundColor: semanticVars.surface.default,
+  color: semanticVars.text.primary,
+  boxSizing: "border-box",
+  opacity: "calc(1 - var(--nested-dialogs))",
+  outline: "none",
+  boxShadow: tokenVars.shadow.lg,
+  transitionProperty: "opacity, translate",
+  transitionDuration: "200ms",
+  transitionTimingFunction: "ease-in-out",
+  willChange: "transform",
+  "::before": {
+    content: '""',
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    borderRadius: "calc(16px - 1px)",
+    boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+  },
+});
+
+export const viewportShellBottomStickOnMobile = style({
+  "@media": {
+    "(max-width: 768px)": {
+      display: "flex",
+      alignItems: "flex-end",
+      justifyContent: "center",
+      padding: tokenVars.spacing.sm,
+      paddingBottom: 0,
+    },
+  },
+});
+
+export const closeButton = style({
+  position: "absolute",
+  top: tokenVars.spacing.xs,
+  insetInlineEnd: tokenVars.spacing.xs,
+});
+
+export const popupBottomStickOnMobile = style({
+  "@media": {
+    "(max-width: 768px)": {
+      width: "100%",
+      maxWidth: "100%",
+      maxHeight: "70svh",
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+});

package/src/utils/heights.ts

@@ -0,0 +1,16 @@
+export type NamedHeight =
+  | "5svh"
+  | "10svh"
+  | "15svh"
+  | "25svh"
+  | "40svh"
+  | "60svh"
+  | "75svh"
+  | "90svh"
+  | "full"
+  | "screen"
+  | "none";
+
+export function applyBoxHeightStyle(_height: unknown): undefined {
+  return undefined;
+}

package/src/utils/sprinkles.css.ts

@@ -0,0 +1,197 @@
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
+import { colors, containerWidths, responsiveConditions, spacing } from "./sprinkles.tokens";
+
+const layoutProperties = defineProperties({
+  properties: {
+    width: { auto: "auto", full: "100%", fit: "fit-content" },
+    maxWidth: containerWidths,
+    height: { auto: "auto", full: "100%", fit: "fit-content" },
+    maxHeight: {
+      "5svh": "5svh",
+      "10svh": "10svh",
+      "15svh": "15svh",
+      "25svh": "25svh",
+      "40svh": "40svh",
+      "60svh": "60svh",
+      "75svh": "75svh",
+      "90svh": "90svh",
+      full: "100%",
+      screen: "100svh",
+      none: "none",
+    },
+    borderRadius: {
+      default: tokenVars.borderRadius.default,
+      none: "0",
+      full: "9999px",
+      xxs: tokenVars.borderRadius.xxs,
+      xs: tokenVars.borderRadius.xs,
+      sm: tokenVars.borderRadius.sm,
+      md: tokenVars.borderRadius.md,
+      lg: tokenVars.borderRadius.lg,
+      xl: tokenVars.borderRadius.xl,
+      xxl: tokenVars.borderRadius.xxl,
+      xxxl: tokenVars.borderRadius.xxxl,
+    },
+    fontSize: spacing,
+  },
+  shorthands: {
+    radius: ["borderRadius"],
+  },
+});
+
+const colorProperties = defineProperties({
+  properties: {
+    color: colors,
+    backgroundColor: {
+      primary: semanticVars.interactive.primary.default,
+      primaryHover: semanticVars.interactive.primary.hover,
+      primaryActive: semanticVars.interactive.primary.active,
+      secondary: semanticVars.interactive.secondary.default,
+      secondaryHover: semanticVars.interactive.secondary.hover,
+      secondaryActive: semanticVars.interactive.secondary.active,
+      surface: semanticVars.surface.default,
+      canvas: semanticVars.background.default,
+      subtle: semanticVars.background.subtle,
+      default: "inherit",
+      disabled: semanticVars.background.subtle,
+      error: semanticVars.status.dangerBg,
+      success: semanticVars.status.successBg,
+      warning: semanticVars.status.warningBg,
+      info: semanticVars.status.infoBg,
+    },
+    borderColor: colors,
+  },
+});
+
+const flexProperties = defineProperties({
+  conditions: responsiveConditions,
+  defaultCondition: "base",
+  properties: {
+    flex: ["none", 1],
+    flexGrow: { 0: 0, 1: 1 },
+    flexShrink: { 0: 0, 1: 1 },
+    display: ["block", "flex", "grid", "inline-flex", "none"],
+    flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+    gap: spacing,
+  },
+  shorthands: {
+    direction: ["flexDirection"],
+    grow: ["flexGrow"],
+    shrink: ["flexShrink"],
+  },
+});
+
+const positionProperties = defineProperties({
+  properties: {
+    zIndex: {
+      "0": 0,
+      "1": 1,
+      "-1": -1,
+      base: 0,
+      raised: 100,
+      floating: 1000,
+      sticky: 1100,
+      overlay: 1200,
+      popover: 1300,
+      modal: 1400,
+      toast: 1500,
+      tooltip: 1600,
+    },
+    position: ["static", "relative", "absolute", "fixed", "sticky"],
+    top: spacing,
+    bottom: spacing,
+    left: spacing,
+    right: spacing,
+    overflow: ["scroll", "visible", "hidden", "auto"],
+  },
+});
+
+const responsiveSpacingProperties = defineProperties({
+  conditions: responsiveConditions,
+  defaultCondition: "base",
+  properties: {
+    paddingTop: spacing,
+    paddingBottom: spacing,
+    paddingLeft: spacing,
+    paddingRight: spacing,
+    marginTop: spacing,
+    marginBottom: spacing,
+    marginLeft: spacing,
+    marginRight: spacing,
+  },
+  shorthands: {
+    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    p: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    px: ["paddingLeft", "paddingRight"],
+    py: ["paddingTop", "paddingBottom"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    m: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    marginX: ["marginLeft", "marginRight"],
+    mx: ["marginLeft", "marginRight"],
+    my: ["marginTop", "marginBottom"],
+    marginY: ["marginTop", "marginBottom"],
+  },
+});
+
+/* ── Grid properties ── */
+
+const columnValues: Record<number, string> = {};
+for (let i = 1; i <= 12; i++) {
+  columnValues[i] = `repeat(${i}, minmax(0, 1fr))`;
+}
+
+const gridProperties = defineProperties({
+  conditions: responsiveConditions,
+  defaultCondition: "base",
+  properties: {
+    gridTemplateColumns: columnValues,
+    gridAutoFlow: {
+      row: "row",
+      column: "column",
+      dense: "dense",
+      "row dense": "row dense",
+      "column dense": "column dense",
+    },
+    rowGap: spacing,
+    columnGap: spacing,
+  },
+  shorthands: {
+    columns: ["gridTemplateColumns"],
+    flow: ["gridAutoFlow"],
+    gap: ["rowGap", "columnGap"],
+  },
+});
+const alignmentProperties = defineProperties({
+  conditions: responsiveConditions,
+  defaultCondition: "base",
+  properties: {
+    alignItems: ["start", "center", "end", "stretch", "baseline"],
+    justifyItems: ["start", "center", "end", "stretch"],
+    justifyContent: ["center", "start", "end", "stretch", "between", "around", "evenly"],
+  },
+  shorthands: {
+    align: ["alignItems"],
+    justify: ["justifyItems", "justifyContent"],
+  },
+});
+export const baseSprinkles = createSprinkles(
+  layoutProperties,
+  responsiveSpacingProperties,
+  colorProperties,
+  flexProperties,
+  positionProperties,
+  alignmentProperties,
+);
+
+export const gridSprinkles = createSprinkles(gridProperties, alignmentProperties);
+
+export type GridSprinkles = Parameters<typeof gridSprinkles>[0];
+
+export type BaseSprinkles = Parameters<typeof baseSprinkles>[0] & {
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  withBorder?: boolean;
+};

package/src/utils/sprinkles.tokens.ts

@@ -0,0 +1,74 @@
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const spacing = {
+  none: "0",
+  xxs: tokenVars.spacing.xxs,
+  xs: tokenVars.spacing.xs,
+  sm: tokenVars.spacing.sm,
+  md: tokenVars.spacing.md,
+  lg: tokenVars.spacing.lg,
+  xl: tokenVars.spacing.xl,
+  huge: tokenVars.spacing.huge,
+  xxl: tokenVars.spacing.xxl,
+  xxxl: tokenVars.spacing.xxxl,
+  massive: tokenVars.spacing.massive,
+  "0": tokenVars.spacing["0"],
+  "0.5": tokenVars.spacing["0.5"],
+  "1": tokenVars.spacing["1"],
+  "2": tokenVars.spacing["2"],
+  "3": tokenVars.spacing["3"],
+  "4": tokenVars.spacing["4"],
+  "5": tokenVars.spacing["5"],
+  "6": tokenVars.spacing["6"],
+  "7": tokenVars.spacing["7"],
+  "8": tokenVars.spacing["8"],
+  "9": tokenVars.spacing["9"],
+  "10": tokenVars.spacing["10"],
+  "12": tokenVars.spacing["12"],
+  "16": tokenVars.spacing["16"],
+  "20": tokenVars.spacing["20"],
+  "24": tokenVars.spacing["24"],
+  "32": tokenVars.spacing["32"],
+  "40": tokenVars.spacing["40"],
+  "48": tokenVars.spacing["48"],
+};
+
+export const containerWidths = {
+  xxs: "240px",
+  xs: "320px",
+  sm: "480px",
+  md: "640px",
+  lg: "768px",
+  xl: "1024px",
+  xxl: "1280px",
+  xxxl: "1440px",
+  480: "480px",
+  640: "640px",
+  400: "400px",
+  560: "560px",
+  full: "100%",
+  screen: "100%",
+  viewport: "90svw",
+  maxViewport: "98svw",
+};
+
+export const colors = {
+  primary: semanticVars.text.primary,
+  default: "currentColor",
+  secondary: semanticVars.text.secondary,
+  disabled: semanticVars.text.disabled,
+  inverse: semanticVars.text.inverse,
+  link: semanticVars.interactive.primary.default,
+  error: semanticVars.status.danger.default,
+  success: semanticVars.status.success.default,
+  warning: semanticVars.status.warning.default,
+  info: semanticVars.status.info.default,
+} as const;
+
+export const responsiveConditions = {
+  base: {},
+  sm: { "@media": "screen and (min-width: 640px)" },
+  md: { "@media": "screen and (min-width: 768px)" },
+  lg: { "@media": "screen and (min-width: 1280px)" },
+  xl: { "@media": "screen and (min-width: 1536px)" },
+} as const;

package/src/utils/types.ts

@@ -0,0 +1,10 @@
+import { useRender } from "@base-ui/react/use-render";
+
+export type PropsWithClassName<T> = Omit<T, "className" | "style"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export type PropsWithStylex<T> = PropsWithClassName<T>;
+
+export type _BaseDivProps = useRender.ComponentProps<"div">;

package/src/utils/ve-style.utils.ts

@@ -0,0 +1,51 @@
+import {
+  baseSprinkles,
+  gridSprinkles,
+  type BaseSprinkles,
+  type GridSprinkles,
+} from "./sprinkles.css";
+
+const BASE_SPRINKLE_PROPERTIES = baseSprinkles.properties;
+type BasePropKeys = keyof BaseSprinkles;
+type GridPropKeys = keyof GridSprinkles;
+const GRID_SPRINKLE_PROPERTIES = gridSprinkles.properties;
+export function applyBaseSprinkles(
+  props: Record<string, unknown>,
+): [string, Record<string, unknown>] {
+  const sprinkleProps: BaseSprinkles = {};
+  const htmlProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props) as [BasePropKeys, any][]) {
+    if (key === "fullWidth") {
+      if (props[key]) {
+        sprinkleProps.width = "full";
+      }
+    } else if (key === "withBorder") {
+      if (props[key]) {
+        sprinkleProps.borderRadius = sprinkleProps.borderRadius || "default";
+        sprinkleProps.borderColor = sprinkleProps.borderColor || "default";
+      }
+    } else if (key === "fullHeight") {
+      continue;
+    } else if (BASE_SPRINKLE_PROPERTIES.has(key)) {
+      sprinkleProps[key as BasePropKeys] = value;
+    } else {
+      htmlProps[key] = value;
+    }
+  }
+  sprinkleProps.borderRadius = sprinkleProps.borderRadius || "default";
+  return [baseSprinkles(sprinkleProps), htmlProps];
+}
+export function applyGridSprinkles(
+  props: Record<string, unknown>,
+): [string, Record<string, unknown>] {
+  const sprinkleProps: GridSprinkles = {};
+  const htmlProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props) as [GridPropKeys, any][]) {
+    if (GRID_SPRINKLE_PROPERTIES.has(key)) {
+      sprinkleProps[key as GridPropKeys] = value;
+    } else {
+      htmlProps[key] = value;
+    }
+  }
+  return [gridSprinkles(sprinkleProps), htmlProps];
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@blenx-dev/config/tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": []
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}