@inceptionbg/iui 2.0.22 → 2.0.24

package/src/assets/icons/solid/faPrint.ts

@@ -1,15 +1,15 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-const prefix = 'fas';
-const iconName = 'print';
-const width = 512;
-const height = 512;
-const unicode = 'f02f';
-const svgPathData =
-  'M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z';
-
-export const faPrint: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fas';
+const iconName = 'print';
+const width = 512;
+const height = 512;
+const unicode = 'f02f';
+const svgPathData =
+  'M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z';
+
+export const faPrint: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/solid/faRotateRight.ts

@@ -1,15 +1,15 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-const prefix = 'fas';
-const iconName = 'rotate-right';
-const width = 512;
-const height = 512;
-const unicode = 'f2f9';
-const svgPathData =
-  'M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z';
-
-export const faRotateRight: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fas';
+const iconName = 'rotate-right';
+const width = 512;
+const height = 512;
+const unicode = 'f2f9';
+const svgPathData =
+  'M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z';
+
+export const faRotateRight: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/solid/faXmark.ts

@@ -1,15 +1,15 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-const prefix = 'fas';
-const iconName = 'xmark';
-const width = 320;
-const height = 512;
-const unicode = 'f00d';
-const svgPathData =
-  'M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z';
-
-export const faXmark: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fas';
+const iconName = 'xmark';
+const width = 320;
+const height = 512;
+const unicode = 'f00d';
+const svgPathData =
+  'M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z';
+
+export const faXmark: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/components/Accordions/Accordions.tsx

@@ -1,74 +1,75 @@
-import { FC, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { ITab } from '../../types/ITab';
-import { Collapse } from '../Helper/Collapse';
-import { faArrowsToLine } from '../../assets/icons/light/faArrowsToLine';
-import { faArrowsUpDown } from '../../assets/icons/light/faArrowsUpDown';
-
-interface Props {
-  tabs: ITab[];
-  initialValue?: string;
-  compact?: boolean;
-  keepContentInDom?: boolean;
-  control?: {
-    value: string;
-    setValue: (value: string) => void;
-  };
-  className?: string;
-  classNameContent?: string;
-}
-export const Accordions: FC<Props> = ({
-  tabs: allTabs,
-  initialValue,
-  compact,
-  keepContentInDom,
-  control,
-  className,
-  classNameContent,
-}) => {
-  const tabs = allTabs.filter(tab => !tab.hidden);
-  const [selected, setSelected] = useState(initialValue || '');
-
-  return tabs.length > 0 ? (
-    <div className={clsx('iui-accordions', className)}>
-      {tabs.map(tab => {
-        const isOpen = (control?.value ?? selected) === tab.value;
-        return (
-          <div
-            key={tab.value}
-            className={clsx('iui-accordion', {
-              selected: isOpen,
-              compact,
-            })}
-          >
-            <div
-              className={clsx('summary clickable', {
-                disabled: tab.disabled,
-              })}
-              onClick={
-                tab.disabled
-                  ? undefined
-                  : () => (control?.setValue ?? setSelected)(isOpen ? '' : tab.value)
-              }
-            >
-              <div className="flex center">
-                {tab.icon && <FontAwesomeIcon icon={tab.icon} className="iui-icon" />}
-                {tab.label}
-              </div>
-              <FontAwesomeIcon
-                icon={isOpen ? faArrowsToLine : faArrowsUpDown}
-                className="collapse-icon"
-              />
-            </div>
-            <Collapse isOpen={isOpen} keepContentInDom={keepContentInDom}>
-              <div className={clsx('iui-accordion-content', classNameContent)}>
-                {tab.component}
-              </div>
-            </Collapse>
-          </div>
-        );
-      })}
-    </div>
-  ) : null;
-};
+import type { FC } from 'react';
+import type { ITab } from '../../types/ITab';
+import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faArrowsToLine } from '../../assets/icons/light/faArrowsToLine';
+import { faArrowsUpDown } from '../../assets/icons/light/faArrowsUpDown';
+import { Collapse } from '../Helper/Collapse';
+
+interface Props {
+  tabs: ITab[];
+  initialValue?: string;
+  compact?: boolean;
+  keepContentInDom?: boolean;
+  control?: {
+    value: string;
+    setValue: (value: string) => void;
+  };
+  className?: string;
+  classNameContent?: string;
+}
+export const Accordions: FC<Props> = ({
+  tabs: allTabs,
+  initialValue,
+  compact,
+  keepContentInDom,
+  control,
+  className,
+  classNameContent,
+}) => {
+  const tabs = allTabs.filter(tab => !tab.hidden);
+  const [selected, setSelected] = useState(initialValue || '');
+
+  return tabs.length > 0 ? (
+    <div className={clsx('iui-accordions', className)}>
+      {tabs.map(tab => {
+        const isOpen = (control?.value ?? selected) === tab.value;
+        return (
+          <div
+            key={tab.value}
+            className={clsx('iui-accordion', {
+              selected: isOpen,
+              compact,
+            })}
+          >
+            <div
+              className={clsx('summary clickable', {
+                disabled: tab.disabled,
+              })}
+              onClick={
+                tab.disabled
+                  ? undefined
+                  : () => (control?.setValue ?? setSelected)(isOpen ? '' : tab.value)
+              }
+            >
+              <div className="flex center">
+                {tab.icon && <FontAwesomeIcon icon={tab.icon} className="iui-icon" />}
+                {tab.label}
+              </div>
+              <FontAwesomeIcon
+                icon={isOpen ? faArrowsToLine : faArrowsUpDown}
+                className="collapse-icon"
+              />
+            </div>
+            <Collapse isOpen={isOpen} keepContentInDom={keepContentInDom}>
+              <div className={clsx('iui-accordion-content', classNameContent)}>
+                {tab.component}
+              </div>
+            </Collapse>
+          </div>
+        );
+      })}
+    </div>
+  ) : null;
+};

