@loja-integrada/admin-components 0.15.5 → 0.16.0

package/dist/Components/SidebarFixed/SidebarFixed.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const SidebarFixedComponent: React.FC<SidebarFixedProps>;
+export declare const SidebarFixed: React.NamedExoticComponent<SidebarFixedProps>;
+export interface SidebarFixedProps {
+    /**
+     * React children
+     * Also support render prop
+     */
+    children?: React.ReactNode | ((props: SidebarFixedProps) => React.ReactNode);
+    /**
+     * Bottom actions
+     */
+    footerActions?: React.ReactNode;
+    /** Sidebar is open
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Call when sidebar is closed
+     * */
+    onClose?: Function;
+    /**
+     * Help external link
+     */
+    helpLink?: string;
+}

package/dist/Components/SidebarFixed/SidebarFixed.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/SidebarFixed/SidebarFixed.stories.d.ts

@@ -0,0 +1,4 @@
+import { SidebarFixedProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SidebarFixedProps>;

package/dist/Components/SidebarFixed/index.d.ts

@@ -0,0 +1 @@
+export * from './SidebarFixed';

package/dist/Components/index.d.ts

@@ -5,3 +5,4 @@ export * from './TableList';
 export * from './Tabs';
 export * from './Timeline';
 export * from './Modal';
+export * from './SidebarFixed';

package/dist/Icons/icons-path/Adjust.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Adjust: () => JSX.Element;

package/dist/Icons/icons-path/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const icons: {
+    adjust: () => JSX.Element;
     angleLeft: () => JSX.Element;
     angleRight: () => JSX.Element;
     angleDiagonal: () => JSX.Element;

package/dist/Indicators/Tag/Tag.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+declare const TagTypes: {
+    neutral: string;
+    primary: string;
+    danger: string;
+    success: string;
+    warning: string;
+};
+export declare const Tag: React.MemoExoticComponent<({ type, content, fullWidth, className, action, }: TagProps) => JSX.Element>;
+export interface TagProps {
+    /** Tag color
+     * @default neutral
+     * */
+    type?: keyof typeof TagTypes;
+    /**
+     * Tag content
+     * */
+    content: string | React.ReactNode;
+    /**
+     * Enlarge width of the Tag
+     * */
+    fullWidth?: boolean;
+    /** Adittional classes for Tag
+     * @default ''
+     * */
+    className?: string;
+    /**
+     * Action for the tag, like an button or icon
+     * */
+    action: React.ReactNode;
+}
+export {};

package/dist/Indicators/Tag/Tag.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Indicators/Tag/Tag.stories.d.ts

@@ -0,0 +1,5 @@
+import { TagProps } from './Tag';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TagProps>;
+export declare const WithAction: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TagProps>;

package/dist/Indicators/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/Indicators/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Alert';
 export * from './Status';
+export * from './Tag';
 export * from './Toast';
 export * from './Badge';
 export * from './Tooltip';

package/dist/admin-components.cjs.development.js

@@ -74,6 +74,18 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var Adjust = function Adjust() {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.25 5c0-.9665.7835-1.75 1.75-1.75h2c.9665 0 1.75.7835 1.75 1.75v2c0 .9665-.7835 1.75-1.75 1.75H4c-.9665 0-1.75-.7835-1.75-1.75V5ZM4 4.75c-.13807 0-.25.11193-.25.25v2c0 .13807.11193.25.25.25h2c.13807 0 .25-.11193.25-.25V5c0-.13807-.11193-.25-.25-.25H4ZM10.25 11c0-.9665.7835-1.75 1.75-1.75h2c.9665 0 1.75.7835 1.75 1.75v2c0 .9665-.7835 1.75-1.75 1.75h-2c-.9665 0-1.75-.7835-1.75-1.75v-2Zm1.75-.25c-.1381 0-.25.1119-.25.25v2c0 .1381.1119.25.25.25h2c.1381 0 .25-.1119.25-.25v-2c0-.1381-.1119-.25-.25-.25h-2Z"
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.74951 4V.5h-1.5V4h1.5Zm0 4h-1.5v9.5h1.5V8ZM13.7495 10V.5h-1.5V10h1.5Zm0 4h-1.5v3.5h1.5V14Z"
+  }));
+};
+
 var AngleLeft = function AngleLeft() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -554,6 +566,7 @@ var User = function User() {
 };
 
 var icons = {
+  adjust: Adjust,
   angleLeft: AngleLeft,
   angleRight: AngleRight,
   angleDiagonal: AngleDiagonal,
@@ -1776,11 +1789,12 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
     htmlFor: inputId,
     className: "inline-flex " + alignOptions[boxAlign] + " cursor-pointer"
   }, React__default.createElement("span", {
-    className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
+    className: "relative rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
   }, React__default.createElement("input", Object.assign({
     ref: ref || inputRef,
     type: "checkbox",
     id: inputId,
+    name: name,
     className: "opacity-0 absolute h-4 w-4 z-50 cursor-pointer",
     checked: isChecked,
     onChange: handleChange,
@@ -2477,6 +2491,61 @@ var ModalComponent = function ModalComponent(_ref) {
 
 var Modal = /*#__PURE__*/React__default.memo(ModalComponent);
 
+var backgroundShadowEffect = ['[background:linear-gradient(#FFFFFF_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#FFFFFF_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]', '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]', '[background-attachment:local,local,scroll,scroll]', '[background-repeat:no-repeat]', '[background-color:#FFFFFF]', '[&_.form-group_.bg-base-1]:bg-transparent'];
+var SidebarFixedComponent = function SidebarFixedComponent(_ref) {
+  var children = _ref.children,
+      footerActions = _ref.footerActions,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      onClose = _ref.onClose,
+      helpLink = _ref.helpLink;
+
+  var _useState = React.useState(false),
+      sidebarIsOpen = _useState[0],
+      setSidebarIsOpen = _useState[1];
+
+  React.useEffect(function () {
+    setSidebarIsOpen(isOpen);
+  }, [isOpen]);
+
+  var handleRequestCloseFunc = function handleRequestCloseFunc() {
+    setSidebarIsOpen(false);
+    onClose == null ? void 0 : onClose();
+  };
+
+  return React__default.createElement("div", {
+    className: "sidebar-fixed fixed z-40 lg:z-20 right-0 bottom-0 w-full h-full transition-all overflow-x-hidden " + (sidebarIsOpen ? 'pointer-events-auto opacity-100' : 'opacity-0 pointer-events-none')
+  }, React__default.createElement("div", {
+    className: "sidebar-fixed-backdrop fixed inset-0 h-full w-full bg-black-alpha -z-1",
+    onClick: handleRequestCloseFunc
+  }), React__default.createElement("div", {
+    className: "sidebar-fixed-inner mt-10 sm:mt-0 top-0 bottom-0 right-0 absolute flex flex-col justify-between bg-base-1 transform transition-transform shadow h-auto w-full sm:max-w-[410px] sm:ml-16 rounded-t-lg sm:rounded-none " + (sidebarIsOpen ? 'translate-x-0' : 'translate-x-10')
+  }, React__default.createElement("div", {
+    className: "sidebar-fixed-header flex justify-between items-center p-3 lg:px-5 text-inverted-2"
+  }, React__default.createElement("button", {
+    className: "sidebar-fixed-close p-2 hover:text-primary transition-colors",
+    onClick: handleRequestCloseFunc
+  }, React__default.createElement(Icon, {
+    icon: "close",
+    block: true,
+    size: 4
+  })), helpLink && React__default.createElement("a", {
+    className: "sidebar-fixed-help p-2 hover:text-primary transition-colors",
+    href: helpLink,
+    target: "_blank",
+    rel: "noreferrer"
+  }, React__default.createElement(Icon, {
+    icon: "questionCircle",
+    block: true,
+    size: 4
+  }))), React__default.createElement("div", {
+    className: "sidebar-fixed-content flex-1 flex-grow w-full overflow-auto overscroll-none px-5 lg:px-7 break-words " + backgroundShadowEffect.join(' ')
+  }, children), footerActions && React__default.createElement("div", {
+    className: "sidebar-fixed-footer flex justify-between items-center p-5 lg:p-7 lg:pt-6"
+  }, footerActions)));
+};
+var SidebarFixed = /*#__PURE__*/React__default.memo(SidebarFixedComponent);
+
 var alertTypes = {
   success: {
     "class": 'bg-success-light border-success',
@@ -2606,6 +2675,34 @@ var StatusComponent = function StatusComponent(_ref2) {
 
 var Status = /*#__PURE__*/React__default.memo(StatusComponent);
 
+var TagTypes = {
+  neutral: 'bg-base-1 border-inverted-2',
+  primary: 'bg-primary-light border-primary',
+  danger: 'bg-danger-light border-danger',
+  success: 'bg-success-light border-success',
+  warning: 'bg-warning-light border-warning'
+};
+
+var TagComponent = function TagComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      content = _ref.content,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      action = _ref.action;
+  return React__default.createElement("div", {
+    className: "tag " + (fullWidth ? 'flex' : 'inline-flex') + " items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold " + TagTypes[type] + " " + className
+  }, React__default.createElement("div", {
+    className: "min-w-0 break-words -my-px"
+  }, content), action && React__default.createElement("div", {
+    className: "-my-px ml-3"
+  }, action));
+};
+
+var Tag = /*#__PURE__*/React__default.memo(TagComponent);
+
 var contextClass = {
   success: 'bg-primary-light border-primary-dark',
   error: 'bg-danger-light border-danger-dark',
@@ -3390,6 +3487,8 @@ exports.Pagination = Pagination;
 exports.Select = Select;
 exports.SelectComponent = SelectComponent;
 exports.Sidebar = Sidebar;
+exports.SidebarFixed = SidebarFixed;
+exports.SidebarFixedComponent = SidebarFixedComponent;
 exports.SidebarItem = SidebarItem;
 exports.SidebarSubItem = SidebarSubItem;
 exports.Status = Status;
@@ -3398,6 +3497,7 @@ exports.TableList = TableList;
 exports.TableListItem = TableListItem;
 exports.TableListItemLoading = TableListItemLoading;
 exports.Tabs = Tabs;
+exports.Tag = Tag;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.Toggle = Toggle;