@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.16

package/README.md

@@ -52,8 +52,8 @@ src
 - Export everything if Component has types & interfaces
 
 ```jsx
-export { default as Component } from './Component';
-export * from './Component';
+export { default as Component } from "./Component";
+export * from "./Component";
 ```
 
 ### Component Guideline
@@ -102,7 +102,7 @@ export interface ButtonProps {
 - Import your component inside `index.ts` file.
 
 ```jsx
-export * from './Button';
+export * from "./Button";
 ```
 
 ## Dev

package/dist/audience.js

@@ -0,0 +1,16 @@
+import { default as default2 } from "./modules/audience/ViewsCounter.js";
+import { default as default3 } from "./modules/audience/ViewsModal.js";
+import { default as default4 } from "./modules/audience/ReactionSummary.js";
+import { default as default5 } from "./modules/audience/ReactionChoice.js";
+import { default as default6 } from "./modules/audience/ReactionModal.js";
+import { default as default7 } from "./modules/audience/hooks/useReactions.js";
+import { default as default8 } from "./modules/audience/hooks/useReactionIcons.js";
+export {
+  default5 as ReactionChoice,
+  default6 as ReactionModal,
+  default4 as ReactionSummary,
+  default2 as ViewsCounter,
+  default3 as ViewsModal,
+  default8 as useReactionIcons,
+  default7 as useReactions
+};

package/dist/comments.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./modules/comments/provider/CommentProvider.js";
+export {
+  default2 as CommentProvider
+};

package/dist/components/ActionBar/ActionBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ActionBarProps {
     /**
      * Add Buttons To Actions bar

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ActionBar = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { ref, className: "actionbar", children }));
+export {
+  ActionBar as default
+};

package/dist/components/Alert/Alert.d.ts

@@ -3,9 +3,9 @@ export interface AlertRef {
     show: () => void;
     hide: () => void;
 }
-export type AlertTypes = 'success' | 'warning' | 'info' | 'danger';
-export type AlertPosition = 'none' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export interface AlertProps extends ComponentPropsWithRef<'div'> {
+export type AlertTypes = "success" | "warning" | "info" | "danger";
+export type AlertPosition = "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export interface AlertProps extends ComponentPropsWithRef<"div"> {
     /**
      * Type of alert
      */

package/dist/components/Alert/Alert.js

@@ -0,0 +1,81 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconAlertCircle from "../../modules/icons/components/IconAlertCircle.js";
+import SvgIconError from "../../modules/icons/components/IconError.js";
+import SvgIconInfoCircle from "../../modules/icons/components/IconInfoCircle.js";
+import SvgIconSuccessOutline from "../../modules/icons/components/IconSuccessOutline.js";
+import Button from "../Button/Button.js";
+const Alert = /* @__PURE__ */ forwardRef(({
+  type = "success",
+  className = "",
+  children,
+  button,
+  isDismissible = !1,
+  isToast = !1,
+  isConfirm = !1,
+  position = "none",
+  autoClose = !1,
+  autoCloseDelay = 3e3,
+  onClose,
+  onVisibilityChange
+}, ref) => {
+  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
+    t
+  } = useTranslation(), hide = useCallback(() => {
+    setVisibleStatus(!1), onClose == null || onClose();
+  }, [onClose]);
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    ...refAlert.current
+  })), useLayoutEffect(() => {
+    onVisibilityChange == null || onVisibilityChange(isVisible);
+  }, [isVisible, onVisibilityChange]), useEffect(() => {
+    autoClose && isVisible && setTimeout(() => {
+      hide();
+    }, autoCloseDelay);
+  }, [autoClose, autoCloseDelay, hide, isVisible]);
+  const show = () => {
+    setVisibleStatus(!0);
+  }, mapping = {
+    success: {
+      icon: /* @__PURE__ */ jsx(SvgIconSuccessOutline, {}),
+      classModifier: "alert-success"
+    },
+    warning: {
+      icon: /* @__PURE__ */ jsx(SvgIconAlertCircle, {}),
+      classModifier: "alert-warning"
+    },
+    info: {
+      icon: /* @__PURE__ */ jsx(SvgIconInfoCircle, {}),
+      classModifier: "alert-info"
+    },
+    danger: {
+      icon: /* @__PURE__ */ jsx(SvgIconError, {}),
+      classModifier: "alert-danger"
+    }
+  }, toastClasses = {
+    "is-dismissible": isDismissible,
+    "is-toast ": isToast
+  }, confirmClasses = {
+    "is-confirm": isConfirm
+  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
+    !isConfirm && mapping[type].icon,
+    /* @__PURE__ */ jsx("div", { className: "alert-content small", children }),
+    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
+      button,
+      " ",
+      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
+    ] }),
+    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
+    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
+      transform: "scaleX(0)"
+    } })
+  ] }) : null });
+});
+export {
+  Alert as default
+};

