pixelize-design-library 2.3.1-beta.8 → 2.3.2

package/.cursor/modules/utility-ui/MODULE.md

@@ -0,0 +1,15 @@
+# Utility UI
+
+## Purpose
+
+Generic standalone UI helpers: CopyButton, ScrollToTop, LazyWrapper, MoreItems, EmptyState, PdfViewer, FilePreview, FieldSelectModal, ProfilePhotoViewer, StageProgress.
+
+## Key paths
+
+- `src/Components/CopyButton/`, `ScrollToTop/`, `LazyWrapper/`, `MoreItems/`, `EmptyState/`, `PdfViewer/`, `FilePreview/`, `FieldSelectModal/`, `ProfilePhotoViewer/`, `StageProgress/`
+
+## Key rules
+
+- FilePreview also exports `FilePreviewTrigger`; StageProgress also exports `StageItem` (StepperStage is internal)
+- LazyWrapper wraps lazy/Suspense loading; ScrollToTop is a scroll-position helper — keep them framework-agnostic (props in, events out)
+- Single-file components (CopyButton, ScrollToTop, LazyWrapper, PdfViewer, FieldSelectModal) have no colocated Props file — types are inline

package/.cursor/modules/utils-hooks/MODULE.md

@@ -0,0 +1,13 @@
+# Utils & Hooks
+
+## Purpose
+
+Shared utilities and hooks: debounce, table helpers, preferences.
+
+## Key paths
+
+- `src/Utils/table.ts`, `src/Hooks/usePreferences.ts`, `src/services/feedback.ts`
+
+## Key rules
+
+- `debounce` exported from index.ts

package/.cursor/pixelize-task-statusline.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+# Local status line only — never sent to the model. See .cursor/TASK-SETUP.md
+set -euo pipefail
+
+STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
+
+payload=$(cat)
+dir=$(echo "$payload" | jq -r ".cwd // .workspace.current_dir // empty")
+session_id=$(echo "$payload" | jq -r ".session_id // empty")
+base=$(basename "$dir")
+
+show_no_skill_warning=false
+if [[ -n "$session_id" && -f "$STATE_FILE" ]]; then
+  if jq -e --arg id "$session_id" '.[$id].chatting_without_skill == true' "$STATE_FILE" >/dev/null 2>&1; then
+    show_no_skill_warning=true
+  fi
+fi
+
+case "$base" in
+  account-frontend|account-service)
+    line1="/ → task  (Account FE + BE)"
+    line2=""
+    ;;
+  crm-frontend|crm-service)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-task  (CRM FE + BE)"
+    ;;
+  social-frontend|social-service)
+    line1="/ → task  (this repo)"
+    line2="/ → social-task  (Social FE + BE)"
+    ;;
+  tickets-frontend)
+    line1="/ → task  (this repo)"
+    line2="/ → tickets-task"
+    ;;
+  crm-mobile)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-mobile-task"
+    ;;
+  Micro-Components)
+    line1="/ → task  (this repo)"
+    line2="/ → design-task"
+    ;;
+  hrms)
+    line1="/ → task  (this repo)"
+    line2="/ → hrms-task  (HRMS FE + BE)"
+    ;;
+  *)
+    line1="Open a Pixelize repo root for / → task"
+    line2=""
+    ;;
+esac
+
+if [[ "$show_no_skill_warning" == "true" ]]; then
+  echo -e "\033[1;33m\033[7m  ⚠  CHATTING WITHOUT TASK SKILL — use / menu  ⚠  \033[0m"
+  echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+fi
+
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+echo -e "\033[1;33m  FEATURE WORK → $line1\033[0m"
+if [ -n "$line2" ]; then
+  echo -e "\033[1;33m  Full pipeline → $line2\033[0m"
+fi
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"

package/.cursor/plans/current.md

