@ews-admin/global-design-system 1.0.0

package/dist/index.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+/**
+ * Utility function to merge class names
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+function cn(...inputs) {
+    return clsx(inputs);
+}
+/**
+ * Utility function to format currency
+ * @param amount - Amount to format
+ * @param currency - Currency code (default: 'USD')
+ * @returns Formatted currency string
+ */
+function formatCurrency(amount, currency = "USD") {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+    }).format(amount);
+}
+/**
+ * Utility function to format date
+ * @param date - Date to format
+ * @param options - Intl.DateTimeFormat options
+ * @returns Formatted date string
+ */
+function formatDate(date, options) {
+    const dateObj = new Date(date);
+    return new Intl.DateTimeFormat("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        ...options,
+    }).format(dateObj);
+}
+/**
+ * Utility function to debounce function calls
+ * @param func - Function to debounce
+ * @param wait - Wait time in milliseconds
+ * @returns Debounced function
+ */
+function debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+/**
+ * Utility function to generate unique ID
+ * @param prefix - Optional prefix for the ID
+ * @returns Unique ID string
+ */
+function generateId(prefix = "ews") {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+const Button = React.forwardRef(({ className, variant = "primary", size = "md", loading = false, fullWidth = false, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
+    const baseStyles = "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+    const variants = {
+        primary: "bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]",
+        secondary: "bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]",
+        success: "bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]",
+        warning: "bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]",
+        error: "bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]",
+        ghost: "bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]",
+    };
+    const sizes = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg",
+    };
+    return (jsxRuntime.jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && jsxRuntime.jsx("span", { className: "mr-2", children: leftIcon }), children, !loading && rightIcon && jsxRuntime.jsx("span", { className: "ml-2", children: rightIcon })] }));
+});
+Button.displayName = "Button";
+
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, id, ...props }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const hasError = Boolean(error);
+    const actualVariant = hasError ? "error" : variant;
+    const baseStyles = "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0";
+    const variants = {
+        default: "border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]",
+        error: "border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]",
+        success: "border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]",
+    };
+    const sizes = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-3 py-2 text-base",
+        lg: "px-4 py-3 text-lg",
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ews-gray-700)]", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [leftIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: leftIcon }) })), jsxRuntime.jsx("input", { id: inputId, className: cn(baseStyles, variants[actualVariant], sizes[size], leftIcon && "pl-10", rightIcon && "pr-10", className), ref: ref, ...props }), rightIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: rightIcon }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-[var(--ews-error)]" : "text-[var(--ews-gray-500)]"), children: error || helperText }))] }));
+});
+Input.displayName = "Input";
+
+const Icon = React.forwardRef(({ size = "md", color = "currentColor", className, ...props }, ref) => {
+    const sizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-8 w-8",
+    };
+    return (jsxRuntime.jsx("svg", { ref: ref, className: `${sizes[size]} ${className || ""}`, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props }));
+});
+Icon.displayName = "Icon";
+
+const ArrowRight = (props) => (jsxRuntime.jsxs(Icon, { ...props, children: [jsxRuntime.jsx("path", { d: "M5 12h14" }), jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })] }));
+
+const Check = (props) => (jsxRuntime.jsx(Icon, { ...props, children: jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+
+const Search = (props) => (jsxRuntime.jsxs(Icon, { ...props, children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }), jsxRuntime.jsx("path", { d: "m21 21-4.35-4.35" })] }));
+
+exports.ArrowRight = ArrowRight;
+exports.Button = Button;
+exports.Check = Check;
+exports.Icon = Icon;
+exports.Input = Input;
+exports.Search = Search;
+exports.cn = cn;
+exports.debounce = debounce;
+exports.formatCurrency = formatCurrency;
+exports.formatDate = formatDate;
+exports.generateId = generateId;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/utils/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/icons/Icon.tsx","../src/icons/ArrowRight.tsx","../src/icons/Check.tsx","../src/icons/Search.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import { clsx, type ClassValue } from \"clsx\";\n\n/**\n * Utility function to merge class names\n * @param inputs - Class values to merge\n * @returns Merged class string\n */\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs);\n}\n\n/**\n * Utility function to format currency\n * @param amount - Amount to format\n * @param currency - Currency code (default: 'USD')\n * @returns Formatted currency string\n */\nexport function formatCurrency(amount: number, currency = \"USD\"): string {\n  return new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency,\n  }).format(amount);\n}\n\n/**\n * Utility function to format date\n * @param date - Date to format\n * @param options - Intl.DateTimeFormat options\n * @returns Formatted date string\n */\nexport function formatDate(\n  date: Date | string | number,\n  options?: Intl.DateTimeFormatOptions\n): string {\n  const dateObj = new Date(date);\n  return new Intl.DateTimeFormat(\"en-US\", {\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n    ...options,\n  }).format(dateObj);\n}\n\n/**\n * Utility function to debounce function calls\n * @param func - Function to debounce\n * @param wait - Wait time in milliseconds\n * @returns Debounced function\n */\nexport function debounce<T extends (...args: any[]) => any>(\n  func: T,\n  wait: number\n): (...args: Parameters<T>) => void {\n  let timeout: ReturnType<typeof setTimeout>;\n  return (...args: Parameters<T>) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func(...args), wait);\n  };\n}\n\n/**\n * Utility function to generate unique ID\n * @param prefix - Optional prefix for the ID\n * @returns Unique ID string\n */\nexport function generateId(prefix = \"ews\"): string {\n  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\n}\n","import React from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button variant\n   */\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"error\" | \"ghost\";\n  /**\n   * Button size\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * Whether the button should take full width\n   */\n  fullWidth?: boolean;\n  /**\n   * Icon to display before the button text\n   */\n  leftIcon?: React.ReactNode;\n  /**\n   * Icon to display after the button text\n   */\n  rightIcon?: React.ReactNode;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"md\",\n      loading = false,\n      fullWidth = false,\n      leftIcon,\n      rightIcon,\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles =\n      \"inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\n\n    const variants = {\n      primary:\n        \"bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]\",\n      secondary:\n        \"bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]\",\n      success:\n        \"bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]\",\n      warning:\n        \"bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]\",\n      error:\n        \"bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]\",\n      ghost:\n        \"bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]\",\n    };\n\n    const sizes = {\n      sm: \"px-3 py-1.5 text-sm\",\n      md: \"px-4 py-2 text-base\",\n      lg: \"px-6 py-3 text-lg\",\n    };\n\n    return (\n      <button\n        className={cn(\n          baseStyles,\n          variants[variant],\n          sizes[size],\n          fullWidth && \"w-full\",\n          className\n        )}\n        ref={ref}\n        disabled={disabled || loading}\n        {...props}\n      >\n        {loading && (\n          <svg\n            className=\"animate-spin -ml-1 mr-2 h-4 w-4\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle\n              className=\"opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n            />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        )}\n        {!loading && leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\n        {children}\n        {!loading && rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n","import React from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  /**\n   * Input variant\n   */\n  variant?: \"default\" | \"error\" | \"success\";\n  /**\n   * Input size\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Label for the input\n   */\n  label?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Error message to display\n   */\n  error?: string;\n  /**\n   * Icon to display before the input\n   */\n  leftIcon?: React.ReactNode;\n  /**\n   * Icon to display after the input\n   */\n  rightIcon?: React.ReactNode;\n  /**\n   * Whether the input should take full width\n   */\n  fullWidth?: boolean;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"md\",\n      label,\n      helperText,\n      error,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\n    const hasError = Boolean(error);\n    const actualVariant = hasError ? \"error\" : variant;\n\n    const baseStyles =\n      \"block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0\";\n\n    const variants = {\n      default:\n        \"border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]\",\n      error:\n        \"border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]\",\n      success:\n        \"border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]\",\n    };\n\n    const sizes = {\n      sm: \"px-3 py-1.5 text-sm\",\n      md: \"px-3 py-2 text-base\",\n      lg: \"px-4 py-3 text-lg\",\n    };\n\n    const iconSizes = {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    };\n\n    return (\n      <div className={cn(\"space-y-1\", fullWidth ? \"w-full\" : \"w-auto\")}>\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"block text-sm font-medium text-[var(--ews-gray-700)]\"\n          >\n            {label}\n          </label>\n        )}\n        <div className=\"relative\">\n          {leftIcon && (\n            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n              <span\n                className={cn(\"text-[var(--ews-gray-400)]\", iconSizes[size])}\n              >\n                {leftIcon}\n              </span>\n            </div>\n          )}\n          <input\n            id={inputId}\n            className={cn(\n              baseStyles,\n              variants[actualVariant],\n              sizes[size],\n              leftIcon && \"pl-10\",\n              rightIcon && \"pr-10\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          />\n          {rightIcon && (\n            <div className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\">\n              <span\n                className={cn(\"text-[var(--ews-gray-400)]\", iconSizes[size])}\n              >\n                {rightIcon}\n              </span>\n            </div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <p\n            className={cn(\n              \"text-sm\",\n              error ? \"text-[var(--ews-error)]\" : \"text-[var(--ews-gray-500)]\"\n            )}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n","import React from \"react\";\n\nexport interface IconProps extends React.SVGProps<SVGSVGElement> {\n  /**\n   * Icon size\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * Icon color\n   */\n  color?: string;\n}\n\nconst Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ size = \"md\", color = \"currentColor\", className, ...props }, ref) => {\n    const sizes = {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n      xl: \"h-8 w-8\",\n    };\n\n    return (\n      <svg\n        ref={ref}\n        className={`${sizes[size]} ${className || \"\"}`}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      />\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n\nexport { Icon };\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const ArrowRight: React.FC<Omit<IconProps, \"children\">> = (props) => (\n  <Icon {...props}>\n    <path d=\"M5 12h14\" />\n    <path d=\"m12 5 7 7-7 7\" />\n  </Icon>\n);\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const Check: React.FC<Omit<IconProps, \"children\">> = (props) => (\n  <Icon {...props}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Icon>\n);\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const Search: React.FC<Omit<IconProps, \"children\">> = (props) => (\n  <Icon {...props}>\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.35-4.35\" />\n  </Icon>\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/utils/index.d.ts

