@omnifyjp/ui 0.5.2 → 1.0.0

package/src/styles/theme.css

@@ -0,0 +1,461 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* ===================================
+   * TYPOGRAPHY TOKENS
+   * =================================== */
+  --font-size: 16px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* Font sizes */
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+  
+  /* Line heights */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* ===================================
+   * COLOR TOKENS
+   * =================================== */
+  --background: #ffffff;
+  --foreground: oklch(0.145 0 0);
+  --card: #ffffff;
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #030213;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.0058 264.53);
+  --secondary-foreground: #030213;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #030213;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(0, 0, 0, 0.1);
+  --input: transparent;
+  --input-background: transparent;
+  --switch-background: #cbced4;
+  --ring: oklch(0.708 0 0);
+  
+  /* Chart colors */
+  --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);
+  
+  /* Sidebar colors */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: #030213;
+  --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);
+  
+  /* Semantic colors */
+  --success: #10b981;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #ffffff;
+  --info: #3b82f6;
+  --info-foreground: #ffffff;
+  --error: #ef4444;
+  --error-foreground: #ffffff;
+  
+  /* Gray scale palette */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  
+  /* Blue palette (for active states) */
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+
+  /* ===================================
+   * SPACING TOKENS
+   * =================================== */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;   /* 4px */
+  --spacing-2: 0.5rem;    /* 8px */
+  --spacing-3: 0.75rem;   /* 12px */
+  --spacing-4: 1rem;      /* 16px */
+  --spacing-5: 1.25rem;   /* 20px */
+  --spacing-6: 1.5rem;    /* 24px */
+  --spacing-8: 2rem;      /* 32px */
+  --spacing-10: 2.5rem;   /* 40px */
+  --spacing-12: 3rem;     /* 48px */
+  --spacing-16: 4rem;     /* 64px */
+  --spacing-20: 5rem;     /* 80px */
+  --spacing-24: 6rem;     /* 96px */
+
+  /* ===================================
+   * DENSITY TOKENS — Change these to adjust UI density globally
+   * =================================== */
+
+  /* Headings (used in @layer base) */
+  --heading-h1: var(--text-xl);         /* was --text-2xl */
+  --heading-h2: var(--text-lg);         /* was --text-xl */
+  --heading-h3: var(--text-base);       /* was --text-lg */
+  --heading-h4: var(--text-sm);         /* was --text-base */
+
+  /* Page layout */
+  --density-page: 1rem;                 /* 16px — page content padding */
+  --density-section: 1rem;              /* 16px — gap between sections */
+  --density-page-title: 1.25rem;        /* 20px — page title font-size */
+
+  /* Standard element height (btn, input, select, tabs) */
+  --density-element-xs: 1.5rem;         /* 24px — extra small */
+  --density-element-sm: 1.75rem;        /* 28px — small */
+  --density-element: 2rem;              /* 32px — default */
+  --density-element-lg: 2.25rem;        /* 36px — large */
+  --density-element-xl: 2.75rem;        /* 44px — extra large (login forms) */
+
+  /* Card padding */
+  --density-card: 1rem;                 /* 16px — was 1.5rem/24px */
+
+  /* Dialog */
+  --density-dialog: 1.25rem;            /* 20px — was 1.5rem/24px */
+
+  /* Table */
+  --density-table-head: 2rem;           /* 32px — was 2.5rem/40px */
+
+  /* Single-component tokens (used via var() directly) */
+  --density-popover: 0.75rem;           /* 12px */
+  --density-sheet: 0.75rem;             /* 12px */
+  --density-accordion: 0.625rem;        /* 10px */
+  --density-menu-item-py: 0.25rem;      /* 4px */
+
+  /* ===================================
+   * LAYOUT TOKENS
+   * =================================== */
+  --header-height: 3rem;            /* 48px — was 4rem/64px */
+  --sidebar-width: 16rem;          /* 256px */
+  --sidebar-collapsed-width: 4rem; /* 64px */
+  --sidebar-transition: 300ms;
+  --content-sidebar-width: 20rem;  /* 320px - for PageContainer sidebar */
+  --container-max-width: 1280px;
+  
+  /* ===================================
+   * BORDER & RADIUS TOKENS
+   * =================================== */
+  --radius: 0.375rem;              /* 6px */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-full: 9999px;
+  
+  /* Border widths */
+  --border-width: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+
+  /* ===================================
+   * SHADOW TOKENS
+   * =================================== */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* ===================================
+   * Z-INDEX TOKENS
+   * =================================== */
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+
+  /* ===================================
+   * TRANSITION & ANIMATION TOKENS
+   * =================================== */
+  --transition-fast: 150ms;
+  --transition-base: 200ms;
+  --transition-slow: 300ms;
+  --transition-slower: 500ms;
+  
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ===================================
+   * OPACITY TOKENS
+   * =================================== */
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-100: 1;
+}
+
+.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);
+  
+  /* Semantic colors (dark mode) */
+  --success: #34d399;
+  --success-foreground: #022c22;
+  --warning: #fbbf24;
+  --warning-foreground: #422006;
+  --info: #60a5fa;
+  --info-foreground: #172554;
+  --error: #f87171;
+  --error-foreground: #450a0a;
+
+  /* Dark mode gray scale */
+  --gray-50: #1f2937;
+  --gray-100: #374151;
+  --gray-200: #4b5563;
+  --gray-300: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-500: #d1d5db;
+  --gray-600: #e5e7eb;
+  --gray-700: #f3f4f6;
+  --gray-800: #f9fafb;
+  --gray-900: #ffffff;
+  
+  /* Dark mode blue palette */
+  --blue-50: #1e3a8a;
+  --blue-100: #1d4ed8;
+  --blue-500: #3b82f6;
+  --blue-600: #60a5fa;
+  --blue-700: #93c5fd;
+}
+
+/* ===================================
+ * TAILWIND V4 THEME MAPPING
+ * Map CSS variables to Tailwind classes
+ * =================================== */
+@theme inline {
+  /* Colors */
+  --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-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --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);
+  
+  /* Sidebar colors */
+  --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);
+  
+  /* Semantic colors */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  
+  /* Gray palette - making available as Tailwind classes */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+  
+  /* Blue palette */
+  --color-blue-50: var(--blue-50);
+  --color-blue-100: var(--blue-100);
+  --color-blue-500: var(--blue-500);
+  --color-blue-600: var(--blue-600);
+  --color-blue-700: var(--blue-700);
+  
+  /* Density spacing — creates p-page, h-element, gap-section, etc. */
+  --spacing-page: var(--density-page);
+  --spacing-section: var(--density-section);
+  --spacing-element-xs: var(--density-element-xs);
+  --spacing-element-sm: var(--density-element-sm);
+  --spacing-element: var(--density-element);
+  --spacing-element-lg: var(--density-element-lg);
+  --spacing-element-xl: var(--density-element-xl);
+  --spacing-card: var(--density-card);
+  --spacing-dialog: var(--density-dialog);
+  --spacing-header: var(--header-height);
+  --spacing-table-head: var(--density-table-head);
+
+  /* Density font sizes — creates text-page-title */
+  --font-size-page-title: var(--density-page-title);
+
+  /* Border radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ===================================
+ * BASE STYLES
+ * Default typography and element styles
+ * =================================== */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /**
+  * Default typography styles for HTML elements (h1-h4, p, label, button, input).
+  * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
+  */
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: var(--heading-h1);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  h2 {
+    font-size: var(--heading-h2);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  h3 {
+    font-size: var(--heading-h3);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  h4 {
+    font-size: var(--heading-h4);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  label {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  button {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-normal);
+  }
+
+  input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--leading-normal);
+  }
+}