@@ -0,0 +1,35 @@
+# Fix Dropdown menu viewport overflow
+
+## Goal
+
+When the Dropdown trigger sits near a screen edge (e.g. far right), the portaled menu currently renders off-screen. It should reposition to stay fully visible within the viewport.
+
+## Type
+
+fix
+
+## Scope
+
+- In scope: `src/Components/Dropdown/DropDown.tsx` positioning logic
+- Out of scope: visual restyle, new props API, other select components
+- Agents needed: fe-impl
+
+## Root cause
+
+`updateMenuPos` sets `top = r.bottom, left = r.left` with no viewport clamping. The `position="fixed"` portaled menu overflows when the trigger is near the right/bottom edge.
+
+## Tasks
+
+### Component (fe-impl)
+
+- [ ] Clamp horizontal position: right-align to trigger and clamp to viewport (8px gutter) when overflowing the right edge; clamp left edge too.
+- [ ] Clamp vertical position: flip above the trigger when the menu would overflow the bottom and there is more space above; otherwise clamp.
+- [ ] Measure the rendered menu (width/height) via the menu ref so clamping uses real dimensions; recompute on open, scroll, resize.
+
+### Tests
+
+- [ ] Jest test for Dropdown: opens, renders options, repositions left when trigger near right edge.
+
+## Risks / assumptions
+
+- Uses viewport (window.innerWidth/Height) — fixed positioning, correct for portal-to-body.

package/.cursor/rules

@@ -0,0 +1,31 @@
+## Session start
+- Always read CLAUDE.md before starting any task
+- Always read MODULE.md before touching a component family (`.cursor/modules/<domain>/MODULE.md`)
+- Read one similar existing component before implementing
+- Never invent a new pattern if one already exists
+
+## Implementation
+- Components live in `src/Components/<Name>/`
+- Public API via `src/index.ts` only
+- Demo pages in `src/Pages/` for playground — not published
+- Never add CRM/app-specific API calls to library components
+- Use theme tokens from `src/Theme/` — no hardcoded brand colors
+- Add Jest tests for new behavior (`*.test.tsx`)
+- Keep changes minimal — no scope creep
+
+## Output quality
+- Never create placeholder files unless explicitly asked
+- Never use fake data, lorem ipsum, example.com, or demo seeds
+- Never leave TODO comments — implement fully or report blocked
+- Production-ready components with loading/error states where applicable
+
+## Branch rules
+- Always branch from **develop** — never from main
+- Feature work: `feature/<domain>-<short-description>`
+- Bug fixes: `fix/<domain>-<short-description>`
+- Never commit directly to main
+
+## Commit rules
+- Never commit without explicit user confirmation
+- Never run git push under any condition
+- Never add Cursor co-author lines

