@spaziodati/atoka-design-system 8.6.6 → 9.0.1-beta.0

package/Alert-DfrkiukZ.js

@@ -0,0 +1,60 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-CkWJgiG5.js";
+import classnames from "classnames";
+import BsAlert from "react-bootstrap/Alert";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle } from "@fortawesome/pro-solid-svg-icons/faCheckCircle";
+import { faCircleXmark } from "@fortawesome/pro-solid-svg-icons/faCircleXmark";
+import { faExclamationCircle } from "@fortawesome/pro-solid-svg-icons/faExclamationCircle";
+import { faInfoCircle } from "@fortawesome/pro-solid-svg-icons/faInfoCircle";
+import { B as Button } from "./Button-Bn8PyQFK.js";
+import { T as Title } from "./Title-Bjj6BAK7.js";
+import { T as Tooltip } from "./Tooltip-Ds1ht2gU.js";
+const titleIcons = {
+  danger: faCircleXmark,
+  success: faCheckCircle,
+  warning: faExclamationCircle,
+  info: faInfoCircle
+};
+function Alert({
+  variant,
+  title,
+  isDismissible,
+  onClose,
+  isShown,
+  buttonOrLinkProps,
+  className,
+  children,
+  LinkComponent
+}) {
+  function renderButton() {
+    if (buttonOrLinkProps == null) {
+      return null;
+    }
+    const buttonClassName = classnames("alert-button ms-2", buttonOrLinkProps.className, {
+      "me-5": isDismissible
+      // Make space for the close button
+    });
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(LinkComponent, { ...buttonOrLinkProps, className: buttonClassName });
+    }
+    const { children: buttonOrLinkChildren, ...restProps } = buttonOrLinkProps;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ...restProps, variant: "primary", size: "md", className: buttonClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { delay: 200, content: buttonOrLinkChildren, trigger: "hover", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "line-clamp-1", children: buttonOrLinkChildren }) }) });
+  }
+  function renderContent() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "d-flex align-items-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { width: "14px", icon: titleIcons[variant] ?? faInfoCircle }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { size: "xs", className: "alert-title line-clamp-1", children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "alert-children", children }),
+      renderButton()
+    ] });
+  }
+  const bsAlertClassName = classnames(className, `atoka-alert d-grid align-items-center ${variant}`);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BsAlert, { onClose, className: bsAlertClassName, dismissible: isDismissible, show: isShown, children: renderContent() });
+}
+Alert.displayName = "Alert";
+export {
+  Alert as A,
+  titleIcons as t
+};

package/AtokaDropdownToggles-s9UdVkW7.js

@@ -0,0 +1,113 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-CkWJgiG5.js";
+import React__default from "react";
+import classnames from "classnames";
+import BsDropdown from "react-bootstrap/Dropdown";
+import { faEllipsisH } from "@fortawesome/pro-regular-svg-icons/faEllipsisH";
+import { faChevronDown } from "@fortawesome/pro-regular-svg-icons/faChevronDown";
+import { B as Button } from "./Button-Bn8PyQFK.js";
+class DropdownMenu extends React__default.PureComponent {
+  static displayName = "DropdownMenu";
+  static defaultProps = {
+    size: "sm"
+  };
+  render() {
+    const className = classnames("atoka-dropdown-menu", this.props.className, this.props.size);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(BsDropdown.Menu, { ...this.props, className, children: this.props.children });
+  }
+}
+const DropdownSection = React__default.memo(
+  ({ children }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "atoka-dropdown-section", children: [
+      children,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown.Divider, {})
+    ] });
+  }
+);
+DropdownSection.displayName = "DropdownSection";
+class Dropdown extends React__default.PureComponent {
+  static displayName = "DropDown";
+  static Toggle = BsDropdown.Toggle;
+  static Menu = DropdownMenu;
+  static Item = BsDropdown.Item;
+  static Divider = BsDropdown.Divider;
+  static Header = BsDropdown.Header;
+  static Section = DropdownSection;
+  render() {
+    const className = classnames(this.props.className, "atoka-dropdown");
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(BsDropdown, { ...this.props, className, children: this.props.children });
+  }
+}
+function withRef(displayName, Component) {
+  const newComponent = React__default.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { disabled: props.disabled, onClick: props.onClick, children: props.children }) });
+    }
+  );
+  newComponent.displayName = displayName;
+  return newComponent;
+}
+class AtokaSimpleDropdownToggleComponent extends React__default.Component {
+  static displayName = "AtokaSimpleDropdownToggleComponent";
+  handleClick = (e) => {
+    e.preventDefault();
+    this.props.onClick(e);
+  };
+  render() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "secondary",
+        size: "xs",
+        icon: faEllipsisH,
+        onClick: !this.props.disabled ? this.handleClick : void 0,
+        disabled: this.props.disabled
+      }
+    );
+  }
+}
+class AtokaCustomDropdownToggleComponent extends React__default.Component {
+  static displayName = "AtokaCustomDropdownToggleComponent";
+  handleClick = (e) => {
+    e.preventDefault();
+    this.props.onClick(e);
+  };
+  render() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "atoka-dropdown-toggle", onClick: !this.props.disabled ? this.handleClick : void 0, children: this.props.children });
+  }
+}
+class AtokaCustomDropdownToggleWithChevronComponent extends React__default.Component {
+  static displayName = "AtokaCustomDropdownToggleWithChevronComponent ";
+  handleClick = (e) => {
+    e.preventDefault();
+    this.props.onClick(e);
+  };
+  render() {
+    const className = classnames({
+      "atoka-dropdown-toggle": true,
+      "disabled": this.props.disabled
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, onClick: !this.props.disabled ? this.handleClick : void 0, children: [
+      this.props.children,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chevron-container d-flex", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "tertiary", size: "md", icon: faChevronDown }) })
+    ] });
+  }
+}
+const AtokaSimpleDropdownToggle = withRef(
+  "AtokaSimpleDropdownToggle",
+  AtokaSimpleDropdownToggleComponent
+);
+const AtokaCustomDropdownToggle = withRef(
+  "AtokaCustomDropdownToggle",
+  AtokaCustomDropdownToggleComponent
+);
+const AtokaCustomDropdownToggleWithChevron = withRef(
+  "AtokaCustomDropdownToggleWithChevron",
+  AtokaCustomDropdownToggleWithChevronComponent
+);
+export {
+  AtokaCustomDropdownToggle as A,
+  Dropdown as D,
+  AtokaCustomDropdownToggleWithChevron as a,
+  AtokaSimpleDropdownToggle as b,
+  DropdownMenu as c
+};

