@joshwilkerson/flex-ui 1.0.0-alpha.0

package/dist/react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime");function t(e,a){if(a===void 0)return{};const s={};if(typeof a=="object"&&a!==null&&"base"in a){s[`data-${e}`]=String(a.base);const n=["xs","sm","md","lg","xl"];for(const i of n)a[i]!==void 0&&(s[`data-${e}-${i}`]=String(a[i]))}else s[`data-${e}`]=String(a);return s}function x({as:e="div",axis:a,gap:s,rowGap:n,columnGap:i,justify:r,align:o,alignContent:d,wrap:l,reverse:c,inline:m,className:p="",children:b,onClick:u}){const j={...t("axis",a),...t("gap",s),...t("row-gap",n),...t("column-gap",i),...t("justify",r),...t("align",o),...t("align-content",d),...t("wrap",l),...c?{"data-reverse":""}:{},...m?{"data-inline":""}:{}};return f.jsx(e,{"data-flex":"",className:p||void 0,...j,onClick:u,children:b})}x.displayName="Flex";function g({as:e="div",grow:a,shrink:s,basis:n,alignSelf:i,order:r,className:o="",children:d,onClick:l}){const c={...t("grow",a),...t("shrink",s),...t("basis",n),...t("align-self",i),...t("order",r)};return f.jsx(e,{"data-flex-item":"",className:o||void 0,...c,onClick:l,children:d})}g.displayName="FlexItem";exports.Flex=x;exports.FlexItem=g;

package/dist/react.d.ts

@@ -0,0 +1,95 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare type AlignContentValue = "start" | "end" | "center" | "stretch" | "between" | "around" | "evenly";
+
+declare type AlignSelfValue = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
+
+declare type AlignValue = "start" | "end" | "center" | "stretch" | "baseline";
+
+declare type AxisValue = "horizontal" | "vertical";
+
+declare type Breakpoint = keyof typeof breakpoints;
+
+declare const breakpoints: {
+    readonly xs: 480;
+    readonly sm: 600;
+    readonly md: 720;
+    readonly lg: 960;
+    readonly xl: 1200;
+};
+
+export declare function Flex({ as: Component, axis, gap, rowGap, columnGap, justify, align, alignContent, wrap, reverse, inline, className, children, onClick, }: FlexProps): JSX.Element;
+
+export declare namespace Flex {
+    var displayName: string;
+}
+
+export declare function FlexItem({ as: Component, grow, shrink, basis, alignSelf, order, className, children, onClick, }: FlexItemProps): JSX.Element;
+
+export declare namespace FlexItem {
+    var displayName: string;
+}
+
+export declare interface FlexItemProps {
+    /** HTML element to render as */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Flex grow factor */
+    grow?: ResponsiveValue<number>;
+    /** Flex shrink factor */
+    shrink?: ResponsiveValue<number>;
+    /** Flex basis */
+    basis?: ResponsiveValue<string>;
+    /** Align self */
+    alignSelf?: ResponsiveValue<AlignSelfValue>;
+    /** Order */
+    order?: ResponsiveValue<number | "first" | "last" | "none">;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+}
+
+export declare interface FlexProps {
+    /** HTML element to render as */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Flex axis direction */
+    axis?: ResponsiveValue<AxisValue>;
+    /** Gap between items */
+    gap?: ResponsiveValue<SpacingValue>;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: ResponsiveValue<SpacingValue>;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: ResponsiveValue<SpacingValue>;
+    /** Main axis alignment */
+    justify?: ResponsiveValue<JustifyValue>;
+    /** Cross axis alignment */
+    align?: ResponsiveValue<AlignValue>;
+    /** Multi-line alignment */
+    alignContent?: ResponsiveValue<AlignContentValue>;
+    /** Wrap behavior */
+    wrap?: ResponsiveValue<WrapValue>;
+    /** Reverse direction */
+    reverse?: boolean;
+    /** Use inline-flex */
+    inline?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+}
+
+declare type JustifyValue = "start" | "end" | "center" | "between" | "around" | "evenly";
+
+declare type ResponsiveValue<T> = T | ({
+    base: T;
+} & Partial<Record<Breakpoint, T>>);
+
+declare type SpacingValue = number | `${number}` | "half" | "fourth";
+
+declare type WrapValue = "nowrap" | "wrap" | "wrap-reverse";
+
+export { }

