mautourco-components 0.2.16 → 0.2.17

package/dist/components/atoms/Tab/Tab.css

@@ -2093,7 +2093,8 @@
   border: none;
   border-radius: calc(var(--tab-border-radius-default, 0) / 16);
   border-bottom-style: solid;
-  border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16);
+  /* border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16); */
+  border-bottom-width: 4px;
   border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
   background-color: var(--tab-color-normal-default-background, #ffffff);
   color: var(--color-text-state-default, #737373);
@@ -2109,8 +2110,7 @@
 
 .tab:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-normal-focused-border, #e5e5e5);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-normal-focused-border, #e5e5e5);
   background-color: var(--tab-color-normal-focused-background, #ffffff);
 }
 
@@ -2144,8 +2144,7 @@
 }
 
 .tab--active:focus-visible {
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-active-focused-border, #042c2f);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-active-focused-border, #042c2f);
   background-color: var(--tab-color-active-focused-background, #ffffff);
 }
 
@@ -2218,7 +2217,6 @@
   --tab-width: var(--tab-outline-sm-focus-width, 121rem);
   --tab-height: var(--tab-outline-sm-focus-height, 59rem);
   border-radius: calc(var(--border-radius-rounded-sm, 4rem) / 16);
-  border-top: calc(var(--border-border, 1rem) / 16)
-    solid var(--color-atoll-green-800, #0f7173);
+  border-top: calc(var(--border-border, 1rem) / 16) solid
+    var(--color-atoll-green-800, #0f7173);
 }
-

package/dist/components/atoms/Typography/Typography.d.ts

@@ -19,7 +19,7 @@ interface HeadingProps extends BaseProps {
     level?: HeadingLevel;
     as?: keyof React.JSX.IntrinsicElements;
 }
-interface TextProps extends BaseProps {
+export interface TextProps extends BaseProps {
     size?: BodySizeInput;
     as?: keyof React.JSX.IntrinsicElements;
 }

package/dist/components/atoms/Typography/Typography.js

@@ -52,8 +52,12 @@ var mapLeadingToToken = function (leading) {
 };
 var getBodyClass = function (size, leading) {
     var availableLeadings = tokenBodyLeadings[size];
-    var desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
-    var resolvedLeading = availableLeadings.includes(desiredLeading) ? desiredLeading : availableLeadings[0];
+    var desiredLeading = leading
+        ? mapLeadingToToken(leading)
+        : mapLeadingToToken(defaultBodyLeading[size]);
+    var resolvedLeading = availableLeadings.includes(desiredLeading)
+        ? desiredLeading
+        : availableLeadings[0];
     return {
         className: "body-".concat(size, "-").concat(resolvedLeading),
         lineHeightHandled: desiredLeading === resolvedLeading,
@@ -77,7 +81,12 @@ export var Heading = function (_a) {
     var Tag = as || "h".concat(level);
     var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
     var variantClass = buildVariantClass(baseClass, variant);
-    var classes = [baseClass, variantClass, leading ? leadingFallback[leading] : '', className]
+    var classes = [
+        baseClass,
+        variantClass,
+        leading ? leadingFallback[leading] : '',
+        className,
+    ]
         .filter(Boolean)
         .join(' ');
     var colorStyle = getColorStyle(color);
@@ -89,7 +98,12 @@ export var Text = function (_a) {
     var normalizedSize = bodySizeAlias[size];
     var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
     var variantClass = buildVariantClass(baseClass, variant);
-    var classes = [baseClass, variantClass, leading && !lineHeightHandled ? leadingFallback[leading] : '', className]
+    var classes = [
+        baseClass,
+        variantClass,
+        leading && !lineHeightHandled ? leadingFallback[leading] : '',
+        className,
+    ]
         .filter(Boolean)
         .join(' ');
     var colorStyle = getColorStyle(color);

package/dist/components/molecules/ActionDropdown/ActionDropdown.d.ts

@@ -3,12 +3,16 @@ import './ActionDropdown.css';
 export interface ActionDropdownItem {
     /** Label for the action dropdown item */
     label: string;
+    /** Disable the action dropdown item */
+    disabled?: boolean;
     /** Callback function to be called when the action dropdown item is clicked */
     onClick?: () => void;
 }
 export interface ActionDropdownProps {
     /** Data for the action dropdown */
     data: ActionDropdownItem[];
+    /** Trigger element */
+    children?: React.ReactNode;
 }
 /**
  * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.

package/dist/components/molecules/ActionDropdown/ActionDropdown.js

@@ -24,9 +24,9 @@ import './ActionDropdown.css';
  * @returns
  */
 export var ActionDropdown = function (_a) {
-    var data = _a.data;
+    var data = _a.data, children = _a.children;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs(Popover, __assign({ open: open, onOpenChange: setOpen }, { children: [_jsx(PopoverTrigger, { children: _jsx("button", __assign({ className: "action-dropdown-trigger" }, { children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, __assign({ className: "action-dropdown", align: "end" }, { children: data.map(function (item, index) { return (_jsx("button", __assign({ onClick: function () {
+    return (_jsxs(Popover, __assign({ open: open, onOpenChange: setOpen }, { children: [_jsx(PopoverTrigger, { children: children !== null && children !== void 0 ? children : (_jsx("button", __assign({ className: "action-dropdown-trigger" }, { children: _jsx(Icon, { name: "more-vertical" }) }))) }), _jsx(PopoverContent, __assign({ className: "action-dropdown", align: "end", side: "bottom", avoidCollisions: false }, { children: data.map(function (item, index) { return (_jsx("button", __assign({ onClick: function () {
                         var _a;
                         setOpen(false);
                         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts

@@ -6,6 +6,6 @@ export interface BreadcrumbsItem {
 }
 export interface BreadcrumbsProps {
     items: BreadcrumbsItem[];
-    onBack: () => void;
+    onBack?: () => void;
 }
 export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;

package/dist/components/molecules/DateDisplay/DateDisplay.d.ts

@@ -1,13 +1,20 @@
 import React from 'react';
+import { TextProps } from '../../atoms/Typography/Typography';
 export interface DateDisplayProps {
     /** Dates to display */
-    date: string[] | Date[];
+    dates: string[] | Date[];
+    /** Size of the arrow icon */
+    arrowSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Size of the calendar icon */
+    calendarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Size of the text */
+    textSize?: TextProps['size'];
 }
 /**
  * A component for displaying a list of dates in a readable format.
  *
  * @example
- * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * <DateDisplay dates={['2025-01-01', '2025-01-02']} />
  * @param DateDisplayProps
  * @returns
  */

package/dist/components/molecules/DateDisplay/DateDisplay.js

@@ -18,14 +18,14 @@ import { Text } from '../../atoms/Typography/Typography';
  * A component for displaying a list of dates in a readable format.
  *
  * @example
- * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * <DateDisplay dates={['2025-01-01', '2025-01-02']} />
  * @param DateDisplayProps
  * @returns
  */
 export var DateDisplay = function (_a) {
-    var date = _a.date;
+    var dates = _a.dates, _b = _a.arrowSize, arrowSize = _b === void 0 ? 'sm' : _b, _c = _a.calendarSize, calendarSize = _c === void 0 ? 'sm' : _c, _d = _a.textSize, textSize = _d === void 0 ? 'sm' : _d;
     var formattedDate = useMemo(function () {
-        return date.map(function (d) {
+        return dates.map(function (d) {
             var dateObj = new Date(d);
             // Check if the date is valid then format it to dd/MM/yyyy format
             if (isValid(dateObj)) {
@@ -34,6 +34,6 @@ export var DateDisplay = function (_a) {
             // If the date is not valid, return the original date
             return d;
         });
-    }, [date]);
-    return (_jsx("div", __assign({ className: "flex items-center gap-x-3" }, { children: formattedDate.map(function (date, index) { return (_jsxs(Fragment, { children: [_jsxs("span", __assign({ className: "flex items-center gap-x-2" }, { children: [_jsx(Icon, { name: "calendar2", size: "sm" }), _jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: date }))] })), formattedDate.length > 1 && index === 0 && _jsx(Icon, { name: "arrow-right-outline", size: "sm" })] }, "dd-".concat(index))); }) })));
+    }, [dates]);
+    return (_jsx("div", __assign({ className: "flex items-center gap-x-3" }, { children: formattedDate.map(function (date, index) { return (_jsxs(Fragment, { children: [_jsxs("span", __assign({ className: "flex items-center gap-x-2" }, { children: [_jsx(Icon, { name: "calendar2", size: calendarSize }), _jsx(Text, __assign({ variant: "medium", size: textSize }, { children: date }))] })), formattedDate.length > 1 && index === 0 && (_jsx(Icon, { name: "arrow-right-outline", size: arrowSize }))] }, "dd-".concat(index))); }) })));
 };

package/dist/components/molecules/DetailsInfo/DetailsAction.d.ts

@@ -0,0 +1,9 @@
+import { ActionDropdownType } from '@/src/types/table';
+import React from 'react';
+import { ActionDropdownItem } from '../ActionDropdown/ActionDropdown';
+export interface DetailsActionProps {
+    /** Data for the action dropdown */
+    data?: ActionDropdownItem[];
+    onAction?: (action: ActionDropdownType) => void;
+}
+export declare const DetailsAction: React.FC<DetailsActionProps>;

package/dist/components/molecules/DetailsInfo/DetailsAction.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionDropdownType } from '@/src/types/table';
+import Button from '../../atoms/Button/Button';
+import { ActionDropdown } from '../ActionDropdown/ActionDropdown';
+export var DetailsAction = function (props) {
+    var _a = props.data, data = _a === void 0 ? [] : _a, onAction = props.onAction;
+    return (_jsx(ActionDropdown, __assign({ data: data.length > 0
+            ? data
+            : [
+                {
+                    label: 'Add item',
+                    onClick: function () {
+                        onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.ADD_ITEM);
+                    },
+                },
+                {
+                    label: 'Cancel services',
+                    onClick: function () {
+                        onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.CANCEL_SERVICES);
+                    },
+                },
+                {
+                    label: 'Send via mail',
+                    onClick: function () {
+                        onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.SEND_VIA_MAIL);
+                    },
+                },
+                {
+                    label: 'Delete quote',
+                    onClick: function () {
+                        onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.DELETE_QUOTE);
+                    },
+                },
+            ] }, { children: _jsx(Button, __assign({ variant: "outline-secondary", trailingIcon: "chevron-down", size: "sm", className: "w-[144px] !justify-between !px-[14px]" }, { children: "More options" })) })));
+};