neba 0.0.1 → 1.1.0

package/dist/types.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Shared prop vocabulary for every Neba component.
+ *
+ * These names and values are deliberately generic: a `size` of `md` or a
+ * `color` of `primary` has to mean the same thing on a Button, a Chip, a
+ * TextField or a Dialog. Components pick the subset they need from here and
+ * never invent a parallel spelling of the same idea.
+ */
+/** Scale of a component. `md` is the desktop default. */
+export type NebaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Semantic color role. Maps to a token family in `styles.css`. */
+export type NebaColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * How tightly a component packs its content. Only spacing changes — never the
+ * type scale or the control's own height — so a compact and a default control
+ * of the same `size` still line up on a shared baseline.
+ */
+export type NebaDensity = 'default' | 'compact';
+/**
+ * Which way a component runs. `horizontal` everywhere it is offered, because a
+ * vertical control is the exception and an exception should have to be asked
+ * for. Divider, ButtonGroup, RadioGroup and Slider all read this.
+ */
+export type NebaOrientation = 'horizontal' | 'vertical';
+/**
+ * Which edge of an anchor something is placed against. Tooltip reads this, and
+ * so does anything else that hangs a popup off an element.
+ *
+ * Logical rather than physical — `start`/`end` would be wrong here, because a
+ * tooltip above a button is above it in every writing direction.
+ */
+export type NebaSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Where something sits along the axis it is not placed on: a tooltip against
+ * its trigger, a label set into a divider, the content of a table cell.
+ *
+ * `start`/`end` rather than `left`/`right` because these flip under RTL, which
+ * is the whole reason the library never says `left`.
+ */
+export type NebaAlign = 'start' | 'center' | 'end';
+/**
+ * How a bar sits in the page's scroll.
+ *
+ * The three CSS `position` values that mean something for a bar, spelled the
+ * way CSS spells them — this is one of the few ideas where inventing a nicer
+ * word (`pinned`, `floating`) would only make a reader look up which CSS it
+ * maps to. Toolbar and Pill both read it.
+ *
+ * - `static` — in the flow, scrolling away with the content.
+ * - `sticky` — in the flow until the edge, then held there.
+ * - `fixed` — out of the flow entirely, against the viewport.
+ */
+export type NebaPosition = 'static' | 'sticky' | 'fixed';
+/**
+ * Which corner of a box something is pinned to. Badge reads this.
+ *
+ * Deliberately one word built out of the two the library already has —
+ * `top`/`bottom` from `NebaSide`, `start`/`end` from `NebaAlign` — rather than
+ * a pair of props. A corner is one decision, and splitting it into two would
+ * let a caller spell `{ vertical: 'left' }`.
+ */
+export type NebaCorner = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * Which day a week starts on, counted the way `Date.prototype.getDay` counts it:
+ * Sunday is `0`, Saturday is `6`.
+ *
+ * A number rather than `'sunday' | 'monday' | …`, and for once not because the
+ * number is shorter. Every date API in the platform already speaks this
+ * encoding, so a caller computing the value rather than typing it in — from a
+ * user setting, from `Intl`, from a row in a database — has nothing to translate.
+ * The pickers default it from the locale, so it is rarely written down at all.
+ */
+export type NebaWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The viewport widths the layout components branch on, smallest first.
+ *
+ * Deliberately the same five names as `NebaSize`, and deliberately *not* the
+ * same idea: a `size` of `md` is how big a control is, a breakpoint of `md` is
+ * how wide the window is. They share a spelling because a caller who has
+ * learned one ladder should not have to learn a second set of words for the
+ * other, and because every CSS framework worth copying already spells them this
+ * way.
+ *
+ * The widths are Tailwind's own defaults — `sm` 40rem, `md` 48rem, `lg` 64rem,
+ * `xl` 80rem — so a Neba grid and a `md:` utility change at the same moment.
+ * `xs` is 0: it is the value with no media query around it.
+ */
+export type NebaBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * A value that may differ per breakpoint.
+ *
+ * A bare value applies from `xs` up; a partial map applies each entry from its
+ * own breakpoint up, so `{ xs: 12, md: 6 }` is full width until 48rem and half
+ * from there on. There is no `NebaBreakpoint` that means "only at this width" —
+ * every entry is a floor, which is what makes a two-entry map enough to
+ * describe most layouts.
+ */
+export type NebaResponsive<T> = T | Partial<Record<NebaBreakpoint, T>>;
+/**
+ * How a row distributes the space it has left over along its main axis.
+ *
+ * The three positional values are `NebaAlign`'s — logical, so they flip under
+ * RTL — and the three distribution values keep their CSS spelling, because
+ * `space-between` is what the property is called and inventing `between` would
+ * be a second name for something that already has one.
+ */
+export type NebaJustifyContent = NebaAlign | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+/**
+ * How items sit across the axis they are laid out on. `stretch` is the default
+ * everywhere it is offered: a row of cards is a row of cards of one height.
+ */
+export type NebaAlignItems = NebaAlign | 'stretch' | 'baseline';
+/** The same, for one item overriding the row around it. */
+export type NebaAlignSelf = NebaAlignItems | 'auto';
+/**
+ * Visual weight of a component's surface.
+ *
+ * - `solid` — filled, carries the color. One per view, for the primary action.
+ * - `outline` — translucent surface with a hairline border. Secondary actions.
+ * - `text` — no surface until hovered. Tertiary/inline actions.
+ */
+export type NebaVariant = 'solid' | 'outline' | 'text';
+/**
+ * How far a surface sits off the page, as a drop shadow.
+ *
+ * `0` is the default everywhere and means flat — the acrylic edge alone is what
+ * separates the control from its background. Raise it only for surfaces that
+ * genuinely float above the content around them. Hovering adds a level and
+ * pressing removes one, so a flat control still answers a press without moving.
+ */
+export type NebaElevation = 0 | 1 | 2 | 3;
+/** Style props shared by most components; spread into their own prop types. */
+export interface NebaStyleProps {
+    /** @default 'solid' */
+    variant?: NebaVariant;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+}

