@skybin-tech/nebula-ui 0.0.1

package/dist/nebula-ui.css

@@ -0,0 +1,212 @@
+.skybin-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: inherit;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  border: 1px solid transparent;
+  position: relative;
+}
+
+.skybin-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.skybin-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Variants */
+.skybin-button--primary {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.skybin-button--primary:hover:not(:disabled) {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+.skybin-button--secondary {
+  background-color: #6b7280;
+  color: white;
+  border-color: #6b7280;
+}
+
+.skybin-button--secondary:hover:not(:disabled) {
+  background-color: #4b5563;
+  border-color: #4b5563;
+}
+
+.skybin-button--outline {
+  background-color: transparent;
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+.skybin-button--outline:hover:not(:disabled) {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.skybin-button--ghost {
+  background-color: transparent;
+  color: #374151;
+  border-color: transparent;
+}
+
+.skybin-button--ghost:hover:not(:disabled) {
+  background-color: #f3f4f6;
+}
+
+.skybin-button--danger {
+  background-color: #ef4444;
+  color: white;
+  border-color: #ef4444;
+}
+
+.skybin-button--danger:hover:not(:disabled) {
+  background-color: #dc2626;
+  border-color: #dc2626;
+}
+
+/* Sizes */
+.skybin-button--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.skybin-button--md {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.skybin-button--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+}
+
+/* Full width */
+.skybin-button--full-width {
+  display: flex;
+  width: 100%;
+}
+
+/* Loading state */
+.skybin-button--loading {
+  position: relative;
+}
+
+.skybin-button__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: skybin-button-spin 0.6s linear infinite;
+  position: absolute;
+}
+
+.skybin-button__content--hidden {
+  visibility: hidden;
+}
+
+@keyframes skybin-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.skybin-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.skybin-input-wrapper--full-width {
+  width: 100%;
+}
+
+.skybin-input__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--form-text, rgba(0, 0, 0, 0.85));
+}
+
+.skybin-input {
+  width: 100%;
+  border-radius: var(--form-border-radius, 6px);
+  border: 1px solid var(--form-border, #d9d9d9);
+  background-color: var(--form-bg, #ffffff);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  transition: var(--form-transition, all 0.2s ease-in-out);
+  outline: none;
+}
+
+.skybin-input:focus {
+  border-color: var(--form-primary, #1890ff);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.skybin-input:hover:not(:focus):not(:disabled) {
+  border-color: var(--form-primary-hover, #40a9ff);
+}
+
+.skybin-input:disabled {
+  background-color: var(--form-bg-disabled, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.skybin-input::placeholder {
+  color: var(--form-text-secondary, rgba(0, 0, 0, 0.45));
+}
+
+/* Sizes */
+.skybin-input--sm {
+  height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.skybin-input--md {
+  height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.skybin-input--lg {
+  height: 3rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* Error state */
+.skybin-input--error {
+  border-color: var(--form-error, #ff4d4f);
+}
+
+.skybin-input--error:focus {
+  border-color: var(--form-error, #ff4d4f);
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+}
+
+.skybin-input__error {
+  font-size: 0.75rem;
+  color: var(--form-error, #ff4d4f);
+}
+
+.skybin-input__helper {
+  font-size: 0.75rem;
+  color: var(--form-text-secondary, rgba(0, 0, 0, 0.45));
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,7 @@
+import { ClassValue } from 'clsx';
+/**
+ * Utility function to merge class names conditionally
+ * Combines clsx for conditional classes and tailwind-merge for deduplication
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils/cn.js

@@ -0,0 +1,9 @@
+import { clsx } from "../node_modules/clsx/dist/clsx.js";
+import { twMerge } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sources":["../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n/**\r\n * Utility function to merge class names conditionally\r\n * Combines clsx for conditional classes and tailwind-merge for deduplication\r\n */\r\nexport function cn(...inputs: ClassValue[]): string {\r\n  return twMerge(clsx(inputs));\r\n}\r\n"],"names":[],"mappings":";;AAOO,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}

package/package.json

@@ -0,0 +1,201 @@
+{
+  "name": "@skybin-tech/nebula-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Reusable React component library with form validation using shadcn/ui patterns, react-hook-form, and Zod",
+  "main": "./dist/cjs/src/index.cjs",
+  "module": "./dist/src/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/src/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/src/index.cjs"
+      }
+    },
+    "./components/Button": {
+      "import": {
+        "types": "./dist/components/Button/index.d.ts",
+        "default": "./dist/src/components/Button/Button2.js"
+      },
+      "require": {
+        "types": "./dist/components/Button/index.d.ts",
+        "default": "./dist/cjs/src/components/Button/Button2.cjs"
+      }
+    },
+    "./components/Form": {
+      "import": {
+        "types": "./dist/components/Form/index.d.ts",
+        "default": "./dist/src/components/Form/Form.js"
+      },
+      "require": {
+        "types": "./dist/components/Form/index.d.ts",
+        "default": "./dist/cjs/src/components/Form/Form.cjs"
+      }
+    },
+    "./components/Input": {
+      "import": {
+        "types": "./dist/components/Input/index.d.ts",
+        "default": "./dist/src/components/Input/Input2.js"
+      },
+      "require": {
+        "types": "./dist/components/Input/index.d.ts",
+        "default": "./dist/cjs/src/components/Input/Input2.cjs"
+      }
+    },
+    "./hooks/useDebounce": {
+      "import": {
+        "types": "./dist/hooks/useDebounce.d.ts",
+        "default": "./dist/src/hooks/useDebounce.js"
+      },
+      "require": {
+        "types": "./dist/hooks/useDebounce.d.ts",
+        "default": "./dist/cjs/src/hooks/useDebounce.cjs"
+      }
+    },
+    "./hooks/useToggle": {
+      "import": {
+        "types": "./dist/hooks/useToggle.d.ts",
+        "default": "./dist/src/hooks/useToggle.js"
+      },
+      "require": {
+        "types": "./dist/hooks/useToggle.d.ts",
+        "default": "./dist/cjs/src/hooks/useToggle.cjs"
+      }
+    },
+    "./utils/cn": {
+      "import": {
+        "types": "./dist/utils/cn.d.ts",
+        "default": "./dist/src/utils/cn.js"
+      },
+      "require": {
+        "types": "./dist/utils/cn.d.ts",
+        "default": "./dist/cjs/src/utils/cn.cjs"
+      }
+    },
+    "./styles.css": "./dist/skybin-ui.css",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "components/Button": [
+        "./dist/components/Button/index.d.ts"
+      ],
+      "components/Form": [
+        "./dist/components/Form/index.d.ts"
+      ],
+      "components/Input": [
+        "./dist/components/Input/index.d.ts"
+      ],
+      "hooks/useDebounce": [
+        "./dist/hooks/useDebounce.d.ts"
+      ],
+      "hooks/useToggle": [
+        "./dist/hooks/useToggle.d.ts"
+      ],
+      "utils/cn": [
+        "./dist/utils/cn.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+	"publish": "yarn version --patch && yarn publish --access public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "zod": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": false
+    },
+    "react-hook-form": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.39.3",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-onboarding": "^10.2.10",
+    "@storybook/addon-vitest": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "@types/glob": "^9.0.0",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "esbuild": "^0.27.3",
+    "eslint": "^9.39.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-storybook": "^10.2.10",
+    "glob": "^13.0.6",
+    "globals": "^16.5.0",
+    "playwright": "^1.58.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.2.10",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-org/skybin-ui.git"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "library",
+    "form",
+    "validation",
+    "zod",
+    "react-hook-form",
+    "typescript",
+    "tailwindcss"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "react-hook-form": "^7.71.2",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.0",
+    "zod": "^4.3.6"
+  }
+}