elseware-ui 2.40.3 → 3.0.0

package/dist/resolveGlobalConfigs-CcaOIQCE.d.ts

@@ -0,0 +1,228 @@
+import React__default, { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+declare const CURRENCIES: {
+    name: string;
+    symbol: string;
+    code: string;
+}[];
+
+declare enum Variant$1 {
+    default = "default",
+    primary = "primary",
+    secondary = "secondary",
+    success = "success",
+    danger = "danger",
+    warning = "warning",
+    info = "info",
+    light = "light",
+    dark = "dark"
+}
+declare enum TextVariant {
+    default = "default",
+    primary = "primary",
+    secondary = "secondary",
+    success = "success",
+    danger = "danger",
+    warning = "warning",
+    info = "info",
+    light = "light",
+    dark = "dark"
+}
+declare enum Shape$1 {
+    circle = "circle",
+    roundedSquare = "roundedSquare",
+    softRoundedSquare = "softRoundedSquare",
+    square = "square"
+}
+declare enum Size$1 {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
+declare enum Appearance$1 {
+    solid = "solid",
+    lite = "lite",
+    ghost = "ghost"
+}
+declare enum Decoration {
+    underline = "underline",
+    overline = "overline",
+    lineThrough = "lineThrough",
+    noUnderline = "noUnderline"
+}
+declare enum Target {
+    blank = "blank",
+    self = "self",
+    parent = "parent",
+    top = "top"
+}
+declare enum VerticalPosition$1 {
+    top = "top",
+    bottom = "bottom"
+}
+declare enum HorizontalPosition$1 {
+    left = "left",
+    right = "right"
+}
+declare enum CardinalPosition$1 {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}
+declare enum CornerPosition$1 {
+    "top-left" = "top-left",
+    "top-right" = "top-right",
+    "bottom-left" = "bottom-left",
+    "bottom-right" = "bottom-right"
+}
+declare enum OctilePosition$1 {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    "top-left" = "top-left",
+    "top-right" = "top-right",
+    "bottom-left" = "bottom-left",
+    "bottom-right" = "bottom-right"
+}
+declare enum ListBulletType$1 {
+    dot = "dot",
+    diamond = "diamond",
+    number = "number",
+    none = "none"
+}
+declare enum ListAlign$1 {
+    start = "start",
+    center = "center"
+}
+declare enum ListDirection$1 {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
+declare enum SpinnerType$1 {
+    border = "border",
+    ring = "ring",
+    dots = "dots",
+    bars = "bars",
+    pulse = "pulse",
+    orbit = "orbit",
+    dualRing = "dualRing",
+    ripple = "ripple",
+    grid = "grid",
+    wave = "wave"
+}
+declare enum ToastPosition {
+    topLeft = "top-left",
+    topCenter = "top-center",
+    topRight = "top-right",
+    bottomLeft = "bottom-left",
+    bottomCenter = "bottom-center",
+    bottomRight = "bottom-right"
+}
+declare enum ToastStatus {
+    default = "default",
+    success = "success",
+    warning = "warning",
+    error = "error",
+    danger = "danger",
+    info = "info"
+}
+
+type Variant = `${Variant$1}`;
+type Shape = `${Shape$1}`;
+type Size = `${Size$1}`;
+type Appearance = `${Appearance$1}`;
+type TextDecoration = `${Decoration}`;
+type HyperRefTarget = `${Target}`;
+type VerticalPosition = `${VerticalPosition$1}`;
+type HorizontalPosition = `${HorizontalPosition$1}`;
+type CardinalPosition = `${CardinalPosition$1}`;
+type CornerPosition = `${CornerPosition$1}`;
+type OctilePosition = `${OctilePosition$1}`;
+type TitleBannerLevel = 1 | 2;
+type ListBulletType = `${ListBulletType$1}`;
+type ListAlign = `${ListAlign$1}`;
+type ListDirection = `${ListDirection$1}`;
+type RouteTabMode = "route" | "state";
+type CurrencyCode = (typeof CURRENCIES)[number]["code"];
+type SpinnerType = `${SpinnerType$1}`;
+type SpinnerDirection = "vertical" | "horizontal";
+
+/**
+ * Contains ReactElements such as "children" using HTMLAttributes
+ *
+ * Contains DOMAttributes such as "onClick" using HTMLAttributes
+ *
+ * Define the custom types as follows for the custom DOM elements
+ *  BaseComponentProps<HTMLDivElement>     // default
+ *  BaseComponentProps<HTMLButtonElement>  // buttons
+ *  BaseComponentProps<HTMLAnchorElement>  // links
+ */
+interface BaseComponentProps<T extends HTMLElement = HTMLDivElement> extends Omit<HTMLAttributes<T>, "children"> {
+    className?: string;
+}
+
+type ButtonMode = "contained" | "contained-tonal" | "outlined" | "text";
+type ButtonIcon = ReactNode | ((props: {
+    color: string;
+    size: number;
+}) => ReactNode);
+interface ButtonProps extends BaseComponentProps<HTMLButtonElement> {
+    type?: "button" | "submit" | "reset";
+    icon?: ButtonIcon;
+    text?: string;
+    children?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+    compact?: boolean;
+    mode?: ButtonMode;
+    buttonColor?: string;
+    textColor?: string;
+    contentClassName?: string;
+    labelClassName?: string;
+    variant?: Variant;
+    appearance?: Appearance;
+    shape?: Shape;
+    size?: Size;
+    style?: CSSProperties;
+    contentStyle?: unknown;
+    labelStyle?: unknown;
+    accessibilityLabel?: string;
+    accessibilityRole?: string;
+    accessibilityState?: unknown;
+    testID?: string;
+    onPress?: () => void;
+}
+
+interface EUIComponentDefaults {
+    variant?: keyof typeof Variant$1;
+    size?: keyof typeof Size$1;
+    shape?: keyof typeof Shape$1;
+    styles?: string;
+}
+interface EUIRoute {
+    path: string;
+    name: string;
+}
+interface EUIConfigs {
+    global?: EUIComponentDefaults;
+    routes?: EUIRoute[];
+}
+
+interface EUIContextValue {
+    config: EUIConfigs;
+    setConfig: React__default.Dispatch<React__default.SetStateAction<EUIConfigs>>;
+}
+declare const EUIProvider: ({ config, children, }: {
+    config: EUIConfigs;
+    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;
+
+export { type Appearance as A, type ButtonProps as B, type CurrencyCode as C, Decoration as D, type EUIComponentDefaults as E, type HorizontalPosition as H, type ListBulletType as L, type OctilePosition as O, type RouteTabMode as R, type Shape as S, type TitleBannerLevel as T, type Variant as V, type ButtonIcon as a, type ButtonMode as b, type EUIConfigs as c, EUIProvider as d, type EUIRoute as e, type BaseComponentProps as f, type Size as g, type ListDirection as h, type ListAlign as i, type SpinnerType as j, type SpinnerDirection as k, type TextDecoration as l, Shape$1 as m, Variant$1 as n, Size$1 as o, TextVariant as p, ToastStatus as q, resolveWithGlobal as r, ToastPosition as s, Target as t, useEUIConfig as u, type CardinalPosition as v, type CornerPosition as w, type HyperRefTarget as x, type VerticalPosition as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.40.3",
+  "version": "3.0.0",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [
@@ -20,17 +20,30 @@
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
+  "react-native": "./dist/index.native.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "react-native": {
+        "types": "./dist/index.native.d.ts",
+        "import": "./dist/index.native.mjs",
+        "require": "./dist/index.native.js"
+      },
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./native": {
+      "types": "./dist/index.native.d.ts",
+      "import": "./dist/index.native.mjs",
+      "require": "./dist/index.native.js"
+    },
+    "./tailwind": "./tailwind.preset.js",
     "./styles.css": "./dist/index.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "tailwind.preset.js"
   ],
   "sideEffects": [
     "**/*.css"
@@ -56,10 +69,20 @@
     "full": "npm run lint:fix && npm run format && npm run validate"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": ">=18.3.1 <20",
+    "react-dom": ">=18.3.1 <20",
+    "react-native": "*",
+    "nativewind": ">=4.0.0 <5",
     "tailwindcss": ">=3.0.0"
   },
+  "peerDependenciesMeta": {
+    "nativewind": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/theme-one-dark": "^6.1.3",
@@ -117,12 +140,17 @@
     "husky": "^9.1.7",
     "knip": "^6.15.0",
     "lint-staged": "^17.0.7",
+    "nativewind": "^4.2.6",
     "path": "^0.12.7",
     "postcss": "^8.4.33",
     "prettier": "^3.8.3",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-native": "0.75.2",
+    "react-native-css-interop": "0.2.6",
+    "react-native-reanimated": "3.10.1",
+    "react-native-web": "^0.21.2",
     "rimraf": "^6.0.1",
     "storybook": "^8.5.0",
     "tailwindcss": "^3.4.1",

package/tailwind.preset.js

@@ -0,0 +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: [],
+};