package/dist/types.js

@@ -0,0 +1,8 @@
+/**
+ * Shared prop vocabulary for every Neba component.
+ *
+ * These names and values are deliberately generic: a `size` of `md` or a
+ * `color` of `primary` has to mean the same thing on a Button, a Chip, a
+ * TextField or a Dialog. Components pick the subset they need from here and
+ * never invent a parallel spelling of the same idea.
+ */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "neba",
-  "version": "0.0.1",
-  "description": "",
+  "version": "1.1.0",
+  "description": "A comprehensive React UI component library — buttons, fields, menus, dialogs, tables and much more — accessible and themeable, sharing one prop vocabulary and a translucent acrylic design language. ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
   "author": "CDGet <jooy2.contact@gmail.com>",
@@ -15,16 +15,20 @@
     "url": "https://github.com/jooy2/neba/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && npm run minify",
+    "build": "npm run format:fix && tsc --project tsconfig.prod.json && npm run minify && node scripts/build-styles.mjs",
     "lint": "eslint . --ext .js,.ts .",
     "lint:fix": "eslint . --ext .js,.ts --fix .",
     "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
     "prepare": "npm run build",
     "format": "prettier .",
     "format:fix": "prettier . --write",
-    "docs:dev": "npm run build && vitepress dev docs",
-    "docs:build": "npm run build && vitepress build docs",
-    "docs:serve": "npm run build && npm run docs:build && vitepress serve docs"
+    "docs:changelog": "node scripts/copy-changelog.mjs",
+    "docs:dev": "npm run build && npm run docs:changelog && vitepress dev docs",
+    "docs:build": "npm run build && npm run docs:changelog && vitepress build docs",
+    "docs:serve": "npm run build && npm run docs:build && vitepress serve docs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json && tsc --project docs/tsconfig.json"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -40,7 +44,9 @@
       "types": "./dist/types.d.ts",
       "module": "./dist/types.js",
       "default": "./dist/types.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.css": "./dist/tailwind.css"
   },
   "typesVersions": {
     "*": {
@@ -50,28 +56,91 @@
     }
   },
   "keywords": [
-    "vitepress"
+    "neba",
+    "react",
+    "reactjs",
+    "react-components",
+    "react-ui",
+    "ui",
+    "ui-kit",
+    "ui-library",
+    "ui-components",
+    "component-library",
+    "components",
+    "design-system",
+    "design-language",
+    "frontend",
+    "web",
+    "typescript",
+    "tsx",
+    "esm",
+    "accessible",
+    "accessibility",
+    "a11y",
+    "aria",
+    "wai-aria",
+    "dark-mode",
+    "theming",
+    "responsive",
+    "acrylic",
+    "glass",
+    "glassmorphism",
+    "button",
+    "dialog",
+    "modal",
+    "menu",
+    "select",
+    "combobox",
+    "table",
+    "tabs",
+    "toast",
+    "tooltip",
+    "form"
   ],
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^18.3.27",
-    "@typescript-eslint/parser": "^8.48.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/parser": "^8.65.0",
+    "@vitejs/plugin-react-swc": "^4.3.2",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-n": "^17.23.1",
-    "globals": "^16.5.0",
-    "jiti": "^2.6.1",
-    "prettier": "^3.7.2",
-    "terser-glob": "^1.1.0",
-    "tsx": "^4.20.6",
+    "eslint-plugin-n": "^18.2.2",
+    "globals": "^17.7.0",
+    "jiti": "^2.7.0",
+    "playwright": "^1.61.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.9.6",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "terser-glob": "^1.2.1",
+    "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.1.5",
     "vitepress": "^1.6.4",
-    "vitepress-i18n": "^1.3.4",
-    "vitepress-sidebar": "^1.33.1"
+    "vitepress-i18n": "^1.3.5",
+    "vitepress-sidebar": "^1.36.1",
+    "vitest": "^4.1.10",
+    "vitest-browser-react": "^2.2.0"
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-rc.0"
+    "@base-ui/react": "^1.6.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   }
 }

package/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-onlyBuiltDependencies:
-  - esbuild