package/src/components/Alert/Alert.tsx

@@ -1,31 +1,31 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { FC, ReactNode } from 'react';
-import { infoIcons } from '../../utils/icons';
-import { IInfoType } from '../../types/IInfo';
-
-export interface IAlertProps {
-  text?: string;
-  severity: IInfoType;
-  fitContent?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Alert: FC<IAlertProps> = ({
-  text,
-  severity,
-  fitContent,
-  className,
-  children,
-}) => (
-  <div
-    className={clsx('iui-alert', severity, className, {
-      'width-fit': fitContent,
-    })}
-  >
-    <FontAwesomeIcon icon={infoIcons[severity]} />
-    {text && <p>{text}</p>}
-    {children}
-  </div>
-);
+import type { FC, ReactNode } from 'react';
+import type { IInfoType } from '../../types/IInfo';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { infoIcons } from '../../utils/icons';
+
+export interface IAlertProps {
+  text?: string;
+  severity: IInfoType;
+  fitContent?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Alert: FC<IAlertProps> = ({
+  text,
+  severity,
+  fitContent,
+  className,
+  children,
+}) => (
+  <div
+    className={clsx('iui-alert', severity, className, {
+      'width-fit': fitContent,
+    })}
+  >
+    <FontAwesomeIcon icon={infoIcons[severity]} />
+    {text && <p>{text}</p>}
+    {children}
+  </div>
+);

package/src/components/Badge/DotBadge.tsx

@@ -1,16 +1,16 @@
-import clsx from 'clsx';
-import { FC } from 'react';
-import { IInfoType } from '../../types/IInfo';
-
-interface Props {
-  label: string;
-  color: IInfoType | 'gray';
-  className?: string;
-}
-
-export const DotBadge: FC<Props> = ({ label, color, className }) => (
-  <div className="flex align-center gap-2">
-    <div className={clsx('iui-dot-badge', color, className)} />
-    {label}
-  </div>
-);
+import type { FC } from 'react';
+import type { IInfoType } from '../../types/IInfo';
+import clsx from 'clsx';
+
+interface Props {
+  label: string;
+  color: IInfoType | 'gray';
+  className?: string;
+}
+
+export const DotBadge: FC<Props> = ({ label, color, className }) => (
+  <div className="flex align-center gap-2">
+    <div className={clsx('iui-dot-badge', color, className)} />
+    {label}
+  </div>
+);

package/src/components/Badge/NotificationBadge.tsx

@@ -1,29 +1,29 @@
-import clsx from 'clsx';
-import { FC, ReactNode } from 'react';
-import { IInfoType } from '../../types/IInfo';
-
-interface Props {
-  number?: number;
-  className?: string;
-  size?: 's' | 'm';
-  children?: ReactNode;
-  color?: IInfoType | 'primary';
-}
-
-export const NotificationBadge: FC<Props> = ({
-  number,
-  className,
-  size = 'm',
-  children,
-  color = 'primary',
-}) =>
-  !!number && number > 0 ? (
-    <div className="iui-badge-parent">
-      {children}
-      <div className={clsx('iui-badge', color, className, size)}>
-        {number > 99 ? '99+' : number}
-      </div>
-    </div>
-  ) : (
-    children
-  );
+import type { FC, ReactNode } from 'react';
+import type { IInfoType } from '../../types/IInfo';
+import clsx from 'clsx';
+
+interface Props {
+  number?: number;
+  className?: string;
+  size?: 's' | 'm';
+  children?: ReactNode;
+  color?: IInfoType | 'primary';
+}
+
+export const NotificationBadge: FC<Props> = ({
+  number,
+  className,
+  size = 'm',
+  children,
+  color = 'primary',
+}) =>
+  !!number && number > 0 ? (
+    <div className="iui-badge-parent">
+      {children}
+      <div className={clsx('iui-badge', color, className, size)}>
+        {number > 99 ? '99+' : number}
+      </div>
+    </div>
+  ) : (
+    children
+  );

package/src/components/Badge/PillBadge.tsx

@@ -1,13 +1,13 @@
-import clsx from 'clsx';
-import { IInfoType } from '../../types/IInfo';
-import { FC } from 'react';
-
-interface Props {
-  label: string;
-  color: IInfoType | 'gray';
-  className?: string;
-}
-
-export const PillBadge: FC<Props> = ({ label, color, className }) => (
-  <div className={clsx('iui-pill-badge', color, className)}>{label}</div>
-);
+import type { FC } from 'react';
+import type { IInfoType } from '../../types/IInfo';
+import clsx from 'clsx';
+
+interface Props {
+  label: string;
+  color: IInfoType | 'gray';
+  className?: string;
+}
+
+export const PillBadge: FC<Props> = ({ label, color, className }) => (
+  <div className={clsx('iui-pill-badge', color, className)}>{label}</div>
+);

package/src/components/Button/Button.tsx

@@ -1,56 +1,56 @@
-import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
-import clsx from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-export type IButtonColor = 'primary' | 'neutral' | 'danger';
-export type IButtonVariant = 'solid' | 'outlined' | 'simple';
-
-export interface IButtonProps {
-  label: string;
-  icon?: IconDefinition;
-  iconEnd?: IconDefinition;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  variant?: IButtonVariant;
-  color?: IButtonColor;
-  size?: 'xs' | 's' | 'm' | 'l';
-  disabled?: boolean;
-  active?: boolean;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  className?: string;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export const Button: FC<IButtonProps> = ({
-  label,
-  icon,
-  iconEnd,
-  onClick,
-  variant = 'solid',
-  color,
-  size = 'm',
-  disabled,
-  active,
-  type = 'button',
-  className,
-  buttonProps,
-  ref,
-}) => (
-  <button
-    ref={ref}
-    disabled={disabled}
-    className={clsx('iui-btn iui-text-btn', variant, color, size, className, {
-      active,
-      primary: !color && variant === 'solid',
-      neutral: !color && variant !== 'solid',
-    })}
-    onClick={onClick}
-    type={type}
-    {...buttonProps}
-  >
-    {icon && <FontAwesomeIcon icon={icon} />}
-    <div className="iui-btn-label">{label}</div>
-    {iconEnd && <FontAwesomeIcon icon={iconEnd} />}
-  </button>
-);
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+
+export type IButtonColor = 'primary' | 'neutral' | 'danger';
+export type IButtonVariant = 'solid' | 'outlined' | 'simple';
+
+export interface IButtonProps {
+  label: string;
+  icon?: IconDefinition;
+  iconEnd?: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  variant?: IButtonVariant;
+  color?: IButtonColor;
+  size?: 'xs' | 's' | 'm' | 'l';
+  disabled?: boolean;
+  active?: boolean;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  className?: string;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+export const Button: FC<IButtonProps> = ({
+  label,
+  icon,
+  iconEnd,
+  onClick,
+  variant = 'solid',
+  color,
+  size = 'm',
+  disabled,
+  active,
+  type = 'button',
+  className,
+  buttonProps,
+  ref,
+}) => (
+  <button
+    ref={ref}
+    disabled={disabled}
+    className={clsx('iui-btn iui-text-btn', variant, color, size, className, {
+      active,
+      primary: !color && variant === 'solid',
+      neutral: !color && variant !== 'solid',
+    })}
+    onClick={onClick}
+    type={type}
+    {...buttonProps}
+  >
+    {icon && <FontAwesomeIcon icon={icon} />}
+    <div className="iui-btn-label">{label}</div>
+    {iconEnd && <FontAwesomeIcon icon={iconEnd} />}
+  </button>
+);

package/src/components/Button/IconButton.tsx

@@ -1,51 +1,51 @@
-import { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
-import clsx from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IButtonColor, IButtonVariant } from './Button';
-import { Tooltip } from '../Tooltip/Tooltip';
-
-export interface IIconButtonProps {
-  icon: IconDefinition;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  variant?: IButtonVariant;
-  color?: IButtonColor;
-  size?: 's' | 'm' | 'l';
-  disabled?: boolean;
-  active?: boolean;
-  tooltip?: string;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  className?: string;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export const IconButton: FC<IIconButtonProps> = ({
-  icon,
-  onClick,
-  variant = 'simple',
-  color = 'primary',
-  size = 'm',
-  disabled,
-  active,
-  tooltip,
-  type = 'button',
-  className,
-  buttonProps,
-  ref,
-}) => (
-  <Tooltip label={tooltip} disabled={disabled}>
-    <button
-      ref={ref}
-      disabled={disabled}
-      className={clsx('iui-btn iui-icon-btn', variant, color, size, className, {
-        active,
-      })}
-      onClick={onClick}
-      type={type}
-      {...buttonProps}
-    >
-      <FontAwesomeIcon icon={icon} />
-    </button>
-  </Tooltip>
-);
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
+import type { IButtonColor, IButtonVariant } from './Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface IIconButtonProps {
+  icon: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  variant?: IButtonVariant;
+  color?: IButtonColor;
+  size?: 's' | 'm' | 'l';
+  disabled?: boolean;
+  active?: boolean;
+  tooltip?: string;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  className?: string;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+export const IconButton: FC<IIconButtonProps> = ({
+  icon,
+  onClick,
+  variant = 'simple',
+  color = 'primary',
+  size = 'm',
+  disabled,
+  active,
+  tooltip,
+  type = 'button',
+  className,
+  buttonProps,
+  ref,
+}) => (
+  <Tooltip label={tooltip} disabled={disabled}>
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={clsx('iui-btn iui-icon-btn', variant, color, size, className, {
+        active,
+      })}
+      onClick={onClick}
+      type={type}
+      {...buttonProps}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  </Tooltip>
+);