@sustaina/shared-ui 1.2.0 → 1.3.1

package/README.md

@@ -1,273 +1 @@
-# Sustaina - Shared UI
-
-# 📦 Installation
-
-To use `@sustaina/shared-ui` in your project, follow these steps carefully.
-
----
-
-## Install UI package and required dependencies
-
-Make sure you've installed [TailwindCSS](https://tailwindcss.com/docs/installation) and [shadcn/ui](https://ui.shadcn.com/docs/installation/manual) before installing our library. **Don’t skip this.**
-
-### 1. Place shadcn/ui styles
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-```
-
-### 2. Install library
-
-```bash
-npm install @sustaina/shared-ui
-```
-
----
-
-### Peer Dependencies
-
-You must manually install these peer dependencies in your host project:
-
-```bash
-npm install react react-dom react-hook-form
-```
-
-Supported versions:
-
-```json
-{
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.61.1"
-  }
-}
-```
-
-> ⚠️ If your project doesn't match the version ranges above, you may get runtime or type errors.
-
----
-
-## 3. Add `@sustaina/shared-ui` to your CSS
-
-To make styling work with our components, add this to your `index.css` or root CSS file:
-
-```css
-... omit code
-@import "@sustaina/shared-ui/styles.css"; /* this include styles/theme.css already */
-@source "../../node_modules/@sustaina/shared-ui/dist"; /* depend your root CSS file locate. */
-... omit code
-```
-
----
-
-# Usage
-
-Import `@sustaina/shared-ui` components within your React component files:
-
-```tsx
-import { Button } from "@sustaina/shared-ui";
-
-export default function MyComponent() {
-  return <Button color="primary">Click me!</Button>;
-}
-```
-
----
-
-# Developer Notes
-
-## Git Flow
-
-### How to developed
-
-We follow a **`feature/xxx` → `dev` → `prod`** workflow:
-
-- Developed on `feature/xxx` or `bugfix/xxx` or any what you want. Then **merge request** to `dev`
-- Only `prod` branch triggers **npm package publishing**.
-- To publish a new version:
-  - Create a **merge request from `dev` to `prod`**, or
-  - Contact your lead developer or maintainer to perform the merge.
-
-### Versioning & Commits
-
-We use **semantic versioning**:
-
-- `patch` → bug fixes (`fix: description`)
-- `minor` → new features (`feat: description`)
-- All other commit types (e.g., `docs`, `chore`, `refactor`) **do not trigger a version change**.
-
-**<em>no major change for now just use `patch` and `minor`</em>**
-
-## CSS and Custom Styling
-
-- **Prefer Tailwind classes inline** whenever possible.
-  - If additional CSS is needed, include it in your components.
-  - **Important:** After running `npm run build`, always check `dist/index.css` to ensure your custom styles are included in the final build.
-
-- **Use `styles/theme.css` for global customizations**:
-  - Store custom shorthand colors, CSS variables, or utility classes here.
-  - <span style="color:red; font-weight:bold; text-decoration:underline; font-style:italic;">These styles will be available to consumers when they import the library `Go check step 3`.</span>
-  - Example:
-    ```css
-    @theme {
-      --color-sus-primary-1: #000;
-    }
-    ```
-  - **Reference:** [Tailwind Theme Variable Namespaces](https://tailwindcss.com/docs/theme#theme-variable-namespaces)
-
-## Including External Files in the Build
-
-- **Add your files to `copy-files-to-dist.js`**:
-  - This script handles copying files into the `dist` folder during the build process.
-  - Example entry:
-    ```js
-    const filesToCopy = [
-      {
-        from: "./src/styles/theme.css",
-        to: "./dist/index.css",
-        mode: "prepend" // "replace" | "append" | "prepend"
-      }
-    ];
-    ```
-
-- **How `mode` works:**
-  - `"replace"` → overwrite the destination file completely.
-  - `"append"` → add content at the end of the destination file.
-  - `"prepend"` → add content at the beginning of the destination file.
-- This script handles copying files into the `dist` folder during the build process.
-- After copying files, you can export them for consumers.
-  - Add `exports` your file in `package.json`
-  ```json
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles.css": "./dist/index.css",
-    "./helpers": "./dist/helpers.js"
-  }
-  ```
-- **Note:** This will happen automatically when you run `npm run build`.
+# sustaina-share-ui

package/README.md.local-bak

@@ -0,0 +1,273 @@
+# Sustaina - Shared UI
+
+# 📦 Installation
+
+To use `@sustaina/shared-ui` in your project, follow these steps carefully.
+
+---
+
+## Install UI package and required dependencies
+
+Make sure you've installed [TailwindCSS](https://tailwindcss.com/docs/installation) and [shadcn/ui](https://ui.shadcn.com/docs/installation/manual) before installing our library. **Don’t skip this.**
+
+### 1. Place shadcn/ui styles
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+### 2. Install library
+
+```bash
+npm install @sustaina/shared-ui
+```
+
+---
+
+### Peer Dependencies
+
+You must manually install these peer dependencies in your host project:
+
+```bash
+npm install react react-dom react-hook-form
+```
+
+Supported versions:
+
+```json
+{
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.61.1"
+  }
+}
+```
+
+> ⚠️ If your project doesn't match the version ranges above, you may get runtime or type errors.
+
+---
+
+## 3. Add `@sustaina/shared-ui` to your CSS
+
+To make styling work with our components, add this to your `index.css` or root CSS file:
+
+```css
+... omit code
+@import "@sustaina/shared-ui/styles.css"; /* this include styles/theme.css already */
+@source "../../node_modules/@sustaina/shared-ui/dist"; /* depend your root CSS file locate. */
+... omit code
+```
+
+---
+
+# Usage
+
+Import `@sustaina/shared-ui` components within your React component files:
+
+```tsx
+import { Button } from "@sustaina/shared-ui";
+
+export default function MyComponent() {
+  return <Button color="primary">Click me!</Button>;
+}
+```
+
+---
+
+# Developer Notes
+
+## Git Flow
+
+### How to developed
+
+We follow a **`feature/xxx` → `dev` → `prod`** workflow:
+
+- Developed on `feature/xxx` or `bugfix/xxx` or any what you want. Then **merge request** to `dev`
+- Only `prod` branch triggers **npm package publishing**.
+- To publish a new version:
+  - Create a **merge request from `dev` to `prod`**, or
+  - Contact your lead developer or maintainer to perform the merge.
+
+### Versioning & Commits
+
+We use **semantic versioning**:
+
+- `patch` → bug fixes (`fix: description`)
+- `minor` → new features (`feat: description`)
+- All other commit types (e.g., `docs`, `chore`, `refactor`) **do not trigger a version change**.
+
+**<em>no major change for now just use `patch` and `minor`</em>**
+
+## CSS and Custom Styling
+
+- **Prefer Tailwind classes inline** whenever possible.
+  - If additional CSS is needed, include it in your components.
+  - **Important:** After running `npm run build`, always check `dist/index.css` to ensure your custom styles are included in the final build.
+
+- **Use `styles/theme.css` for global customizations**:
+  - Store custom shorthand colors, CSS variables, or utility classes here.
+  - <span style="color:red; font-weight:bold; text-decoration:underline; font-style:italic;">These styles will be available to consumers when they import the library `Go check step 3`.</span>
+  - Example:
+    ```css
+    @theme {
+      --color-sus-primary-1: #000;
+    }
+    ```
+  - **Reference:** [Tailwind Theme Variable Namespaces](https://tailwindcss.com/docs/theme#theme-variable-namespaces)
+
+## Including External Files in the Build
+
+- **Add your files to `copy-files-to-dist.js`**:
+  - This script handles copying files into the `dist` folder during the build process.
+  - Example entry:
+    ```js
+    const filesToCopy = [
+      {
+        from: "./src/styles/theme.css",
+        to: "./dist/index.css",
+        mode: "prepend" // "replace" | "append" | "prepend"
+      }
+    ];
+    ```
+
+- **How `mode` works:**
+  - `"replace"` → overwrite the destination file completely.
+  - `"append"` → add content at the end of the destination file.
+  - `"prepend"` → add content at the beginning of the destination file.
+- This script handles copying files into the `dist` folder during the build process.
+- After copying files, you can export them for consumers.
+  - Add `exports` your file in `package.json`
+  ```json
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css",
+    "./helpers": "./dist/helpers.js"
+  }
+  ```
+- **Note:** This will happen automatically when you run `npm run build`.

package/dist/index.css

@@ -21,14 +21,134 @@
   --color-sus-gray-3: #eaeaea;
   --color-sus-gray-4: #f7fcf9;
   --color-sus-gray-5: #41875c;
+  --color-sus-gray-6: #a7adb8;
+  --color-sus-blue-1: #3b69b1;
+  --color-sus-blue-2: #1598b0;
+  --color-sus-blue-3: #6084c1;
   --color-sus-primary-1-hover: rgba(50, 100, 70, 1);
   --color-sus-primary-2-hover: #8db89c;
   --color-sus-primary-3-hover: #eff5f1;
   --color-sus-primary-1-active: #dfeae3;
   --color-sus-secondary-hover: #907b46;
+
+  /* update ui 22-12-2025 */
+  --color-sus-main-accent: #379a2a;
+  --color-sus-main-gray: #000000;
+  --color-sus-main-background: #ffffff;
+  --color-sus-primary-green-1: #fbfefa;
+  --color-sus-primary-green-2: #f5fbf4;
+  --color-sus-primary-green-3: #e8f7e6;
+  --color-sus-primary-green-4: #d9f1d5;
+  --color-sus-primary-green-5: #c7eac2;
+  --color-sus-primary-green-6: #b0dfaa;
+  --color-sus-primary-green-7: #92d089;
+  --color-sus-primary-green-8: #64bc59;
+  --color-sus-primary-green-9: #379a2a;
+  --color-sus-primary-green-10: #338b27;
+  --color-sus-primary-green-11: #268019;
+  --color-sus-primary-green-12: #203d1c;
+  --color-sus-secondary-green-1: #fdfefc;
+  --color-sus-secondary-green-2: #f6faf7;
+  --color-sus-secondary-green-3: #eaf5ee;
+  --color-sus-secondary-green-4: #dceee3;
+  --color-sus-secondary-green-5: #cee6d6;
+  --color-sus-secondary-green-6: #bcd9c7;
+  --color-sus-secondary-green-7: #a4c8b0;
+  --color-sus-secondary-green-8: #80b292;
+  --color-sus-secondary-green-9: #82b495;
+  --color-sus-secondary-green-10: #77a989;
+  --color-sus-secondary-green-11: #48785b;
+  --color-sus-secondary-green-12: #28392e;
+  --color-sus-secondary-gray-1: #fcfcfc;
+  --color-sus-secondary-gray-2: #f9f9f9;
+  --color-sus-secondary-gray-3: #f0f0f0;
+  --color-sus-secondary-gray-4: #e8e8e8;
+  --color-sus-secondary-gray-5: #e1e1e1;
+  --color-sus-secondary-gray-6: #d9d9d9;
+  --color-sus-secondary-gray-7: #cecece;
+  --color-sus-secondary-gray-8: #bbbbbb;
+  --color-sus-secondary-gray-9: #8c8c8c;
+  --color-sus-secondary-gray-10: #818181;
+  --color-sus-secondary-gray-11: #636363;
+  --color-sus-secondary-gray-12: #1f1f1f;
+  --color-sus-alert-positive-1: #92d08b;
+  --color-sus-alert-positive-2: #64bc59;
+  --color-sus-alert-positive-3: #37742f;
+  --color-sus-alert-info-1: #6f9deb;
+  --color-sus-alert-info-2: #2e70e2;
+  --color-sus-alert-info-3: #144190;
+  --color-sus-alert-warning-1: #fffbe6;
+  --color-sus-alert-warning-2: #fff3b8;
+  --color-sus-alert-warning-3: #ffeb8a;
+  --color-sus-alert-warning-4: #ffe45c;
+  --color-sus-alert-warning-5: #ffdd2f;
+  --color-sus-alert-warning-6: #fed503;
+  --color-sus-alert-warning-7: #d1af01;
+  --color-sus-alert-warning-8: #a38800;
+  --color-sus-alert-warning-9: #756200;
+  --color-sus-alert-warning-10: #463c01;
+  --color-sus-alert-warning-11: #1a1500;
+  --color-sus-alert-negative-1: #fbeaeb;
+  --color-sus-alert-negative-2: #f3c4c5;
+  --color-sus-alert-negative-3: #ea9f9f;
+  --color-sus-alert-negative-4: #e2787a;
+  --color-sus-alert-negative-5: #da5256;
+  --color-sus-alert-negative-6: #c32a2c;
+  --color-sus-alert-negative-7: #ad2527;
+  --color-sus-alert-negative-8: #871d1e;
+  --color-sus-alert-negative-9: #611516;
+  --color-sus-alert-negative-10: #3b0c0d;
+  --color-sus-alert-negative-11: #150405;
+  --color-sus-button-accent-1: #cecece;
+  --color-sus-button-accent-2: #8b8b8b;
+  --color-sus-button-accent-3: #646464;
+  --color-sus-button-red-1: #ec8f83;
+  --color-sus-button-red-2: #bf3630;
+  --color-sus-button-red-3: #bb0b0e;
+  --color-sus-button-yellow-1: #ffe470;
+  --color-sus-button-yellow-2: #ffd503;
+  --color-sus-button-yellow-3: #f0c000;
+  --color-sus-button-yellowdark-1: #b9a874;
+  --color-sus-button-yellowdark-2: #a49053;
+  --color-sus-button-yellowdark-3: #8b7a46;
+  --color-sus-button-green-1: #a3c8b0;
+  --color-sus-button-green-2: #82b495;
+  --color-sus-button-green-3: #48785b;
+  --color-sus-button-blue-1: #89a9dd;
+  --color-sus-button-blue-2: #6084c1;
+  --color-sus-button-blue-3: #5177b8;
+  --color-sus-button-black-1: #616161;
+  --color-sus-button-black-2: #303030;
+  --color-sus-button-black-3: #000000;
+
+  /* animate */
+  --animate-sus-spinner: sus-spinner 1s linear infinite;
+  @keyframes sus-spinner {
+    0% {
+      opacity: 1;
+    }
+    10% {
+      opacity: 0.7;
+    }
+    20% {
+      opacity: 0.3;
+    }
+    35% {
+      opacity: 0.2;
+    }
+    50% {
+      opacity: 0.1;
+    }
+    75% {
+      opacity: 0.05;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 }
 
-/* src/components/advanceSearch/styles/index.css */
+/* src/styles/index.css */
 .clear-button {
   width: 15px;
   height: 15px;
@@ -61,4 +181,11 @@
   padding: 0;
   aspect-ratio: 1/1;
 }
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/advanceSearch/styles/index.css"],"sourcesContent":[".clear-button {\n  width: 15px;\n  height: 15px;\n  font-weight: bold;\n  border-radius: 50%;\n  background-color: black;\n  color: white;\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.15s ease;\n  padding: 0;\n  cursor: pointer;\n}\n\n.clear-button:hover {\n  background-color: #333; /* เข้มขึ้นเวลา hover */\n}\n\n.clear-button .icon {\n  width: 13px;\n  height: 13px;\n}\n\n.circle-btn {\n  width: 24px; /* small size */\n  height: 24px; /* same as width */\n  border-radius: 50%; /* perfect circle */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0; /* remove default button padding */\n  aspect-ratio: 1/1; /* force square, prevents oval */\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,eAAa;AACb,iBAAe;AACf,oBAAkB;AAClB,SAAO;AACP,UAAQ,IAAI,MAAM;AAClB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY,iBAAiB,MAAM;AACnC,WAAS;AACT,UAAQ;AACV;AAEA,CAhBC,YAgBY;AACX,oBAAkB;AACpB;AAEA,CApBC,aAoBa,CAAC;AACb,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACT,gBAAc,CAAC,CAAC;AAClB;","names":[]}
+{"version":3,"sources":["../src/styles/index.css"],"sourcesContent":[".clear-button {\n  width: 15px;\n  height: 15px;\n  font-weight: bold;\n  border-radius: 50%;\n  background-color: black;\n  color: white;\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.15s ease;\n  padding: 0;\n  cursor: pointer;\n}\n\n.clear-button:hover {\n  background-color: #333; /* เข้มขึ้นเวลา hover */\n}\n\n.clear-button .icon {\n  width: 13px;\n  height: 13px;\n}\n\n.circle-btn {\n  width: 24px; /* small size */\n  height: 24px; /* same as width */\n  border-radius: 50%; /* perfect circle */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0; /* remove default button padding */\n  aspect-ratio: 1/1; /* force square, prevents oval */\n}\n\n.hide-scrollbar {\n  -ms-overflow-style: none; /* IE, Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.hide-scrollbar::-webkit-scrollbar {\n  display: none; /* Chrome, Safari */\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,eAAa;AACb,iBAAe;AACf,oBAAkB;AAClB,SAAO;AACP,UAAQ,IAAI,MAAM;AAClB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY,iBAAiB,MAAM;AACnC,WAAS;AACT,UAAQ;AACV;AAEA,CAhBC,YAgBY;AACX,oBAAkB;AACpB;AAEA,CApBC,aAoBa,CAAC;AACb,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACT,gBAAc,CAAC,CAAC;AAClB;AAEA,CAAC;AACC,sBAAoB;AACpB,mBAAiB;AACnB;AAEA,CALC,cAKc;AACb,WAAS;AACX;","names":[]}