package/.cursor/skills/task/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: task
+description: >-
+  Runs the Pixelize Design Library dev pipeline: task-plan → fe-impl → test-create → test-exec → review gate → commit. Use when the user invokes @task, /task, or requests component library delivery.
+disable-model-invocation: true
+---
+
+# Task Pipeline — Pixelize Design Library
+
+Single library repo **Micro-Components** (`pixelize-design-library`). Module docs: `.cursor/modules/<domain>/MODULE.md`.
+
+Run phases in order. Do not skip unless user opts out.
+
+```
+- [ ] 1. Task plan       (agent: task-plan)
+- [ ] 2. Implementation  (agents: fe-impl + be-impl, parallel when both needed)
+- [ ] 3a. Test creation  (agent: test-create)
+- [ ] 3b. Test execution (agent: test-exec)
+- [ ] 4. Review gate     (orchestrator — show diff, wait for user)
+- [ ] 5. Commit          (orchestrator only)
+```
+
+---
+
+## Before Starting
+
+1. Read CLAUDE.md
+2. Confirm user goal — feat / fix / refactor / chore
+3. Tell user which phases apply
+
+---
+
+## Phase 1 — Task Plan
+
+Agent: task-plan → `.cursor/agents/task-plan.md`
+
+- Read `.cursor/modules/<domain>/MODULE.md` for touched component families
+- Plan saved to `.cursor/plans/current.md`
+- If current.md already exists — read it first, user may be resuming
+
+Gate: do not start phase 2 until plan has concrete tasks.
+
+---
+
+## Phase 2 — Implementation
+
+| Plan says | Action |
+|-----------|--------|
+| Library only | Invoke fe-impl only |
+| Both | Rare — fe-impl + test agents |
+
+Pass `.cursor/plans/current.md` to each agent.
+
+If blocked mid-task:
+- Save progress to `.cursor/plans/blocked/<task-name>.md` with exact blocker details
+- Stop pipeline and report to user
+
+Gate: all required agents must report Done or Blocked before phase 3.
+
+---
+
+## Phase 3 — Tests
+
+3a: test-create → `.cursor/agents/test-create.md`
+3b: test-exec → `.cursor/agents/test-exec.md`
+
+Jest: `npm test` from repo root.
+
+Gate: do not proceed to review if tests failed and not explicitly waived by user.
+
+---
+
+## Phase 4 — Review Gate
+
+```bash
+git status
+git diff
+git diff --staged
+git log -5 --oneline
+```
+
+Run git status/diff. STOP and wait for user approval.
+
+```
+CHANGES READY TO COMMIT
+
+Backend:
+- path/to/file — what changed
+
+Frontend:
+- path/to/component — what changed
+
+Tests:
+- path/to/test — what it covers
+
+MODULE.md updates:
+- path/to/MODULE.md
+
+Excluded:
+- none
+```
+
+STOP. Wait for: "yes" / "commit" / "looks good" / "go ahead"
+
+
+## Phase 5 — Commit
+
+### Commit message format
+
+```
+<type>(<module>): <concise imperative title>
+
+Backend:
+- <specific change — file context>
+
+Frontend:
+- <specific change — file context>
+
+Tests:
+- <what is covered and where>
+
+Config:
+- <migrations, registry changes, config updates>
+```
+
+### Commit steps
+
+1. Scan diff — if .env or secrets found, warn user and ask if they want to include. Commit only on confirmation.
+2. git add relevant files — state any exclusions clearly
+3. git commit using HEREDOC — never add Cursor attribution lines
+4. If Cursor injects co-author lines — amend immediately if unpushed
+5. Verify: git status + git log -1 --format=full
+6. Show commit hash to user
+7. Move `.cursor/plans/current.md` → `.cursor/plans/done/<YYYY-MM-DD>-<title>.md`
+
+Never run git push under any condition.
+
+### Commit safety
+
+- Never --no-verify unless user explicitly requests
+- Never force-push any branch
+- Nothing staged → skip commit, report clearly
+
+---
+
+## Final Report
+
+| Phase    | Status         | Notes                             |
+| -------- | -------------- | --------------------------------- |
+| 1 Plan   | done / skipped | saved to .cursor/plans/current.md |
+| 2 Impl   | fe / be / both | done / blocked                    |
+| 3 Tests  | create / exec  | pass / fail / blocked             |
+| 4 Review | approved       | confirmed by user                 |
+| 5 Commit | done / skipped | hash if committed                 |
+
+---
+
+## User Opt-outs
+
+| User says     | Effect                                    |
+| ------------- | ----------------------------------------- |
+| "plan only"   | Stop after phase 1                        |
+| "no tests"    | Skip phase 3 — confirm with user first    |
+| "no commit"   | Stop after phase 4 review                 |
+| "commit only" | Phase 4+5 only — still show diff and wait |
+| "skip review" | Go straight to commit — confirm with user |
+

package/CLAUDE.md