package/dist/chunk-2ZIFL2X3.js

@@ -1,189 +0,0 @@
-import { useOrganization } from './chunk-SHHZRZMM.js';
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@omnifyjp/ui-components/components/button';
-import { Input } from '@omnifyjp/ui-components/components/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@omnifyjp/ui-components/components/dialog';
-import { Building2, ArrowRight, MapPin, Check, Search } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function OrganizationSetupModal() {
-  const {
-    organizations,
-    selectedOrganization,
-    selectedBranch,
-    setSelectedOrganization,
-    setSelectedBranch,
-    getBranchesByOrg,
-    isSetupComplete
-  } = useOrganization();
-  const { t } = useTranslation("shell");
-  const [step, setStep] = useState("organization");
-  const [tempOrgId, setTempOrgId] = useState("");
-  const [tempBranchId, setTempBranchId] = useState("");
-  const [branchSearch, setBranchSearch] = useState("");
-  useEffect(() => {
-    if (!isSetupComplete) {
-      if (!selectedOrganization) {
-        setStep("organization");
-        setTempOrgId("");
-      } else if (!selectedBranch) {
-        setStep("branch");
-        setTempBranchId("");
-      }
-    }
-  }, [isSetupComplete, selectedOrganization, selectedBranch]);
-  const handleOrganizationNext = () => {
-    const org = organizations.find((o) => o.id === tempOrgId);
-    if (org) {
-      setSelectedOrganization(org);
-      setStep("branch");
-      setTempBranchId("");
-      setBranchSearch("");
-    }
-  };
-  const handleBranchComplete = () => {
-    const branch = getBranchesByOrg(selectedOrganization.id).find((b) => b.id === tempBranchId);
-    if (branch) {
-      setSelectedBranch(branch);
-    }
-  };
-  const availableBranches = selectedOrganization ? getBranchesByOrg(selectedOrganization.id) : [];
-  const filteredBranches = availableBranches.filter(
-    (b) => b.name.toLowerCase().includes(branchSearch.toLowerCase()) || b.location?.toLowerCase().includes(branchSearch.toLowerCase())
-  );
-  return /* @__PURE__ */ jsx(Dialog, { open: !isSetupComplete, onOpenChange: () => {
-  }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[520px]", onInteractOutside: (e) => e.preventDefault(), children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-semibold", children: step === "organization" ? t("org.selectOrg") : t("org.selectBranch") }),
-      /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: step === "organization" ? t("org.selectOrgDesc") : t("org.selectBranchDesc") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium ${step === "organization" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`, children: [
-          /* @__PURE__ */ jsx(Building2, { className: "w-4 h-4" }),
-          t("org.orgStep")
-        ] }),
-        /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium ${step === "branch" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`, children: [
-          /* @__PURE__ */ jsx(MapPin, { className: "w-4 h-4" }),
-          t("org.branchStep")
-        ] })
-      ] }),
-      step === "organization" && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: organizations.map((org) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `relative flex items-center gap-3 rounded-lg border-2 p-4 cursor-pointer transition-all ${tempOrgId === org.id ? "border-primary bg-primary/5" : "border-border hover:border-muted-foreground/30 hover:bg-accent"}`,
-            onClick: () => setTempOrgId(org.id),
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0",
-                  style: { backgroundColor: org.color },
-                  children: org.shortName
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "font-semibold text-base", children: org.name }),
-                org.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: org.description }),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-1", children: t("org.branchCount", { count: getBranchesByOrg(org.id).length }) })
-              ] }),
-              tempOrgId === org.id && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-white" }) })
-            ]
-          },
-          org.id
-        )) }),
-        /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            onClick: handleOrganizationNext,
-            disabled: !tempOrgId,
-            size: "lg",
-            className: "gap-2",
-            children: [
-              t("common.next"),
-              /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4" })
-            ]
-          }
-        ) })
-      ] }),
-      step === "branch" && selectedOrganization && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-muted rounded-lg border border-border", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-1.5", children: t("org.selectedOrg") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-xs",
-                style: { backgroundColor: selectedOrganization.color },
-                children: selectedOrganization.shortName
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedOrganization.name })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: t("org.searchBranch"),
-              value: branchSearch,
-              onChange: (e) => setBranchSearch(e.target.value),
-              className: "pl-9"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-[280px] overflow-y-auto", children: filteredBranches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: t("org.noBranchFound") }) : filteredBranches.map((branch) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `relative flex items-center gap-3 rounded-lg border-2 p-4 cursor-pointer transition-all ${tempBranchId === branch.id ? "border-primary bg-primary/5" : "border-border hover:border-muted-foreground/30 hover:bg-accent"}`,
-            onClick: () => setTempBranchId(branch.id),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(MapPin, { className: "w-5 h-5 text-muted-foreground" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "font-semibold text-base", children: branch.name }),
-                branch.location && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: branch.location })
-              ] }),
-              tempBranchId === branch.id && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-white" }) })
-            ]
-          },
-          branch.id
-        )) }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-between", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              onClick: () => {
-                setStep("organization");
-                setSelectedOrganization(null);
-                setTempOrgId("");
-              },
-              children: t("common.back")
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              onClick: handleBranchComplete,
-              disabled: !tempBranchId,
-              size: "lg",
-              className: "gap-2",
-              children: [
-                t("common.complete"),
-                /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4" })
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] }) });
-}
-
-export { OrganizationSetupModal };
-//# sourceMappingURL=chunk-2ZIFL2X3.js.map
-//# sourceMappingURL=chunk-2ZIFL2X3.js.map

