acinguiux-ds-react-framework 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,8 +1,7 @@
-# acinguiux-ds-react-framework
-
-## 0.0.1
-
-### Patch Changes
-
-- small Table fixes
-
+# acinguiux-ds-react-framework
+
+## 0.0.2
+
+### Patch Changes
+
+- [#3122](https://github.com/ace-ds-react-framework/pull/3122) [`550b2efa`](https://github.com/ace-ds-react-framework/commit/550b2efa6e3db6412cfc53e1cdec3fdacc404646) Thanks [@acinguix](https://github.com/acinguix)! - Fix/react base/sync and do not release

package/README.md

@@ -0,0 +1,15 @@
+# Acinguiux Design System - React Framework
+
+---
+
+Welcome to the Acinguiux Design System React Framework, a collection of reusable components written in ReactJS. You can explore these components on our [Storybook page](https://Acinguiux-ds-react-framework.azurewebsites.net/).
+
+## Table of Contents
+
+1. [Documentation](#documentation)
+2. [Installation](#installation)
+3. [Commands](#commands)
+4. [Support](#support)
+5. [Transpiling](#transpiling)
+
+---

package/build/esm/components/Accordion/Accordion.consts.js

@@ -1,30 +1,38 @@
-import { Sizes } from 'acinguiux-ds-react-base';
-import { Add, ChevronSmallDown, ChevronSmallUp, Minus } from '../Icon/components';
-export const accordionConsts = {
-    [Sizes.Small]: {
-        minHeight: 40,
-        bodyPadding: '0 20px 20px',
-        iconSize: '20px',
-    },
-    [Sizes.Medium]: {
-        minHeight: 56,
-        bodyPadding: '0 20px 20px',
-        iconSize: '20px',
-    },
-    [Sizes.Large]: {
-        minHeight: 72,
-        bodyPadding: '0 24px 24px',
-        iconSize: '24px',
-    },
-};
-export const AccordionIcon = {
-    chevron: {
-        active: ChevronSmallUp,
-        inactive: ChevronSmallDown,
-    },
-    plus: {
-        active: Minus,
-        inactive: Add,
-    },
-};
-//# sourceMappingURL=Accordion.consts.js.map
+import o from "../Icon/components/Add.js";
+import e from "../Icon/components/ChevronSmallDown.js";
+import n from "../Icon/components/ChevronSmallUp.js";
+import p from "../Icon/components/Minus.js";
+import { Sizes as i } from "../../react-base/src/consts.js";
+const c = {
+  [i.Small]: {
+    minHeight: 40,
+    headerGap: "6px",
+    bodyPadding: "20px",
+    iconSize: "20px"
+  },
+  [i.Medium]: {
+    minHeight: 52,
+    headerGap: "10px",
+    bodyPadding: "20px",
+    iconSize: "20px"
+  },
+  [i.Large]: {
+    minHeight: 64,
+    headerGap: "12px",
+    bodyPadding: "24px",
+    iconSize: "24px"
+  }
+}, x = {
+  chevron: {
+    active: n,
+    inactive: e
+  },
+  plus: {
+    active: p,
+    inactive: o
+  }
+};
+export {
+  x as AccordionIcon,
+  c as accordionConsts
+};

package/build/esm/components/Accordion/Accordion.js

@@ -1,20 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { useTheme } from 'styled-components';
-import { Sizes, ACCORDION_CLASS } from 'acinguiux-ds-react-base';
-import { accordionConsts, AccordionIcon } from './Accordion.consts';
-import * as Styled from './Accordion.styles';
-const Accordion = ({ className, size = Sizes.Medium, children, bodyPadding = true, disabled = false, fullWidth = true, borders = true, iconSet = 'plus', ...rest }) => {
-    const theme = useTheme();
-    const handleExpandIcon = ({ isActive, collapsible }) => {
-        const Icon = AccordionIcon[iconSet][isActive ? 'active' : 'inactive'];
-        const iconColor = collapsible === 'disabled' ? theme.text.onSurface.inactive : undefined;
-        return _jsx(Icon, { width: accordionConsts[size].iconSize, height: accordionConsts[size].iconSize, fill: iconColor });
-    };
-    const additionalProps = {
-        ...(disabled && { collapsible: 'disabled' }),
-    };
-    return (_jsx(Styled.Accordion, { className: classNames(ACCORDION_CLASS, className), prefixCls: ACCORDION_CLASS, size: size, expandIcon: handleExpandIcon, bodyPadding: bodyPadding, fullWidth: fullWidth, borders: borders, destroyInactivePanel: true, ...additionalProps, ...rest, children: children }));
-};
-export default Accordion;
-//# sourceMappingURL=Accordion.js.map
+import { jsx as t } from "react/jsx-runtime";
+import C from "classnames";
+import { useTheme as I } from "styled-components";
+import { AccordionIcon as S, accordionConsts as e } from "./Accordion.consts.js";
+import { Accordion as v } from "./Accordion.styles.js";
+import { collapseMotion as b } from "./utils/motionUtils.js";
+import { ACCORDION_CLASS as i, Sizes as M } from "../../react-base/src/consts.js";
+const N = ({
+  className: c,
+  size: o = M.Medium,
+  bodyPadding: n = !0,
+  disabled: r = !1,
+  fullWidth: s = !0,
+  borders: a = !0,
+  iconSet: d = "plus",
+  ...l
+}) => {
+  const m = I(), p = ({ isActive: u, collapsible: A }) => {
+    const h = S[d][u ? "active" : "inactive"], x = A === "disabled" ? m.onSurface.inactive.default.text.subtle : void 0;
+    return /* @__PURE__ */ t(h, { width: e[o].iconSize, height: e[o].iconSize, fill: x });
+  }, f = {
+    ...r && { collapsible: "disabled" }
+  };
+  return /* @__PURE__ */ t(
+    v,
+    {
+      className: C(i, c),
+      prefixCls: i,
+      size: o,
+      expandIcon: p,
+      bodyPadding: n,
+      fullWidth: s,
+      borders: a,
+      destroyInactivePanel: !0,
+      openMotion: b,
+      ...f,
+      ...l
+    }
+  );
+}, z = N;
+export {
+  z as default
+};

package/build/esm/components/Accordion/Accordion.styles.js

@@ -1,61 +1,72 @@
-import RCAccordion from 'rc-collapse';
-import styled, { css } from 'styled-components';
-import { Sizes } from 'acinguiux-ds-react-base';
-import { accordionConsts } from './Accordion.consts';
-const Accordion = styled(RCAccordion) `
-  ${({ prefixCls, size, bodyPadding, fullWidth, nested, borders, theme }) => css `
-    width: ${fullWidth ? '100%' : 'fit-content'};
-    color: ${theme.text.onSurface.strong};
-    transition: height 0.3s, opacity 0.3s;
-
-    ${nested &&
-    css `
+import u from "rc-collapse";
+import $, { css as d } from "styled-components";
+import { accordionConsts as n } from "./Accordion.consts.js";
+import { Sizes as e } from "../../react-base/src/consts.js";
+const m = $(u)`
+  ${({ prefixCls: o, size: a, bodyPadding: r, fullWidth: c, nested: i, borders: l, theme: t }) => d`
+    width: ${c ? "100%" : "fit-content"};
+    color: ${t.onSurface.surface.default.text.strong};
+
+    ${i && d`
       padding-left: 24px;
     `}
 
-    .${prefixCls}-panel-header, .${prefixCls}-header {
-      ${size === Sizes.Small && theme.label.medium.bold}
-      ${size === Sizes.Medium && theme.heading[4].bold}
-      ${size === Sizes.Large && theme.heading[3].demi}
-      min-height: ${accordionConsts[size || Sizes.Medium].minHeight}px;
+    .${o}-panel-header, .${o}-header {
+      ${a === e.Small && t.label.medium.bold}
+      ${a === e.Medium && t.heading[4].bold}
+      ${a === e.Large && t.heading[3].demi}
+      min-height: ${n[a || e.Medium].minHeight}px;
     }
 
-    .${prefixCls}-header {
+    .${o}-header {
       display: flex;
       align-items: center;
+
+      &:focus-visible {
+        border-radius: 2px;
+        outline: 3px solid ${t.additional.focus.subtle};
+      }
+    }
+
+    .${o}-content {
+      transition: height 0.3s, opacity 0.3s;
     }
 
-    .${prefixCls}-panel-content,.${prefixCls}-content {
-      ${bodyPadding &&
-    css `
-        padding: ${accordionConsts[size || Sizes.Medium].bodyPadding};
+    .${o}-panel-content, .${o}-content-box {
+      ${r && d`
+        padding: 0
+          calc(
+            ${n[a || e.Medium].bodyPadding} + ${n[a || e.Medium].headerGap}
+          )
+          calc(
+            ${n[a || e.Medium].bodyPadding} + ${n[a || e.Medium].headerGap}
+          );
       `}
     }
 
-    .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {
+    .${o}-panel-item:last-of-type, .${o}-item:last-of-type {
       border-bottom: none;
     }
 
-    .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {
+    .${o}-panel-expand-icon, .${o}-expand-icon {
       display: flex;
-      margin-right: 6px;
+      margin-right: ${n[a || e.Medium].headerGap};
     }
 
     /** Items */
 
-    .${prefixCls}-item {
-      ${borders &&
-    css `
-        border-bottom: 1px solid ${theme.border.subtle};
+    .${o}-item {
+      ${l && d`
+        border-bottom: 1px solid ${t.onSurface.surface.default.border.subtle};
       `}
 
-      .${prefixCls}-header {
+      .${o}-header {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         cursor: pointer;
 
-        .${prefixCls}-extra {
+        .${o}-extra {
           display: flex;
           align-items: center;
           justify-self: flex-end;
@@ -65,36 +76,28 @@ const Accordion = styled(RCAccordion) `
         &-collapsible-only {
           cursor: default;
 
-          .${prefixCls}-header-text {
+          .${o}-header-text {
             cursor: pointer;
           }
         }
       }
 
-      .${prefixCls}-content-active {
-        opacity: 1;
-        height: auto;
-      }
-
-      .${prefixCls}-content-inactive {
-        display: none;
-      }
-
       &-disabled {
-        background-color: ${theme.background.inactive};
-        border-color: ${theme.border.subtle};
-        color: ${theme.text.onSurface.inactive};
+        background-color: ${t.onSurface.inactive.default.background};
+        border-color: ${t.onSurface.inactive.default.border.subtle};
+        color: ${t.onSurface.inactive.default.text.strong};
         cursor: not-allowed;
 
-        .${prefixCls}-header, .${prefixCls}-content-active, svg,
+        .${o}-header, .${o}-content-active, svg,
         * {
           cursor: not-allowed;
-          color: ${theme.text.onSurface.inactive};
-          fill: ${theme.text.onSurface.inactive};
+          color: ${t.onSurface.inactive.default.text.strong};
+          fill: ${t.onSurface.inactive.default.text.strong};
         }
       }
     }
   `}
-`;
-export { Accordion };
-//# sourceMappingURL=Accordion.styles.js.map
+`;
+export {
+  m as Accordion
+};

package/build/esm/components/Accordion/components/AccordionPanel/AccordionPanel.js

@@ -1,8 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { ACCORDION_PANEL_CLASS } from 'acinguiux-ds-react-base';
-import HeaderAccordion from '../HeaderAccordion/HeaderAccordion';
-import * as Styled from './AccordionPanel.styles';
-const AccordionPanel = ({ className, children, border = true, keyId, header, label, ...rest }) => (_jsx(Styled.AccordionPanel, { className: classNames(ACCORDION_PANEL_CLASS, className), "$border": border, header: _jsx(HeaderAccordion, { header: header, label: label }), ...rest, prefixCls: ACCORDION_PANEL_CLASS, children: children }, keyId));
-export default AccordionPanel;
-//# sourceMappingURL=AccordionPanel.js.map
+import { jsx as o } from "react/jsx-runtime";
+import t from "classnames";
+import d from "../HeaderAccordion/HeaderAccordion.js";
+import { AccordionPanel as l } from "./AccordionPanel.styles.js";
+import { ACCORDION_PANEL_CLASS as r } from "../../../../react-base/src/consts.js";
+const A = ({
+  className: e,
+  children: c,
+  border: a = !0,
+  keyId: m,
+  header: i,
+  label: n,
+  ...s
+}) => /* @__PURE__ */ o(
+  l,
+  {
+    className: t(r, e),
+    $border: a,
+    header: /* @__PURE__ */ o(d, { header: i, label: n }),
+    ...s,
+    prefixCls: r,
+    children: c
+  },
+  m
+), x = A;
+export {
+  x as default
+};

package/build/esm/components/Accordion/components/AccordionPanel/AccordionPanel.styles.js

@@ -1,30 +1,29 @@
-import { Panel } from 'rc-collapse';
-import styled, { css } from 'styled-components';
-const AccordionPanel = styled(Panel) `
-  ${({ prefixCls, $border, theme }) => css `
-    ${$border &&
-    css `
-      border-bottom: 1px solid ${theme.border.subtle};
+import { Panel as r } from "rc-collapse";
+import c, { css as o } from "styled-components";
+const d = c(r)`
+  ${({ prefixCls: e, $border: a, theme: t }) => o`
+    ${a && o`
+      border-bottom: 1px solid ${t.onSurface.surface.default.border.subtle};
     `}
 
-    &.${prefixCls}-item-disabled {
-      background-color: ${theme.background.inactive};
-      border-color: ${theme.border.subtle};
-      color: ${theme.text.onSurface.inactive};
+    &.${e}-item-disabled {
+      background-color: ${t.onSurface.inactive.default.background};
+      border-color: ${t.onSurface.surface.default.border.subtle};
+      color: ${t.onSurface.inactive.default.text.subtle};
       cursor: not-allowed;
 
-      .${prefixCls}-header svg {
-        fill: ${theme.text.onSurface.inactive};
+      .${e}-header svg {
+        fill: ${t.onSurface.inactive.default.text.subtle};
       }
     }
 
-    .${prefixCls}-header {
+    .${e}-header {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       cursor: pointer;
 
-      .${prefixCls}-extra {
+      .${e}-extra {
         display: flex;
         align-items: center;
         justify-self: flex-end;
@@ -34,24 +33,25 @@ const AccordionPanel = styled(Panel) `
       &-collapsible-only {
         cursor: default;
 
-        .${prefixCls}-header-text {
+        .${e}-header-text {
           cursor: pointer;
         }
       }
     }
 
-    .${prefixCls}-content-active {
+    .${e}-content-active {
       opacity: 1;
       height: auto;
     }
 
-    .${prefixCls}-content-inactive {
+    .${e}-content-inactive {
       opacity: 0;
       height: 0;
       padding: 0;
       overflow: hidden;
     }
   `}
-`;
-export { AccordionPanel };
-//# sourceMappingURL=AccordionPanel.styles.js.map
+`;
+export {
+  d as AccordionPanel
+};

package/build/esm/components/Accordion/components/HeaderAccordion/HeaderAccordion.js

@@ -1,16 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Styled from './HeaderAccordion.styles';
-const HeaderAccordion = ({ header, label }) => {
-    const renderItem = (children, isLabel = false) => {
-        if (typeof children === 'string') {
-            if (isLabel) {
-                return _jsx(Styled.Label, { children: children });
-            }
-            return _jsx("span", { children: children });
-        }
-        return children;
-    };
-    return (_jsxs(Styled.Container, { children: [renderItem(header), renderItem(label, true)] }));
-};
-export default HeaderAccordion;
-//# sourceMappingURL=HeaderAccordion.js.map
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Container as f, Label as i } from "./HeaderAccordion.styles.js";
+const u = ({ header: o, label: n }) => {
+  const e = (r, s = !1) => typeof r == "string" ? s ? /* @__PURE__ */ t(i, { children: r }) : /* @__PURE__ */ t("span", { children: r }) : r;
+  return /* @__PURE__ */ a(f, { children: [
+    e(o),
+    e(n, !0)
+  ] });
+}, p = u;
+export {
+  p as default
+};

package/build/esm/components/Accordion/components/HeaderAccordion/HeaderAccordion.styles.js

@@ -1,14 +1,15 @@
-import styled, { css } from 'styled-components';
-const Container = styled.div `
+import e, { css as l } from "styled-components";
+const r = e.div`
   display: flex;
   flex-direction: column;
   row-gap: 4px;
-`;
-const Label = styled.span `
-  ${({ theme }) => css `
-      ${theme.label.medium.normal};
-      color: ${theme.text.onSurface.subtle};
+`, t = e.span`
+  ${({ theme: o }) => l`
+      ${o.label.medium.normal};
+      color: ${o.onSurface.surface.default.text.subtle};
     `};
-`;
-export { Container, Label };
-//# sourceMappingURL=HeaderAccordion.styles.js.map
+`;
+export {
+  r as Container,
+  t as Label
+};

package/build/esm/components/Accordion/utils/motionUtils.js

@@ -0,0 +1,14 @@
+import { ACCORDION_CLASS as i } from "../../../react-base/src/consts.js";
+const e = () => ({ height: 0, opacity: 0 }), a = (t) => ({ height: t.scrollHeight, opacity: 1 }), r = (t) => ({ height: t.offsetHeight }), o = (t, n) => n.propertyName === "height", c = {
+  motionName: `${i}-motion`,
+  onEnterStart: e,
+  onEnterActive: a,
+  onLeaveStart: r,
+  onLeaveActive: e,
+  onEnterEnd: o,
+  onLeaveEnd: o,
+  motionDeadline: 500
+};
+export {
+  c as collapseMotion
+};

package/build/esm/components/Alert/Alert.consts.js

@@ -1,38 +1,51 @@
-export const alertConsts = {
-    icon: {
-        small: 20,
-        medium: 20,
-        large: 24,
-    },
-    iconMarginTop: {
-        small: 3,
-        medium: 3,
-        large: 1,
-    },
-    iconMarginRight: {
-        small: 8,
-        medium: 12,
-        large: 12,
-    },
-    minHeight: {
-        small: 40,
-        medium: 48,
-        large: 56,
-    },
-    padding: {
-        small: '8px 12px',
-        medium: '12px 16px',
-        large: '14px 16px',
-    },
-    labelMarginTop: {
-        small: 4,
-        medium: 3,
-        large: 3,
-    },
-    childrenMarginTop: {
-        small: 2,
-        medium: 2,
-        large: 1,
-    },
-};
-//# sourceMappingURL=Alert.consts.js.map
+import { Sizes as a } from "../../react-base/src/consts.js";
+const e = {
+  icon: {
+    [a.Small]: 20,
+    [a.Medium]: 20,
+    [a.Large]: 24
+  },
+  iconMarginTop: {
+    [a.Small]: 6,
+    [a.Medium]: 6,
+    [a.Large]: 6
+  },
+  iconMarginRight: {
+    [a.Small]: 8,
+    [a.Medium]: 12,
+    [a.Large]: 12
+  },
+  minHeight: {
+    [a.Small]: 48,
+    [a.Medium]: 56,
+    [a.Large]: 64
+  },
+  padding: {
+    [a.Small]: "8px 12px",
+    [a.Medium]: "12px 16px",
+    [a.Large]: "14px 16px"
+  },
+  paddingRight: {
+    [a.Small]: "8px",
+    [a.Medium]: "12px",
+    [a.Large]: "14px"
+  },
+  labelMarginTop: {
+    [a.Small]: 8,
+    [a.Medium]: 6,
+    [a.Large]: 6
+  },
+  childrenMarginTop: {
+    [a.Small]: 5,
+    [a.Medium]: 5,
+    [a.Large]: 6
+  },
+  actionsMarginRight: {
+    [a.Small]: -21,
+    [a.Medium]: -21,
+    [a.Large]: -20
+  }
+};
+export {
+  e as alertConsts
+};