@@ -0,0 +1,122 @@
+# Pixelize Design Library — Agent Guide
+
+Rules for AI assistants working in **Micro-Components** (npm: `pixelize-design-library`).
+
+## 1. App name and purpose
+
+**Pixelize Design Library** — shared React UI component library and theme system for all Pixelize frontends. Published to npm; local Vite playground demos components in `src/Pages/`.
+
+## 2. Stack
+
+| Layer         | Technology                          | Version        |
+| ------------- | ----------------------------------- | -------------- |
+| Framework     | React + TypeScript                  | 18.3.1 / 5.9.3 |
+| UI base       | Chakra UI + Emotion + Framer Motion | 2.8.2          |
+| Build         | `tsc` → `dist/` + CSS copy          | —              |
+| Dev           | Vite playground                     | 6.2.0          |
+| Styling       | Tailwind + global CSS               | 3.4.17         |
+| Tests         | Jest + Testing Library              | 29.7.0         |
+| Package       | `pixelize-design-library`           | 2.2.x          |
+
+Not a monorepo — single package, one `package.json`.
+
+## 3. Repo relationship
+
+| Repo / package              | Role                                              |
+| --------------------------- | ------------------------------------------------- |
+| **Micro-Components** (here) | Source of `pixelize-design-library` npm package   |
+| **crm-frontend**            | Consumer — `npm run pixelize` to update           |
+| **account-frontend**        | Consumer                                          |
+| **social-frontend**         | Consumer                                          |
+| **tickets-frontend**        | Consumer                                          |
+| **crm-mobile**              | Consumer (native-base overlap — check mobile)     |
+| **pixelize-authenticator**  | Companion auth UI package (separate repo)         |
+
+No backend API in this repo. Demo pages may call dev APIs for playground only.
+
+## 4. Folder structure (2 levels)
+
+```
+Micro-Components/
+├── package.json, tsconfig.json, vite.config.ts
+├── src/
+│   ├── index.ts              public exports (~80)
+│   ├── withTheme.tsx         HOC wrapper
+│   ├── Components/           73 component families
+│   ├── Theme/                8 brand presets + useCustomTheme
+│   ├── Pages/                49 Vite demo/playground pages
+│   ├── Utils/, Hooks/, services/, types/
+│   └── App.tsx, Layout.tsx   playground shell
+├── dist/                     publish output (gitignored)
+└── .cursor/modules/          MODULE.md per component domain (22 domains)
+```
+
+## 5. Dev commands
+
+```bash
+npm start              # Vite playground
+npm run build          # tsc + copy CSS → dist/
+npm test               # Jest
+npm run test:watch
+npm run remove         # strip dev artifacts from dist before publish
+npm run package        # version patch + build + publish
+```
+
+## 6. Module / component pattern
+
+Follow the **Table** or **KanbanBoard** pattern for complex components:
+
+| Step | Path |
+| ---- | ---- |
+| Component | `src/Components/<Name>/` |
+| Subcomponents | `src/Components/<Name>/Components/` or nested folders |
+| Props/types | `<Name>Props.ts` or colocated types |
+| Tests | `*.test.tsx` next to component |
+| Stories | `*.stories.tsx` (where present) |
+| Demo page | `src/Pages/<name>.tsx` |
+| Public export | add to `src/index.ts` |
+| Module doc | `.cursor/modules/<domain>/MODULE.md` |
+
+Read `.cursor/modules/<domain>/MODULE.md` before touching a component family.
+
+## 7. Publishing integration
+
+- **Exports:** every public component must be exported from `src/index.ts`
+- **Peers:** React 18, Chakra, Emotion — consumers install alongside library
+- **Build:** `npm run build` compiles to `dist/`; never edit `dist/` directly
+- **Version:** patch releases via `npm run package`; CI publishes on merge to `develop`
+- **Breaking changes:** require version bump + consumer update in frontends
+
+## 8. Checklist — adding a new component
+
+1. Read similar component + `.cursor/modules/<domain>/MODULE.md`
+2. Create `src/Components/<Name>/` with component + props
+3. Add demo page in `src/Pages/` if needed
+4. Export from `src/index.ts`
+5. Add Jest tests (`*.test.tsx`)
+6. Update `.cursor/modules/<domain>/MODULE.md`
+7. Verify playground: `npm start`
+8. After merge to develop: consumers run `npm run pixelize` in their frontend
+
+## 9. Do
+
+- Match existing Chakra + design token patterns in `src/Theme/`
+- Keep components framework-agnostic where possible (props in, events out)
+- Add tests for new behavior
+- Use `useCustomTheme` / theme tokens — no hardcoded brand colors
+- Branch from **feature/cursor-ai-setup** or **develop**
+
+## 10. Don't
+
+- Don't add app-specific business logic (CRM entities, API calls) to library components
+- Don't break existing exports without semver major bump
+- Don't edit `dist/` — always change `src/` and rebuild
+- Don't skip `index.ts` export for public components
+- Don't introduce a second component pattern without team agreement
+- Don't commit npm tokens or `.env` secrets
+
+## Task pipeline
+
+- **Feature work:** invoke via **`/` menu → `task`** (not by typing `/task` in the message).
+- Cross-repo: **`/ → design-task**`.
+- One-time status line + hook details: [.cursor/TASK-SETUP.md](.cursor/TASK-SETUP.md).

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, isRenewal, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -52,9 +52,9 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     };
 };
 var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isRenewal, isRenewal = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _e.badgeText, badgeColor = _e.badgeColor, buttonColor = _e.buttonColor, buttonColor50 = _e.buttonColor50;
