@mieweb/ui 0.2.4 → 0.3.0-dev.60

package/dist/chunk-7CLHYU4Q.cjs

@@ -0,0 +1,270 @@
+'use strict';
+
+var chunk3XK5GENF_cjs = require('./chunk-3XK5GENF.cjs');
+var chunkBTJHYGPI_cjs = require('./chunk-BTJHYGPI.cjs');
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var PhoneInput = React__namespace.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onFormattedChange,
+    validateOnBlur,
+    className,
+    onBlur,
+    hasError,
+    error,
+    ...props
+  }, ref) => {
+    const [displayValue, setDisplayValue] = React__namespace.useState(
+      () => chunkBTJHYGPI_cjs.formatPhoneNumber(value)
+    );
+    const [localError, setLocalError] = React__namespace.useState();
+    React__namespace.useEffect(() => {
+      setDisplayValue(chunkBTJHYGPI_cjs.formatPhoneNumber(value));
+    }, [value]);
+    const handleChange = (e) => {
+      const formatted = chunkBTJHYGPI_cjs.formatPhoneNumber(e.target.value);
+      setDisplayValue(formatted);
+      const unformatted = chunkBTJHYGPI_cjs.unformatPhoneNumber(formatted);
+      onChange?.(unformatted);
+      onFormattedChange?.(formatted);
+      if (localError) {
+        setLocalError(void 0);
+      }
+    };
+    const handleBlur = (e) => {
+      onBlur?.(e);
+      if (validateOnBlur) {
+        const unformatted = chunkBTJHYGPI_cjs.unformatPhoneNumber(displayValue);
+        if (unformatted.length > 0 && !chunkBTJHYGPI_cjs.isValidPhoneNumber(displayValue)) {
+          setLocalError("Please enter a valid 10-digit phone number");
+        } else {
+          setLocalError(void 0);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunk3XK5GENF_cjs.Input,
+      {
+        ref,
+        type: "tel",
+        inputMode: "numeric",
+        autoComplete: "tel-national",
+        placeholder: "(555) 555-5555",
+        value: displayValue,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        hasError: hasError || !!localError,
+        error: error || localError,
+        className: chunkOR5DRJCW_cjs.cn(className),
+        ...props
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var PHONE_TYPES = [
+  { value: "cell", label: "Cell" },
+  { value: "landline", label: "Landline" },
+  { value: "home", label: "Home" },
+  { value: "work", label: "Work" },
+  { value: "fax", label: "Fax" }
+];
+function PhoneInputGroup({
+  value,
+  onChange,
+  minEntries = 1,
+  maxEntries = 5,
+  required = false,
+  disabled = false,
+  validateOnBlur = false,
+  label,
+  typeLabels,
+  className
+}) {
+  const phones = React__namespace.useMemo(() => {
+    if (value.length >= minEntries) return value;
+    const padding = Array(minEntries - value.length).fill(null).map(() => ({ number: "", type: "cell" }));
+    return [...value, ...padding];
+  }, [value, minEntries]);
+  const handlePhoneChange = (index, number) => {
+    const updated = [...phones];
+    updated[index] = { ...updated[index], number };
+    onChange(updated);
+  };
+  const handleTypeChange = (index, type) => {
+    const updated = [...phones];
+    updated[index] = { ...updated[index], type };
+    onChange(updated);
+  };
+  const handleAdd = () => {
+    if (phones.length < maxEntries) {
+      onChange([...phones, { number: "", type: "cell" }]);
+    }
+  };
+  const handleRemove = (index) => {
+    if (phones.length > minEntries) {
+      onChange(phones.filter((_, i) => i !== index));
+    }
+  };
+  const getTypeLabel = (type) => {
+    if (typeLabels?.[type]) return typeLabels[type];
+    return PHONE_TYPES.find((t) => t.value === type)?.label || type;
+  };
+  const canAdd = phones.length < maxEntries;
+  const canRemove = phones.length > minEntries;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "phone-group", className: chunkOR5DRJCW_cjs.cn("space-y-3", className), children: phones.map((phone, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "phone-row",
+      className: "flex items-start gap-2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          PhoneInput,
+          {
+            label: index === 0 ? label : void 0,
+            value: phone.number,
+            onChange: (num) => handlePhoneChange(index, num),
+            disabled,
+            validateOnBlur,
+            required: required && index === 0
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-24 shrink-0 sm:w-32", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `phone-type-${index}`, className: "sr-only", children: "Phone type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: `phone-type-${index}`,
+              "data-slot": "phone-type-select",
+              value: phone.type,
+              onChange: (e) => handleTypeChange(index, e.target.value),
+              disabled,
+              className: chunkOR5DRJCW_cjs.cn(
+                "h-10 w-full rounded-md border px-3 py-2 text-sm",
+                "border-gray-300 bg-white text-gray-900",
+                "focus:border-brand-500 focus:ring-brand-500/20 focus:ring-2 focus:outline-none",
+                "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+                "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+                "dark:focus:border-brand-400 dark:focus:ring-brand-400/20",
+                index === 0 && label ? "mt-[26px]" : ""
+              ),
+              children: PHONE_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type.value, children: getTypeLabel(type.value) }, type.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "phone-action",
+            className: chunkOR5DRJCW_cjs.cn(
+              "flex shrink-0 items-center",
+              index === 0 && label ? "mt-[26px]" : ""
+            ),
+            children: index === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "phone-add-btn",
+                onClick: handleAdd,
+                disabled: disabled || !canAdd,
+                className: chunkOR5DRJCW_cjs.cn(
+                  "rounded-full p-2 transition-colors",
+                  "text-brand-600 hover:bg-brand-50",
+                  "disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent",
+                  "dark:text-brand-400 dark:hover:bg-brand-900/20",
+                  "dark:disabled:text-gray-600"
+                ),
+                "aria-label": "Add phone number",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    "data-slot": "phone-add-icon",
+                    className: "h-5 w-5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M12 4v16m8-8H4"
+                      }
+                    )
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "phone-remove-btn",
+                onClick: () => handleRemove(index),
+                disabled: disabled || !canRemove,
+                className: chunkOR5DRJCW_cjs.cn(
+                  "rounded-full p-2 transition-colors",
+                  "text-red-600 hover:bg-red-50",
+                  "disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent",
+                  "dark:text-red-400 dark:hover:bg-red-900/20",
+                  "dark:disabled:text-gray-600"
+                ),
+                "aria-label": "Remove phone number",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    "data-slot": "phone-remove-icon",
+                    className: "h-5 w-5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M20 12H4"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    },
+    index
+  )) });
+}
+PhoneInputGroup.displayName = "PhoneInputGroup";
+
+exports.PhoneInput = PhoneInput;
+exports.PhoneInputGroup = PhoneInputGroup;
+//# sourceMappingURL=chunk-7CLHYU4Q.cjs.map
+//# sourceMappingURL=chunk-7CLHYU4Q.cjs.map

