@asdp/ferryui 0.1.12 → 0.1.14

package/dist/index.d.mts

@@ -211,6 +211,26 @@ interface CardPromoProps {
      * Click handler for the card
      */
     onClick?: () => void;
+    /**
+     * Show Button
+     */
+    showButton?: boolean;
+    /**
+     * Button Text
+     */
+    buttonText?: string;
+    /**
+     * custom className
+     */
+    className?: string;
+    /**
+     * custom image className
+     */
+    imageClassName?: string;
+    /**
+     * custom description className
+     */
+    descriptionClassName?: string;
 }
 declare const CardPromo: React$1.FC<CardPromoProps>;
 

package/dist/index.d.ts

@@ -211,6 +211,26 @@ interface CardPromoProps {
      * Click handler for the card
      */
     onClick?: () => void;
+    /**
+     * Show Button
+     */
+    showButton?: boolean;
+    /**
+     * Button Text
+     */
+    buttonText?: string;
+    /**
+     * custom className
+     */
+    className?: string;
+    /**
+     * custom image className
+     */
+    imageClassName?: string;
+    /**
+     * custom description className
+     */
+    descriptionClassName?: string;
 }
 declare const CardPromo: React$1.FC<CardPromoProps>;
 

package/dist/index.js

@@ -3,6 +3,7 @@
 var reactComponents = require('@fluentui/react-components');
 var jsxRuntime = require('react/jsx-runtime');
 var React2 = require('react');
+var reactGridSystem = require('react-grid-system');
 var react = require('@iconify/react');
 var reactHookForm = require('react-hook-form');
 var PhoneInputComponent = require('react-phone-input-2');
@@ -305,7 +306,6 @@ var useStyles3 = reactComponents.makeStyles({
   info: {
     display: "flex",
     flexDirection: "column",
-    padding: reactComponents.tokens.spacingHorizontalM,
     width: "100%",
     alignContent: "center",
     justifyContent: "space-between",
@@ -322,6 +322,22 @@ var useStyles3 = reactComponents.makeStyles({
       padding: reactComponents.tokens.spacingVerticalSNudge,
       gap: reactComponents.tokens.spacingVerticalXS
     }
+  },
+  infoWrapper: {
+    padding: reactComponents.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 = ({
@@ -331,7 +347,12 @@ var CardPromo = ({
   imageAlt = "Promo image",
   index = 0,
   totalCards,
-  onClick
+  onClick,
+  showButton = false,
+  buttonText = "Lihat Detail",
+  className,
+  imageClassName,
+  descriptionClassName
 }) => {
   const classes = useStyles3();
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
@@ -339,12 +360,12 @@ var CardPromo = ({
     reactComponents.CarouselCard,
     {
       autoSize: true,
-      className: classes.actionCard,
+      className: reactComponents.mergeClasses(classes.actionCard, className),
       "aria-label": ariaLabel,
       onClick,
       style: { cursor: onClick ? "pointer" : "default" },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.imageContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
             className: classes.image,
@@ -353,9 +374,22 @@ var CardPromo = ({
             alt: imageAlt
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.info, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: description })
+        /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: classes.infoWrapper, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.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__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: classes.title, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: reactComponents.mergeClasses(classes.title, descriptionClassName), children: description })
+          ] }),
+          showButton && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.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__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              size: "small",
+              onClick,
+              style: { cursor: onClick ? "pointer" : "default" },
+              shape: "circular",
+              children: buttonText
+            }
+          ) })
         ] })
       ]
     }
@@ -2176,8 +2210,21 @@ function InputDynamic({
             onChange: (_, data) => field.onChange(data.checked)
           }
         ) });
-      case "date":
-        return /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput_default, { ...commonProps, field });
+      case "date": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DatePickerInput_default,
+          {
+            field,
+            placeholder,
+            disabled,
+            appearance: error ? "outline" : appearance,
+            size,
+            onClick,
+            style: inputStyle,
+            max: max ? String(max) : void 0
+          }
+        );
+      }
       case "radio":
         return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.RadioGroup, { ...field, disabled, layout: layout ?? "vertical", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.Radio,