package/dist/react.js

@@ -0,0 +1,87 @@
+import { jsx as c } from "react/jsx-runtime";
+function t(i, a) {
+  if (a === void 0) return {};
+  const s = {};
+  if (typeof a == "object" && a !== null && "base" in a) {
+    s[`data-${i}`] = String(a.base);
+    const r = ["xs", "sm", "md", "lg", "xl"];
+    for (const n of r)
+      a[n] !== void 0 && (s[`data-${i}-${n}`] = String(a[n]));
+  } else
+    s[`data-${i}`] = String(a);
+  return s;
+}
+function y({
+  as: i = "div",
+  axis: a,
+  gap: s,
+  rowGap: r,
+  columnGap: n,
+  justify: o,
+  align: e,
+  alignContent: d,
+  wrap: f,
+  reverse: l,
+  inline: g,
+  className: p = "",
+  children: x,
+  onClick: m
+}) {
+  const b = {
+    ...t("axis", a),
+    ...t("gap", s),
+    ...t("row-gap", r),
+    ...t("column-gap", n),
+    ...t("justify", o),
+    ...t("align", e),
+    ...t("align-content", d),
+    ...t("wrap", f),
+    ...l ? { "data-reverse": "" } : {},
+    ...g ? { "data-inline": "" } : {}
+  };
+  return /* @__PURE__ */ c(
+    i,
+    {
+      "data-flex": "",
+      className: p || void 0,
+      ...b,
+      onClick: m,
+      children: x
+    }
+  );
+}
+y.displayName = "Flex";
+function F({
+  as: i = "div",
+  grow: a,
+  shrink: s,
+  basis: r,
+  alignSelf: n,
+  order: o,
+  className: e = "",
+  children: d,
+  onClick: f
+}) {
+  const l = {
+    ...t("grow", a),
+    ...t("shrink", s),
+    ...t("basis", r),
+    ...t("align-self", n),
+    ...t("order", o)
+  };
+  return /* @__PURE__ */ c(
+    i,
+    {
+      "data-flex-item": "",
+      className: e || void 0,
+      ...l,
+      onClick: f,
+      children: d
+    }
+  );
+}
+F.displayName = "FlexItem";
+export {
+  y as Flex,
+  F as FlexItem
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@joshwilkerson/flex-ui",
+  "version": "1.0.0-alpha.0",
+  "type": "module",
+  "description": "CSS-first responsive flexbox layouts with data attributes and optional React components",
+  "bin": {
+    "flex-ui": "./bin/flex-ui.ts"
+  },
+  "main": "./dist/flex-ui.css",
+  "exports": {
+    ".": "./dist/flex-ui.css",
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js",
+      "require": "./dist/config.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "bin",
+    "scripts",
+    "src/tokens",
+    "src/config.ts"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test:unit": "jest",
+    "test:visual": "playwright test",
+    "test": "npm run test:unit && npm run test:visual",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "figlet": "^1.11.0",
+    "inquirer": "^12.11.1",
+    "tsx": "^4.21.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@playwright/test": "^1.59.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/figlet": "^1.7.0",
+    "@types/inquirer": "^9.0.9",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "ts-jest": "^29.4.9",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "css",
+    "flexbox",
+    "layout",
+    "responsive",
+    "data-attributes",
+    "react",
+    "flex"
+  ],
+  "license": "MIT"
+}

