@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Accordions/Accordions.tsx

@@ -1,75 +1,75 @@
-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;
-};
+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 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>
-);
+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 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>
-);
+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 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
-  );
+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 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>
-);
+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 { 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>
-);
+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 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>
-);
+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>
+);