@blenx-dev/components 0.0.2 → 0.0.3

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

@@ -1,131 +0,0 @@
-"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

@@ -1,53 +0,0 @@
-// ─── 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

@@ -1,41 +0,0 @@
-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

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

package/src/utils/heights.ts

@@ -1,16 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,10 +0,0 @@
-{
-  "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

@@ -1,52 +0,0 @@
-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/,
-        /^@vanilla-extract\/recipes/,
-        /^@vanilla-extract\/css/,
-        /^@vanilla-extract\/recipes/,
-        /^@vanilla-extract\/sprinkles/,
-        /react-colorful/,
-        /react-day-picker/,
-        /clsx/,
-      ],
-
-      output: {
-        preserveModules: true,
-        preserveModulesRoot: "src",
-
-        entryFileNames: "[name].js",
-        chunkFileNames: "[name].js",
-
-        assetFileNames: "assets/[name][extname]",
-      },
-    },
-  },
-});