@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.13

package/dist/components/Breadcrumb/BreadcrumbNav.js

@@ -1,23 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import l from "clsx";
-import { useTranslation as d } from "react-i18next";
-import f from "../../core/useOdeIcons/useOdeIcons.js";
-const g = /* @__PURE__ */ n(({
-  children: r,
-  app: e,
-  className: s
-}, o) => {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+const BreadcrumbNav = /* @__PURE__ */ forwardRef(({
+  children,
+  app,
+  className
+}, ref) => {
   const {
     t
-  } = d(), {
-    getIconClass: a
-  } = f(), m = l("d-flex align-items-center mb-0", a(e), s), c = {
+  } = useTranslation(), {
+    getIconClass
+  } = useOdeIcons(), classes = clsx("d-flex align-items-center mb-0", getIconClass(app), className), style = {
     "--edifice-breadcrumb-divider": "-"
   };
-  return /* @__PURE__ */ i("nav", { ref: o, className: m, "aria-label": t("breadcrumb"), style: c, children: r });
+  return /* @__PURE__ */ jsx("nav", { ref, className: classes, "aria-label": t("breadcrumb"), style, children });
 });
 export {
-  g as default
+  BreadcrumbNav as default
 };
-//# sourceMappingURL=BreadcrumbNav.js.map

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

@@ -59,5 +59,5 @@ export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
 /**
  * Primary UI component for user interaction
  */
-export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,37 +1,35 @@
-import { jsx as m, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import x from "clsx";
-import { Loading as $ } from "../Loading/Loading.js";
-const B = /* @__PURE__ */ a(({
-  color: n = "primary",
-  type: r = "button",
-  size: s = "md",
-  children: o,
-  isLoading: l,
-  loadingIcon: b,
-  loadingPosition: e,
-  leftIcon: f,
-  rightIcon: d,
-  className: i,
-  variant: t = "filled",
-  ...p
-}, u) => {
-  const c = x("btn", {
-    [`btn-filled btn-${n}`]: t === "filled",
-    [`btn-${t}-${n}`]: t === "outline" || t === "ghost",
-    "btn-icon": !o,
-    "btn-loading": l,
-    "btn-lg": s === "lg",
-    "btn-sm": s === "sm"
-  }, i);
-  return /* @__PURE__ */ m("button", { ref: u, className: c, type: r, ...p, children: l ? /* @__PURE__ */ m($, { isLoading: !0, loadingIcon: b, loadingPosition: e, children: o }) : /* @__PURE__ */ g("span", { children: [
-    f,
-    o,
-    d
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Loading from "../Loading/Loading.js";
+const Button = /* @__PURE__ */ forwardRef(({
+  color = "primary",
+  type = "button",
+  size = "md",
+  children,
+  isLoading,
+  loadingIcon,
+  loadingPosition,
+  leftIcon,
+  rightIcon,
+  className,
+  variant = "filled",
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn", {
+    [`btn-filled btn-${color}`]: variant === "filled",
+    [`btn-${variant}-${color}`]: variant === "outline" || variant === "ghost",
+    "btn-icon": !children,
+    "btn-loading": isLoading,
+    "btn-lg": size === "lg",
+    "btn-sm": size === "sm"
+  }, className);
+  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
+    leftIcon,
+    children,
+    rightIcon
   ] }) });
-});
+}), Button$1 = Button;
 export {
-  B as Button,
-  B as default
+  Button$1 as default
 };
-//# sourceMappingURL=Button.js.map

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

@@ -7,5 +7,5 @@ export interface IconButtonProps extends Omit<ButtonProps, OmittedProps> {
 /**
  * IconButton extends ButtonComponent.
  */
-export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/components/Button/IconButton.js

@@ -1,20 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import f from "clsx";
-import { Button as e } from "./Button.js";
-const l = /* @__PURE__ */ c(({
-  icon: o,
-  className: t,
-  ...r
-}, n) => {
-  const m = {
-    ...r,
-    className: f("btn-icon btn-sm", t)
+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__ */ s(e, { ref: n, ...m, children: o });
-});
+  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, children: icon });
+}), IconButton$1 = IconButton;
 export {
-  l as IconButton,
-  l as default
+  IconButton$1 as default
 };
-//# sourceMappingURL=IconButton.js.map

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