@@ -0,0 +1,35 @@
+import { type ClassValue } from "clsx";
+/**
+ * Utility function to merge class names
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Utility function to format currency
+ * @param amount - Amount to format
+ * @param currency - Currency code (default: 'USD')
+ * @returns Formatted currency string
+ */
+export declare function formatCurrency(amount: number, currency?: string): string;
+/**
+ * Utility function to format date
+ * @param date - Date to format
+ * @param options - Intl.DateTimeFormat options
+ * @returns Formatted date string
+ */
+export declare function formatDate(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Utility function to debounce function calls
+ * @param func - Function to debounce
+ * @param wait - Wait time in milliseconds
+ * @returns Debounced function
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Utility function to generate unique ID
+ * @param prefix - Optional prefix for the ID
+ * @returns Unique ID string
+ */
+export declare function generateId(prefix?: string): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAQ,GAAG,MAAM,CAKvE;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ews-admin/global-design-system",
+  "version": "1.0.0",
+  "description": "EWS Global Design System - Reusable components for EWS applications",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "ews"
+  ],
+  "author": "EWS - Erco Web Solutions",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-typescript": "^7.23.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "rollup": "^4.6.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.5.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { cn } from "../../utils";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button variant
+   */
+  variant?: "primary" | "secondary" | "success" | "warning" | "error" | "ghost";
+  /**
+   * Button size
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+  /**
+   * Whether the button should take full width
+   */
+  fullWidth?: boolean;
+  /**
+   * Icon to display before the button text
+   */
+  leftIcon?: React.ReactNode;
+  /**
+   * Icon to display after the button text
+   */
+  rightIcon?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      loading = false,
+      fullWidth = false,
+      leftIcon,
+      rightIcon,
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles =
+      "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+
+    const variants = {
+      primary:
+        "bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]",
+      secondary:
+        "bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]",
+      success:
+        "bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]",
+      warning:
+        "bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]",
+      error:
+        "bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]",
+      ghost:
+        "bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]",
+    };
+
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-6 py-3 text-lg",
+    };
+
+    return (
+      <button
+        className={cn(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          fullWidth && "w-full",
+          className
+        )}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin -ml-1 mr-2 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {!loading && leftIcon && <span className="mr-2">{leftIcon}</span>}
+        {children}
+        {!loading && rightIcon && <span className="ml-2">{rightIcon}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";

package/src/components/Input/Input.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { cn } from "../../utils";
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Input variant
+   */
+  variant?: "default" | "error" | "success";
+  /**
+   * Input size
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Label for the input
+   */
+  label?: string;
+  /**
+   * Helper text to display below the input
+   */
+  helperText?: string;
+  /**
+   * Error message to display
+   */
+  error?: string;
+  /**
+   * Icon to display before the input
+   */
+  leftIcon?: React.ReactNode;
+  /**
+   * Icon to display after the input
+   */
+  rightIcon?: React.ReactNode;
+  /**
+   * Whether the input should take full width
+   */
+  fullWidth?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "md",
+      label,
+      helperText,
+      error,
+      leftIcon,
+      rightIcon,
+      fullWidth = false,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const hasError = Boolean(error);
+    const actualVariant = hasError ? "error" : variant;
+
+    const baseStyles =
+      "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0";
+
+    const variants = {
+      default:
+        "border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]",
+      error:
+        "border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]",
+      success:
+        "border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]",
+    };
+
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-3 py-2 text-base",
+      lg: "px-4 py-3 text-lg",
+    };
+
+    const iconSizes = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+    };
+
+    return (
+      <div className={cn("space-y-1", fullWidth ? "w-full" : "w-auto")}>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-[var(--ews-gray-700)]"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          {leftIcon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <span
+                className={cn("text-[var(--ews-gray-400)]", iconSizes[size])}
+              >
+                {leftIcon}
+              </span>
+            </div>
+          )}
+          <input
+            id={inputId}
+            className={cn(
+              baseStyles,
+              variants[actualVariant],
+              sizes[size],
+              leftIcon && "pl-10",
+              rightIcon && "pr-10",
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+          {rightIcon && (
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+              <span
+                className={cn("text-[var(--ews-gray-400)]", iconSizes[size])}
+              >
+                {rightIcon}
+              </span>
+            </div>
+          )}
+        </div>
+        {(error || helperText) && (
+          <p
+            className={cn(
+              "text-sm",
+              error ? "text-[var(--ews-error)]" : "text-[var(--ews-gray-500)]"
+            )}
+          >
+            {error || helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input };

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input";

package/src/icons/ArrowRight.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Icon, IconProps } from "./Icon";
+
+export const ArrowRight: React.FC<Omit<IconProps, "children">> = (props) => (
+  <Icon {...props}>
+    <path d="M5 12h14" />
+    <path d="m12 5 7 7-7 7" />
+  </Icon>
+);

package/src/icons/Check.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Icon, IconProps } from "./Icon";
+
+export const Check: React.FC<Omit<IconProps, "children">> = (props) => (
+  <Icon {...props}>
+    <path d="M20 6 9 17l-5-5" />
+  </Icon>
+);

package/src/icons/Icon.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * Icon size
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /**
+   * Icon color
+   */
+  color?: string;
+}
+
+const Icon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = "md", color = "currentColor", className, ...props }, ref) => {
+    const sizes = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-8 w-8",
+    };
+
+    return (
+      <svg
+        ref={ref}
+        className={`${sizes[size]} ${className || ""}`}
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = "Icon";
+
+export { Icon };

package/src/icons/Search.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Icon, IconProps } from "./Icon";
+
+export const Search: React.FC<Omit<IconProps, "children">> = (props) => (
+  <Icon {...props}>
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.35-4.35" />
+  </Icon>
+);

package/src/icons/index.ts

@@ -0,0 +1,5 @@
+export { ArrowRight } from "./ArrowRight";
+export { Check } from "./Check";
+export { Icon } from "./Icon";
+export type { IconProps } from "./Icon";
+export { Search } from "./Search";

package/src/index.ts

@@ -0,0 +1,16 @@
+// Components
+export { Button } from "./components/Button";
+export type { ButtonProps } from "./components/Button";
+
+export { Input } from "./components/Input";
+export type { InputProps } from "./components/Input";
+
+// Icons
+export { ArrowRight, Check, Icon, Search } from "./icons";
+export type { IconProps } from "./icons";
+
+// Utils
+export { cn, debounce, formatCurrency, formatDate, generateId } from "./utils";
+
+// Styles
+import "./styles/index.css";