@blenx-dev/components 0.0.0

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 ToggleSize,
+  type ToggleVariant,
+} from "../Toggle/toggle";
+import {
+  groupBase,
+  groupHorizontal,
+  groupVertical,
+  groupDefault,
+  groupOutline,
+  outlineItemHorizontal,
+  outlineItemVertical,
+} from "./toggle-group.css";
+
+type ToggleGroupVariant = ToggleVariant;
+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} />;
+}

package/src/components/index.ts

@@ -0,0 +1,53 @@
+// ─── Design System: @/components/ui ───────────────────────────────────────────
+// Components
+
+export * from "./Accordion/accordion";
+export * from "./Alert/alert";
+export * from "./AlertDialog/alert-dialog";
+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/demos/accordion.demo.tsx

@@ -0,0 +1,41 @@
+import { Accordion, Text } from "../components";
+
+export function AccordionDemo() {
+  return (
+    <Accordion.Root>
+      <Accordion.Item value="item-1">
+        <Accordion.Header>
+          <Accordion.Trigger>What is Blenx UI?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Blenx UI is a modern React component library built with StyleX and Base UI.
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="item-2">
+        <Accordion.Header>
+          <Accordion.Trigger>How do I install it?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Install via the shadcn CLI with:{" "}
+            <Text variant="code">npx shadcn@latest add button</Text>
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="item-3">
+        <Accordion.Header>
+          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <Text variant="body2">
+            Yes, all components are built on Base UI primitives with full ARIA support.
+          </Text>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+export const demos = [{ name: "Default", component: AccordionDemo }];

package/src/index.ts

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

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,251 @@
+import { themeContract } from "@blenx-dev/theme/contract";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
+
+export const spacing = {
+  none: "0",
+  xxs: "2px",
+  xxsmall: "2px",
+  xs: "4px",
+  xsmall: "4px",
+  sm: "8px",
+  small: "8px",
+  md: "12px",
+  medium: "12px",
+  lg: "16px",
+  large: "16px",
+  xl: "64px",
+  xlarge: "80px",
+  huge: "96px",
+  "2xl": "96px",
+  "3xl": "128px",
+  massive: "144px",
+} as const;
+
+const containerWidths = {
+  xxs: "240px",
+  xs: "320px",
+  sm: "480px",
+  md: "640px",
+  lg: "768px",
+  xl: "1024px",
+  "2xl": "1280px",
+  "3xl": "1440px",
+  xxsmall: "240px",
+  xsmall: "320px",
+  small: "480px",
+  480: "480px",
+  640: "640px",
+  400: "400px",
+  560: "560px",
+  medium: "640px",
+  large: "768px",
+  xlarge: "1024px",
+  xxlarge: "1280px",
+  xxxlarge: "1440px",
+  massive: "1440px",
+  full: "100%",
+  screen: "100%",
+  viewport: "90svw",
+  maxViewport: "98svw",
+};
+
+const colors = {
+  primary: themeContract.contentPrimary,
+  default: "currentColor",
+  secondary: themeContract.contentSecondary,
+  disabled: themeContract.contentDisabled,
+  error: themeContract.sentimentNegative,
+  success: themeContract.sentimentPositive,
+  warning: themeContract.sentimentWarning,
+  info: themeContract.sentimentInfo,
+} as const;
+
+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;
+
+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: {
+      none: "0",
+      xxsmall: "2px",
+      xsmall: "4px",
+      small: "8px",
+      medium: "12px",
+      large: "16px",
+      xlarge: "24px",
+      xxlarge: "32px",
+      full: "9999px",
+      xxs: "2px",
+      xs: "4px",
+      md: "12px",
+      lg: "16px",
+      xl: "24px",
+      xxl: "32px",
+    },
+  },
+  shorthands: {
+    radius: ["borderRadius"],
+  },
+});
+
+const colorProperties = defineProperties({
+  properties: {
+    color: colors,
+    backgroundColor: {
+      primary: themeContract.primary,
+      default: "inherit",
+      secondary: themeContract.secondary,
+      disabled: themeContract.contentDisabled,
+      error: themeContract.sentimentNegativeSubtle,
+      success: themeContract.sentimentPositiveSubtle,
+      warning: themeContract.sentimentWarningSubtle,
+      info: themeContract.sentimentInfoSubtle,
+    },
+    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"],
+    justifyContent: ["center", "start", "end", "stretch", "between", "around", "evenly"],
+    alignItems: ["center", "start", "end", "stretch", "baseline"],
+  },
+  shorthands: {
+    direction: ["flexDirection"],
+    justify: ["justifyContent"],
+    align: ["alignItems"],
+    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: {
+    padding: spacing,
+    paddingTop: spacing,
+    paddingBottom: spacing,
+    paddingLeft: spacing,
+    paddingRight: spacing,
+    margin: spacing,
+    marginTop: spacing,
+    marginBottom: spacing,
+    marginLeft: spacing,
+    marginRight: spacing,
+    gap: spacing,
+    rowGap: spacing,
+    columnGap: spacing,
+  },
+  shorthands: {
+    p: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    px: ["paddingLeft", "paddingRight"],
+    py: ["paddingTop", "paddingBottom"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    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",
+    },
+    alignItems: ["start", "center", "end", "stretch", "baseline"],
+    justifyItems: ["start", "center", "end", "stretch"],
+  },
+  shorthands: {
+    columns: ["gridTemplateColumns"],
+    flow: ["gridAutoFlow"],
+    align: ["alignItems"],
+    justify: ["justifyItems"],
+  },
+});
+
+export const gridSprinkles = createSprinkles(responsiveSpacingProperties, gridProperties);
+
+export const baseSprinkles = createSprinkles(
+  layoutProperties,
+  responsiveSpacingProperties,
+  colorProperties,
+  flexProperties,
+  positionProperties,
+);
+
+export type BaseSprinkles = Parameters<typeof baseSprinkles>[0] & {
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  withBorder?: boolean;
+};

package/src/utils/types.ts

@@ -0,0 +1,20 @@
+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">;
+
+export type BorderRadiusProp =
+  | "none"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge"
+  | "full";

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

@@ -0,0 +1,24 @@
+import { baseSprinkles } from "./sprinkles.css";
+const BASE_SPRINKLE_KEYS = [...baseSprinkles.properties, "withBorder", "fullWidth"];
+const BASE_SPRINKLE_KEYS_SET = new Set<string>(BASE_SPRINKLE_KEYS);
+type BasePropKeys = (typeof BASE_SPRINKLE_KEYS)[number];
+export function applyBaseSprinkles(
+  props: Record<string, unknown>,
+): [string, Record<string, unknown>] {
+  const sprinkleProps: Record<BasePropKeys, unknown> = {};
+  const htmlProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "fullWidth" && props[key]) {
+      sprinkleProps.width = "full";
+    } else if (key === "withBorder" && props[key]) {
+      sprinkleProps.borderColor = "default";
+    } else if (BASE_SPRINKLE_KEYS_SET.has(key)) {
+      sprinkleProps[key as BasePropKeys] = value;
+    } else {
+      htmlProps[key] = value;
+    }
+  }
+  sprinkleProps.color = sprinkleProps.color || "default";
+  sprinkleProps.backgroundColor = sprinkleProps.backgroundColor || "default";
+  return [baseSprinkles(sprinkleProps), htmlProps];
+}

package/tsconfig.build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "incremental": false,
+    "composite": false,
+    "skipLibCheck": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/src",
+    "rootDir": "src",
+    "noEmitOnError": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

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"]
+}

package/vite.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(),
+    dts({
+      entryRoot: "src",
+      outDirs: "dist",
+    }),
+  ],
+
+  build: {
+    target: "esnext",
+    minify: false,
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+    },
+
+    rollupOptions: {
+      external: [
+        /^react$/,
+        /^react-dom$/,
+        /^react\/jsx-runtime$/,
+        /^@stylexjs\/stylex$/,
+        /^@base-ui\/react/,
+        /^@phosphor-icons\/react/,
+        /^@tanstack\/react-table/,
+        /^@tanstack\/react-query/,
+        /react-colorful/,
+        /react-day-picker/,
+      ],
+
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: "src",
+
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+
+        assetFileNames: "assets/[name][extname]",
+      },
+    },
+  },
+});