@@ -17,5 +17,5 @@ export interface SearchButtonProps extends Pick<IconButtonProps, PickedProps> {
 /**
  * SearchButton extends the IconButton component by omitting unnecessary props.
  */
-export declare const SearchButton: import('react').ForwardRefExoticComponent<SearchButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SearchButton: import('react').ForwardRefExoticComponent<SearchButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default SearchButton;

package/dist/components/Button/SearchButton.js

@@ -1,19 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import n from "clsx";
-import { IconButton as f } from "./IconButton.js";
-import { Icon as p } from "../Icon/Icon.js";
-const d = /* @__PURE__ */ e(({
-  icon: r = /* @__PURE__ */ o(p, { name: "search" }),
-  onClick: t,
-  className: m,
-  ...s
-}, a) => {
-  const c = n("btn-search", m);
-  return /* @__PURE__ */ o(f, { ref: a, className: c, icon: r, onClick: t, ...s });
-});
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Search } from "@edifice.io/icons";
+import clsx from "clsx";
+import IconButton from "./IconButton.js";
+const SearchButton = /* @__PURE__ */ forwardRef(({
+  icon = /* @__PURE__ */ jsx(Search, {}),
+  onClick,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn-search", className);
+  return /* @__PURE__ */ jsx(IconButton, { ref, className: classes, icon, onClick, ...restProps });
+}), SearchButton$1 = SearchButton;
 export {
-  d as SearchButton,
-  d as default
+  SearchButton$1 as default
 };
-//# sourceMappingURL=SearchButton.js.map

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

@@ -1,3 +1,6 @@
+export { default as Button } from './Button';
+export { default as IconButton } from './IconButton';
+export { default as SearchButton } from './SearchButton';
 export * from './Button';
 export * from './IconButton';
 export * from './SearchButton';

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 export interface CardProps {
     /**
      * IWebApp
@@ -31,7 +31,7 @@ export interface CardProps {
      */
     className?: string;
 }
-export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>> & {
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>> & {
     Title: {
         ({ children, className, }: {
             children: ReactNode;
@@ -50,13 +50,13 @@ export declare const Card: import('react').ForwardRefExoticComponent<CardProps &
         ({ imageSrc, className, variant, }: {
             imageSrc?: string | undefined;
             className?: string | undefined;
-            variant?: "small" | "landscape" | "medium" | undefined;
+            variant?: "small" | "medium" | "landscape" | undefined;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {
         ({ children, space, flexDirection, }: {
-            space?: "16" | "0" | "8" | null | undefined;
+            space?: "0" | "8" | "16" | null | undefined;
             flexDirection?: "row" | "column" | null | undefined;
             children: ReactNode;
         }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js

@@ -1,53 +1,51 @@
-import { jsx as s, jsxs as u } from "react/jsx-runtime";
-import { forwardRef as C, useMemo as x } from "react";
-import g from "clsx";
-import v from "./CardBody.js";
-import { CardContext as I } from "./CardContext.js";
-import T from "./CardFooter.js";
-import j from "./CardHeader.js";
-import l from "./CardImage.js";
-import y from "./CardText.js";
-import H from "./CardTitle.js";
-import B from "./CardUser.js";
-import F from "../../core/useOdeIcons/useOdeIcons.js";
-const O = /* @__PURE__ */ C(({
-  app: r,
-  isSelectable: m = !0,
-  isClickable: o = !0,
-  isSelected: f = !1,
-  onClick: d,
-  onSelect: a,
-  children: e,
-  className: i
-}, p) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import clsx from "clsx";
+import CardBody from "./CardBody.js";
+import { CardContext } from "./CardContext.js";
+import CardFooter from "./CardFooter.js";
+import CardHeader from "./CardHeader.js";
+import CardImage from "./CardImage.js";
+import CardText from "./CardText.js";
+import CardTitle from "./CardTitle.js";
+import CardUser from "./CardUser.js";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  app,
+  isSelectable = !0,
+  isClickable = !0,
+  isSelected = !1,
+  onClick,
+  onSelect,
+  children,
+  className
+}, ref) => {
   const {
-    getIconCode: n
-  } = F(), t = r ? n(r) : "placeholder", c = x(() => ({
-    app: r,
-    appCode: t,
-    isSelectable: m,
-    isClickable: o,
-    onClick: d,
-    onSelect: a
-  }), [r, t, m, o, d, a]);
-  return /* @__PURE__ */ s(I.Provider, { value: c, children: /* @__PURE__ */ u("div", { ref: p, className: g("card", {
-    "is-selected": f,
-    "c-pointer": o
-  }, i), children: [
-    /* @__PURE__ */ s(R.Header, {}),
-    typeof e == "function" ? e(t) : e
+    getIconCode
+  } = useOdeIcons(), appCode = app ? getIconCode(app) : "placeholder", values = useMemo(() => ({
+    app,
+    appCode,
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  }), [app, appCode, isSelectable, isClickable, onClick, onSelect]);
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { ref, className: clsx("card", {
+    "is-selected": isSelected,
+    "c-pointer": isClickable
+  }, className), children: [
+    /* @__PURE__ */ jsx(Card.Header, {}),
+    typeof children == "function" ? children(appCode) : children
   ] }) });
-}), R = /* @__PURE__ */ Object.assign(O, {
-  Title: H,
-  Text: y,
-  Image: l,
-  Body: v,
-  User: B,
-  Footer: T,
-  Header: j
-});
+}), Card = /* @__PURE__ */ Object.assign(Root, {
+  Title: CardTitle,
+  Text: CardText,
+  Image: CardImage,
+  Body: CardBody,
+  User: CardUser,
+  Footer: CardFooter,
+  Header: CardHeader
+}), Card$1 = Card;
 export {
-  R as Card,
-  R as default
+  Card$1 as default
 };
-//# sourceMappingURL=Card.js.map

package/dist/components/Card/CardBody.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 declare const CardBody: {
     ({ children, space, flexDirection, }: {
-        space?: "16" | "0" | "8" | null | undefined;
+        space?: "0" | "8" | "16" | null | undefined;
         flexDirection?: "row" | "column" | null | undefined;
         children: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/CardBody.js

@@ -1,19 +1,18 @@
-import { jsx as t } from "react/jsx-runtime";
-import d from "clsx";
-const s = ({
-  children: l,
-  space: o = null,
-  flexDirection: r = "row"
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardBody = ({
+  children,
+  space = null,
+  flexDirection = "row"
 }) => {
-  const m = d("card-body", {
-    [`p-${o}`]: o,
-    [`gap-${o}`]: o,
-    "align-items-start": r === "column",
-    "flex-column": r === "column"
+  const cardbody = clsx("card-body", {
+    [`p-${space}`]: space,
+    [`gap-${space}`]: space,
+    "align-items-start": flexDirection === "column",
+    "flex-column": flexDirection === "column"
   });
-  return /* @__PURE__ */ t("div", { className: m, children: l });
+  return /* @__PURE__ */ jsx("div", { className: cardbody, children });
 };
 export {
-  s as default
+  CardBody as default
 };
-//# sourceMappingURL=CardBody.js.map

package/dist/components/Card/CardContext.d.ts

@@ -1,4 +1,4 @@
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 import { CardProps } from './Card';
 export interface CardContextProps extends Omit<CardProps, 'children' | 'className'> {
     app?: IWebApp | undefined;

package/dist/components/Card/CardContext.js

@@ -1,12 +1,11 @@
-import { createContext as e, useContext as o } from "react";
-const n = /* @__PURE__ */ e(null), C = () => {
-  const t = o(n);
-  if (!t)
+import { createContext, useContext } from "react";
+const CardContext = /* @__PURE__ */ createContext(null), useCardContext = () => {
+  const context = useContext(CardContext);
+  if (!context)
     throw new Error("Cannot be rendered outside the Card component");
-  return t;
+  return context;
 };
 export {
-  n as CardContext,
-  C as useCardContext
+  CardContext,
+  useCardContext
 };
-//# sourceMappingURL=CardContext.js.map

package/dist/components/Card/CardFooter.js

@@ -1,8 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
-const t = ({
-  children: r
-}) => /* @__PURE__ */ o("div", { className: "card-footer gap-16", children: r });
+import { jsx } from "react/jsx-runtime";
+const CardFooter = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: "card-footer gap-16", children });
 export {
-  t as default
+  CardFooter as default
 };
-//# sourceMappingURL=CardFooter.js.map

package/dist/components/Card/CardHeader.js

@@ -1,20 +1,19 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { useCardContext as i } from "./CardContext.js";
-import { IconButton as s } from "../Button/IconButton.js";
-import { Icon as l } from "../Icon/Icon.js";
-const b = () => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Options } from "@edifice.io/icons";
+import { useCardContext } from "./CardContext.js";
+import IconButton from "../Button/IconButton.js";
+const CardHeader = () => {
   const {
-    isSelectable: t,
-    isClickable: e,
-    onClick: a,
-    onSelect: n
-  } = i();
-  return t || e ? /* @__PURE__ */ r("div", { className: "card-header", children: [
-    t ? /* @__PURE__ */ o(s, { "aria-label": "Open Action Bar", className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ o(l, { name: "options" }), onClick: n, variant: "ghost" }) : null,
-    e ? /* @__PURE__ */ o("button", { onClick: a, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": "Open resource" }) : null
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  } = useCardContext();
+  return isSelectable || isClickable ? /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
+    isSelectable ? /* @__PURE__ */ jsx(IconButton, { "aria-label": "Open Action Bar", className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ jsx(Options, {}), onClick: onSelect, variant: "ghost" }) : null,
+    isClickable ? /* @__PURE__ */ jsx("button", { onClick, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": "Open resource" }) : null
   ] }) : null;
 };
 export {
-  b as default
+  CardHeader as default
 };
-//# sourceMappingURL=CardHeader.js.map

package/dist/components/Card/CardImage.d.ts

@@ -2,7 +2,7 @@ declare const CardImage: {
     ({ imageSrc, className, variant, }: {
         imageSrc?: string | undefined;
         className?: string | undefined;
-        variant?: "small" | "landscape" | "medium" | undefined;
+        variant?: "small" | "medium" | "landscape" | undefined;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Card/CardImage.js

@@ -1,22 +1,21 @@
-import { jsx as o } from "react/jsx-runtime";
-import e from "clsx";
-import { useCardContext as s } from "./CardContext.js";
-import { Image as c } from "../Image/Image.js";
-import { AppIcon as l } from "../AppIcon/AppIcon.js";
-const h = ({
-  imageSrc: t,
-  className: a,
-  variant: r = "medium"
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCardContext } from "./CardContext.js";
+import Image from "../Image/Image.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const CardImage = ({
+  imageSrc,
+  className,
+  variant = "medium"
 }) => {
   const {
-    app: m
-  } = s(), i = r === "landscape" ? {
+    app
+  } = useCardContext(), style = variant === "landscape" ? {
     width: "100%",
     height: "auto"
   } : null;
-  return /* @__PURE__ */ o("div", { className: e("card-image", r), children: t ? /* @__PURE__ */ o(c, { alt: "", src: t, objectFit: "cover", className: e("h-full w-100", a) }) : /* @__PURE__ */ o(l, { app: m, iconFit: "ratio", size: "80", variant: "rounded", ...i }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx("card-image", variant), children: imageSrc ? /* @__PURE__ */ jsx(Image, { alt: "", src: imageSrc, objectFit: "cover", className: clsx("h-full w-100", className) }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "80", variant: "rounded", ...style }) });
 };
 export {
-  h as default
+  CardImage as default
 };
-//# sourceMappingURL=CardImage.js.map

package/dist/components/Card/CardText.js

@@ -1,13 +1,12 @@
-import { jsx as a } from "react/jsx-runtime";
-import x from "clsx";
-const o = ({
-  children: t,
-  className: e
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardText = ({
+  children,
+  className
 }) => {
-  const r = x("card-text small text-break text-truncate text-truncate-1", e);
-  return /* @__PURE__ */ a("p", { className: r, children: t });
+  const text = clsx("card-text small text-break text-truncate text-truncate-1", className);
+  return /* @__PURE__ */ jsx("p", { className: text, children });
 };
 export {
-  o as default
+  CardText as default
 };
-//# sourceMappingURL=CardText.js.map

package/dist/components/Card/CardTitle.js

@@ -1,13 +1,12 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "clsx";
-const l = ({
-  children: e,
-  className: r
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardTitle = ({
+  children,
+  className
 }) => {
-  const a = o("card-title body text-break text-truncate text-truncate-2", r);
-  return /* @__PURE__ */ t("h3", { className: a, children: /* @__PURE__ */ t("strong", { children: e }) });
+  const title = clsx("card-title body text-break text-truncate text-truncate-2", className);
+  return /* @__PURE__ */ jsx("h3", { className: title, children: /* @__PURE__ */ jsx("strong", { children }) });
 };
 export {
-  l as default
+  CardTitle as default
 };
-//# sourceMappingURL=CardTitle.js.map

package/dist/components/Card/CardUser.js

@@ -1,11 +1,10 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Avatar as a } from "../Avatar/Avatar.js";
-import { Icon as e } from "../Icon/Icon.js";
-const s = ({
-  userSrc: r,
-  creatorName: o
-}) => r ? /* @__PURE__ */ t(a, { alt: o || "", size: "xs", src: r, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ t(e, { name: "nav/one-profile" });
+import { jsx } from "react/jsx-runtime";
+import { OneProfile } from "@edifice.io/icons/nav";
+import Avatar from "../Avatar/Avatar.js";
+const CardUser = ({
+  userSrc,
+  creatorName
+}) => userSrc ? /* @__PURE__ */ jsx(Avatar, { alt: creatorName || "", size: "xs", src: userSrc, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ jsx(OneProfile, {});
 export {
-  s as default
+  CardUser as default
 };
-//# sourceMappingURL=CardUser.js.map

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -17,5 +17,5 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
      */
     indeterminate?: boolean;
 }
-export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
 export default Checkbox;