@grandbazar/ui-baza 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Grandbazar.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# UI Baza
+
+A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.
+
+## 📦 Installation
+
+```bash
+npm install ui-baza
+```
+
+```bash
+yarn add ui-baza
+```
+
+```bash
+pnpm add ui-baza
+```
+
+## 🔧 Usage
+
+```tsx
+import { Button } from 'ui-baza';
+
+function App() {
+  return (
+    <Button onClick={() => alert('Hello!')}>
+      Click me
+    </Button>
+  );
+}
+```
+
+### CSS Import
+
+**Important:** UI Baza uses CSS cascade layers for proper style isolation. Import the styles with the lowest priority to allow your local variables to override library defaults:
+
+```css
+@layer ui_baza_reset, ui_baza_tokens, base, theme, components, utilities;
+
+@import 'ui-baza/css';
+```
+
+### Customizing Design Tokens
+
+You can override the default design tokens by defining your own CSS variables after importing the library:
+
+```css
+:root {
+  /* Override color tokens */
+  --color-neutral: #1a1a1a;
+  --color-accent: #0066ff;
+  
+  /* Override radius tokens */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 14px;
+  --radius-3xl: 16px;
+  --radius-4xl: 24px;
+  --radius-5xl: 32px;
+  --radius-tooltip: 10px;
+  --radius-content-xl: 24px;
+  --radius-content-lg: 18px;
+  --radius-content-md: 16px;
+  --radius-content-sm: 14px;
+  --radius-content-xs: 12px;
+  --radius-image-xl: 18px;
+  --radius-image-lg: 16px;
+  --radius-image-md: 14px;
+  --radius-image-sm: 12px;
+  --radius-image-xs: 10px;
+  --radius-image-2xs: 8px;
+  --radius-image-3xs: 6px;
+}
+```
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 22+
+- npm/yarn/pnpm
+
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://gitlab.itglobal.com/itgold/gb/ui-baza.git
+
+# Install dependencies
+npm install
+
+# Start Storybook for development
+npm run dev
+```
+
+### Available Scripts
+
+- `npm run dev` - Start Storybook development server
+- `npm run build:lib` - Build the library
+- `npm run build:storybook` - Build Storybook for production
+- `npm run lint` - Run ESLint
+- `npm run format` - Format code with Prettier
+- `npm run prepare` - Setup Husky git hooks
+- `npm run version:patch` - Build and bump patch version
+- `npm run version:minor` - Build and bump minor version
+- `npm run version:major` - Build and bump major version
+- `npm run publish` - Build and publish to npm
+
+### Building
+
+```bash
+npm run build:lib
+```
+
+## 📚 Components
+
+Currently available components:
+
+- **Button** - Flexible button component with various styles and states
+
+More components coming soon! 🎉
+
+## 🔗 Links
+
+- [Homepage](https://grandbazar.io/ui-baza)
+- [Repository](https://gitlab.itglobal.com/itgold/gb/ui-baza)
+- [Grandbazar](https://grandbazar.io)
+
+## 📄 License
+
+MIT © [Grandbazar](https://grandbazar.io)

package/dist/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const button = "_button_e0z64_1";
+const styles = {
+	button: button
+};
+
+function Button({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classNames(styles.button, className), ...props, children });
+}
+
+exports.Button = Button;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function Button({ children, className, ...props }: TButtonProps): JSX.Element;
+
+declare type TButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const button = "_button_e0z64_1";
+const styles = {
+	button: button
+};
+
+function Button({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("button", { className: classNames(styles.button, className), ...props, children });
+}
+
+export { Button };

package/dist/style.css

@@ -0,0 +1,229 @@
+@layer ui_baza_reset, ui_baza_tokens;
+
+@layer ui_baza_reset{
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 100%;
+  text-decoration: none;
+  vertical-align: baseline;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+input,
+textarea,
+select {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+*:focus {
+  outline: none;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+*:disabled {
+  pointer-events: none;
+}
+}
+
+@layer ui_baza_tokens {
+  :root {
+    --color-white: #ffffff;
+
+    --color-neutral: #111217;
+    --color-neutral-340: color-mix(in srgb, var(--color-neutral) 34%, var(--color-white) 66%);
+    --color-neutral-alpha-60: color-mix(in srgb, var(--color-neutral) 6%, transparent);
+
+    --color-accent: #195eff;
+    --color-accent-900: color-mix(in srgb, var(--color-accent) 94.8%, var(--color-white) 5.2%);
+    --color-accent-800: color-mix(in srgb, var(--color-accent) 90%, var(--color-white) 10%);
+
+    --radius-xs: 4px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-2xl: 14px;
+    --radius-3xl: 16px;
+    --radius-4xl: 24px;
+    --radius-5xl: 32px;
+    --radius-tooltip: 10px;
+    --radius-content-xl: 24px;
+    --radius-content-lg: 18px;
+    --radius-content-md: 16px;
+    --radius-content-sm: 14px;
+    --radius-content-xs: 12px;
+    --radius-image-xl: 18px;
+    --radius-image-lg: 16px;
+    --radius-image-md: 14px;
+    --radius-image-sm: 12px;
+    --radius-image-xs: 10px;
+    --radius-image-2xs: 8px;
+    --radius-image-3xs: 6px;
+  }
+}
+._button_e0z64_1 {
+  display: inline-flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: var(--radius-xl);
+  background-color: var(--color-accent);
+  color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-accent-900);
+  }
+  &:active {
+    background-color: var(--color-accent-800);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-alpha-60);
+    color: var(--color-neutral-340);
+  }
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@grandbazar/ui-baza",
+  "version": "1.0.0",
+  "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.itglobal.com/itgold/gb/ui-baza"
+  },
+  "author": "grandbazar <https://grandbazar.io>",
+  "homepage": "https://grandbazar.io/ui-baza",
+  "keywords": [
+    "React",
+    "Typescript",
+    "Storybook",
+    "UI",
+    "UI Baza",
+    "Grandbazar",
+    "UI kit",
+    "UI library"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "build:lib": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier . --write --ignore-unknown",
+    "prepare": "husky",
+    "version:patch": "npm run build:lib && npm version patch",
+    "version:minor": "npm run build:lib && npm version minor",
+    "version:major": "npm run build:lib && npm version major",
+    "publish": "npm run build:lib && npm publish"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.34.0",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/react-vite": "^9.1.4",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.0.2",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.4",
+    "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.6.2",
+    "prettier-plugin-css-order": "^2.1.2",
+    "storybook": "^9.1.4",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.42.0",
+    "vite": "^7.1.4",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}