@loopr-ai/craft 0.2.0 → 0.4.0

package/dist/components/cell/Chip/index.d.ts

@@ -0,0 +1,27 @@
+import { ChipProps as MuiChipProps } from "@mui/material/Chip";
+import { CraftFC } from "../../../global/interfaces";
+/**
+ * The Chip component is a custom Chip component that has a custom styling and extends the MUI Chip component.
+ */
+interface ChipProps extends Omit<MuiChipProps, "color"> {
+    /**
+     * The color of the Chip component.
+     */
+    color?: string;
+    /**
+     * The color of the text of the Chip component.
+     */
+    textColor?: string;
+    /**
+     * The status of the chip component will show different colors depending on the status.
+     * @default "new"
+     */
+    status?: "new" | "active" | "completed" | "error";
+}
+/**
+ * The Chip component is a custom Chip component that has a custom styling and extends the MUI Chip component.
+ * @param color The color of the Chip component.
+ * @param textColor The color of the text of the Chip component.
+ */
+declare const Chip: CraftFC<ChipProps>;
+export default Chip;

package/dist/components/cell/Chip/index.js

@@ -0,0 +1,483 @@
+import { jsx as m, jsxs as Q } from "react/jsx-runtime";
+import * as v from "react";
+import { useMemo as L } from "react";
+import { g as X, c as r, _ as f, e as b, a as Y, P as l } from "../../../createTheme-f511f0cd.js";
+import { g as Z, s as U, a as w, c as k, b as oo } from "../../../styled-9f5c49f8.js";
+import { c as ao } from "../../../createSvgIcon-bd01dddd.js";
+import { u as lo } from "../../../TransitionGroupContext-adf68f00.js";
+import { B as M } from "../../../ButtonBase-83dd7164.js";
+import { u as eo } from "../../../unsupportedProp-3dbf01f6.js";
+const ro = ao(/* @__PURE__ */ m("path", {
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+}), "Cancel");
+function co(o) {
+  return X("MuiChip", o);
+}
+const io = Z("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), e = io, to = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"], no = (o) => {
+  const {
+    classes: a,
+    disabled: s,
+    size: c,
+    color: t,
+    iconColor: p,
+    onDelete: d,
+    clickable: i,
+    variant: u
+  } = o, $ = {
+    root: ["root", u, s && "disabled", `size${r(c)}`, `color${r(t)}`, i && "clickable", i && `clickableColor${r(t)}`, d && "deletable", d && `deletableColor${r(t)}`, `${u}${r(t)}`],
+    label: ["label", `label${r(c)}`],
+    avatar: ["avatar", `avatar${r(c)}`, `avatarColor${r(t)}`],
+    icon: ["icon", `icon${r(c)}`, `iconColor${r(p)}`],
+    deleteIcon: ["deleteIcon", `deleteIcon${r(c)}`, `deleteIconColor${r(t)}`, `deleteIcon${r(u)}Color${r(t)}`]
+  };
+  return oo($, co, a);
+}, so = U("div", {
+  name: "MuiChip",
+  slot: "Root",
+  overridesResolver: (o, a) => {
+    const {
+      ownerState: s
+    } = o, {
+      color: c,
+      iconColor: t,
+      clickable: p,
+      onDelete: d,
+      size: i,
+      variant: u
+    } = s;
+    return [{
+      [`& .${e.avatar}`]: a.avatar
+    }, {
+      [`& .${e.avatar}`]: a[`avatar${r(i)}`]
+    }, {
+      [`& .${e.avatar}`]: a[`avatarColor${r(c)}`]
+    }, {
+      [`& .${e.icon}`]: a.icon
+    }, {
+      [`& .${e.icon}`]: a[`icon${r(i)}`]
+    }, {
+      [`& .${e.icon}`]: a[`iconColor${r(t)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a.deleteIcon
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIcon${r(i)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIconColor${r(c)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIcon${r(u)}Color${r(c)}`]
+    }, a.root, a[`size${r(i)}`], a[`color${r(c)}`], p && a.clickable, p && c !== "default" && a[`clickableColor${r(c)})`], d && a.deletable, d && c !== "default" && a[`deletableColor${r(c)}`], a[u], a[`${u}${r(c)}`]];
+  }
+})(({
+  theme: o,
+  ownerState: a
+}) => {
+  const s = o.palette.mode === "light" ? o.palette.grey[700] : o.palette.grey[300];
+  return f({
+    maxWidth: "100%",
+    fontFamily: o.typography.fontFamily,
+    fontSize: o.typography.pxToRem(13),
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 32,
+    color: (o.vars || o).palette.text.primary,
+    backgroundColor: (o.vars || o).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: "nowrap",
+    transition: o.transitions.create(["background-color", "box-shadow"]),
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: "none",
+    border: 0,
+    // Remove `button` border
+    padding: 0,
+    // Remove `button` padding
+    verticalAlign: "middle",
+    boxSizing: "border-box",
+    [`&.${e.disabled}`]: {
+      opacity: (o.vars || o).palette.action.disabledOpacity,
+      pointerEvents: "none"
+    },
+    [`& .${e.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: o.vars ? o.vars.palette.Chip.defaultAvatarColor : s,
+      fontSize: o.typography.pxToRem(12)
+    },
+    [`& .${e.avatarColorPrimary}`]: {
+      color: (o.vars || o).palette.primary.contrastText,
+      backgroundColor: (o.vars || o).palette.primary.dark
+    },
+    [`& .${e.avatarColorSecondary}`]: {
+      color: (o.vars || o).palette.secondary.contrastText,
+      backgroundColor: (o.vars || o).palette.secondary.dark
+    },
+    [`& .${e.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: o.typography.pxToRem(10)
+    },
+    [`& .${e.icon}`]: f({
+      marginLeft: 5,
+      marginRight: -6
+    }, a.size === "small" && {
+      fontSize: 18,
+      marginLeft: 4,
+      marginRight: -4
+    }, a.iconColor === a.color && f({
+      color: o.vars ? o.vars.palette.Chip.defaultIconColor : s
+    }, a.color !== "default" && {
+      color: "inherit"
+    })),
+    [`& .${e.deleteIcon}`]: f({
+      WebkitTapHighlightColor: "transparent",
+      color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.26)` : b(o.palette.text.primary, 0.26),
+      fontSize: 22,
+      cursor: "pointer",
+      margin: "0 5px 0 -6px",
+      "&:hover": {
+        color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.4)` : b(o.palette.text.primary, 0.4)
+      }
+    }, a.size === "small" && {
+      fontSize: 16,
+      marginRight: 4,
+      marginLeft: -4
+    }, a.color !== "default" && {
+      color: o.vars ? `rgba(${o.vars.palette[a.color].contrastTextChannel} / 0.7)` : b(o.palette[a.color].contrastText, 0.7),
+      "&:hover, &:active": {
+        color: (o.vars || o).palette[a.color].contrastText
+      }
+    })
+  }, a.size === "small" && {
+    height: 24
+  }, a.color !== "default" && {
+    backgroundColor: (o.vars || o).palette[a.color].main,
+    color: (o.vars || o).palette[a.color].contrastText
+  }, a.onDelete && {
+    [`&.${e.focusVisible}`]: {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : b(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
+    }
+  }, a.onDelete && a.color !== "default" && {
+    [`&.${e.focusVisible}`]: {
+      backgroundColor: (o.vars || o).palette[a.color].dark
+    }
+  });
+}, ({
+  theme: o,
+  ownerState: a
+}) => f({}, a.clickable && {
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.hoverOpacity}))` : b(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.hoverOpacity)
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : b(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
+  },
+  "&:active": {
+    boxShadow: (o.vars || o).shadows[1]
+  }
+}, a.clickable && a.color !== "default" && {
+  [`&:hover, &.${e.focusVisible}`]: {
+    backgroundColor: (o.vars || o).palette[a.color].dark
+  }
+}), ({
+  theme: o,
+  ownerState: a
+}) => f({}, a.variant === "outlined" && {
+  backgroundColor: "transparent",
+  border: o.vars ? `1px solid ${o.vars.palette.Chip.defaultBorder}` : `1px solid ${o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700]}`,
+  [`&.${e.clickable}:hover`]: {
+    backgroundColor: (o.vars || o).palette.action.hover
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: (o.vars || o).palette.action.focus
+  },
+  [`& .${e.avatar}`]: {
+    marginLeft: 4
+  },
+  [`& .${e.avatarSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${e.icon}`]: {
+    marginLeft: 4
+  },
+  [`& .${e.iconSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${e.deleteIcon}`]: {
+    marginRight: 5
+  },
+  [`& .${e.deleteIconSmall}`]: {
+    marginRight: 3
+  }
+}, a.variant === "outlined" && a.color !== "default" && {
+  color: (o.vars || o).palette[a.color].main,
+  border: `1px solid ${o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : b(o.palette[a.color].main, 0.7)}`,
+  [`&.${e.clickable}:hover`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[a.color].main, o.palette.action.hoverOpacity)
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.focusOpacity})` : b(o.palette[a.color].main, o.palette.action.focusOpacity)
+  },
+  [`& .${e.deleteIcon}`]: {
+    color: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : b(o.palette[a.color].main, 0.7),
+    "&:hover, &:active": {
+      color: (o.vars || o).palette[a.color].main
+    }
+  }
+})), po = U("span", {
+  name: "MuiChip",
+  slot: "Label",
+  overridesResolver: (o, a) => {
+    const {
+      ownerState: s
+    } = o, {
+      size: c
+    } = s;
+    return [a.label, a[`label${r(c)}`]];
+  }
+})(({
+  ownerState: o
+}) => f({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: "nowrap"
+}, o.size === "small" && {
+  paddingLeft: 8,
+  paddingRight: 8
+}));
+function K(o) {
+  return o.key === "Backspace" || o.key === "Delete";
+}
+const S = /* @__PURE__ */ v.forwardRef(function(a, s) {
+  const c = w({
+    props: a,
+    name: "MuiChip"
+  }), {
+    avatar: t,
+    className: p,
+    clickable: d,
+    color: i = "default",
+    component: u,
+    deleteIcon: $,
+    disabled: I = !1,
+    icon: y,
+    label: W,
+    onClick: D,
+    onDelete: C,
+    onKeyDown: F,
+    onKeyUp: E,
+    size: j = "medium",
+    variant: B = "filled",
+    tabIndex: h,
+    skipFocusWhenDisabled: _ = !1
+    // TODO v6: Rename to `focusableWhenDisabled`.
+  } = c, A = Y(c, to), x = v.useRef(null), H = lo(x, s), N = (n) => {
+    n.stopPropagation(), C && C(n);
+  }, q = (n) => {
+    n.currentTarget === n.target && K(n) && n.preventDefault(), F && F(n);
+  }, G = (n) => {
+    n.currentTarget === n.target && (C && K(n) ? C(n) : n.key === "Escape" && x.current && x.current.blur()), E && E(n);
+  }, O = d !== !1 && D ? !0 : d, R = O || C ? M : u || "div", z = f({}, c, {
+    component: R,
+    disabled: I,
+    size: j,
+    color: i,
+    iconColor: /* @__PURE__ */ v.isValidElement(y) && y.props.color || i,
+    onDelete: !!C,
+    clickable: O,
+    variant: B
+  }), g = no(z), J = R === M ? f({
+    component: u || "div",
+    focusVisibleClassName: g.focusVisible
+  }, C && {
+    disableRipple: !0
+  }) : {};
+  let V = null;
+  C && (V = $ && /* @__PURE__ */ v.isValidElement($) ? /* @__PURE__ */ v.cloneElement($, {
+    className: k($.props.className, g.deleteIcon),
+    onClick: N
+  }) : /* @__PURE__ */ m(ro, {
+    className: k(g.deleteIcon),
+    onClick: N
+  }));
+  let P = null;
+  t && /* @__PURE__ */ v.isValidElement(t) && (P = /* @__PURE__ */ v.cloneElement(t, {
+    className: k(g.avatar, t.props.className)
+  }));
+  let T = null;
+  return y && /* @__PURE__ */ v.isValidElement(y) && (T = /* @__PURE__ */ v.cloneElement(y, {
+    className: k(g.icon, y.props.className)
+  })), process.env.NODE_ENV !== "production" && P && T && console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one."), /* @__PURE__ */ Q(so, f({
+    as: R,
+    className: k(g.root, p),
+    disabled: O && I ? !0 : void 0,
+    onClick: D,
+    onKeyDown: q,
+    onKeyUp: G,
+    ref: H,
+    tabIndex: _ && I ? -1 : h,
+    ownerState: z
+  }, J, A, {
+    children: [P || T, /* @__PURE__ */ m(po, {
+      className: k(g.label),
+      ownerState: z,
+      children: W
+    }), V]
+  }));
+});
+process.env.NODE_ENV !== "production" && (S.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The Avatar element to display.
+   */
+  avatar: l.element,
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: eo,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: l.object,
+  /**
+   * @ignore
+   */
+  className: l.string,
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable: l.bool,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color: l.oneOfType([l.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), l.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: l.elementType,
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: l.element,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: l.bool,
+  /**
+   * Icon element.
+   */
+  icon: l.element,
+  /**
+   * The content of the component.
+   */
+  label: l.node,
+  /**
+   * @ignore
+   */
+  onClick: l.func,
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: l.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: l.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: l.func,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: l.oneOfType([l.oneOf(["medium", "small"]), l.string]),
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled: l.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: l.oneOfType([l.arrayOf(l.oneOfType([l.func, l.object, l.bool])), l.func, l.object]),
+  /**
+   * @ignore
+   */
+  tabIndex: l.number,
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant: l.oneOfType([l.oneOf(["filled", "outlined"]), l.string])
+});
+const uo = S, bo = {
+  new: {
+    color: "#E0F2FF",
+    textColor: "#3C4FE0"
+  },
+  active: {
+    color: "#FFF7E2",
+    textColor: "#E7AB11"
+  },
+  completed: {
+    color: "#0EB43C1F",
+    textColor: "#0EB43C"
+  },
+  error: {
+    color: "#FF00001F",
+    textColor: "#FF0000"
+  }
+}, Io = ({
+  color: o,
+  textColor: a,
+  status: s = "new",
+  sx: c,
+  ...t
+}) => {
+  const p = L(() => {
+    let i = {};
+    return i = o ? { color: o } : i, i = a ? { ...i, textColor: a } : i, {
+      ...bo[s],
+      ...i
+    };
+  }, [o, a, s]), d = L(
+    () => ({
+      borderRadius: "0.5rem",
+      backgroundColor: p.color,
+      color: p.textColor,
+      fontWeight: 700,
+      ...c
+    }),
+    [p]
+  );
+  return /* @__PURE__ */ m(uo, { sx: d, ...t });
+};
+export {
+  Io as default
+};

