@loopr-ai/craft 0.1.0 → 0.3.0

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

@@ -1,6 +1,385 @@
-import { jsx as r } from "react/jsx-runtime";
-import e from "react";
-const m = ({ children: t, ...o }) => /* @__PURE__ */ r("button", { ...o, children: t }), u = e.memo(m);
+import { jsx as C, jsxs as F } from "react/jsx-runtime";
+import { getColorToHex as v } from "../../../global/colors.js";
+import { g as U, c as e, _ as t, e as b, a as D, P as a } from "../../../createTheme-95c30431.js";
+import * as p from "react";
+import { g as H, s as y, r as A, e as q, a as J, c as R, b as K } from "../../../styled-05df7dc6.js";
+import { B as Q } from "../../../ButtonBase-750a4103.js";
+function X(o) {
+  return U("MuiButton", o);
+}
+const Y = H("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), g = Y, k = /* @__PURE__ */ p.createContext({});
+process.env.NODE_ENV !== "production" && (k.displayName = "ButtonGroupContext");
+const Z = k, N = /* @__PURE__ */ p.createContext(void 0);
+process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
+const w = N, oo = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], no = (o) => {
+  const {
+    color: n,
+    disableElevation: i,
+    fullWidth: l,
+    size: r,
+    variant: c,
+    classes: s
+  } = o, x = {
+    root: ["root", c, `${c}${e(n)}`, `size${e(r)}`, `${c}Size${e(r)}`, n === "inherit" && "colorInherit", i && "disableElevation", l && "fullWidth"],
+    label: ["label"],
+    startIcon: ["startIcon", `iconSize${e(r)}`],
+    endIcon: ["endIcon", `iconSize${e(r)}`]
+  }, f = K(x, X, s);
+  return t({}, s, f);
+}, E = (o) => t({}, o.size === "small" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 18
+  }
+}, o.size === "medium" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 20
+  }
+}, o.size === "large" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 22
+  }
+}), ao = y(Q, {
+  shouldForwardProp: (o) => A(o) || o === "classes",
+  name: "MuiButton",
+  slot: "Root",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: i
+    } = o;
+    return [n.root, n[i.variant], n[`${i.variant}${e(i.color)}`], n[`size${e(i.size)}`], n[`${i.variant}Size${e(i.size)}`], i.color === "inherit" && n.colorInherit, i.disableElevation && n.disableElevation, i.fullWidth && n.fullWidth];
+  }
+})(({
+  theme: o,
+  ownerState: n
+}) => {
+  var i, l;
+  const r = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], c = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  return t({}, o.typography.button, {
+    minWidth: 64,
+    padding: "6px 16px",
+    borderRadius: (o.vars || o).shape.borderRadius,
+    transition: o.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
+      duration: o.transitions.duration.short
+    }),
+    "&:hover": t({
+      textDecoration: "none",
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.variant === "text" && n.color !== "inherit" && {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.variant === "outlined" && n.color !== "inherit" && {
+      border: `1px solid ${(o.vars || o).palette[n.color].main}`,
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.variant === "contained" && {
+      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : c,
+      boxShadow: (o.vars || o).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        boxShadow: (o.vars || o).shadows[2],
+        backgroundColor: (o.vars || o).palette.grey[300]
+      }
+    }, n.variant === "contained" && n.color !== "inherit" && {
+      backgroundColor: (o.vars || o).palette[n.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: (o.vars || o).palette[n.color].main
+      }
+    }),
+    "&:active": t({}, n.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[8]
+    }),
+    [`&.${g.focusVisible}`]: t({}, n.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[6]
+    }),
+    [`&.${g.disabled}`]: t({
+      color: (o.vars || o).palette.action.disabled
+    }, n.variant === "outlined" && {
+      border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
+    }, n.variant === "contained" && {
+      color: (o.vars || o).palette.action.disabled,
+      boxShadow: (o.vars || o).shadows[0],
+      backgroundColor: (o.vars || o).palette.action.disabledBackground
+    })
+  }, n.variant === "text" && {
+    padding: "6px 8px"
+  }, n.variant === "text" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].main
+  }, n.variant === "outlined" && {
+    padding: "5px 15px",
+    border: "1px solid currentColor"
+  }, n.variant === "outlined" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].main,
+    border: o.vars ? `1px solid rgba(${o.vars.palette[n.color].mainChannel} / 0.5)` : `1px solid ${b(o.palette[n.color].main, 0.5)}`
+  }, n.variant === "contained" && {
+    color: o.vars ? (
+      // this is safe because grey does not change between default light/dark mode
+      o.vars.palette.text.primary
+    ) : (i = (l = o.palette).getContrastText) == null ? void 0 : i.call(l, o.palette.grey[300]),
+    backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : r,
+    boxShadow: (o.vars || o).shadows[2]
+  }, n.variant === "contained" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].contrastText,
+    backgroundColor: (o.vars || o).palette[n.color].main
+  }, n.color === "inherit" && {
+    color: "inherit",
+    borderColor: "currentColor"
+  }, n.size === "small" && n.variant === "text" && {
+    padding: "4px 5px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "text" && {
+    padding: "8px 11px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.size === "small" && n.variant === "outlined" && {
+    padding: "3px 9px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "outlined" && {
+    padding: "7px 21px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.size === "small" && n.variant === "contained" && {
+    padding: "4px 10px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "contained" && {
+    padding: "8px 22px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.fullWidth && {
+    width: "100%"
+  });
+}, ({
+  ownerState: o
+}) => o.disableElevation && {
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  },
+  [`&.${g.focusVisible}`]: {
+    boxShadow: "none"
+  },
+  "&:active": {
+    boxShadow: "none"
+  },
+  [`&.${g.disabled}`]: {
+    boxShadow: "none"
+  }
+}), io = y("span", {
+  name: "MuiButton",
+  slot: "StartIcon",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: i
+    } = o;
+    return [n.startIcon, n[`iconSize${e(i.size)}`]];
+  }
+})(({
+  ownerState: o
+}) => t({
+  display: "inherit",
+  marginRight: 8,
+  marginLeft: -4
+}, o.size === "small" && {
+  marginLeft: -2
+}, E(o))), ro = y("span", {
+  name: "MuiButton",
+  slot: "EndIcon",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: i
+    } = o;
+    return [n.endIcon, n[`iconSize${e(i.size)}`]];
+  }
+})(({
+  ownerState: o
+}) => t({
+  display: "inherit",
+  marginRight: -4,
+  marginLeft: 8
+}, o.size === "small" && {
+  marginRight: -2
+}, E(o))), O = /* @__PURE__ */ p.forwardRef(function(n, i) {
+  const l = p.useContext(Z), r = p.useContext(w), c = q(l, n), s = J({
+    props: c,
+    name: "MuiButton"
+  }), {
+    children: x,
+    color: f = "primary",
+    component: z = "button",
+    className: T,
+    disabled: m = !1,
+    disableElevation: P = !1,
+    disableFocusRipple: B = !1,
+    endIcon: I,
+    focusVisibleClassName: W,
+    fullWidth: M = !1,
+    size: S = "medium",
+    startIcon: $,
+    type: h,
+    variant: V = "text"
+  } = s, L = D(s, oo), u = t({}, s, {
+    color: f,
+    component: z,
+    disabled: m,
+    disableElevation: P,
+    disableFocusRipple: B,
+    fullWidth: M,
+    size: S,
+    type: h,
+    variant: V
+  }), d = no(u), _ = $ && /* @__PURE__ */ C(io, {
+    className: d.startIcon,
+    ownerState: u,
+    children: $
+  }), G = I && /* @__PURE__ */ C(ro, {
+    className: d.endIcon,
+    ownerState: u,
+    children: I
+  }), j = r || "";
+  return /* @__PURE__ */ F(ao, t({
+    ownerState: u,
+    className: R(l.className, d.root, T, j),
+    component: z,
+    disabled: m,
+    focusRipple: !B,
+    focusVisibleClassName: R(d.focusVisible, W),
+    ref: i,
+    type: h
+  }, L, {
+    classes: d,
+    children: [_, x, G]
+  }));
+});
+process.env.NODE_ENV !== "production" && (O.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: a.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: a.object,
+  /**
+   * @ignore
+   */
+  className: a.string,
+  /**
+   * 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 'primary'
+   */
+  color: a.oneOfType([a.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), a.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: a.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: a.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: a.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: a.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: a.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: a.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: a.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: a.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: a.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: a.oneOfType([a.oneOf(["small", "medium", "large"]), a.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: a.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: a.oneOfType([a.arrayOf(a.oneOfType([a.func, a.object, a.bool])), a.func, a.object]),
+  /**
+   * @ignore
+   */
+  type: a.oneOfType([a.oneOf(["button", "reset", "submit"]), a.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: a.oneOfType([a.oneOf(["contained", "outlined", "text"]), a.string])
+});
+const to = O, uo = ({
+  variant: o = "contained",
+  disabled: n = !1,
+  look: i = "normal",
+  children: l,
+  sx: r,
+  ...c
+}) => {
+  let s = {};
+  return i === "modified" ? (n === !1 && (s = {
+    border: "0rem",
+    backgroundColor: v("modify"),
+    color: v("primary"),
+    "&:hover": {
+      border: "0.0625rem solid",
+      borderColor: v("primary"),
+      backgroundColor: v("modify")
+    }
+  }), o = "outlined") : o === "contained" && n === !0 && (s = {
+    "&.Mui-disabled": {
+      backgroundColor: "#C4C4C4",
+      color: "#000000",
+      boxShadow: "none"
+    }
+  }), r = {
+    ...s,
+    ...r
+  }, /* @__PURE__ */ C(to, { variant: o, disabled: n, sx: r, ...c, children: l });
+};
 export {
-  u as default
+  uo as default
 };

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;