@iress-oss/ids-components 6.0.0-alpha.49 → 6.0.0-alpha.50

package/dist/constants.js

@@ -1,15 +1,141 @@
-import { B as T, a as t, F as I, G as A, H as e, M as n, T as L, V as _, Z as R } from "./Icon.constants-CITIz_Fu.js";
-const a = 'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])', E = ["danger", "info", "success", "warning"];
+const n = {
+  /**
+   * Extra small breakpoint, for mobile devices
+   */
+  xs: {
+    mediaQuery: "(min-width: 0) and (max-width: 575px)",
+    screenWidthRange: "0 - 575px",
+    margin: "spacing.4",
+    maxColumns: 4,
+    minScreenWidth: "0px",
+    maxScreenWidth: "575px",
+    containerMaxWidth: "100%",
+    viewportWidth: 360
+  },
+  /**
+   * Small breakpoint, for larger mobile devices and tablets
+   */
+  sm: {
+    mediaQuery: "(min-width: 576px) and (max-width: 767px)",
+    screenWidthRange: "576px - 767px",
+    margin: "spacing.4",
+    minScreenWidth: "576px",
+    maxScreenWidth: "767px",
+    containerMaxWidth: "100%",
+    viewportWidth: 767
+  },
+  /**
+   * Medium breakpoint for tablets and small desktops
+   */
+  md: {
+    mediaQuery: "(min-width: 768px) and (max-width: 1023px)",
+    screenWidthRange: "768px - 1023px",
+    margin: "spacing.6",
+    maxColumns: 4,
+    minScreenWidth: "768px",
+    maxScreenWidth: "1023px",
+    containerMaxWidth: "100%",
+    viewportWidth: 1022
+  },
+  /**
+   * Large breakpoint for desktops
+   */
+  lg: {
+    mediaQuery: "(min-width: 1024px) and (max-width: 1279px)",
+    screenWidthRange: "1024px - 1279px",
+    margin: "spacing.6",
+    maxColumns: 6,
+    minScreenWidth: "1024px",
+    maxScreenWidth: "1279px",
+    containerMaxWidth: "100%",
+    viewportWidth: 1278
+  },
+  /**
+   * Extra large breakpoint for large desktops
+   */
+  xl: {
+    mediaQuery: "(min-width: 1280px) and (max-width: 1599px)",
+    screenWidthRange: "1280px - 1599px",
+    margin: "spacing.8",
+    minScreenWidth: "1280px",
+    maxScreenWidth: "1599px",
+    containerMaxWidth: "1440px",
+    viewportWidth: 1504
+  },
+  /**
+   * Extra extra large breakpoint for extra large desktops (32inch)
+   */
+  xxl: {
+    mediaQuery: "(min-width: 1600px)",
+    margin: "spacing.8",
+    screenWidthRange: "1600px and above",
+    minScreenWidth: "1600px",
+    containerMaxWidth: "1690px",
+    viewportWidth: 1754
+  }
+}, e = Object.keys(
+  n
+), t = [
+  "2",
+  "4",
+  "6",
+  "8",
+  "10",
+  "12",
+  "16",
+  "25%",
+  "50%",
+  "75%",
+  "100%"
+], i = 12, a = {
+  DEFAULT: 0,
+  NAVBAR: 100,
+  POPOVER: 200,
+  SLIDEOUT: 300,
+  MODAL: 400,
+  TOAST: 500,
+  TOOLTIP: 600
+}, d = {
+  family: "Material Symbols Rounded",
+  className: "material-symbols-rounded",
+  figmaGrade: "Emphasis",
+  figmaOpticalSize: "24dp",
+  grade: 0,
+  opticalSize: 36,
+  weight: 300
+}, c = [
+  "around",
+  "between",
+  "center",
+  "evenly",
+  "left",
+  "right",
+  "stretch"
+], r = [
+  "inherit",
+  "left",
+  "center",
+  "right",
+  "justify"
+], x = [
+  "top",
+  "middle",
+  "bottom",
+  "between",
+  "around",
+  "evenly",
+  "stretch"
+], m = n, p = e, s = t, o = i, h = c, S = d, E = r, W = x, T = a, I = 'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])', g = ["danger", "info", "success", "warning"];
 export {
-  T as BREAKPOINTS,
-  t as BREAKPOINT_DETAILS,
-  a as FOCUSABLE_QUERY_SELECTOR,
-  I as FORM_ELEMENT_WIDTHS,
-  A as GRID_SIZE,
-  e as HORIZONTAL_ALIGNS,
-  n as MATERIAL_SYMBOLS,
-  E as STATUSES,
-  L as TEXT_ALIGNS,
-  _ as VERTICAL_ALIGNS,
-  R as Z_INDEX
+  p as BREAKPOINTS,
+  m as BREAKPOINT_DETAILS,
+  I as FOCUSABLE_QUERY_SELECTOR,
+  s as FORM_ELEMENT_WIDTHS,
+  o as GRID_SIZE,
+  h as HORIZONTAL_ALIGNS,
+  S as MATERIAL_SYMBOLS,
+  g as STATUSES,
+  E as TEXT_ALIGNS,
+  W as VERTICAL_ALIGNS,
+  T as Z_INDEX
 };

package/dist/hooks/useBreakpoint.d.ts

@@ -1,4 +1,4 @@
-import { BreakpointDetail } from '../../../theme-preset/src/constants';
+import { BreakpointDetail } from '../constants';
 import { Breakpoints } from '../types';
 interface BreakpointResult {
     breakpoint: Breakpoints;

package/dist/hooks/useBreakpoint.js

@@ -1,6 +1,6 @@
-import { B as r, a as o } from "../Icon.constants-CITIz_Fu.js";
+import { BREAKPOINTS as r, BREAKPOINT_DETAILS as o } from "../constants.js";
 import { useSyncExternalStore as i } from "react";
-const s = () => r.find((t) => window.matchMedia(o[t].mediaQuery)?.matches) ?? r[0], c = () => r[0], d = (t) => {
+const a = () => r.find((t) => window.matchMedia(o[t].mediaQuery)?.matches) ?? r[0], c = () => r[0], d = (t) => {
   const n = r.map(
     (e) => window.matchMedia(o[e].mediaQuery)
   );
@@ -9,14 +9,14 @@ const s = () => r.find((t) => window.matchMedia(o[t].mediaQuery)?.matches) ?? r[
   );
 }, p = (t = {}) => {
   const { disabled: n = !1 } = t, e = () => {
-  }, a = i(
+  }, s = i(
     n ? () => e : d,
-    n ? () => s() : s,
+    n ? () => a() : a,
     c
   );
   return {
-    breakpoint: a,
-    detail: o[a]
+    breakpoint: s,
+    detail: o[s]
   };
 };
 export {

package/dist/hooks/useResponsiveProps.js

@@ -1,8 +1,8 @@
-import { useMemo as a } from "react";
-import { useBreakpoint as m } from "./useBreakpoint.js";
-import { B as n } from "../Icon.constants-CITIz_Fu.js";
+import { useMemo as m } from "react";
+import { useBreakpoint as a } from "./useBreakpoint.js";
+import { BREAKPOINTS as n } from "../constants.js";
 const O = (e, f = {}) => {
-  const { inheritPrevious: o = !0, disabled: u = !1 } = f, { breakpoint: i } = m({ disabled: u }), c = a(() => {
+  const { inheritPrevious: o = !0, disabled: u = !1 } = f, { breakpoint: i } = a({ disabled: u }), c = m(() => {
     if (!e)
       return;
     if (!(typeof e == "object") || !n.some((r) => r in e))