blixify-ui-web-mcp 0.1.18 → 0.1.20

package/lib/components/advanced/collapse/collapse.stories.tsx

@@ -1,13 +1,16 @@
-import { ArrowsPointingOutIcon, MapIcon } from "@heroicons/react/24/solid";
+import {
+  ArrowsPointingOutIcon,
+  MapIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/solid";
 import React, { useState } from "react";
-import { Collapse } from ".";
+import { Collapse as CollapseImpl } from ".";
 import { Stepper } from "../../display/stepper";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Advanced/Collapse" };
 export default meta;
 
-
 const loremContent = (
   <div className="w-full p-3 text-sm text-gray-700">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis urna
@@ -32,12 +35,12 @@ const stepperComp = (
   </div>
 );
 
-export const CollapseStory = () => {
+export const Collapse = () => {
   const [collapse, setCollapse] = useState(true);
   const toggle = () => setCollapse((prev) => !prev);
 
   return (
-    <div className="font-sans max-w-2xl p-6">
+    <div className="font-sans p-6">
       <StorySection
         title="Default"
         description={
@@ -50,7 +53,7 @@ export const CollapseStory = () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             collapse={collapse}
             defaultValue={false}
@@ -73,7 +76,7 @@ export const CollapseStory = () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             collapse={collapse}
             icon={<MapIcon className="w-5 h-5 text-primary-500" />}
@@ -105,15 +108,15 @@ export const CollapseStory = () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             desc="Lorem ipsum dolor sit amet"
             collapse={collapse}
             icon={<></>}
             collapseContainerCss="bg-primary-600"
             notCollapseContainerCss="bg-primary-600"
-            titleClassName="text-white text-2xl"
-            descClassName="text-white"
+            titleClassName="text-white text-base font-semibold leading-tight"
+            descClassName="text-white text-xs"
             iconClassName="w-5 h-5 text-white"
             content={loremContent}
             handleCollapse={toggle}
@@ -121,6 +124,114 @@ export const CollapseStory = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Summary Line"
+        description={
+          <>
+            Use <code>summary</code> to show a one-line gist beside the title
+            while collapsed. Lets users scan a list of sections without
+            expanding each one.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <CollapseImpl
+            title="Order Details"
+            summary="3 items · RM 1,260"
+            icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+            content={loremContent}
+            defaultOpen={false}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Modern Mobile — Gradient Header + Content Padding"
+        description={
+          <>
+            iOS-card feel for mobile: 3-stop gradient header (
+            <code>
+              bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300
+            </code>
+            ), rounded-2xl outer shadow, and the new{" "}
+            <code>contentClassName</code> prop to control padding/bg around the
+            content area. Use <code>summary</code> to keep the gist visible
+            while collapsed.
+          </>
+        }
+      >
+        <div className="w-full overflow-hidden rounded-2xl shadow-md">
+          <CollapseImpl
+            title="Order Details"
+            summary="3 items · RM 1,260"
+            collapse={collapse}
+            handleCollapse={toggle}
+            icon={<MapIcon className="w-5 h-5 text-white" />}
+            collapseContainerCss="bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300 !border-0"
+            notCollapseContainerCss="bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300"
+            titleClassName="text-white text-base font-semibold"
+            summaryClassName="text-primary-50"
+            descClassName="text-primary-50"
+            iconClassName="w-5 h-5 text-white"
+            contentClassName="p-5 bg-white border-t border-primary-100"
+            content={
+              <div className="space-y-2 text-sm text-gray-700">
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Subtotal</span>
+                  <span className="font-medium">RM 1,200.00</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Tax</span>
+                  <span className="font-medium">RM 60.00</span>
+                </div>
+                <div className="flex items-center justify-between border-t border-gray-100 pt-2">
+                  <span className="font-semibold text-gray-900">Total</span>
+                  <span className="font-bold text-primary-600">
+                    RM 1,260.00
+                  </span>
+                </div>
+              </div>
+            }
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Modern Mobile — Padding-only Override"
+        description={
+          <>
+            If the default gradient/header is fine but you just want tighter or
+            looser content padding, pass{" "}
+            <code>contentClassName=&quot;p-2&quot;</code> (tighter) or{" "}
+            <code>contentClassName=&quot;p-8&quot;</code> (looser). No need to
+            override the whole header.
+          </>
+        }
+      >
+        <div className="w-full space-y-3">
+          <div className="overflow-hidden rounded-xl border border-gray-200">
+            <CollapseImpl
+              title="Tight padding (p-2)"
+              icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+              contentClassName="p-2 text-xs text-gray-600"
+              content={<div>Content with tight padding.</div>}
+              defaultOpen
+            />
+          </div>
+          <div className="overflow-hidden rounded-xl border border-gray-200">
+            <CollapseImpl
+              title="Loose padding (p-8)"
+              icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+              contentClassName="p-8 text-sm text-gray-700"
+              content={
+                <div>Content with loose padding for breathing room.</div>
+              }
+              defaultOpen
+            />
+          </div>
+        </div>
+      </StorySection>
+
       <StorySection
         title="Collapse Additional Component + Expand Button"
         description={
@@ -132,15 +243,15 @@ export const CollapseStory = () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             collapse={collapse}
             icon={<></>}
-            collapseContainerCss="bg-primary-800"
-            notCollapseContainerCss="bg-primary-800"
-            titleClassName="text-white text-2xl"
-            descClassName="text-white"
+            collapseContainerCss="bg-primary-600"
+            notCollapseContainerCss="bg-primary-600"
+            titleClassName="text-white text-base font-semibold leading-tight"
+            descClassName="text-white text-xs"
             iconClassName="w-5 h-5 text-white"
             collapseAdditionalComp={stepperComp}
             content={
@@ -154,6 +265,117 @@ export const CollapseStory = () => {
           />
         </div>
       </StorySection>
+
+      <StorySection
+        title="Compact"
+        description={
+          <>
+            Use <code>size="compact"</code> for reduced padding and font size.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          {["Order Summary", "Shipping Details", "Payment Info", "Notes"].map(
+            (sectionTitle) => (
+              <div
+                key={sectionTitle}
+                className="overflow-hidden rounded-lg border border-gray-200"
+              >
+                <CollapseImpl
+                  title={sectionTitle}
+                  icon={<MapIcon className="w-4 h-4 text-primary-500" />}
+                  size="compact"
+                  content={loremContent}
+                />
+              </div>
+            )
+          )}
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="AI Overview — Animated Gradient Glow"
+        description={
+          <>
+            Sci-fi accent for an "AI"-themed surface. Wraps the{" "}
+            <code>Collapse</code> in a 2px padding ring whose background is a
+            two-colour gradient (primary &rarr; violet) that animates by
+            shifting <code>background-position</code> over 4s, producing a slow
+            shimmering glow. A blurred sibling layer underneath adds an outer
+            halo for depth. Pure CSS — no extra libraries.
+          </>
+        }
+      >
+        <style>{`
+          @keyframes ai-glow {
+            0%   { background-position:   0% 50%; }
+            100% { background-position: 400% 50%; }
+          }
+          @keyframes ai-pulse {
+            0%, 100% { opacity: 0.55; }
+            50%      { opacity: 0.85; }
+          }
+          .ai-glow-bg {
+            /* 5-stop, non-palindrome gradient so every position looks
+               distinct — symmetric gradients look stationary mid-cycle */
+            background-image: linear-gradient(
+              120deg,
+              #6366f1 0%,
+              #a855f7 25%,
+              #ec4899 50%,
+              #06b6d4 75%,
+              #6366f1 100%
+            );
+            background-size: 400% 100%;
+            background-repeat: repeat-x;
+            animation: ai-glow 6s linear infinite;
+          }
+          .ai-glow-halo {
+            filter: blur(16px);
+            animation: ai-glow 6s linear infinite, ai-pulse 4s ease-in-out infinite;
+          }
+        `}</style>
+        <div className="relative w-full">
+          {/* Halo — blurred sibling that bleeds outside the ring. Same
+              gradient as the ring so the colours stay in sync. */}
+          <div className="ai-glow-bg ai-glow-halo absolute -inset-1 rounded-2xl" />
+          {/* Gradient ring + inner white card. notCollapseContainerCss /
+              collapseContainerCss set to bg-transparent + !border-0 so
+              the inner Collapse doesn't paint a white background or a
+              divider line over the gradient ring. */}
+          <div className="ai-glow-bg relative rounded-2xl p-[2px]">
+            <div className="rounded-2xl bg-white overflow-hidden">
+              <CollapseImpl
+                title="AI Overview"
+                summary="Generated 12 seconds ago"
+                desc="Personalised insights powered by AI"
+                collapse={collapse}
+                handleCollapse={toggle}
+                icon={<SparklesIcon className="h-5 w-5 text-violet-500" />}
+                titleClassName="text-gray-900 text-base font-semibold"
+                summaryClassName="text-violet-600 text-xs"
+                descClassName="text-gray-500 text-xs"
+                collapseContainerCss="!border-0"
+                notCollapseContainerCss="!border-0"
+                contentClassName="px-4 pb-4 pt-3 border-t border-violet-100"
+                content={
+                  <div className="space-y-2 text-sm text-gray-700">
+                    <p>
+                      Your activity is trending up. Engagement is 18% above last
+                      month and your completion rate is the highest it has been
+                      since April.
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      Suggested next step: review yesterday's incomplete tasks
+                      before the standup at 10:00 AM.
+                    </p>
+                  </div>
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </StorySection>
     </div>
   );
-}
+};

package/lib/components/advanced/infoWindow/infoWindow.stories.tsx

@@ -1,7 +1,7 @@
 import { BoltIcon } from "@heroicons/react/24/outline";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
 import React from "react";
-import { InfoWindow } from ".";
+import { InfoWindow as InfoWindowImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Advanced/Info Window" };
@@ -16,7 +16,7 @@ const infoContent = (
 
 const iconClassName = "h-6 w-6 text-gray-400";
 
-export const InfoWindowStory = () => (
+export const InfoWindow = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Position: Right"
@@ -28,7 +28,7 @@ export const InfoWindowStory = () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="right"
         defaultOpen={true}
         content={infoContent}
@@ -45,7 +45,7 @@ export const InfoWindowStory = () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="left"
         content={infoContent}
         icon={<QuestionMarkCircleIcon className={iconClassName} />}
@@ -62,7 +62,7 @@ export const InfoWindowStory = () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="bottom start"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}
@@ -78,7 +78,7 @@ export const InfoWindowStory = () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="top start"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}
@@ -95,7 +95,7 @@ export const InfoWindowStory = () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="bottom end"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}

package/lib/components/advanced/popUp/README.md

@@ -107,3 +107,15 @@ When a `ref` is attached, the following method is available:
 | Method          | Description                                                       |
 | --------------- | ----------------------------------------------------------------- |
 | `handleOnClose` | Programmatically closes the panel and fires `onClose` if provided |
+
+##### Escaping a clipping container
+
+`portal` renders the panel into `document.body`, positioned against the trigger,
+for a popup that sits inside a scrolling or clipping ancestor — an absolutely
+positioned panel is cut off by one. The outside-click check follows the panel
+there, so clicking inside it does not close it, and the enter/leave transition is
+skipped since a portal cannot hold the ref `Transition` needs.
+
+```tsx
+<PopUp portal anchor="right" excludePortalIds={["select-portal"]} … />
+```

package/lib/components/advanced/popUp/popUp.stories.tsx

@@ -6,7 +6,7 @@ import {
   UserGroupIcon,
 } from "@heroicons/react/24/solid";
 import React, { useRef } from "react";
-import { PopUp } from ".";
+import { PopUp as PopUpImpl } from ".";
 import { TextButton } from "../../action/textButton";
 import { Card } from "../../chart/card";
 import { StorySection } from "../../storyUtils";
@@ -17,7 +17,7 @@ export default meta;
 
 const lib = { Transition };
 
-export const PopUpStory = () => {
+export const PopUp = () => {
   const ref = useRef<any>(null);
 
   const richContent = (
@@ -70,7 +70,7 @@ export const PopUpStory = () => {
         <div className="p-4 rounded-lg bg-primary-700 text-white w-72">
           <div className="flex justify-between items-center">
             <h5 className="font-semibold text-sm">Click to open</h5>
-            <PopUp
+            <PopUpImpl
               ref={ref}
               ctaComp={
                 <ChevronDownIcon className="h-5 w-5 text-white cursor-pointer" />
@@ -97,7 +97,7 @@ export const PopUpStory = () => {
         <div className="p-4 rounded-lg bg-primary-700 text-white w-72">
           <div className="flex justify-between items-center">
             <h5 className="font-semibold text-sm">Opens above</h5>
-            <PopUp
+            <PopUpImpl
               ref={ref}
               ctaComp={
                 <ChevronUpIcon className="h-5 w-5 text-white cursor-pointer" />
@@ -124,7 +124,7 @@ export const PopUpStory = () => {
           </>
         }
       >
-        <PopUp
+        <PopUpImpl
           ref={ref}
           ctaComp={
             <Card
@@ -151,7 +151,7 @@ export const PopUpStory = () => {
           </>
         }
       >
-        <PopUp
+        <PopUpImpl
           ref={ref}
           ctaComp={
             <Card

package/lib/components/auth/bareSignIn/bareSignIn.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AvailableProvider, BareSignIn } from ".";
+import { AvailableProvider, BareSignIn as BareSignInImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Auth/Bare Sign In" };
@@ -9,7 +9,7 @@ export default meta;
 const cardCls =
   "w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100";
 
-export const BareSignInStory = () => {
+export const BareSignIn = () => {
   const [provider, setProvider] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -26,7 +26,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="email"
             provider={["email", "phone", "google", "username"]}
@@ -49,7 +49,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="phone"
             mobilePicker={true}
@@ -73,7 +73,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="username"
             provider={["username", "email"]}
@@ -95,7 +95,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="phoneOTP"
             provider={["phoneOTP"]}
@@ -120,7 +120,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="phoneOTP"
             provider={["phoneOTP"]}
@@ -144,7 +144,7 @@ export const BareSignInStory = () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type={provider}
             mobilePicker={true}

package/lib/components/auth/bareSignUp/bareSignUp.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { BareSignUp } from ".";
+import { BareSignUp as BareSignUpImpl } from ".";
 import { Option, Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { AvailableProvider } from "../bareSignIn";
@@ -14,7 +14,7 @@ const genderOptions: Option[] = [
   { key: "F", label: "Female" },
 ];
 
-export const BareSignUpStory = () => {
+export const BareSignUp = () => {
   const custFormRef: any = useRef(null);
   const signUpFormRef: any = useRef(null);
   const input1: any = useRef(null);
@@ -112,7 +112,7 @@ export const BareSignUpStory = () => {
         }
       >
         <div className="p-4 w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100">
-          <BareSignUp
+          <BareSignUpImpl
             type={signUpType}
             stepIndex={stepIndex}
             handleUpdateStepIndex={setStepIndex}
@@ -135,7 +135,7 @@ export const BareSignUpStory = () => {
         }
       >
         <div className="p-4 w-full max-w-sm bg-white rounded-lg shadow-sm border border-gray-100">
-          <BareSignUp
+          <BareSignUpImpl
             type={signUpType}
             stepIndex={stepIndex}
             handleUpdateStepIndex={setStepIndex}

package/lib/components/chart/areaChart/areaChart.stories.tsx

@@ -1,7 +1,7 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
 import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { AreaChart } from ".";
+import { AreaChart as AreaChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
 import { StorySection } from "../../storyUtils";
 
@@ -45,7 +45,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-export const AreaChartStory = () => {
+export const AreaChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -102,7 +102,7 @@ export const AreaChartStory = () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}
@@ -126,7 +126,7 @@ export const AreaChartStory = () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales by Region"
           categories={categories}
           stackedAreaSeries={stackedAreaSeries}
@@ -152,7 +152,7 @@ export const AreaChartStory = () => {
         }
         dark
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales by Region"
           categories={categories}
           stackedAreaSeries={stackedAreaSeries}
@@ -179,7 +179,7 @@ export const AreaChartStory = () => {
           </>
         }
       >
-        <AreaChart
+        <AreaChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}

package/lib/components/chart/barChart/barChart.stories.tsx

@@ -1,7 +1,7 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
 import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { BarChart } from ".";
+import { BarChart as BarChartImpl } from ".";
 import { RangeInterface } from "../DateRange";
 import { StorySection } from "../../storyUtils";
 
@@ -23,7 +23,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-export const BarChartStory = () => {
+export const BarChart = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -80,7 +80,7 @@ export const BarChartStory = () => {
           </>
         }
       >
-        <BarChart
+        <BarChartImpl
           title="Sales"
           seriesName="Value"
           seriesData={seriesData}
@@ -106,7 +106,7 @@ export const BarChartStory = () => {
           </>
         }
       >
-        <BarChart
+        <BarChartImpl
           title="Sales by Company"
           stackedBarSeries={stackedSeries}
           orientation="col"
@@ -132,7 +132,7 @@ export const BarChartStory = () => {
         }
         dark
       >
-        <BarChart
+        <BarChartImpl
           title="Sales by Company"
           stackedBarSeries={stackedSeries}
           orientation="col"
@@ -165,7 +165,7 @@ export const BarChartStory = () => {
       >
         <div className="overflow-x-auto w-full">
           <div className="min-w-[600px]">
-            <BarChart
+            <BarChartImpl
               title=""
               containerStyle="bg-gradient-to-b from-[#4a3aff] to-[#6959ff] rounded-2xl p-6 shadow-lg"
               categories={["May", "Jun", "Jul", "Aug", "Sep", "Oct"]}