@asdp/ferryui 0.1.12 → 0.1.13

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React2, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Row, Col } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller } from 'react-hook-form';
 import PhoneInputComponent from 'react-phone-input-2';
@@ -296,7 +297,6 @@ var useStyles3 = makeStyles({
   info: {
     display: "flex",
     flexDirection: "column",
-    padding: tokens.spacingHorizontalM,
     width: "100%",
     alignContent: "center",
     justifyContent: "space-between",
@@ -313,6 +313,22 @@ var useStyles3 = makeStyles({
       padding: tokens.spacingVerticalSNudge,
       gap: tokens.spacingVerticalXS
     }
+  },
+  infoWrapper: {
+    padding: tokens.spacingHorizontalM
+  },
+  buttonWrapper: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  title: {
+    lineClamp: 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical"
   }
 });
 var CardPromo = ({
@@ -322,7 +338,10 @@ var CardPromo = ({
   imageAlt = "Promo image",
   index = 0,
   totalCards,
-  onClick
+  onClick,
+  showButton = false,
+  buttonText = "Lihat Detail",
+  className
 }) => {
   const classes = useStyles3();
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
@@ -330,7 +349,7 @@ var CardPromo = ({
     CarouselCard,
     {
       autoSize: true,
-      className: classes.actionCard,
+      className: mergeClasses(classes.actionCard, className),
       "aria-label": ariaLabel,
       onClick,
       style: { cursor: onClick ? "pointer" : "default" },
@@ -344,9 +363,22 @@ var CardPromo = ({
             alt: imageAlt
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: classes.info, children: [
-          /* @__PURE__ */ jsx(Subtitle2, { children: title }),
-          /* @__PURE__ */ jsx(Body1, { children: description })
+        /* @__PURE__ */ jsxs(Row, { className: classes.infoWrapper, children: [
+          /* @__PURE__ */ jsxs(Col, { className: classes.info, xs: 12, sm: 12, md: 12, lg: showButton ? 8 : 12, xl: showButton ? 8 : 12, xxl: showButton ? 8 : 12, xxxl: showButton ? 8 : 12, children: [
+            /* @__PURE__ */ jsx(Subtitle2, { className: classes.title, children: title }),
+            /* @__PURE__ */ jsx(Body1, { className: classes.title, children: description })
+          ] }),
+          showButton && /* @__PURE__ */ jsx(Col, { className: classes.buttonWrapper, xs: 12, sm: 12, md: 12, lg: showButton ? 4 : 0, xl: showButton ? 4 : 0, xxl: showButton ? 4 : 0, xxxl: showButton ? 4 : 0, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              size: "small",
+              onClick,
+              style: { cursor: onClick ? "pointer" : "default" },
+              shape: "circular",
+              children: buttonText
+            }
+          ) })
         ] })
       ]
     }
@@ -2167,8 +2199,21 @@ function InputDynamic({
             onChange: (_, data) => field.onChange(data.checked)
           }
         ) });
-      case "date":
-        return /* @__PURE__ */ jsx(DatePickerInput_default, { ...commonProps, field });
+      case "date": {
+        return /* @__PURE__ */ jsx(
+          DatePickerInput_default,
+          {
+            field,
+            placeholder,
+            disabled,
+            appearance: error ? "outline" : appearance,
+            size,
+            onClick,
+            style: inputStyle,
+            max: max ? String(max) : void 0
+          }
+        );
+      }
       case "radio":
         return /* @__PURE__ */ jsx(RadioGroup, { ...field, disabled, layout: layout ?? "vertical", children: options.map((option) => /* @__PURE__ */ jsx(
           Radio,