package/scripts/cli.ts

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+/**
+ * Flex UI CLI
+ *
+ * Usage:
+ *   npx flex-ui           Interactive customization + CSS generation
+ *   npx flex-ui --help    Show help
+ */
+
+import inquirer from "inquirer"
+import figlet from "figlet"
+
+const DEFAULTS = {
+  breakpoints: { xs: 480, sm: 600, md: 720, lg: 960, xl: 1200 },
+  unit: "8px",
+  scale: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+  named: { fourth: 0.25, half: 0.5 },
+  output: "./flex-ui.css",
+}
+
+function parseUnit(unit: string): { value: number; suffix: string } | null {
+  const match = unit.match(/^([\d.]+)(.+)$/)
+  if (!match) return null
+  return { value: parseFloat(match[1]), suffix: match[2] }
+}
+
+function deriveSpacing(unit: string): Record<string | number, string> {
+  const parsed = parseUnit(unit)
+  if (!parsed) throw new Error(`Invalid unit: ${unit}`)
+
+  const spacing: Record<string | number, string> = {}
+
+  for (const multiplier of DEFAULTS.scale) {
+    const val = parsed.value * multiplier
+    spacing[multiplier] = val === 0 ? "0" : `${val}${parsed.suffix}`
+  }
+
+  for (const [name, multiplier] of Object.entries(DEFAULTS.named)) {
+    const val = parsed.value * multiplier
+    spacing[name] = val === 0 ? "0" : `${val}${parsed.suffix}`
+  }
+
+  return spacing
+}
+
+function printBanner(): void {
+  const banner = figlet.textSync("FLEX-UI", {
+    font: "ANSI Shadow",
+  })
+  console.log()
+  console.log(banner)
+  console.log()
+}
+
+async function run(): Promise<void> {
+  printBanner()
+
+  // Breakpoints
+  console.log("📱 Breakpoints\n")
+  const bpAnswers = await inquirer.prompt(
+    Object.entries(DEFAULTS.breakpoints).map(([name, defaultVal]) => ({
+      type: "input" as const,
+      name,
+      message: `${name} (px)`,
+      default: String(defaultVal),
+      validate: (val: string) => {
+        const n = parseInt(val, 10)
+        return isNaN(n) || n < 0 ? "Enter a valid positive number" : true
+      },
+    })),
+  )
+
+  const breakpoints: Record<string, number> = {}
+  for (const [name, val] of Object.entries(bpAnswers)) {
+    breakpoints[name] = parseInt(val as string, 10)
+  }
+
+  // Breakpoints summary table
+  console.log()
+  const bpTable: Record<string, string> = {}
+  for (const [name, val] of Object.entries(breakpoints)) {
+    bpTable[name] = `${val}px`
+  }
+  console.table(bpTable)
+
+  // Spacing
+  console.log("\n📏 Spacing\n")
+  const { unit } = await inquirer.prompt([
+    {
+      type: "input",
+      name: "unit",
+      message: "Base unit",
+      default: DEFAULTS.unit,
+      validate: (val: string) => {
+        return parseUnit(val) ? true : 'Use a format like "8px" or "0.5rem"'
+      },
+    },
+  ])
+
+  // Preview derived scale
+  const spacing = deriveSpacing(unit)
+  console.log()
+  const scaleTable: Record<string, string> = {}
+  for (const [key, val] of Object.entries(spacing)) {
+    scaleTable[key] = val
+  }
+  console.table(scaleTable)
+
+  // Output
+  console.log()
+  const { output } = await inquirer.prompt([
+    {
+      type: "input",
+      name: "output",
+      message: "Output path",
+      default: DEFAULTS.output,
+    },
+  ])
+
+  // Generate
+  console.log()
+  const { generate } = await import("./generate-flex-css.js")
+  await generate(process.cwd(), {
+    breakpoints,
+    spacing,
+    output,
+  })
+}
+
+function printHelp(): void {
+  printBanner()
+  console.log(`  Usage:`)
+  console.log(
+    `    npx flex-ui             Interactive customization + CSS generation`,
+  )
+  console.log(`    npx flex-ui --help      Show this help`)
+  console.log()
+  console.log(`  Walks you through customizing breakpoints and spacing,`)
+  console.log(`  then generates a CSS file for both React and CSS-only usage.`)
+  console.log()
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2)
+  const command = args[0]
+
+  if (command === "help" || command === "--help" || command === "-h") {
+    printHelp()
+    return
+  }
+
+  if (command) {
+    console.error(`Unknown command: ${command}`)
+    printHelp()
+    process.exit(1)
+  }
+
+  await run()
+}
+
+main().catch((err) => {
+  console.error("Error:", err.message)
+  process.exit(1)
+})