+    var _f = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _f.badgeText, badgeColor = _f.badgeColor, buttonColor = _f.buttonColor, buttonColor50 = _f.buttonColor50;
     var variantStyles = plan.buttonVariant === "outline"
         ? {
             borderColor: buttonColor,
@@ -93,7 +93,7 @@ var PaymentCard = function (_a) {
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
                 plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
-            !isActive && plan.buttonText && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
+            ((!isActive && plan.buttonText) || isRenewal) && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
             react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
                 react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -7,6 +7,7 @@ export type PaymentCardProps = {
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
     buttonLoading?: number;
     isLoading?: boolean;
+    isRenewal?: boolean;
 };
 export type Plan = {
     plan_id: number;

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface CopyButtonProps {
+    /** Text to write to the clipboard. */
+    value: string;
+    /** "icon" floating icon button, "button" icon + text, "menu-item" full-width row. */
+    variant?: "icon" | "button" | "menu-item";
+    /** Visible label for "button" / "menu-item" variants. */
+    label?: string;
+    /** Label shown briefly after a successful copy. */
+    copiedLabel?: string;
+    /** Tooltip text (icon variant). */
+    tooltip?: string;
+    /** ms to keep the "copied" state. */
+    feedbackDuration?: number;
+    /** Icon px size. */
+    iconSize?: number;
+    size?: "xs" | "sm" | "md";
+    /** Called after a successful copy. */
+    onCopy?: (value: string) => void;
+}
+declare const CopyButton: React.FC<CopyButtonProps>;
+export default CopyButton;

package/dist/Components/CopyButton/CopyButton.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var CopyButton = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var value = _a.value, _o = _a.variant, variant = _o === void 0 ? "icon" : _o, _p = _a.label, label = _p === void 0 ? "Copy" : _p, _q = _a.copiedLabel, copiedLabel = _q === void 0 ? "Copied!" : _q, _r = _a.tooltip, tooltip = _r === void 0 ? "Copy" : _r, _s = _a.feedbackDuration, feedbackDuration = _s === void 0 ? 1500 : _s, _t = _a.iconSize, iconSize = _t === void 0 ? 16 : _t, _u = _a.size, size = _u === void 0 ? "sm" : _u, onCopy = _a.onCopy;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _v = (0, react_1.useState)(false), copied = _v[0], setCopied = _v[1];
+    var timer = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () { return function () { return clearTimeout(timer.current); }; }, []);
+    var handleCopy = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    e.stopPropagation();
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(value)];
+                case 2:
+                    _b.sent();
+                    setCopied(true);
+                    onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+                    clearTimeout(timer.current);
+                    timer.current = setTimeout(function () { return setCopied(false); }, feedbackDuration);
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var accent = theme.colors.primary[500];
+    var success = (_d = (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.success) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "#16A34A";
+    if (variant === "menu-item") {
+        return (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "6px", transition: "background 0.15s ease", _hover: { bg: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[100]) !== null && _f !== void 0 ? _f : "#F1F5F9" }, onClick: handleCopy },
+            copied ? react_1.default.createElement(lucide_react_1.Check, { size: iconSize, color: success }) : react_1.default.createElement(lucide_react_1.Copy, { size: iconSize, color: accent }),
+            react_1.default.createElement(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent }, copied ? copiedLabel : label)));
+    }
+    if (variant === "button") {
+        return (react_1.default.createElement(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "8px", border: "1px solid", borderColor: copied ? success : (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[200]) !== null && _h !== void 0 ? _h : "#E2E8F0", bg: "transparent", color: copied ? success : (_k = (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[700]) !== null && _k !== void 0 ? _k : "#2D3748", fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy },
+            copied ? react_1.default.createElement(lucide_react_1.Check, { size: iconSize }) : react_1.default.createElement(lucide_react_1.Copy, { size: iconSize }),
+            react_1.default.createElement(react_2.Text, null, copied ? copiedLabel : label)));
+    }
+    return (react_1.default.createElement(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top" },
+        react_1.default.createElement(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : (_m = (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : "#718096", _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? react_1.default.createElement(lucide_react_1.Check, { size: iconSize }) : react_1.default.createElement(lucide_react_1.Copy, { size: iconSize }) })));
+};
+exports.default = CopyButton;

package/dist/Components/CustomModulesTable/CustomModulesTable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CustomModulesTableProps } from "./CustomModulesTableProps";
+declare const CustomModulesTable: React.FC<CustomModulesTableProps>;
+export default CustomModulesTable;