mautourco-components 0.2.9 → 0.2.10

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import './ActionDropdown.css';
+export interface ActionDropdownItem {
+    /** Label for the action dropdown item */
+    label: string;
+    /** Callback function to be called when the action dropdown item is clicked */
+    onClick?: () => void;
+}
+export interface ActionDropdownProps {
+    /** Data for the action dropdown */
+    data: ActionDropdownItem[];
+}
+/**
+ * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.
+ *
+ * @example
+ * <ActionDropdown data={data} />
+ * @param ActionDropdownProps
+ * @returns
+ */
+export declare const ActionDropdown: React.FC<ActionDropdownProps>;

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

@@ -0,0 +1,34 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import './ActionDropdown.css';
+/**
+ * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.
+ *
+ * @example
+ * <ActionDropdown data={data} />
+ * @param ActionDropdownProps
+ * @returns
+ */
+export var ActionDropdown = function (_a) {
+    var data = _a.data;
+    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 () {
+                        var _a;
+                        setOpen(false);
+                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                    } }, { children: _jsx(Text, __assign({ variant: "medium", size: "sm", as: "span" }, { children: item.label })) }), "ad-".concat(index))); }) }))] })));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DateDisplayProps {
+    /** Dates to display */
+    date: string[] | Date[];
+}
+/**
+ * A component for displaying a list of dates in a readable format.
+ *
+ * @example
+ * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * @param DateDisplayProps
+ * @returns
+ */
+export declare const DateDisplay: React.FC<DateDisplayProps>;

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

@@ -0,0 +1,39 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { format, isValid } from 'date-fns';
+import { Fragment, useMemo } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+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']} />
+ * @param DateDisplayProps
+ * @returns
+ */
+export var DateDisplay = function (_a) {
+    var date = _a.date;
+    var formattedDate = useMemo(function () {
+        return date.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)) {
+                return format(dateObj, 'dd/MM/yyyy');
+            }
+            // 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))); }) })));
+};