supa-ui 0.0.0-stage → 0.3.1

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "supa-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.1",
+  "description": "UI kit inspiré de Supabase pour React et Next.js, avec toasts, alertes et confirmations (Toastly) intégrés.",
+  "author": "Nana Elie",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nanaelie/supa-ui.git"
+  },
+  "homepage": "https://github.com/nanaelie/supa-ui#readme",
+  "bugs": {
+    "url": "https://github.com/nanaelie/supa-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "ui",
+    "components",
+    "tailwindcss",
+    "toast",
+    "design-system"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:css",
+    "build:css": "tailwindcss -i ./src/styles.build.css -o ./dist/styles.css --minify",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.8.0",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/cli": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  }
+}

package/src/theme.css

@@ -0,0 +1,130 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+    color-scheme: light;
+
+    --sui-background: #ffffff;
+    --sui-foreground: #171717;
+
+    --sui-card: #ffffff;
+    --sui-card-foreground: #171717;
+
+    --sui-primary: #3ecf8e;
+    --sui-primary-foreground: #032b1c;
+
+    --sui-secondary: #f1f5f3;
+    --sui-secondary-foreground: #333d38;
+
+    --sui-muted: #f5f5f5;
+    --sui-muted-foreground: #737373;
+
+    --sui-accent: #f0f2f0;
+    --sui-accent-foreground: #171717;
+
+    --sui-border: #e5e7eb;
+    --sui-field: #ffffff;
+    --sui-control: #d4d4d4;
+    --sui-control-hover: #a3a3a3;
+    --sui-button: #e5e5e5;
+    --sui-foreground-muted: #737373;
+    --sui-foreground-light: #525252;
+    --sui-input: #e5e7eb;
+    --sui-ring: #3ecf8e;
+    --sui-destructive: #dc2626;
+    --sui-destructive-foreground: #ffffff;
+    --sui-popover: #ffffff;
+    --sui-border-strong: #d4d4d4;
+    --sui-foreground-lighter: #525252;
+    --sui-button-shadow-raised: 0 1px 2px rgb(0 0 0 / 10%), inset 0 1px 0 rgb(255 255 255 / 15%);
+}
+
+.dark {
+    color-scheme: dark;
+
+    --sui-field: #1c1c1c;
+--sui-control: #383838;
+--sui-control-hover: #525252;
+--sui-button: #404040;
+--sui-foreground-muted: #858585;
+--sui-foreground-light: #b0b0b0;
+    --sui-background: #171717;
+    --sui-foreground: #ededed;
+
+    --sui-card: #1c1c1c;
+    --sui-card-foreground: #ededed;
+
+    --sui-primary: #3ecf8e;
+    --sui-primary-foreground: #032b1c;
+
+    --sui-secondary: #292929;
+    --sui-secondary-foreground: #ededed;
+
+    --sui-muted: #262626;
+    --sui-muted-foreground: #a3a3a3;
+
+    --sui-accent: #292929;
+    --sui-accent-foreground: #ededed;
+
+    --sui-border: #333333;
+    --sui-input: #333333;
+    --sui-ring: #3ecf8e;
+    --sui-destructive: #ef4444;
+    --sui-destructive-foreground: #ffffff;
+    --sui-popover: #1c1c1c;
+    --sui-border-strong: #454545;
+    --sui-foreground-lighter: #b0b0b0;
+    --sui-button-shadow-raised: 0 1px 2px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+@theme inline {
+    --color-background: var(--sui-background);
+    --color-foreground: var(--sui-foreground);
+
+    --color-card: var(--sui-card);
+    --color-card-foreground: var(--sui-card-foreground);
+
+    --color-primary: var(--sui-primary);
+    --color-primary-foreground: var(--sui-primary-foreground);
+
+    --color-secondary: var(--sui-secondary);
+    --color-secondary-foreground: var(--sui-secondary-foreground);
+
+    --color-muted: var(--sui-muted);
+    --color-muted-foreground: var(--sui-muted-foreground);
+
+    --color-accent: var(--sui-accent);
+    --color-accent-foreground: var(--sui-accent-foreground);
+
+    --color-border: var(--sui-border);
+    --color-field: var(--sui-field);
+--color-control: var(--sui-control);
+--color-control-hover: var(--sui-control-hover);
+--color-button: var(--sui-button);
+--color-foreground-muted: var(--sui-foreground-muted);
+--color-foreground-light: var(--sui-foreground-light);
+    --color-input: var(--sui-input);
+    --color-ring: var(--sui-ring);
+
+    --color-destructive: var(--sui-destructive);
+    --color-destructive-foreground: var(--sui-destructive-foreground);
+    --color-popover: var(--sui-popover);
+    --color-border-strong: var(--sui-border-strong);
+    --color-foreground-lighter: var(--sui-foreground-lighter);
+}
+
+@layer base {
+  body {
+    background-color: var(--sui-background);
+    color: var(--sui-foreground);
+  }
+}
+
+@keyframes sui-toast-in {
+  from { opacity: 0; transform: translateY(12px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes sui-pop-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}