avine-react-components - npm Package Compare versions

Comparing version 0.1.26 to 0.1.27

dist/components/button/button.d.ts

@@ -1,7 +0,17 @@
-import { HTMLAttributes, ReactNode, FC } from 'react';
+import React, { HTMLAttributes, ReactNode, FC } from 'react';
 
+type ButtonTypes = 'text' | 'outlined' | 'contained';
+type ButtonEmphasis = 'high' | 'medium' | 'low';
+type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonRounded = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    _type: ButtonTypes;
+    emphasis: ButtonEmphasis;
+    size: ButtonSizes;
+    rounded: ButtonRounded;
+    label: string;
+    leadingIcon?: React.ReactNode;
     children: ReactNode;
-    disabled?: boolean;
-    loading?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
 }
@@ -8,0 +18,0 @@ declare const Button: FC<ButtonProps>;

dist/components/button/button.js

@@ -37,11 +37,70 @@ "use strict";
 var import_react = __toESM(require("react"));
+var onlyIconSizes = {
+  xs: "px-1 py-1 text-xs",
+  sm: "px-2 py-2 text-sm",
+  md: "px-2.5 py-2.5 text-sm",
+  lg: "px-3 py-3 text-base",
+  xl: "px-3.5 py-3.5 text-base"
+};
+var sizes = {
+  xs: "px-3 py-2 text-xs",
+  sm: "px-3 py-2 text-sm",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-5 py-3 text-base",
+  xl: "px-6 py-3.5 text-base"
+};
+var getSizes = (size, hasOnlyIcon) => {
+  if (hasOnlyIcon)
+    return onlyIconSizes[size];
+  return sizes[size];
+};
+var radius = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
 var Button = ({
+  _type = "contained",
+  emphasis = "high",
+  label = "",
+  size = "md",
   className = "",
-  loading = false,
-  disabled = false,
-  children = "",
+  rounded = "lg",
+  leadingIcon,
   onClick,
   ...rest
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", { className, disabled, onClick, ...rest }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children));
+  const classes = (0, import_react.useMemo)(() => {
+    const values = [];
+    if (_type === "contained" && emphasis === "high") {
+      values.push("text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800");
+    }
+    if (_type === "contained" && emphasis === "medium") {
+      values.push("text-gray-600 bg-green-100 hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "contained" && emphasis === "low") {
+      values.push("text-gray-600 bg-transparent hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "outlined") {
+      values.push("text-green-600 hover:text-green-700 border border-gray-200 focus:ring-green-300");
+    }
+    if (_type === "text") {
+      values.push("text-green-600 hover:text-green-700 border border-transparent focus:border-gray-200 focus:ring-green-300");
+    }
+    values.push(getSizes(size, label.length === 0));
+    values.push(radius[rounded]);
+    return values.join(" ");
+  }, [_type, size, label, rounded, emphasis]);
+  const IconContainer = () => /* @__PURE__ */ import_react.default.createElement("div", { className: `${label.length > 0 ? "mr-2" : null}` }, leadingIcon);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `flex items-center flex-nowrap whitespace-nowrap focus:outline-none focus:ring-4 font-medium capitalize ${classes}`,
+      onClick,
+      ...rest
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, leadingIcon && /* @__PURE__ */ import_react.default.createElement(IconContainer, null), label)
+  );
 };
@@ -48,0 +107,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/components/button/button.stories.d.ts

@@ -9,4 +9,10 @@ import * as _storybook_types from '@storybook/types';
 
-declare const Default: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const Primary: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const Secondary: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const Tertiary: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const Outlined: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const Text: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const WithLeadingIcon: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
+declare const OnlyIcon: _storybook_types.AnnotatedStoryFn<_storybook_react_dist_types_0fc72a6d.R, ButtonProps>;
 
-export { Default, meta as default };
+export { OnlyIcon, Outlined, Primary, Secondary, Tertiary, Text, WithLeadingIcon, meta as default };

dist/components/button/button.stories.js

@@ -33,21 +33,172 @@ "use strict";
 __export(button_stories_exports, {
-  Default: () => Default,
+  OnlyIcon: () => OnlyIcon,
+  Outlined: () => Outlined,
+  Primary: () => Primary,
+  Secondary: () => Secondary,
+  Tertiary: () => Tertiary,
+  Text: () => Text,
+  WithLeadingIcon: () => WithLeadingIcon,
   default: () => button_stories_default
 });
 module.exports = __toCommonJS(button_stories_exports);
-var import_react2 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/components/button/button.tsx
 var import_react = __toESM(require("react"));
+var onlyIconSizes = {
+  xs: "px-1 py-1 text-xs",
+  sm: "px-2 py-2 text-sm",
+  md: "px-2.5 py-2.5 text-sm",
+  lg: "px-3 py-3 text-base",
+  xl: "px-3.5 py-3.5 text-base"
+};
+var sizes = {
+  xs: "px-3 py-2 text-xs",
+  sm: "px-3 py-2 text-sm",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-5 py-3 text-base",
+  xl: "px-6 py-3.5 text-base"
+};
+var getSizes = (size, hasOnlyIcon) => {
+  if (hasOnlyIcon)
+    return onlyIconSizes[size];
+  return sizes[size];
+};
+var radius = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
 var Button = ({
+  _type = "contained",
+  emphasis = "high",
+  label = "",
+  size = "md",
   className = "",
-  loading = false,
-  disabled = false,
-  children = "",
+  rounded = "lg",
+  leadingIcon,
   onClick,
   ...rest
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", { className, disabled, onClick, ...rest }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children));
+  const classes = (0, import_react.useMemo)(() => {
+    const values = [];
+    if (_type === "contained" && emphasis === "high") {
+      values.push("text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800");
+    }
+    if (_type === "contained" && emphasis === "medium") {
+      values.push("text-gray-600 bg-green-100 hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "contained" && emphasis === "low") {
+      values.push("text-gray-600 bg-transparent hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "outlined") {
+      values.push("text-green-600 hover:text-green-700 border border-gray-200 focus:ring-green-300");
+    }
+    if (_type === "text") {
+      values.push("text-green-600 hover:text-green-700 border border-transparent focus:border-gray-200 focus:ring-green-300");
+    }
+    values.push(getSizes(size, label.length === 0));
+    values.push(radius[rounded]);
+    return values.join(" ");
+  }, [_type, size, label, rounded, emphasis]);
+  const IconContainer = () => /* @__PURE__ */ import_react.default.createElement("div", { className: `${label.length > 0 ? "mr-2" : null}` }, leadingIcon);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `flex items-center flex-nowrap whitespace-nowrap focus:outline-none focus:ring-4 font-medium capitalize ${classes}`,
+      onClick,
+      ...rest
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, leadingIcon && /* @__PURE__ */ import_react.default.createElement(IconContainer, null), label)
+  );
 };
 
+// node_modules/react-icons/lib/esm/iconBase.js
+var import_react3 = __toESM(require("react"));
+
+// node_modules/react-icons/lib/esm/iconContext.js
+var import_react2 = __toESM(require("react"));
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = import_react2.default.createContext && import_react2.default.createContext(DefaultContext);
+
+// node_modules/react-icons/lib/esm/iconBase.js
+var __assign = function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function(node, i) {
+    return import_react3.default.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return import_react3.default.createElement(IconBase, __assign({
+      attr: __assign({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function(conf) {
+    var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className)
+      className = conf.className;
+    if (props.className)
+      className = (className ? className + " " : "") + props.className;
+    return import_react3.default.createElement("svg", __assign({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: __assign(__assign({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && import_react3.default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? import_react3.default.createElement(IconContext.Consumer, null, function(conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// node_modules/react-icons/lu/index.esm.js
+function LuStar(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "polygon", "attr": { "points": "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" } }] })(props);
+}
+
 // src/components/button/button.stories.tsx
@@ -64,11 +215,51 @@ var meta = {
 var button_stories_default = meta;
-var Template = (args) => /* @__PURE__ */ import_react2.default.createElement(Button, { ...args });
-var Default = Template.bind({});
-Default.args = {
-  children: "Primary Button"
+var Template = (args) => /* @__PURE__ */ import_react4.default.createElement(Button, { ...args });
+var Primary = Template.bind({});
+Primary.args = {
+  _type: "contained",
+  emphasis: "high",
+  label: "Primary Button"
 };
+var Secondary = Template.bind({});
+Secondary.args = {
+  _type: "contained",
+  emphasis: "medium",
+  label: "Secondary Button"
+};
+var Tertiary = Template.bind({});
+Tertiary.args = {
+  _type: "contained",
+  emphasis: "low",
+  label: "Tertiary Button"
+};
+var Outlined = Template.bind({});
+Outlined.args = {
+  _type: "outlined",
+  label: "Outlined Button"
+};
+var Text = Template.bind({});
+Text.args = {
+  _type: "text",
+  label: "Text Button"
+};
+var WithLeadingIcon = Template.bind({});
+WithLeadingIcon.args = {
+  leadingIcon: /* @__PURE__ */ import_react4.default.createElement(LuStar, { size: 16 }),
+  label: "Favorites"
+};
+var OnlyIcon = Template.bind({});
+OnlyIcon.args = {
+  leadingIcon: /* @__PURE__ */ import_react4.default.createElement(LuStar, { size: 16 }),
+  rounded: "full"
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Default
+  OnlyIcon,
+  Outlined,
+  Primary,
+  Secondary,
+  Tertiary,
+  Text,
+  WithLeadingIcon
 });
 //# sourceMappingURL=button.stories.js.map

dist/components/table/table.js

@@ -1118,3 +1118,3 @@ "use strict";
   (0, import_react21.useEffect)(() => setInnerData(data), [data]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: " w-full bg-white my-4 rounded-lg py-4" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4 px-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
     "input",
@@ -1158,3 +1158,3 @@ {
     }));
-  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
+  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6 px-4" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
     "a",
@@ -1161,0 +1161,0 @@ {

dist/index.js

@@ -1126,3 +1126,3 @@ "use strict";
   (0, import_react21.useEffect)(() => setInnerData(data), [data]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: " w-full bg-white my-4 rounded-lg py-4" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4 px-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
     "input",
@@ -1166,3 +1166,3 @@ {
     }));
-  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
+  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6 px-4" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
     "a",
@@ -1179,11 +1179,70 @@ {
 var import_react23 = __toESM(require("react"));
+var onlyIconSizes = {
+  xs: "px-1 py-1 text-xs",
+  sm: "px-2 py-2 text-sm",
+  md: "px-2.5 py-2.5 text-sm",
+  lg: "px-3 py-3 text-base",
+  xl: "px-3.5 py-3.5 text-base"
+};
+var sizes = {
+  xs: "px-3 py-2 text-xs",
+  sm: "px-3 py-2 text-sm",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-5 py-3 text-base",
+  xl: "px-6 py-3.5 text-base"
+};
+var getSizes = (size, hasOnlyIcon) => {
+  if (hasOnlyIcon)
+    return onlyIconSizes[size];
+  return sizes[size];
+};
+var radius = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
 var Button = ({
+  _type = "contained",
+  emphasis = "high",
+  label = "",
+  size = "md",
   className = "",
-  loading = false,
-  disabled = false,
-  children = "",
+  rounded = "lg",
+  leadingIcon,
   onClick,
   ...rest
 }) => {
-  return /* @__PURE__ */ import_react23.default.createElement("button", { className, disabled, onClick, ...rest }, /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, children));
+  const classes = (0, import_react23.useMemo)(() => {
+    const values = [];
+    if (_type === "contained" && emphasis === "high") {
+      values.push("text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800");
+    }
+    if (_type === "contained" && emphasis === "medium") {
+      values.push("text-gray-600 bg-green-100 hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "contained" && emphasis === "low") {
+      values.push("text-gray-600 bg-transparent hover:bg-green-200 focus:ring-green-300 dark:bg-green-300 dark:hover:bg-green-300 dark:focus:ring-green-400");
+    }
+    if (_type === "outlined") {
+      values.push("text-green-600 hover:text-green-700 border border-gray-200 focus:ring-green-300");
+    }
+    if (_type === "text") {
+      values.push("text-green-600 hover:text-green-700 border border-transparent focus:border-gray-200 focus:ring-green-300");
+    }
+    values.push(getSizes(size, label.length === 0));
+    values.push(radius[rounded]);
+    return values.join(" ");
+  }, [_type, size, label, rounded, emphasis]);
+  const IconContainer = () => /* @__PURE__ */ import_react23.default.createElement("div", { className: `${label.length > 0 ? "mr-2" : null}` }, leadingIcon);
+  return /* @__PURE__ */ import_react23.default.createElement(
+    "button",
+    {
+      className: `flex items-center flex-nowrap whitespace-nowrap focus:outline-none focus:ring-4 font-medium capitalize ${classes}`,
+      onClick,
+      ...rest
+    },
+    /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, leadingIcon && /* @__PURE__ */ import_react23.default.createElement(IconContainer, null), label)
+  );
 };
@@ -1190,0 +1249,0 @@

package.json

 {
     "name": "avine-react-components",
-    "version": "0.1.26",
+    "version": "0.1.27",
     "license": "MIT",
@@ -5,0 +5,0 @@ "description": "",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6565040

increased by26.85%

Lines of code

11347

increased by6.8%

No dependency changes