package/dist/components/AppHeader/AppHeader.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export interface AppHeaderProps extends ComponentPropsWithRef<'div'> {
+export interface AppHeaderProps extends ComponentPropsWithRef<"div"> {
     /**
      * Accept Breadcrumb Component
      */

package/dist/components/AppHeader/AppHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const AppHeader = /* @__PURE__ */ forwardRef(({
+  children,
+  render,
+  isFullscreen = !1,
+  ...restProps
+}, ref) => {
+  const classes = clsx("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
+    "justify-content-between": render,
+    "mx-n16": !isFullscreen,
+    "z-3 top-0 start-0 end-0": isFullscreen
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...restProps, children: [
+    children,
+    render ? /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center ms-auto gap-8", children: render() }) : null
+  ] });
+});
+export {
+  AppHeader as default
+};

package/dist/components/AppIcon/AppIcon.d.ts

@@ -1,6 +1,6 @@
-import { IWebApp } from 'edifice-ts-client';
-export type AppIconSize = '24' | '32' | '40' | '48' | '80' | '160';
-export interface AppIconBaseProps {
+import { IWebApp } from '@edifice.io/ts-client';
+export type AppIconSize = "24" | "32" | "40" | "48" | "80" | "160";
+export interface BaseProps {
     /**
      * Define icon size
      */
@@ -14,13 +14,13 @@ export interface AppIconBaseProps {
      */
     className?: string;
 }
-type AppVariants = 'square' | 'circle' | 'rounded';
-type SquareVariant = Extract<AppVariants, 'square'>;
+type AppVariants = "square" | "circle" | "rounded";
+type SquareVariant = Extract<AppVariants, "square">;
 type SquareIcon = {
     /**
      * Show icon full width
      */
-    iconFit?: 'contain';
+    iconFit?: "contain";
     /**
      * Square variant
      */
@@ -30,16 +30,16 @@ type VariantsIcon = {
     /**
      * Add padding around icon
      */
-    iconFit: 'ratio';
+    iconFit: "ratio";
     /**
      * Rounded or Circle variant
      */
     variant: AppVariants;
 };
-export type AppIconVariants = SquareIcon | VariantsIcon;
-export type AppIconProps = AppIconBaseProps & AppIconVariants;
+export type Props = SquareIcon | VariantsIcon;
+export type AppIconProps = BaseProps & Props;
 /**
  * Icon Component used to display the icon of an application
  */
-export declare const AppIcon: import('react').ForwardRefExoticComponent<AppIconProps & import('react').RefAttributes<SVGSVGElement>>;
-export {};
+declare const AppIcon: import('react').ForwardRefExoticComponent<AppIconProps & import('react').RefAttributes<SVGSVGElement>>;
+export default AppIcon;

package/dist/components/AppIcon/AppIcon.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Image from "../Image/Image.js";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
+import usePaths from "../../hooks/usePaths/usePaths.js";
+const AppIcon = /* @__PURE__ */ forwardRef(({
+  app,
+  size = "24",
+  iconFit = "contain",
+  variant = "square",
+  className = ""
+}, ref) => {
+  const {
+    isIconUrl,
+    getIconCode
+  } = useEdificeIcons(), [, iconPath] = usePaths(), isSquare = variant === "square", isRounded = variant === "rounded", isCircle = variant === "circle", isContain = iconFit === "contain", isRatio = iconFit === "ratio", iconSizes = {
+    "icon-xs": size === "24",
+    "icon-sm": size === "40",
+    "icon-md": size === "48",
+    "icon-lg": size === "80",
+    "icon-xl": size === "160"
+  }, iconVariant = {
+    square: isSquare,
+    rounded: isRounded,
+    "rounded-circle": isCircle
+  }, iconFits = {
+    "icon-contain": isContain,
+    "icon-ratio": isRatio
+  }, icon = typeof app == "string" ? app : (app == null ? void 0 : app.icon) !== void 0 ? app.icon : "placeholder", displayName = typeof app != "string" && (app == null ? void 0 : app.displayName) !== void 0 ? app.displayName : "", code = app ? getIconCode(app) : "", isIconURL = isIconUrl(icon), appCode = code || "placeholder";
+  if (isIconURL) {
+    const classes2 = clsx("h-full", className);
+    return /* @__PURE__ */ jsx(Image, { src: icon, alt: displayName, objectFit: "contain", width: size, height: size, className: classes2, style: {
+      minWidth: size + "px"
+    } });
+  }
+  const classes = clsx("app-icon", {
+    ...iconSizes,
+    ...iconVariant,
+    ...iconFits,
+    [`bg-light-${appCode}`]: appCode && !isContain,
+    [`color-app-${appCode}`]: appCode
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: classes, style: {
+    width: size + "px",
+    height: size + "px"
+  }, children: /* @__PURE__ */ jsx("svg", { ref, width: size, height: size, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `${iconPath}/apps.svg#${appCode}` }) }) });
+});
+export {
+  AppIcon as default
+};

package/dist/components/AppIcon/index.d.ts

@@ -1 +1 @@
-export * from './AppIcon';
+export { default as AppIcon } from './AppIcon';

package/dist/components/Attachment/Attachment.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export interface AttachmentProps extends ComponentPropsWithRef<'div'> {
+export interface AttachmentProps extends ComponentPropsWithRef<"div"> {
     /**
      * Name of resource or Folder
      * */

package/dist/components/Attachment/Attachment.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import SvgIconPaperclip from "../../modules/icons/components/IconPaperclip.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+const Attachment = /* @__PURE__ */ forwardRef(({
+  name = "Attachment Name",
+  options,
+  ...restProps
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
+  /* @__PURE__ */ jsxs(Tooltip, { message: name, className: "filename text-truncate d-flex align-items-center gap-8", children: [
+    /* @__PURE__ */ jsx(SvgIconPaperclip, { height: 22, width: 22 }),
+    /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name })
+  ] }),
+  options && /* @__PURE__ */ jsx("div", { className: "options ps-12", children: options })
+] }));
+export {
+  Attachment as default
+};