package/Badge-BZz9-F86.js

@@ -0,0 +1,49 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-CkWJgiG5.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classnames from "classnames";
+import React__default from "react";
+import BsBadge from "react-bootstrap/Badge";
+import { C as yellow, t as pink100 } from "./Style-CSNnkrg3.js";
+const Badge = React__default.memo(({ size = "sm", ...props }) => {
+  const className = classnames(props?.className, "atoka-badge", `variante-${props.variant}`, size, {
+    disabled: props.disabled
+  }), iconClassName = classnames({
+    "me-2": props.children != null
+  }), icon = props.icon == null ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: props.icon, className: iconClassName });
+  const style = {
+    backgroundColor: `var(--atoka_colors_${props.color ?? "primary"}Main)`,
+    color: `var(--atoka_colors_${props.color ?? "primary"}ContrastText)`,
+    borderColor: `var(--atoka_colors_${props.color ?? "primary"}Main)`,
+    borderWidth: "1px",
+    borderStyle: "solid"
+  };
+  if (props.color === "yellow") {
+    style.backgroundColor = yellow;
+    style.borderColor = yellow;
+    style.color = "white";
+  }
+  if (props.color === "pink") {
+    style.backgroundColor = pink100;
+    style.borderColor = pink100;
+    style.color = "white";
+  }
+  switch (props.variant) {
+    case "secondary":
+      style.color = style.backgroundColor;
+      style.backgroundColor = "transparent";
+      break;
+    case "tertiary":
+      style.color = style.backgroundColor;
+      style.backgroundColor = "transparent";
+      style.borderWidth = "0px";
+      break;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BsBadge, { bg: "", className, style, children: [
+    icon,
+    props.children
+  ] });
+});
+Badge.displayName = "Badge";
+export {
+  Badge as B
+};

package/Bs4V3Wrapper-BKRW0pvE.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-CkWJgiG5.js";
+import React__default from "react";
+import classnames from "classnames";
+class Bs4V3Wrapper extends React__default.PureComponent {
+  static displayName = "Bs4V3Wrapper";
+  render() {
+    const className = classnames("bs4-v3", this.props.className);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, children: this.props.children });
+  }
+}
+export {
+  Bs4V3Wrapper as B
+};

package/Button-Bn8PyQFK.js

@@ -0,0 +1,65 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-CkWJgiG5.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classnames from "classnames";
+import React__default from "react";
+import BsButton from "react-bootstrap/Button";
+class Button extends React__default.PureComponent {
+  static displayName = "Button";
+  static defaultProps = {
+    variant: "primary",
+    size: "md",
+    disabled: false
+  };
+  renderIcon(icon) {
+    if (icon == null) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon });
+  }
+  renderChildren(children) {
+    if (children == null) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "btn-children", children });
+  }
+  renderLeftSide(iconLeft, iconRight) {
+    if (iconLeft == null) {
+      if (iconRight == null) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: iconRight, className: "invisible" });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: iconLeft });
+  }
+  renderRightSide(iconLeft, iconRight) {
+    if (iconRight == null) {
+      if (iconLeft == null) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: iconLeft, className: "invisible" });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: iconRight });
+  }
+  renderContent(icon, children) {
+    if (icon != null && children == null) {
+      return this.renderIcon(icon);
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "button-content-center-container", children: [
+      this.renderIcon(icon),
+      this.renderChildren(children)
+    ] });
+  }
+  render() {
+    const { icon, iconLeft, iconRight, children, size, className, ...buttonProps } = this.props, buttonClassName = classnames("atoka-btn", `btn-${size}`, className, {
+      "btn-icon-only": this.props.icon != null && this.props.children == null
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(BsButton, { className: buttonClassName, ...buttonProps, children: [
+      this.renderLeftSide(iconLeft, iconRight),
+      this.renderContent(icon, children),
+      this.renderRightSide(iconLeft, iconRight)
+    ] });
+  }
+}
+export {
+  Button as B
+};