package/dist/chunk-2ZIFL2X3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/OrganizationSetupModal.tsx"],"names":[],"mappings":"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","file":"chunk-2ZIFL2X3.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useOrganization } from '../contexts/OrganizationContext';\nimport { Button } from '@omnifyjp/ui-components/components/button';\nimport { Input } from '@omnifyjp/ui-components/components/input';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@omnifyjp/ui-components/components/dialog';\nimport { Building2, MapPin, ArrowRight, Check, Search } from 'lucide-react';\n\nexport function OrganizationSetupModal() {\n  const {\n    organizations,\n    selectedOrganization,\n    selectedBranch,\n    setSelectedOrganization,\n    setSelectedBranch,\n    getBranchesByOrg,\n    isSetupComplete,\n  } = useOrganization();\n\n  const { t } = useTranslation('shell');\n\n  const [step, setStep] = useState<'organization' | 'branch'>('organization');\n  const [tempOrgId, setTempOrgId] = useState<string>('');\n  const [tempBranchId, setTempBranchId] = useState<string>('');\n  const [branchSearch, setBranchSearch] = useState('');\n\n  useEffect(() => {\n    if (!isSetupComplete) {\n      if (!selectedOrganization) {\n        setStep('organization');\n        setTempOrgId('');\n      } else if (!selectedBranch) {\n        setStep('branch');\n        setTempBranchId('');\n      }\n    }\n  }, [isSetupComplete, selectedOrganization, selectedBranch]);\n\n  const handleOrganizationNext = () => {\n    const org = organizations.find(o => o.id === tempOrgId);\n    if (org) {\n      setSelectedOrganization(org);\n      setStep('branch');\n      setTempBranchId('');\n      setBranchSearch('');\n    }\n  };\n\n  const handleBranchComplete = () => {\n    const branch = getBranchesByOrg(selectedOrganization!.id).find(b => b.id === tempBranchId);\n    if (branch) {\n      setSelectedBranch(branch);\n    }\n  };\n\n  const availableBranches = selectedOrganization ? getBranchesByOrg(selectedOrganization.id) : [];\n  const filteredBranches = availableBranches.filter((b) =>\n    b.name.toLowerCase().includes(branchSearch.toLowerCase()) ||\n    b.location?.toLowerCase().includes(branchSearch.toLowerCase())\n  );\n\n  return (\n    <Dialog open={!isSetupComplete} onOpenChange={() => {}}>\n      <DialogContent className=\"sm:max-w-[520px]\" onInteractOutside={(e) => e.preventDefault()}>\n        <DialogHeader>\n          <DialogTitle className=\"text-xl font-semibold\">\n            {step === 'organization' ? t('org.selectOrg') : t('org.selectBranch')}\n          </DialogTitle>\n          <DialogDescription className=\"text-sm\">\n            {step === 'organization'\n              ? t('org.selectOrgDesc')\n              : t('org.selectBranchDesc')}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"mt-4\">\n          <div className=\"flex items-center gap-2 mb-6\">\n            <div className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium ${\n              step === 'organization' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'\n            }`}>\n              <Building2 className=\"w-4 h-4\" />\n              {t('org.orgStep')}\n            </div>\n            <ArrowRight className=\"w-4 h-4 text-muted-foreground\" />\n            <div className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium ${\n              step === 'branch' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'\n            }`}>\n              <MapPin className=\"w-4 h-4\" />\n              {t('org.branchStep')}\n            </div>\n          </div>\n\n          {step === 'organization' && (\n            <div>\n              <div className=\"space-y-2\">\n                {organizations.map((org) => (\n                  <div\n                    key={org.id}\n                    className={`relative flex items-center gap-3 rounded-lg border-2 p-4 cursor-pointer transition-all ${\n                      tempOrgId === org.id\n                        ? 'border-primary bg-primary/5'\n                        : 'border-border hover:border-muted-foreground/30 hover:bg-accent'\n                    }`}\n                    onClick={() => setTempOrgId(org.id)}\n                  >\n                    <div\n                      className=\"w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0\"\n                      style={{ backgroundColor: org.color }}\n                    >\n                      {org.shortName}\n                    </div>\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"font-semibold text-base\">{org.name}</div>\n                      {org.description && (\n                        <div className=\"text-sm text-muted-foreground\">{org.description}</div>\n                      )}\n                      <div className=\"text-xs text-muted-foreground mt-1\">\n                        {t('org.branchCount', { count: getBranchesByOrg(org.id).length })}\n                      </div>\n                    </div>\n                    {tempOrgId === org.id && (\n                      <div className=\"flex-shrink-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center\">\n                        <Check className=\"w-4 h-4 text-white\" />\n                      </div>\n                    )}\n                  </div>\n                ))}\n              </div>\n\n              <div className=\"mt-6 flex justify-end\">\n                <Button\n                  onClick={handleOrganizationNext}\n                  disabled={!tempOrgId}\n                  size=\"lg\"\n                  className=\"gap-2\"\n                >\n                  {t('common.next')}\n                  <ArrowRight className=\"w-4 h-4\" />\n                </Button>\n              </div>\n            </div>\n          )}\n\n          {step === 'branch' && selectedOrganization && (\n            <div>\n              <div className=\"mb-4 p-3 bg-muted rounded-lg border border-border\">\n                <div className=\"text-xs text-muted-foreground mb-1.5\">{t('org.selectedOrg')}</div>\n                <div className=\"flex items-center gap-2\">\n                  <div\n                    className=\"w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-xs\"\n                    style={{ backgroundColor: selectedOrganization.color }}\n                  >\n                    {selectedOrganization.shortName}\n                  </div>\n                  <span className=\"font-semibold\">{selectedOrganization.name}</span>\n                </div>\n              </div>\n\n              <div className=\"relative mb-3\">\n                <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n                <Input\n                  placeholder={t('org.searchBranch')}\n                  value={branchSearch}\n                  onChange={(e) => setBranchSearch(e.target.value)}\n                  className=\"pl-9\"\n                />\n              </div>\n\n              <div className=\"space-y-2 max-h-[280px] overflow-y-auto\">\n                {filteredBranches.length === 0 ? (\n                  <div className=\"py-6 text-center text-sm text-muted-foreground\">\n                    {t('org.noBranchFound')}\n                  </div>\n                ) : (\n                  filteredBranches.map((branch) => (\n                    <div\n                      key={branch.id}\n                      className={`relative flex items-center gap-3 rounded-lg border-2 p-4 cursor-pointer transition-all ${\n                        tempBranchId === branch.id\n                          ? 'border-primary bg-primary/5'\n                          : 'border-border hover:border-muted-foreground/30 hover:bg-accent'\n                      }`}\n                      onClick={() => setTempBranchId(branch.id)}\n                    >\n                      <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <MapPin className=\"w-5 h-5 text-muted-foreground\" />\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <div className=\"font-semibold text-base\">{branch.name}</div>\n                        {branch.location && (\n                          <div className=\"text-sm text-muted-foreground\">{branch.location}</div>\n                        )}\n                      </div>\n                      {tempBranchId === branch.id && (\n                        <div className=\"flex-shrink-0 w-6 h-6 rounded-full bg-primary flex items-center justify-center\">\n                          <Check className=\"w-4 h-4 text-white\" />\n                        </div>\n                      )}\n                    </div>\n                  ))\n                )}\n              </div>\n\n              <div className=\"mt-6 flex justify-between\">\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setStep('organization');\n                    setSelectedOrganization(null);\n                    setTempOrgId('');\n                  }}\n                >\n                  {t('common.back')}\n                </Button>\n                <Button\n                  onClick={handleBranchComplete}\n                  disabled={!tempBranchId}\n                  size=\"lg\"\n                  className=\"gap-2\"\n                >\n                  {t('common.complete')}\n                  <ArrowRight className=\"w-4 h-4\" />\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}