elseware-ui 3.0.12 → 3.0.14

package/dist/{resolveGlobalConfigs-BdBJw5_w.d.mts → resolveGlobalConfigs-ClQlBbvH.d.mts}

@@ -1,4 +1,4 @@
-import React__default, { HTMLAttributes, ReactNode } from 'react';
+import react__default, { HTMLAttributes, ReactNode } from 'react';
 import { FieldHookConfig, FormikValues, FormikConfig, FormikProps, FormikHelpers } from 'formik';
 
 declare const CURRENCIES: {
@@ -167,19 +167,33 @@ interface BaseComponentProps<T extends HTMLElement = HTMLDivElement> extends Omi
 }
 
 type ButtonMode = "contained" | "contained-tonal" | "outlined" | "text";
+/**
+ * An icon can be a ready element or a render function that receives the
+ * resolved icon color and size, so the same icon adapts to every button size.
+ */
 type ButtonIcon = ReactNode | ((props: {
     color: string;
     size: number;
 }) => ReactNode);
+/** Cross-platform accessibility state (a subset shared by web + React Native). */
+interface ButtonAccessibilityState {
+    selected?: boolean;
+    disabled?: boolean;
+    busy?: boolean;
+    expanded?: boolean;
+}
 interface ButtonProps extends Omit<BaseComponentProps<HTMLButtonElement>, "style"> {
     type?: "button" | "submit" | "reset";
     icon?: ButtonIcon;
+    /** Which side of the label the icon (and loading spinner) sits on. */
+    iconPosition?: "leading" | "trailing";
     text?: string;
     children?: ReactNode;
     loading?: boolean;
     disabled?: boolean;
     block?: boolean;
     compact?: boolean;
+    /** Web-only pointer glow. Native accepts and ignores it to keep one contract. */
     glow?: boolean;
     mode?: ButtonMode;
     contentClassName?: string;
@@ -190,7 +204,7 @@ interface ButtonProps extends Omit<BaseComponentProps<HTMLButtonElement>, "style
     size?: Size;
     accessibilityLabel?: string;
     accessibilityRole?: string;
-    accessibilityState?: unknown;
+    accessibilityState?: ButtonAccessibilityState;
     testID?: string;
     onPress?: () => void;
 }
@@ -404,12 +418,12 @@ interface EUIConfigs {
 
 interface EUIContextValue {
     config: EUIConfigs;
-    setConfig: React__default.Dispatch<React__default.SetStateAction<EUIConfigs>>;
+    setConfig: react__default.Dispatch<react__default.SetStateAction<EUIConfigs>>;
 }
 declare const EUIProvider: ({ config, children, }: {
     config: EUIConfigs;
-    children: React__default.ReactNode;
-}) => React__default.JSX.Element;
+    children: react__default.ReactNode;
+}) => react__default.JSX.Element;
 declare const useEUIConfig: () => EUIContextValue;
 
 declare function resolveWithGlobal<T>(config: EUIConfigs | null, props: T, defaults: Partial<T>): T;

package/dist/{resolveGlobalConfigs-BdBJw5_w.d.ts → resolveGlobalConfigs-ClQlBbvH.d.ts}

@@ -1,4 +1,4 @@
-import React__default, { HTMLAttributes, ReactNode } from 'react';
+import react__default, { HTMLAttributes, ReactNode } from 'react';
 import { FieldHookConfig, FormikValues, FormikConfig, FormikProps, FormikHelpers } from 'formik';
 
 declare const CURRENCIES: {
@@ -167,19 +167,33 @@ interface BaseComponentProps<T extends HTMLElement = HTMLDivElement> extends Omi
 }
 
 type ButtonMode = "contained" | "contained-tonal" | "outlined" | "text";
+/**
+ * An icon can be a ready element or a render function that receives the
+ * resolved icon color and size, so the same icon adapts to every button size.
+ */
 type ButtonIcon = ReactNode | ((props: {
     color: string;
     size: number;
 }) => ReactNode);