package/dist/components/Avatar/Avatar.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-export type AvatarVariants = 'square' | 'rounded' | 'circle';
-export type AvatarSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
+export type AvatarVariants = "square" | "rounded" | "circle";
+export type AvatarSizes = "xs" | "sm" | "md" | "lg" | "xl";
+export interface AvatarProps extends React.ComponentPropsWithRef<"img"> {
     /**
      * Shape of Avatar
      * `title`, `square`, `circle`

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Image from "../Image/Image.js";
+import usePaths from "../../hooks/usePaths/usePaths.js";
+const Avatar = /* @__PURE__ */ forwardRef(({
+  variant = "square",
+  size = "md",
+  alt,
+  src,
+  imgPlaceholder,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder || `${imagePath}/avatar/no-avatar.svg`, classes = clsx("avatar", {
+    ...{
+      "avatar-xs": size === "xs",
+      "avatar-sm": size === "sm",
+      "avatar-md": size === "md",
+      "avatar-lg": size === "lg",
+      "avatar-xl": size === "xl"
+    },
+    ...{
+      square: variant === "square",
+      rounded: variant === "rounded",
+      "rounded-circle": variant === "circle"
+    }
+  }, className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+});
+export {
+  Avatar as default
+};

package/dist/components/Badge/Badge.d.ts

@@ -1,36 +1,38 @@
 import { ReactNode } from 'react';
+import { UserProfile } from '@edifice.io/ts-client';
 export type BadgeRef = HTMLSpanElement;
 /** Badge variant : notification */
 export type NotificationBadgeVariant = {
-    type: 'notification';
-    level: 'warning' | 'danger' | 'info';
-    color?: 'background' | 'text';
+    type: "notification";
+    level: "success" | "warning" | "danger" | "info";
 };
-/** Badge variant : profile = teacher, student, relative or personnel */
+/** Badge variant : content */
+export type ContentBadgeVariant = {
+    type: "content";
+    level: "success" | "warning" | "danger" | "info";
+    background?: boolean;
+};
+/** Badge variant : profile = teacher, student, relative or personnel, guest */
 export type ProfileBadgeVariant = {
-    type: 'profile';
-    profile: 'teacher' | 'student' | 'relative' | 'personnel';
+    type: "user";
+    profile: UserProfile[number];
+    background?: boolean;
+};
+/** Badge variant : chip */
+export type ChipBadgeVariant = {
+    type: "chip";
 };
 /** Badge variant : link */
 export type LinkBadgeVariant = {
-    type: 'link';
+    type: "link";
 };
-export type BadgeVariants = NotificationBadgeVariant | ProfileBadgeVariant | LinkBadgeVariant;
-export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
+export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant;
+export interface BadgeProps extends React.ComponentPropsWithRef<"span"> {
     /**
      * Badge variant : notification, link or profile (Teacher|Student|Relative|Personnel)
      * Defaults to notification.
      */
     variant?: BadgeVariants;
-    /**
-     * Is badge always visible ?
-     * A badge with no children is hidden by default.
-     */
-    visibility?: 'always';
-    /**
-     * If set, forces the radius of the rounded border.
-     */
-    rounded?: 'pill' | 'circle';
     /**
      * Text or icon (or whatever) to render as children elements.
      */

package/dist/components/Badge/Badge.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Badge = /* @__PURE__ */ forwardRef(({
+  className,
+  variant = {
+    type: "notification",
+    level: "info"
+  },
+  children,
+  ...restProps
+}, ref) => {
+  const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", className);
+  return /* @__PURE__ */ jsx("span", { ref, className: classes, ...restProps, children: variant.type === "chip" ? /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }) : children });
+});
+export {
+  Badge as default
+};

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,4 @@
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 export interface BreadcrumbProps {
     /**
      * Pass all data about current application
@@ -9,4 +9,5 @@ export interface BreadcrumbProps {
      */
     name?: string;
 }
-export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconRafterRight from "../../modules/icons/components/IconRafterRight.js";
+import Heading from "../Heading/Heading.js";
+import BreadcrumbItem from "./BreadcrumbItem.js";
+import BreadcrumbList from "./BreadcrumbList.js";
+import BreadcrumbNav from "./BreadcrumbNav.js";
+import AppIcon from "../AppIcon/AppIcon.js";
+const Breadcrumb = /* @__PURE__ */ forwardRef(({
+  app,
+  name
+}, ref) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(BreadcrumbNav, { app, ref, className: "mw-100", children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "gap-12 mw-100", children: name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(SvgIconRafterRight, { color: "var(--edifice-gray-600)", width: 20, height: 20 }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { className: "text-truncate", children: /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "text-truncate", children: name }) })
+  ] }) : /* @__PURE__ */ jsxs(BreadcrumbItem, { className: "gap-12 d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }),
+    /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "d-none d-md-flex", children: t(app == null ? void 0 : app.displayName) })
+  ] }) }) });
+});
+export {
+  Breadcrumb as default
+};

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export interface BreadcrumbItemProps extends React.ComponentPropsWithRef<'li'> {
+export interface BreadcrumbItemProps extends React.ComponentPropsWithRef<"li"> {
     /**
      * Link or text to display
      */

package/dist/components/Breadcrumb/BreadcrumbNav.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { IWebApp } from 'edifice-ts-client';
-export interface BreadcrumbNavProps extends React.ComponentPropsWithRef<'nav'> {
+import { IWebApp } from '@edifice.io/ts-client';
+export interface BreadcrumbNavProps extends React.ComponentPropsWithRef<"nav"> {
     /**
      * Pass all data about current application
      */

package/dist/components/Breadcrumb/BreadcrumbNav.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
+const BreadcrumbNav = /* @__PURE__ */ forwardRef(({
+  children,
+  app,
+  className
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), {
+    getIconClass
+  } = useEdificeIcons(), classes = clsx("d-flex align-items-center mb-0", getIconClass(app), className), style = {
+    "--edifice-breadcrumb-divider": "-"
+  };
+  return /* @__PURE__ */ jsx("nav", { ref, className: classes, "aria-label": t("breadcrumb"), style, children });
+});
+export {
+  BreadcrumbNav as default
+};

package/dist/components/Breadcrumb/index.d.ts

@@ -1 +1,2 @@
+export { default as Breadcrumb } from './Breadcrumb';
 export * from './Breadcrumb';

package/dist/components/Button/Button.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { LoadingIcon, LoadingPosition } from '../Loading';
 export type ButtonRef = HTMLButtonElement;
-export type ButtonTypes = 'button' | 'submit' | 'reset';
-export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'danger';
-export type ButtonVariants = 'filled' | 'outline' | 'ghost';
-export type ButtonSizes = 'sm' | 'md' | 'lg';
-export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+export type ButtonTypes = "button" | "submit" | "reset";
+export type ButtonColors = "primary" | "secondary" | "tertiary" | "danger";
+export type ButtonVariants = "filled" | "outline" | "ghost";
+export type ButtonSizes = "sm" | "md" | "lg";
+export interface ButtonProps extends React.ComponentPropsWithRef<"button"> {
     /**
      * `button`, `submit` or `reset`
      */

package/dist/components/Button/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from './Button';
-type OmittedProps = 'children' | 'leftIcon' | 'rightIcon';
+type OmittedProps = "children" | "leftIcon" | "rightIcon";
 export interface IconButtonProps extends Omit<ButtonProps, OmittedProps> {
     icon?: ReactNode;
 }

package/dist/components/Button/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Button from "./Button.js";
+const IconButton = /* @__PURE__ */ forwardRef(({
+  icon,
+  className,
+  ...restProps
+}, ref) => {
+  const buttonProps = {
+    ...restProps,
+    className: clsx("btn-icon btn-sm", className)
+  };
+  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, children: icon });
+});
+export {
+  IconButton as default
+};

package/dist/components/Button/SearchButton.d.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from './IconButton';
-type PickedProps = 'type' | 'icon' | 'size';
+type PickedProps = "type" | "icon" | "size";
 export interface SearchButtonProps extends Pick<IconButtonProps, PickedProps> {
     /**
      * OnClick Handler

package/dist/components/Button/SearchButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import SvgIconSearch from "../../modules/icons/components/IconSearch.js";
+import IconButton from "./IconButton.js";
+const SearchButton = /* @__PURE__ */ forwardRef(({
+  icon = /* @__PURE__ */ jsx(SvgIconSearch, {}),
+  onClick,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn-search", className);
+  return /* @__PURE__ */ jsx(IconButton, { ref, className: classes, icon, onClick, ...restProps });
+});
+export {
+  SearchButton as default
+};