@jarllyng/nostromo 3.1.0

package/dist/tokens.css

@@ -0,0 +1,212 @@
+/* Nostromo UI - Tailwind v4 theme bridge
+ *
+ * Maps the private --nostromo-* token layer (defined by the theme files in
+ * ./themes/) onto the namespaces Tailwind v4 reads to generate utilities.
+ *
+ * `inline` keeps the var() reference in the utility itself, so switching
+ * [data-theme] at runtime re-resolves every utility. The token layer is
+ * deliberately namespaced: naming it --color-* directly would collide with
+ * the variables Tailwind emits here and create a circular reference.
+ */
+
+@theme inline {
+  /* ---- Color scales ---- */
+  --color-brand-50: hsl(var(--nostromo-color-brand-50));
+  --color-brand-100: hsl(var(--nostromo-color-brand-100));
+  --color-brand-200: hsl(var(--nostromo-color-brand-200));
+  --color-brand-300: hsl(var(--nostromo-color-brand-300));
+  --color-brand-400: hsl(var(--nostromo-color-brand-400));
+  --color-brand-500: hsl(var(--nostromo-color-brand-500));
+  --color-brand-600: hsl(var(--nostromo-color-brand-600));
+  --color-brand-700: hsl(var(--nostromo-color-brand-700));
+  --color-brand-800: hsl(var(--nostromo-color-brand-800));
+  --color-brand-900: hsl(var(--nostromo-color-brand-900));
+  --color-brand-950: hsl(var(--nostromo-color-brand-950));
+
+  --color-neutral-50: hsl(var(--nostromo-color-neutral-50));
+  --color-neutral-100: hsl(var(--nostromo-color-neutral-100));
+  --color-neutral-200: hsl(var(--nostromo-color-neutral-200));
+  --color-neutral-300: hsl(var(--nostromo-color-neutral-300));
+  --color-neutral-400: hsl(var(--nostromo-color-neutral-400));
+  --color-neutral-500: hsl(var(--nostromo-color-neutral-500));
+  --color-neutral-600: hsl(var(--nostromo-color-neutral-600));
+  --color-neutral-700: hsl(var(--nostromo-color-neutral-700));
+  --color-neutral-800: hsl(var(--nostromo-color-neutral-800));
+  --color-neutral-900: hsl(var(--nostromo-color-neutral-900));
+  --color-neutral-950: hsl(var(--nostromo-color-neutral-950));
+
+  --color-success-50: hsl(var(--nostromo-color-success-50));
+  --color-success-100: hsl(var(--nostromo-color-success-100));
+  --color-success-200: hsl(var(--nostromo-color-success-200));
+  --color-success-300: hsl(var(--nostromo-color-success-300));
+  --color-success-400: hsl(var(--nostromo-color-success-400));
+  --color-success-500: hsl(var(--nostromo-color-success-500));
+  --color-success-600: hsl(var(--nostromo-color-success-600));
+  --color-success-700: hsl(var(--nostromo-color-success-700));
+  --color-success-800: hsl(var(--nostromo-color-success-800));
+  --color-success-900: hsl(var(--nostromo-color-success-900));
+  --color-success-950: hsl(var(--nostromo-color-success-950));
+
+  --color-warning-50: hsl(var(--nostromo-color-warning-50));
+  --color-warning-100: hsl(var(--nostromo-color-warning-100));
+  --color-warning-200: hsl(var(--nostromo-color-warning-200));
+  --color-warning-300: hsl(var(--nostromo-color-warning-300));
+  --color-warning-400: hsl(var(--nostromo-color-warning-400));
+  --color-warning-500: hsl(var(--nostromo-color-warning-500));
+  --color-warning-600: hsl(var(--nostromo-color-warning-600));
+  --color-warning-700: hsl(var(--nostromo-color-warning-700));
+  --color-warning-800: hsl(var(--nostromo-color-warning-800));
+  --color-warning-900: hsl(var(--nostromo-color-warning-900));
+  --color-warning-950: hsl(var(--nostromo-color-warning-950));
+
+  --color-error-50: hsl(var(--nostromo-color-error-50));
+  --color-error-100: hsl(var(--nostromo-color-error-100));
+  --color-error-200: hsl(var(--nostromo-color-error-200));
+  --color-error-300: hsl(var(--nostromo-color-error-300));
+  --color-error-400: hsl(var(--nostromo-color-error-400));
+  --color-error-500: hsl(var(--nostromo-color-error-500));
+  --color-error-600: hsl(var(--nostromo-color-error-600));
+  --color-error-700: hsl(var(--nostromo-color-error-700));
+  --color-error-800: hsl(var(--nostromo-color-error-800));
+  --color-error-900: hsl(var(--nostromo-color-error-900));
+  --color-error-950: hsl(var(--nostromo-color-error-950));
+
+  --color-info-50: hsl(var(--nostromo-color-info-50));
+  --color-info-100: hsl(var(--nostromo-color-info-100));
+  --color-info-200: hsl(var(--nostromo-color-info-200));
+  --color-info-300: hsl(var(--nostromo-color-info-300));
+  --color-info-400: hsl(var(--nostromo-color-info-400));
+  --color-info-500: hsl(var(--nostromo-color-info-500));
+  --color-info-600: hsl(var(--nostromo-color-info-600));
+  --color-info-700: hsl(var(--nostromo-color-info-700));
+  --color-info-800: hsl(var(--nostromo-color-info-800));
+  --color-info-900: hsl(var(--nostromo-color-info-900));
+  --color-info-950: hsl(var(--nostromo-color-info-950));
+
+  /* ---- Semantic colors ---- */
+  --color-primary: hsl(var(--nostromo-color-primary));
+  --color-primary-foreground: hsl(var(--nostromo-color-primary-foreground));
+  --color-secondary: hsl(var(--nostromo-color-secondary));
+  --color-secondary-foreground: hsl(var(--nostromo-color-secondary-foreground));
+  --color-accent: hsl(var(--nostromo-color-accent));
+  --color-accent-foreground: hsl(var(--nostromo-color-accent-foreground));
+  --color-destructive: hsl(var(--nostromo-color-destructive));
+  --color-destructive-foreground: hsl(
+    var(--nostromo-color-destructive-foreground)
+  );
+  --color-muted: hsl(var(--nostromo-color-muted));
+  --color-muted-foreground: hsl(var(--nostromo-color-muted-foreground));
+  --color-popover: hsl(var(--nostromo-color-popover));
+  --color-popover-foreground: hsl(var(--nostromo-color-popover-foreground));
+  --color-card: hsl(var(--nostromo-color-card));
+  --color-card-foreground: hsl(var(--nostromo-color-card-foreground));
+  --color-background: hsl(var(--nostromo-color-background));
+  --color-foreground: hsl(var(--nostromo-color-foreground));
+  --color-border: hsl(var(--nostromo-color-border));
+  --color-input: hsl(var(--nostromo-color-input));
+  --color-ring: hsl(var(--nostromo-color-ring));
+
+  /* Status colors resolve to their 500 step, with a paired foreground */
+  --color-success: hsl(var(--nostromo-color-success-500));
+  --color-success-foreground: hsl(var(--nostromo-color-success-foreground));
+  --color-warning: hsl(var(--nostromo-color-warning-500));
+  --color-warning-foreground: hsl(var(--nostromo-color-warning-foreground));
+  --color-error: hsl(var(--nostromo-color-error-500));
+  --color-error-foreground: hsl(var(--nostromo-color-error-foreground));
+  --color-info: hsl(var(--nostromo-color-info-500));
+  --color-info-foreground: hsl(var(--nostromo-color-info-foreground));
+
+  /* ---- Radius ---- */
+  --radius-none: var(--nostromo-radius-none);
+  --radius-sm: var(--nostromo-radius-sm);
+  --radius-md: var(--nostromo-radius-md);
+  --radius-lg: var(--nostromo-radius-lg);
+  --radius-xl: var(--nostromo-radius-xl);
+  --radius-full: var(--nostromo-radius-full);
+
+  /* ---- Font families ---- */
+  --font-heading: var(--nostromo-font-heading);
+  --font-body: var(--nostromo-font-body);
+  --font-mono: var(--nostromo-font-mono);
+
+  /* ---- Font weights ---- */
+  --font-weight-normal: var(--nostromo-font-normal);
+  --font-weight-medium: var(--nostromo-font-medium);
+  --font-weight-semibold: var(--nostromo-font-semibold);
+  --font-weight-bold: var(--nostromo-font-bold);
+
+  /* ---- Font sizes ---- */
+  --text-xs: var(--nostromo-text-xs);
+  --text-sm: var(--nostromo-text-sm);
+  --text-base: var(--nostromo-text-base);
+  --text-lg: var(--nostromo-text-lg);
+  --text-xl: var(--nostromo-text-xl);
+  --text-2xl: var(--nostromo-text-2xl);
+  --text-3xl: var(--nostromo-text-3xl);
+  --text-4xl: var(--nostromo-text-4xl);
+  --text-5xl: var(--nostromo-text-5xl);
+
+  /* ---- Line heights ---- */
+  --leading-tight: var(--nostromo-leading-tight);
+  --leading-normal: var(--nostromo-leading-normal);
+  --leading-relaxed: var(--nostromo-leading-relaxed);
+
+  /* ---- Shadows ---- */
+  --shadow-xs: var(--nostromo-shadow-xs);
+  --shadow-sm: var(--nostromo-shadow-sm);
+  --shadow-md: var(--nostromo-shadow-md);
+  --shadow-lg: var(--nostromo-shadow-lg);
+  --shadow-xl: var(--nostromo-shadow-xl);
+  --shadow-2xl: var(--nostromo-shadow-2xl);
+  --shadow-inner: var(--nostromo-shadow-inner);
+  --shadow-button: var(--nostromo-shadow-button);
+  --shadow-button-hover: var(--nostromo-shadow-button-hover);
+  --shadow-card: var(--nostromo-shadow-card);
+  --shadow-card-hover: var(--nostromo-shadow-card-hover);
+  --shadow-input: var(--nostromo-shadow-input);
+  --shadow-input-focus: var(--nostromo-shadow-input-focus);
+
+  /* ---- Spacing ----
+     Deliberately NOT mapped into Tailwind's --spacing-* namespace. On v4 a
+     named spacing key also becomes a valid width/max-width key, so
+     --spacing-2xl would shadow --container-2xl and turn `max-w-2xl` into 48px.
+     The --nostromo-spacing-* tokens stay available to consumers via var(). */
+
+  /* ---- Easing ---- */
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Utilities that carry a whole transition shorthand rather than a single
+   token, kept from the v3 preset so component classes keep working. */
+@utility transition-button {
+  transition: var(--nostromo-transition-button);
+}
+
+@utility transition-input {
+  transition: var(--nostromo-transition-input);
+}
+
+@utility transition-card {
+  transition: var(--nostromo-transition-card);
+}
+
+@utility transition-modal {
+  transition: var(--nostromo-transition-modal);
+}
+
+/* Brand shorthands from the v3 preset. */
+@utility text-brand {
+  color: hsl(var(--nostromo-color-brand-500));
+}
+
+@utility bg-brand {
+  background-color: hsl(var(--nostromo-color-brand-500));
+}
+
+@utility border-brand {
+  border-color: hsl(var(--nostromo-color-brand-500));
+}
+
+@utility rounded-theme {
+  border-radius: var(--nostromo-radius-md);
+}

package/package.json

@@ -0,0 +1,321 @@
+{
+  "name": "@jarllyng/nostromo",
+  "version": "3.1.0",
+  "description": "Nostromo UI - A Tailwind CSS plugin and React component library",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./tailwind.css": "./dist/tailwind.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./themes/nostromo.css": "./dist/themes/nostromo.css",
+    "./themes/mother.css": "./dist/themes/mother.css",
+    "./themes/lv-426.css": "./dist/themes/lv-426.css",
+    "./themes/sulaco.css": "./dist/themes/sulaco.css",
+    "./themes/*": "./dist/themes/*.css",
+    "./base.css": "./dist/base.css",
+    "./components/core/button": {
+      "types": "./dist/components/core/button.d.ts",
+      "import": "./dist/components/core/button.js",
+      "require": "./dist/components/core/button.cjs"
+    },
+    "./components/core/badge": {
+      "types": "./dist/components/core/badge.d.ts",
+      "import": "./dist/components/core/badge.js",
+      "require": "./dist/components/core/badge.cjs"
+    },
+    "./components/core/card": {
+      "types": "./dist/components/core/card.d.ts",
+      "import": "./dist/components/core/card.js",
+      "require": "./dist/components/core/card.cjs"
+    },
+    "./components/core/avatar": {
+      "types": "./dist/components/core/avatar.d.ts",
+      "import": "./dist/components/core/avatar.js",
+      "require": "./dist/components/core/avatar.cjs"
+    },
+    "./components/core/input": {
+      "types": "./dist/components/core/input.d.ts",
+      "import": "./dist/components/core/input.js",
+      "require": "./dist/components/core/input.cjs"
+    },
+    "./components/core/checkbox": {
+      "types": "./dist/components/core/checkbox.d.ts",
+      "import": "./dist/components/core/checkbox.js",
+      "require": "./dist/components/core/checkbox.cjs"
+    },
+    "./components/core/radio-group": {
+      "types": "./dist/components/core/radio-group.d.ts",
+      "import": "./dist/components/core/radio-group.js",
+      "require": "./dist/components/core/radio-group.cjs"
+    },
+    "./components/core/switch": {
+      "types": "./dist/components/core/switch.d.ts",
+      "import": "./dist/components/core/switch.js",
+      "require": "./dist/components/core/switch.cjs"
+    },
+    "./components/core/textarea": {
+      "types": "./dist/components/core/textarea.d.ts",
+      "import": "./dist/components/core/textarea.js",
+      "require": "./dist/components/core/textarea.cjs"
+    },
+    "./components/core/alert": {
+      "types": "./dist/components/core/alert.d.ts",
+      "import": "./dist/components/core/alert.js",
+      "require": "./dist/components/core/alert.cjs"
+    },
+    "./components/core/breadcrumb": {
+      "types": "./dist/components/core/breadcrumb.d.ts",
+      "import": "./dist/components/core/breadcrumb.js",
+      "require": "./dist/components/core/breadcrumb.cjs"
+    },
+    "./components/core/pagination": {
+      "types": "./dist/components/core/pagination.d.ts",
+      "import": "./dist/components/core/pagination.js",
+      "require": "./dist/components/core/pagination.cjs"
+    },
+    "./components/core/separator": {
+      "types": "./dist/components/core/separator.d.ts",
+      "import": "./dist/components/core/separator.js",
+      "require": "./dist/components/core/separator.cjs"
+    },
+    "./components/core/dialog": {
+      "types": "./dist/components/core/dialog.d.ts",
+      "import": "./dist/components/core/dialog.js",
+      "require": "./dist/components/core/dialog.cjs"
+    },
+    "./components/core/tabs": {
+      "types": "./dist/components/core/tabs.d.ts",
+      "import": "./dist/components/core/tabs.js",
+      "require": "./dist/components/core/tabs.cjs"
+    },
+    "./components/core/select": {
+      "types": "./dist/components/core/select.d.ts",
+      "import": "./dist/components/core/select.js",
+      "require": "./dist/components/core/select.cjs"
+    },
+    "./components/core/label": {
+      "types": "./dist/components/core/label.d.ts",
+      "import": "./dist/components/core/label.js",
+      "require": "./dist/components/core/label.cjs"
+    },
+    "./components/core/helper-text": {
+      "types": "./dist/components/core/helper-text.d.ts",
+      "import": "./dist/components/core/helper-text.js",
+      "require": "./dist/components/core/helper-text.cjs"
+    },
+    "./components/core/error-message": {
+      "types": "./dist/components/core/error-message.d.ts",
+      "import": "./dist/components/core/error-message.js",
+      "require": "./dist/components/core/error-message.cjs"
+    },
+    "./components/core/icon": {
+      "types": "./dist/components/core/icon.d.ts",
+      "import": "./dist/components/core/icon.js",
+      "require": "./dist/components/core/icon.cjs"
+    },
+    "./components/core/progress": {
+      "types": "./dist/components/core/progress.d.ts",
+      "import": "./dist/components/core/progress.js",
+      "require": "./dist/components/core/progress.cjs"
+    },
+    "./components/core/table": {
+      "types": "./dist/components/core/table.d.ts",
+      "import": "./dist/components/core/table.js",
+      "require": "./dist/components/core/table.cjs"
+    },
+    "./components/core/data-table": {
+      "types": "./dist/components/core/data-table.d.ts",
+      "import": "./dist/components/core/data-table.js",
+      "require": "./dist/components/core/data-table.cjs"
+    },
+    "./components/core/toast": {
+      "types": "./dist/components/core/toast.d.ts",
+      "import": "./dist/components/core/toast.js",
+      "require": "./dist/components/core/toast.cjs"
+    },
+    "./components/core/tooltip": {
+      "types": "./dist/components/core/tooltip.d.ts",
+      "import": "./dist/components/core/tooltip.js",
+      "require": "./dist/components/core/tooltip.cjs"
+    },
+    "./components/core/accordion": {
+      "types": "./dist/components/core/accordion.d.ts",
+      "import": "./dist/components/core/accordion.js",
+      "require": "./dist/components/core/accordion.cjs"
+    },
+    "./components/core/skeleton": {
+      "types": "./dist/components/core/skeleton.d.ts",
+      "import": "./dist/components/core/skeleton.js",
+      "require": "./dist/components/core/skeleton.cjs"
+    },
+    "./components/core/calendar": {
+      "types": "./dist/components/core/calendar.d.ts",
+      "import": "./dist/components/core/calendar.js",
+      "require": "./dist/components/core/calendar.cjs"
+    },
+    "./components/core/charts": {
+      "types": "./dist/components/core/charts.d.ts",
+      "import": "./dist/components/core/charts.js",
+      "require": "./dist/components/core/charts.cjs"
+    },
+    "./components/core/charts-lazy": {
+      "types": "./dist/components/core/charts-lazy.d.ts",
+      "import": "./dist/components/core/charts-lazy.js",
+      "require": "./dist/components/core/charts-lazy.cjs"
+    },
+    "./components/core/error-boundary": {
+      "types": "./dist/components/core/error-boundary.d.ts",
+      "import": "./dist/components/core/error-boundary.js",
+      "require": "./dist/components/core/error-boundary.cjs"
+    },
+    "./components/marketing/hero": {
+      "types": "./dist/components/marketing/hero.d.ts",
+      "import": "./dist/components/marketing/hero.js",
+      "require": "./dist/components/marketing/hero.cjs"
+    },
+    "./components/marketing/testimonials": {
+      "types": "./dist/components/marketing/testimonials.d.ts",
+      "import": "./dist/components/marketing/testimonials.js",
+      "require": "./dist/components/marketing/testimonials.cjs"
+    },
+    "./components/marketing/features": {
+      "types": "./dist/components/marketing/features.d.ts",
+      "import": "./dist/components/marketing/features.js",
+      "require": "./dist/components/marketing/features.cjs"
+    },
+    "./components/marketing/pricing": {
+      "types": "./dist/components/marketing/pricing.d.ts",
+      "import": "./dist/components/marketing/pricing.js",
+      "require": "./dist/components/marketing/pricing.cjs"
+    },
+    "./components/marketing/gallery": {
+      "types": "./dist/components/marketing/gallery.d.ts",
+      "import": "./dist/components/marketing/gallery.js",
+      "require": "./dist/components/marketing/gallery.cjs"
+    },
+    "./components/marketing/logo-wall": {
+      "types": "./dist/components/marketing/logo-wall.d.ts",
+      "import": "./dist/components/marketing/logo-wall.js",
+      "require": "./dist/components/marketing/logo-wall.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "./dist/**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:run": "vitest run",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "test:a11y": "vitest run -t 'accessibility'",
+    "lint": "eslint src --ext .ts,.tsx --max-warnings=0",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "size": "size-limit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run type-check && pnpm run lint && pnpm run test:run && pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "phosphor-react": "^1.4.1",
+    "recharts": "^3.10.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@size-limit/preset-small-lib": "^12.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.65.0",
+    "@typescript-eslint/parser": "^8.65.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/coverage-v8": "^4.1.10",
+    "axe-core": "^4.12.1",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^27.4.0",
+    "size-limit": "^12.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=9.0.0"
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "420 KB"
+    },
+    {
+      "path": "dist/components/core/button.js",
+      "limit": "11 KB"
+    },
+    {
+      "path": "dist/components/core/input.js",
+      "limit": "11 KB"
+    },
+    {
+      "path": "dist/components/core/dialog.js",
+      "limit": "12 KB"
+    },
+    {
+      "path": "dist/components/core/select.js",
+      "limit": "40 KB"
+    },
+    {
+      "path": "dist/components/core/charts.js",
+      "limit": "125 KB"
+    },
+    {
+      "path": "dist/components/core/data-table.js",
+      "limit": "25 KB"
+    },
+    {
+      "path": "dist/components/core/calendar.js",
+      "limit": "40 KB"
+    },
+    {
+      "path": "dist/components/core/icon.js",
+      "limit": "55 KB"
+    }
+  ]
+}