package/dist/chunk-7CLHYU4Q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PhoneInput/PhoneInput.tsx"],"names":["React","formatPhoneNumber","unformatPhoneNumber","isValidPhoneNumber","jsx","Input","cn","jsxs"],"mappings":"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","file":"chunk-7CLHYU4Q.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  formatPhoneNumber,\n  unformatPhoneNumber,\n  isValidPhoneNumber,\n} from '../../utils/phone';\nimport { Input, type InputProps } from '../Input';\n\nexport interface PhoneInputProps extends Omit<\n  InputProps,\n  'type' | 'onChange' | 'value'\n> {\n  /** The phone number value (can be formatted or unformatted) */\n  value?: string;\n  /** Callback fired when the value changes, receives the unformatted value */\n  onChange?: (value: string) => void;\n  /** Callback fired when the formatted value changes */\n  onFormattedChange?: (formattedValue: string) => void;\n  /** Whether to validate and show error state for incomplete phone numbers */\n  validateOnBlur?: boolean;\n}\n\n/**\n * A phone number input that automatically formats to US format: (XXX) XXX-XXXX\n *\n * @example\n * ```tsx\n * const [phone, setPhone] = useState('');\n * <PhoneInput\n *   label=\"Phone Number\"\n *   value={phone}\n *   onChange={setPhone}\n *   validateOnBlur\n * />\n * ```\n */\nconst PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(\n  (\n    {\n      value = '',\n      onChange,\n      onFormattedChange,\n      validateOnBlur,\n      className,\n      onBlur,\n      hasError,\n      error,\n      ...props\n    },\n    ref\n  ) => {\n    const [displayValue, setDisplayValue] = React.useState(() =>\n      formatPhoneNumber(value)\n    );\n    const [localError, setLocalError] = React.useState<string | undefined>();\n\n    // Sync external value changes\n    React.useEffect(() => {\n      setDisplayValue(formatPhoneNumber(value));\n    }, [value]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const formatted = formatPhoneNumber(e.target.value);\n      setDisplayValue(formatted);\n\n      const unformatted = unformatPhoneNumber(formatted);\n      onChange?.(unformatted);\n      onFormattedChange?.(formatted);\n\n      // Clear error when user starts typing again\n      if (localError) {\n        setLocalError(undefined);\n      }\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n\n      if (validateOnBlur) {\n        const unformatted = unformatPhoneNumber(displayValue);\n        if (unformatted.length > 0 && !isValidPhoneNumber(displayValue)) {\n          setLocalError('Please enter a valid 10-digit phone number');\n        } else {\n          setLocalError(undefined);\n        }\n      }\n    };\n\n    return (\n      <Input\n        ref={ref}\n        type=\"tel\"\n        inputMode=\"numeric\"\n        autoComplete=\"tel-national\"\n        placeholder=\"(555) 555-5555\"\n        value={displayValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        hasError={hasError || !!localError}\n        error={error || localError}\n        className={cn(className)}\n        {...props}\n      />\n    );\n  }\n);\n\nPhoneInput.displayName = 'PhoneInput';\n\n// =============================================================================\n// Phone Types\n// =============================================================================\n\nexport type PhoneType = 'cell' | 'landline' | 'home' | 'work' | 'fax';\n\nexport interface PhoneEntry {\n  number: string;\n  type: PhoneType;\n}\n\nconst PHONE_TYPES: { value: PhoneType; label: string }[] = [\n  { value: 'cell', label: 'Cell' },\n  { value: 'landline', label: 'Landline' },\n  { value: 'home', label: 'Home' },\n  { value: 'work', label: 'Work' },\n  { value: 'fax', label: 'Fax' },\n];\n\n// =============================================================================\n// PhoneInputGroup\n// =============================================================================\n\nexport interface PhoneInputGroupProps {\n  /** Array of phone entries */\n  value: PhoneEntry[];\n  /** Callback when phone entries change */\n  onChange: (phones: PhoneEntry[]) => void;\n  /** Minimum number of phone entries (default: 1) */\n  minEntries?: number;\n  /** Maximum number of phone entries (default: 5) */\n  maxEntries?: number;\n  /** Whether the first entry is required */\n  required?: boolean;\n  /** Whether all inputs are disabled */\n  disabled?: boolean;\n  /** Validate on blur */\n  validateOnBlur?: boolean;\n  /** Label for the phone input */\n  label?: string;\n  /** Labels for type options (for i18n) */\n  typeLabels?: Record<PhoneType, string>;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * A group of phone inputs with type selection and add/remove functionality.\n *\n * @example\n * ```tsx\n * const [phones, setPhones] = useState<PhoneEntry[]>([\n *   { number: '', type: 'cell' }\n * ]);\n *\n * <PhoneInputGroup\n *   value={phones}\n *   onChange={setPhones}\n *   required\n * />\n * ```\n */\nfunction PhoneInputGroup({\n  value,\n  onChange,\n  minEntries = 1,\n  maxEntries = 5,\n  required = false,\n  disabled = false,\n  validateOnBlur = false,\n  label,\n  typeLabels,\n  className,\n}: PhoneInputGroupProps) {\n  // Ensure we always have at least minEntries\n  const phones = React.useMemo(() => {\n    if (value.length >= minEntries) return value;\n    const padding: PhoneEntry[] = Array(minEntries - value.length)\n      .fill(null)\n      .map(() => ({ number: '', type: 'cell' as PhoneType }));\n    return [...value, ...padding];\n  }, [value, minEntries]);\n\n  const handlePhoneChange = (index: number, number: string) => {\n    const updated = [...phones];\n    updated[index] = { ...updated[index], number };\n    onChange(updated);\n  };\n\n  const handleTypeChange = (index: number, type: PhoneType) => {\n    const updated = [...phones];\n    updated[index] = { ...updated[index], type };\n    onChange(updated);\n  };\n\n  const handleAdd = () => {\n    if (phones.length < maxEntries) {\n      onChange([...phones, { number: '', type: 'cell' }]);\n    }\n  };\n\n  const handleRemove = (index: number) => {\n    if (phones.length > minEntries) {\n      onChange(phones.filter((_, i) => i !== index));\n    }\n  };\n\n  const getTypeLabel = (type: PhoneType): string => {\n    if (typeLabels?.[type]) return typeLabels[type];\n    return PHONE_TYPES.find((t) => t.value === type)?.label || type;\n  };\n\n  const canAdd = phones.length < maxEntries;\n  const canRemove = phones.length > minEntries;\n\n  return (\n    <div data-slot=\"phone-group\" className={cn('space-y-3', className)}>\n      {phones.map((phone, index) => (\n        <div\n          key={index}\n          data-slot=\"phone-row\"\n          className=\"flex items-start gap-2\"\n        >\n          {/* Phone number input */}\n          <div className=\"flex-1\">\n            <PhoneInput\n              label={index === 0 ? label : undefined}\n              value={phone.number}\n              onChange={(num) => handlePhoneChange(index, num)}\n              disabled={disabled}\n              validateOnBlur={validateOnBlur}\n              required={required && index === 0}\n            />\n          </div>\n\n          {/* Type selector */}\n          <div className=\"w-24 shrink-0 sm:w-32\">\n            <label htmlFor={`phone-type-${index}`} className=\"sr-only\">\n              Phone type\n            </label>\n            <select\n              id={`phone-type-${index}`}\n              data-slot=\"phone-type-select\"\n              value={phone.type}\n              onChange={(e) =>\n                handleTypeChange(index, e.target.value as PhoneType)\n              }\n              disabled={disabled}\n              className={cn(\n                'h-10 w-full rounded-md border px-3 py-2 text-sm',\n                'border-gray-300 bg-white text-gray-900',\n                'focus:border-brand-500 focus:ring-brand-500/20 focus:ring-2 focus:outline-none',\n                'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',\n                'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',\n                'dark:focus:border-brand-400 dark:focus:ring-brand-400/20',\n                index === 0 && label ? 'mt-[26px]' : ''\n              )}\n            >\n              {PHONE_TYPES.map((type) => (\n                <option key={type.value} value={type.value}>\n                  {getTypeLabel(type.value)}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Add/Remove buttons */}\n          <div\n            data-slot=\"phone-action\"\n            className={cn(\n              'flex shrink-0 items-center',\n              index === 0 && label ? 'mt-[26px]' : ''\n            )}\n          >\n            {index === 0 ? (\n              <button\n                type=\"button\"\n                data-slot=\"phone-add-btn\"\n                onClick={handleAdd}\n                disabled={disabled || !canAdd}\n                className={cn(\n                  'rounded-full p-2 transition-colors',\n                  'text-brand-600 hover:bg-brand-50',\n                  'disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent',\n                  'dark:text-brand-400 dark:hover:bg-brand-900/20',\n                  'dark:disabled:text-gray-600'\n                )}\n                aria-label=\"Add phone number\"\n              >\n                <svg\n                  data-slot=\"phone-add-icon\"\n                  className=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M12 4v16m8-8H4\"\n                  />\n                </svg>\n              </button>\n            ) : (\n              <button\n                type=\"button\"\n                data-slot=\"phone-remove-btn\"\n                onClick={() => handleRemove(index)}\n                disabled={disabled || !canRemove}\n                className={cn(\n                  'rounded-full p-2 transition-colors',\n                  'text-red-600 hover:bg-red-50',\n                  'disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent',\n                  'dark:text-red-400 dark:hover:bg-red-900/20',\n                  'dark:disabled:text-gray-600'\n                )}\n                aria-label=\"Remove phone number\"\n              >\n                <svg\n                  data-slot=\"phone-remove-icon\"\n                  className=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M20 12H4\"\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nPhoneInputGroup.displayName = 'PhoneInputGroup';\n\nexport { PhoneInput, PhoneInputGroup };\n"]}

package/dist/{chunk-RYQ5NEKH.js → chunk-7MX7MGSA.js}

@@ -10,5 +10,5 @@ var brands = {
 };
 
 export { brands };
-//# sourceMappingURL=chunk-RYQ5NEKH.js.map
-//# sourceMappingURL=chunk-RYQ5NEKH.js.map
+//# sourceMappingURL=chunk-7MX7MGSA.js.map
+//# sourceMappingURL=chunk-7MX7MGSA.js.map

package/dist/{chunk-RYQ5NEKH.js.map → chunk-7MX7MGSA.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/brands/index.ts"],"names":[],"mappings":";AAiCO,IAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,MAAM,OAAO,sBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa,CAAA;AAAA,EAChE,OAAA,EAAS,MAAM,OAAO,uBAAW,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,YAAY,CAAA;AAAA,EAC7D,mBAAA,EAAqB,MACnB,OAAO,iCAAqB,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,qBAAqB,CAAA;AAAA,EACnE,MAAA,EAAQ,MAAM,OAAO,sBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,MAAA,EAAQ,MAAM,OAAO,oBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,UAAA,EAAY,MAAM,OAAO,0BAAc,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,eAAe,CAAA;AAAA,EACtE,QAAA,EAAU,MAAM,OAAO,wBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa;AAClE","file":"chunk-RYQ5NEKH.js","sourcesContent":["/**\n * @mieweb/ui Brand System\n *\n * Export all brand-related types, utilities, and configurations.\n */\n\n// Types and utilities\nexport type {\n  BrandConfig,\n  BrandColors,\n  BrandTypography,\n  BrandBorderRadius,\n  BrandBoxShadow,\n  ColorScale,\n  SemanticColors,\n} from './types';\n\nexport {\n  generateBrandCSS,\n  generateTailwindTheme,\n  createBrandPreset,\n} from './types';\n\n// Brand configurations\nexport { bluehiveBrand } from './bluehive';\nexport { defaultBrand } from './default';\nexport { enterpriseHealthBrand } from './enterprise-health';\nexport { miewebBrand } from './mieweb';\nexport { ozwellBrand } from './ozwell';\nexport { wagglelineBrand } from './waggleline';\nexport { webchartBrand } from './webchart';\n\n// All brands for iteration\nexport const brands = {\n  bluehive: () => import('./bluehive').then((m) => m.bluehiveBrand),\n  default: () => import('./default').then((m) => m.defaultBrand),\n  'enterprise-health': () =>\n    import('./enterprise-health').then((m) => m.enterpriseHealthBrand),\n  mieweb: () => import('./mieweb').then((m) => m.miewebBrand),\n  ozwell: () => import('./ozwell').then((m) => m.ozwellBrand),\n  waggleline: () => import('./waggleline').then((m) => m.wagglelineBrand),\n  webchart: () => import('./webchart').then((m) => m.webchartBrand),\n} as const;\n"]}
+{"version":3,"sources":["../src/brands/index.ts"],"names":[],"mappings":";AAiCO,IAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,MAAM,OAAO,sBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa,CAAA;AAAA,EAChE,OAAA,EAAS,MAAM,OAAO,uBAAW,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,YAAY,CAAA;AAAA,EAC7D,mBAAA,EAAqB,MACnB,OAAO,iCAAqB,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,qBAAqB,CAAA;AAAA,EACnE,MAAA,EAAQ,MAAM,OAAO,sBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,MAAA,EAAQ,MAAM,OAAO,oBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,UAAA,EAAY,MAAM,OAAO,0BAAc,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,eAAe,CAAA;AAAA,EACtE,QAAA,EAAU,MAAM,OAAO,wBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa;AAClE","file":"chunk-7MX7MGSA.js","sourcesContent":["/**\n * @mieweb/ui Brand System\n *\n * Export all brand-related types, utilities, and configurations.\n */\n\n// Types and utilities\nexport type {\n  BrandConfig,\n  BrandColors,\n  BrandTypography,\n  BrandBorderRadius,\n  BrandBoxShadow,\n  ColorScale,\n  SemanticColors,\n} from './types';\n\nexport {\n  generateBrandCSS,\n  generateTailwindTheme,\n  createBrandPreset,\n} from './types';\n\n// Brand configurations\nexport { bluehiveBrand } from './bluehive';\nexport { defaultBrand } from './default';\nexport { enterpriseHealthBrand } from './enterprise-health';\nexport { miewebBrand } from './mieweb';\nexport { ozwellBrand } from './ozwell';\nexport { wagglelineBrand } from './waggleline';\nexport { webchartBrand } from './webchart';\n\n// All brands for iteration\nexport const brands = {\n  bluehive: () => import('./bluehive').then((m) => m.bluehiveBrand),\n  default: () => import('./default').then((m) => m.defaultBrand),\n  'enterprise-health': () =>\n    import('./enterprise-health').then((m) => m.enterpriseHealthBrand),\n  mieweb: () => import('./mieweb').then((m) => m.miewebBrand),\n  ozwell: () => import('./ozwell').then((m) => m.ozwellBrand),\n  waggleline: () => import('./waggleline').then((m) => m.wagglelineBrand),\n  webchart: () => import('./webchart').then((m) => m.webchartBrand),\n} as const;\n"]}

package/dist/chunk-7XWPUWSL.js

@@ -0,0 +1,328 @@
+import { useClickOutside } from './chunk-OKBR6PX4.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import * as libphonenumber from 'google-libphonenumber';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PhoneNumberUtil2 = libphonenumber.default?.PhoneNumberUtil ?? libphonenumber.PhoneNumberUtil;
+var PhoneNumberFormat2 = libphonenumber.default?.PhoneNumberFormat ?? libphonenumber.PhoneNumberFormat;
+function isoToEmoji(code) {
+  return [...code.toUpperCase()].map((c) => String.fromCodePoint(127462 - 65 + c.charCodeAt(0))).join("");
+}
+function buildCountryList() {
+  const phoneUtil = PhoneNumberUtil2.getInstance();
+  const regions = phoneUtil.getSupportedRegions();
+  const list = regions.map((code) => {
+    const callingCode = phoneUtil.getCountryCodeForRegion(code);
+    return {
+      code,
+      name: regionDisplayName(code),
+      dialCode: `+${callingCode}`,
+      flag: isoToEmoji(code)
+    };
+  });
+  list.sort((a, b) => a.name.localeCompare(b.name));
+  return list;
+}
+var _countries = null;
+function getCountries() {
+  if (!_countries) _countries = buildCountryList();
+  return _countries;
+}
+var _regionDisplayNames = null;
+function getRegionDisplayNames() {
+  if (_regionDisplayNames === null) {
+    try {
+      const locales = typeof navigator !== "undefined" && navigator.languages?.length ? [...navigator.languages] : ["en"];
+      _regionDisplayNames = new Intl.DisplayNames(locales, { type: "region" });
+    } catch {
+      return null;
+    }
+  }
+  return _regionDisplayNames;
+}
+function regionDisplayName(code) {
+  const dn = getRegionDisplayNames();
+  if (!dn) return code;
+  return dn.of(code) ?? code;
+}
+function validatePhoneNumber(phoneNumber, countryCode) {
+  try {
+    const phoneUtil = PhoneNumberUtil2.getInstance();
+    const parsed = phoneUtil.parse(phoneNumber, countryCode);
+    return phoneUtil.isValidNumberForRegion(parsed, countryCode);
+  } catch {
+    return false;
+  }
+}
+function formatE164(phoneNumber, countryCode) {
+  try {
+    const phoneUtil = PhoneNumberUtil2.getInstance();
+    const parsed = phoneUtil.parse(phoneNumber, countryCode);
+    return phoneUtil.format(parsed, PhoneNumberFormat2.E164);
+  } catch {
+    return phoneNumber;
+  }
+}
+function CountryCodeDropdown({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  placement = "bottom-start",
+  searchPlaceholder = "Search countries\u2026",
+  "aria-label": ariaLabel = "Select country code"
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [internalValue, setInternalValue] = React.useState(value ?? "US");
+  const containerRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const menuId = React.useId();
+  const isControlled = value !== void 0;
+  const activeValue = isControlled ? value : internalValue;
+  const [countriesLoaded, setCountriesLoaded] = React.useState(false);
+  const countries = React.useMemo(
+    () => countriesLoaded ? getCountries() : [],
+    [countriesLoaded]
+  );
+  React.useEffect(() => {
+    if (isOpen && !countriesLoaded) setCountriesLoaded(true);
+  }, [isOpen, countriesLoaded]);
+  const selected = React.useMemo(() => {
+    if (countries.length) {
+      return countries.find((c) => c.code === activeValue) ?? countries.find((c) => c.code === "US");
+    }
+    return {
+      code: activeValue ?? "US",
+      name: regionDisplayName(activeValue ?? "US"),
+      dialCode: `+${PhoneNumberUtil2.getInstance().getCountryCodeForRegion(activeValue ?? "US")}`,
+      flag: isoToEmoji(activeValue ?? "US")
+    };
+  }, [activeValue, countries]);
+  const filtered = React.useMemo(() => {
+    if (!search) return countries;
+    const q = search.toLowerCase();
+    return countries.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.dialCode.includes(q) || c.code.toLowerCase().includes(q)
+    );
+  }, [search, countries]);
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+    setSearch("");
+  }, []);
+  useClickOutside(containerRef, close);
+  useEscapeKey(close, isOpen);
+  React.useEffect(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen]);
+  const handleToggle = React.useCallback(() => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  }, [disabled]);
+  const handleSelect = React.useCallback(
+    (country) => {
+      if (!isControlled) {
+        setInternalValue(country.code);
+      }
+      onChange?.(country);
+      close();
+    },
+    [isControlled, onChange, close]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (!isOpen) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const items = listRef.current?.querySelectorAll(
+          '[role="option"]'
+        );
+        if (!items?.length) return;
+        const current = document.activeElement;
+        const idx = Array.from(items).indexOf(current);
+        let next;
+        if (e.key === "ArrowDown") {
+          next = idx < items.length - 1 ? idx + 1 : 0;
+        } else {
+          next = idx > 0 ? idx - 1 : items.length - 1;
+        }
+        items[next].focus();
+      }
+    },
+    [isOpen]
+  );
+  const placementClass = placement === "bottom-end" ? "top-full right-0 mt-1" : "top-full left-0 mt-1";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "country-dropdown",
+      className: "relative inline-flex",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-slot": "country-dropdown-trigger",
+            onClick: handleToggle,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? menuId : void 0,
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm",
+              "border-input bg-background text-foreground",
+              "transition-colors duration-200",
+              "hover:bg-neutral-50 dark:hover:bg-neutral-700",
+              "focus:ring-ring focus:ring-2 focus:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "country-dropdown-flag",
+                  className: "text-base leading-none",
+                  "aria-hidden": "true",
+                  children: selected.flag
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "data-slot": "country-dropdown-dialcode", children: selected.dialCode }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-slot": "country-dropdown-chevron",
+                  className: cn(
+                    "h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200",
+                    isOpen && "rotate-180"
+                  ),
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: menuId,
+            role: "listbox",
+            "data-slot": "country-dropdown-panel",
+            "aria-label": ariaLabel,
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            className: cn(
+              "absolute z-50 w-72",
+              "rounded-xl border border-neutral-200 bg-white shadow-lg",
+              "dark:border-neutral-700 dark:bg-neutral-800",
+              "animate-in fade-in zoom-in-95 duration-100",
+              placementClass
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "country-dropdown-search",
+                  className: "border-b border-neutral-200 p-2 dark:border-neutral-700",
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: searchInputRef,
+                      type: "text",
+                      "data-slot": "country-dropdown-search-input",
+                      value: search,
+                      onChange: (e) => setSearch(e.target.value),
+                      placeholder: searchPlaceholder,
+                      "aria-label": "Search countries",
+                      className: cn(
+                        "w-full rounded-lg border border-neutral-200 px-3 py-1.5 text-sm",
+                        "text-foreground placeholder:text-muted-foreground bg-white",
+                        "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
+                        "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  "data-slot": "country-dropdown-list",
+                  className: "max-h-60 overflow-y-auto p-1",
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: "No countries found" }) : filtered.map((country) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "data-slot": "country-dropdown-option",
+                      "aria-selected": country.code === selected.code,
+                      onClick: () => handleSelect(country),
+                      className: cn(
+                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+                        "transition-colors duration-150",
+                        "focus:outline-none",
+                        country.code === selected.code ? "bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-700 dark:text-white" : "text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-700/50",
+                        "focus:bg-neutral-100 dark:focus:bg-neutral-700"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-flag",
+                            className: "text-base leading-none",
+                            "aria-hidden": "true",
+                            children: country.flag
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-name",
+                            className: "flex-1 truncate",
+                            children: country.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "country-dropdown-option-dialcode",
+                            className: "shrink-0 text-xs text-neutral-500 dark:text-neutral-400",
+                            children: country.dialCode
+                          }
+                        )
+                      ]
+                    },
+                    country.code
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+CountryCodeDropdown.displayName = "CountryCodeDropdown";
+
+export { CountryCodeDropdown, formatE164, validatePhoneNumber };
+//# sourceMappingURL=chunk-7XWPUWSL.js.map
+//# sourceMappingURL=chunk-7XWPUWSL.js.map