package/dist/components/cell/ProgressBar/index.js

@@ -1,9 +1,9 @@
 import { jsxs as j, jsx as v } from "react/jsx-runtime";
 import { getColorToHex as $ } from "../../../global/colors.js";
-import { g as D, c as n, _ as l, a as q, P as o, l as E, d as U } from "../../../createTheme-eb26b87a.js";
+import { g as D, c as n, _ as l, a as q, P as o, l as E, d as U } from "../../../createTheme-f511f0cd.js";
 import * as z from "react";
-import { g as w, s as h, a as A, c as F, b as K } from "../../../styled-b8bfdd6b.js";
-import { u as V } from "../../../useTheme-a9e2b32c.js";
+import { g as w, s as h, a as A, c as F, b as K } from "../../../styled-9f5c49f8.js";
+import { u as V } from "../../../useTheme-6e15807e.js";
 import { k as P, c as x } from "../../../emotion-react.browser.esm-ff33c213.js";
 function S(r) {
   return D("MuiLinearProgress", r);
@@ -305,6 +305,7 @@ const cr = ({
   const b = { ...{
     borderRadius: "0.625rem",
     backgroundColor: t ?? "#F3F3F3",
+    height: "0.5rem",
     "& .MuiLinearProgress-bar": {
       backgroundColor: a(r)
     }