+/** Cross-platform accessibility state (a subset shared by web + React Native). */
+interface ButtonAccessibilityState {
+    selected?: boolean;
+    disabled?: boolean;
+    busy?: boolean;
+    expanded?: boolean;
+}
 interface ButtonProps extends Omit<BaseComponentProps<HTMLButtonElement>, "style"> {
     type?: "button" | "submit" | "reset";
     icon?: ButtonIcon;
+    /** Which side of the label the icon (and loading spinner) sits on. */
+    iconPosition?: "leading" | "trailing";
     text?: string;
     children?: ReactNode;
     loading?: boolean;
     disabled?: boolean;
     block?: boolean;
     compact?: boolean;
+    /** Web-only pointer glow. Native accepts and ignores it to keep one contract. */
     glow?: boolean;
     mode?: ButtonMode;
     contentClassName?: string;
@@ -190,7 +204,7 @@ interface ButtonProps extends Omit<BaseComponentProps<HTMLButtonElement>, "style
     size?: Size;
     accessibilityLabel?: string;
     accessibilityRole?: string;
-    accessibilityState?: unknown;
+    accessibilityState?: ButtonAccessibilityState;
     testID?: string;
     onPress?: () => void;
 }
@@ -404,12 +418,12 @@ interface EUIConfigs {
 
 interface EUIContextValue {
     config: EUIConfigs;
-    setConfig: React__default.Dispatch<React__default.SetStateAction<EUIConfigs>>;
+    setConfig: react__default.Dispatch<react__default.SetStateAction<EUIConfigs>>;
 }
 declare const EUIProvider: ({ config, children, }: {
     config: EUIConfigs;
-    children: React__default.ReactNode;
-}) => React__default.JSX.Element;
+    children: react__default.ReactNode;
+}) => react__default.JSX.Element;
 declare const useEUIConfig: () => EUIContextValue;
 
 declare function resolveWithGlobal<T>(config: EUIConfigs | null, props: T, defaults: Partial<T>): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [

package/tailwind.preset.js

@@ -1,116 +1,116 @@
-module.exports = {
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        "eui-primary": {
-          50: "#e6e8ec",
-          100: "#c3c8d2",
-          200: "#9aa2b3",
-          300: "#707a93",
-          400: "#4c5673",
-          500: "#00040f",
-          600: "#00030d",
-          700: "#00020a",
-          800: "#000106",
-          900: "#000003",
-        },
-        "eui-secondary": {
-          50: "#e6ffcc",
-          100: "#c0ff8c",
-          200: "#a3ff5f",
-          300: "#7aff2f",
-          400: "#64e245",
-          500: "#4cd900",
-          600: "#17b800",
-          700: "#149900",
-          800: "#107a00",
-          900: "#0a5a00",
-        },
-        "eui-success": {
-          50: "#b0e8d0",
-          100: "#8ddbb9",
-          200: "#6bcfa2",
-          300: "#48c28b",
-          400: "#26b674",
-          500: "#198754",
-          600: "#146b42",
-          700: "#0f4e31",
-          800: "#0a321f",
-          900: "#05170e",
-        },
-        "eui-danger": {
-          50: "#f9c3c7",
-          100: "#f49aa1",
-          200: "#ef717b",
-          300: "#ea4855",
-          400: "#e51f2f",
-          500: "#dc3545",
-          600: "#af2a37",
-          700: "#821f29",
-          800: "#56151b",
-          900: "#2a0a0e",
-        },
-        "eui-warning": {
-          50: "#fff3cd",
-          100: "#ffe89b",
-          200: "#ffdc69",
-          300: "#ffd137",
-          400: "#ffc606",
-          500: "#ffc107",
-          600: "#cc9905",
-          700: "#997104",
-          800: "#664902",
-          900: "#332401",
-        },
-        "eui-info": {
-          50: "#a7effa",
-          100: "#82e6f8",
-          200: "#5dddf6",
-          300: "#38d3f4",
-          400: "#14caf2",
-          500: "#0dcaf0",
-          600: "#0aa0c0",
-          700: "#087690",
-          800: "#054c60",
-          900: "#032330",
-        },
-        "eui-light": {
-          50: "#ffffff",
-          100: "#fefefe",
-          200: "#fdfdfd",
-          300: "#fcfcfc",
-          400: "#fbfbfb",
-          500: "#f8f9fa",
-          600: "#c6c7c8",
-          700: "#949596",
-          800: "#626263",
-          900: "#313132",
-        },
-        "eui-dark": {
-          50: "#9ea1a4",
-          100: "#868a8d",
-          200: "#6f7376",
-          300: "#575c5f",
-          400: "#404547",
-          500: "#212529",
-          600: "#1a1d20",
-          700: "#141618",
-          800: "#0d0e10",
-          900: "#070708",
-        },
-      },
-      transitionDuration: {
-        120: "120ms",
-        180: "180ms",
-        240: "240ms",
-        250: "250ms",
-      },
-    },
-    fontFamily: { poppins: ["Poppins", "sans-serif"] },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-};
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        "eui-primary": {
+          50: "#e6e8ec",
+          100: "#c3c8d2",
+          200: "#9aa2b3",
+          300: "#707a93",
+          400: "#4c5673",
+          500: "#00040f",
+          600: "#00030d",
+          700: "#00020a",
+          800: "#000106",
+          900: "#000003",
+        },
+        "eui-secondary": {
+          50: "#e6ffcc",
+          100: "#c0ff8c",
+          200: "#a3ff5f",
+          300: "#7aff2f",
+          400: "#64e245",
+          500: "#4cd900",
+          600: "#17b800",
+          700: "#149900",
+          800: "#107a00",
+          900: "#0a5a00",
+        },
+        "eui-success": {
+          50: "#b0e8d0",
+          100: "#8ddbb9",
+          200: "#6bcfa2",
+          300: "#48c28b",
+          400: "#26b674",
+          500: "#198754",
+          600: "#146b42",
+          700: "#0f4e31",
+          800: "#0a321f",
+          900: "#05170e",
+        },
+        "eui-danger": {
+          50: "#f9c3c7",
+          100: "#f49aa1",
+          200: "#ef717b",
+          300: "#ea4855",
+          400: "#e51f2f",
+          500: "#dc3545",
+          600: "#af2a37",
+          700: "#821f29",
+          800: "#56151b",
+          900: "#2a0a0e",
+        },
+        "eui-warning": {
+          50: "#fff3cd",
+          100: "#ffe89b",
+          200: "#ffdc69",
+          300: "#ffd137",
+          400: "#ffc606",
+          500: "#ffc107",
+          600: "#cc9905",
+          700: "#997104",
+          800: "#664902",
+          900: "#332401",
+        },
+        "eui-info": {
+          50: "#a7effa",
+          100: "#82e6f8",
+          200: "#5dddf6",
+          300: "#38d3f4",
+          400: "#14caf2",
+          500: "#0dcaf0",
+          600: "#0aa0c0",
+          700: "#087690",
+          800: "#054c60",
+          900: "#032330",
+        },
+        "eui-light": {
+          50: "#ffffff",
+          100: "#fefefe",
+          200: "#fdfdfd",
+          300: "#fcfcfc",
+          400: "#fbfbfb",
+          500: "#f8f9fa",
+          600: "#c6c7c8",
+          700: "#949596",
+          800: "#626263",
+          900: "#313132",
+        },
+        "eui-dark": {
+          50: "#9ea1a4",
+          100: "#868a8d",
+          200: "#6f7376",
+          300: "#575c5f",
+          400: "#404547",
+          500: "#212529",
+          600: "#1a1d20",
+          700: "#141618",
+          800: "#0d0e10",
+          900: "#070708",
+        },
+      },
+      transitionDuration: {
+        120: "120ms",
+        180: "180ms",
+        240: "240ms",
+        250: "250ms",
+      },
+    },
+    fontFamily: { poppins: ["Poppins", "sans-serif"] },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};