@calo-design/cli 0.4.2 → 0.4.4

package/bin/templates/gallery-index.tsx

@@ -0,0 +1,1678 @@
+import React from "react";
+import {
+  CaloBadge,
+  CaloBanner,
+  CaloBottomSheet,
+  CaloBottomNavigation,
+  CaloBottomActionBar,
+  CaloButton,
+  CaloCardDetailsInput,
+  CaloCartItemCard,
+  CaloCafeProductCard,
+  CaloCategoryTileGrid,
+  CaloCarousel,
+  CaloCenteredTitleTopBar,
+  CaloCheckbox,
+  CaloCompactProductRowCard,
+  CaloCompactVariantTile,
+  CaloContextScreen,
+  CaloContextTopBar,
+  CaloCustomizationOptionCard,
+  CaloDateBar,
+  CaloDateBarItem,
+  CaloDeliveryStatusCard,
+  CaloDietaryCard,
+  CaloDivider,
+  CaloFoodPreferenceWarning,
+  CaloIcon,
+  CaloIconButton,
+  CaloInput,
+  CaloInline,
+  CaloLogo,
+  CaloMacroSummary,
+  CaloMarketProductCard,
+  CaloMealRatingCard,
+  CaloMealRow,
+  CaloMenuMealRow,
+  CaloPaymentMethodList,
+  CaloPhoneInput,
+  CaloPriceText,
+  CaloProductTile,
+  CaloPromoCodeInput,
+  CaloRadio,
+  CaloRatingChip,
+  CaloScreen,
+  CaloSelectableMealTile,
+  CaloSelectionCard,
+  CaloSelectionCardMacros,
+  CaloSelectionCardPrice,
+  CaloSelectionCardRadioGroup,
+  CaloSelectionCardRadioItem,
+  CaloStack,
+  CaloStepper,
+  CaloInlineHeader,
+  CaloLargeTitleHeader,
+  CaloSummaryHeader,
+  CaloSwapMealCard,
+  CaloSurface,
+  CaloTabMenuGroup,
+  CaloText,
+  CaloTextArea,
+  CaloToast,
+  CaloToggle,
+  CaloTopActionBar,
+  CaloVerificationCodeInput,
+  CaloVisual,
+  CaloVoucherCard,
+  caloVisualAssets
+} from "@calo/design-system";
+import {
+  CaloFaqAccordion,
+  CaloTestimonialCard,
+  CaloSupportPromptCard,
+  CaloUgcCard,
+  CaloFeatureCard,
+  CaloPartnerCard,
+  CaloPlanCard,
+  CaloPlanCardGrid,
+  CaloQuantityRow,
+  CaloPagination,
+  CaloMealMacroCard,
+  CaloDishCard,
+  CaloCheckoutSummaryCard
+} from "@calo/design-system";
+import { router } from "expo-router";
+
+const mealImage = require("../assets/component-gallery/meal-photo.png");
+const smoothieImage = require("../assets/component-gallery/smoothie-photo.png");
+const ingredientPenneImage = require("../assets/live-flows/active-subscriber-home/ingredient-penne.png");
+const marketImage = caloVisualAssets["salad-bowl-1"].source;
+const sauceImage = caloVisualAssets["caramel"].source;
+
+const cafeCategoryItems = [
+  { id: "popular", label: "Popular", visual: "fire" },
+  { id: "bone-broth", label: "Bone Broth", visual: "bone-broth" },
+  { id: "cold-drinks", label: "Cold Drinks", visual: "cold-drinks-l" },
+  { id: "froyo", label: "Froyo", visual: "froyo-l" },
+  { id: "hot-drinks", label: "Hot Drinks", visual: "hot-drinks-l" },
+  { id: "iced-tea", label: "Iced Tea", visual: "iced-tea-l" },
+  { id: "meals", label: "Meals", visual: "meal-grid" },
+  { id: "salads", label: "Salads", visual: "salads" },
+  { id: "sandwiches", label: "Sandwiches", visual: "sandwich" },
+  { id: "smoothies", label: "Smoothies", visual: "smoothie-1" },
+  { id: "snacks", label: "Snacks", visual: "savory-snacks" },
+  { id: "soups", label: "Soups", visual: "soups" },
+  { id: "juices", label: "Juices", visual: "beverages" },
+  { id: "sweet-snacks", label: "Snacks", visual: "sweet-tooth" }
+] as const;
+
+const macros = [
+  { label: "P", value: "37g", tone: "protein" as const },
+  { label: "C", value: "42g", tone: "carbs" as const },
+  { label: "F", value: "14g", tone: "fat" as const }
+];
+
+export type GalleryCategory = "all" | "foundations" | "navigation" | "actions" | "selection" | "forms" | "commerce" | "food" | "feedback" | "marketing";
+
+export const galleryFilters: Array<{ id: GalleryCategory; label: string }> = [
+  { id: "all", label: "All" },
+  { id: "foundations", label: "Foundations" },
+  { id: "navigation", label: "Navigation" },
+  { id: "actions", label: "Actions" },
+  { id: "selection", label: "Selection" },
+  { id: "forms", label: "Forms" },
+  { id: "commerce", label: "Commerce" },
+  { id: "food", label: "Food" },
+  { id: "feedback", label: "Feedback" },
+  { id: "marketing", label: "Marketing" }
+];
+
+const gallerySections: Array<{ id: string; category: Exclude<GalleryCategory, "all"> }> = [
+  { id: "identity", category: "foundations" },
+  { id: "typography", category: "foundations" },
+  { id: "carousel", category: "foundations" },
+  { id: "bottom-navigation", category: "navigation" },
+  { id: "actions", category: "actions" },
+  { id: "badges", category: "actions" },
+  { id: "selection", category: "selection" },
+  { id: "quantity", category: "selection" },
+  { id: "inputs", category: "forms" },
+  { id: "feedback", category: "feedback" },
+  { id: "offers", category: "commerce" },
+  { id: "delivery-status", category: "commerce" },
+  { id: "payment", category: "commerce" },
+  { id: "dietary-cards", category: "food" },
+  { id: "category-tile-grid", category: "food" },
+  { id: "meal-cards", category: "food" },
+  { id: "cart-items", category: "commerce" },
+  { id: "faq", category: "marketing" },
+  { id: "marketing-cards", category: "marketing" },
+  { id: "partner-cards", category: "marketing" },
+  { id: "plan-cards", category: "food" },
+  { id: "quantity-row", category: "selection" },
+  { id: "pagination", category: "navigation" },
+  { id: "meal-feature-cards", category: "food" },
+  { id: "checkout-summary", category: "commerce" }
+];
+
+const tabMenuOptions = [
+  { id: "options", label: "Options" },
+  { id: "details", label: "Options" },
+  { id: "delivery", label: "Options" },
+  { id: "billing", label: "Options" }
+];
+
+const chipMenuOptions = [
+  { id: "menu", label: "Menu" },
+  { id: "plan", label: "Menu" },
+  { id: "snacks", label: "Menu" },
+  { id: "drinks", label: "Menu" }
+];
+
+export function getVisibleGallerySectionCount(selectedFilter: GalleryCategory) {
+  return gallerySections.filter((section) => selectedFilter === "all" || selectedFilter === section.category).length;
+}
+
+export default function ComponentsScreen() {
+  return (
+    <CaloScreen title="Component Gallery" subtitle="A living Expo preview for Calo design-system components." contentWidth="wide" gutter="wide">
+      <ComponentGalleryContent />
+    </CaloScreen>
+  );
+}
+
+export function ComponentGalleryContent({
+  showIntro = true,
+  selectedFilter: controlledSelectedFilter,
+  onFilterChange
+}: {
+  showIntro?: boolean;
+  selectedFilter?: GalleryCategory;
+  onFilterChange?: (filter: GalleryCategory) => void;
+}) {
+  const [localSelectedFilter, setLocalSelectedFilter] = React.useState<GalleryCategory>("all");
+  const selectedFilter = controlledSelectedFilter ?? localSelectedFilter;
+  const setSelectedFilter = onFilterChange ?? setLocalSelectedFilter;
+  const [stepperValue, setStepperValue] = React.useState(2);
+  const [webMeals, setWebMeals] = React.useState(3);
+  const [paginationPage, setPaginationPage] = React.useState(4);
+  const [actionBarQuantity, setActionBarQuantity] = React.useState(5);
+  const [bottomNavigationTab, setBottomNavigationTab] = React.useState("meals");
+  const [compactValue, setCompactValue] = React.useState(0);
+  const [toggleSelected, setToggleSelected] = React.useState(true);
+  const [selectedDate, setSelectedDate] = React.useState("may-25");
+  const [outlineTab, setOutlineTab] = React.useState("options");
+  const [chipTab, setChipTab] = React.useState("menu");
+  const [bannerSelected, setBannerSelected] = React.useState(false);
+  const [modalSheetOpen, setModalSheetOpen] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return new URLSearchParams(window.location.search).get("sheet") === "open";
+  });
+  const [radioSelected, setRadioSelected] = React.useState("regular");
+  const [selectionCardOption, setSelectionCardOption] = React.useState("weekly");
+  const [selectionCardChoice, setSelectionCardChoice] = React.useState("value");
+  const [checkboxSelected, setCheckboxSelected] = React.useState(true);
+  const [rating, setRating] = React.useState("Loved it");
+  const [rowRating, setRowRating] = React.useState("okay");
+  const [cardRating, setCardRating] = React.useState("awesome");
+  const [mealSelected, setMealSelected] = React.useState(true);
+  const [selectedVariant, setSelectedVariant] = React.useState("rose");
+  const [dietaryPlan, setDietaryPlan] = React.useState("balanced");
+  const [marketQuantity, setMarketQuantity] = React.useState(0);
+  const [cafeQuantity, setCafeQuantity] = React.useState(1);
+  const [paymentMethodId, setPaymentMethodId] = React.useState("wallet");
+  const [fieldValue, setFieldValue] = React.useState("Sufiyan Yusuf");
+  const [noteValue, setNoteValue] = React.useState("No onions, extra lemon.");
+  const [codeValue, setCodeValue] = React.useState("24");
+  const [phoneValue, setPhoneValue] = React.useState("501234567");
+  const [promoValue, setPromoValue] = React.useState("SAVE20");
+  const [cardNumber, setCardNumber] = React.useState("4242 4242 4242 4242");
+  const [expiry, setExpiry] = React.useState("04/28");
+  const [cvv, setCvv] = React.useState("123");
+  const [healthySansAvailable, setHealthySansAvailable] = React.useState(false);
+  const previewOnly = () => undefined;
+  const filterVisible = (category: GalleryCategory) => selectedFilter === "all" || selectedFilter === category;
+  const visibleSectionCount = getVisibleGallerySectionCount(selectedFilter);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (new URLSearchParams(window.location.search).get("sheet") === "open") {
+      setModalSheetOpen(true);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    setHealthySansAvailable(isHealthySansAvailable());
+  }, []);
+
+  return (
+      <CaloStack gap="size40">
+        {showIntro ? (
+        <>
+          <CaloSurface padding="size16" elevation="raised">
+            <CaloStack gap="size12">
+              <CaloInline align="center" justify="between" wrap>
+                <CaloInline align="center" gap="size10">
+                  <CaloLogo variant="mark" size="sm" />
+                  <CaloBadge label="Expo gallery" variant="brand" />
+                </CaloInline>
+                <CaloButton label="Back home" variant="tertiary" size="small" onPress={() => router.push("/")} />
+              </CaloInline>
+              <CaloText role="bodyMuted">
+                This is not Storybook yet. It is a runnable component showroom inside the same prototype app agents use to build Calo UI.
+              </CaloText>
+            </CaloStack>
+          </CaloSurface>
+
+          <ComponentGalleryFilters selectedFilter={selectedFilter} visibleSectionCount={visibleSectionCount} onFilterChange={setSelectedFilter} />
+        </>
+        ) : null}
+
+        {filterVisible("foundations") ? (
+        <GallerySection title="Identity" label="Foundations">
+          <CaloInline align="center" gap="size16" wrap>
+            <CaloLogo variant="wordmark" size="md" />
+            <CaloLogo variant="mark" size="md" />
+            <CaloVisual name="green-gift" size="lg" />
+            <CaloVisual name="calo-truck" size="lg" />
+            <CaloVisual name="club-wallet" size="lg" />
+          </CaloInline>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("foundations") ? (
+        <GallerySection title="Typography" label="Foundations">
+          <VariantGroup title="Screen hierarchy">
+            <CaloStack gap="size10">
+              <TypographySpecimen roleName="display" role="display" sample="Aa" usage="High-impact moments only" />
+              <CaloDivider />
+              <TypographySpecimen roleName="title" role="title" sample="Tomorrow's lunch" usage="Major card titles" />
+              <CaloDivider />
+              <TypographySpecimen roleName="section" role="section" sample="Choose your meals" usage="Product modules" />
+              <CaloDivider />
+              <TypographySpecimen roleName="body" role="body" sample="Normal content copy" usage="Primary reading text" />
+              <CaloDivider />
+              <TypographySpecimen roleName="bodyMuted" role="bodyMuted" sample="Supporting copy" usage="Secondary explanations" />
+              <CaloDivider />
+              <TypographySpecimen roleName="caption" role="caption" sample="Compact label" usage="Component-owned labels" />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Desktop utility roles">
+            <CaloStack gap="size10">
+              <TypographySpecimen roleName="heading4" role="heading4" sample="Preview" usage="Pane headings and compact chrome" />
+              <CaloDivider />
+              <TypographySpecimen roleName="paragraphMedium" role="paragraphMedium" sample="Starter Prototype" usage="Sidebar rows and desktop copy" />
+              <CaloDivider />
+              <TypographySpecimen roleName="paragraphMediumStrong" role="paragraphMediumStrong" sample="Selected value" usage="Important compact values" />
+              <CaloDivider />
+              <TypographySpecimen roleName="captionSmall" role="captionSmall" sample="queued" usage="Metadata and quiet labels" />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Arabic roles">
+            {healthySansAvailable ? (
+            <CaloStack gap="size10">
+              <TypographySpecimen roleName="title · ar" role="title" language="ar" sample="وجبة الغداء" usage="Arabic major titles" />
+              <CaloDivider />
+              <TypographySpecimen roleName="body · ar" role="body" language="ar" sample="نص عربي لتفاصيل قصيرة." usage="Arabic content copy" />
+              <CaloDivider />
+              <TypographySpecimen roleName="captionSmall · ar" role="captionSmall" language="ar" sample="حالة مختصرة" usage="Arabic metadata" />
+            </CaloStack>
+            ) : (
+              <CaloText role="paragraphMedium" tone="danger">
+                Healthy Sans is not loaded in this runtime, so Arabic specimens are hidden until the font assets are available.
+              </CaloText>
+            )}
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("foundations") ? (
+        <GallerySection title="Carousel" label="Containers">
+          <VariantGroup title="Generic item container">
+            <CaloCarousel pageControl>
+              <CaloSurface padding="size20" elevation="raised" radius="radius6">
+                <CaloStack gap="size12">
+                  <CaloInline align="center" justify="between">
+                    <CaloBadge label="Plan" variant="brand" />
+                    <CaloIcon common="calendar" size="md" tone="brand" />
+                  </CaloInline>
+                  <CaloStack gap="size8">
+                    <CaloText role="section">Your next delivery</CaloText>
+                    <CaloText role="bodyMuted">Breakfast and lunch arrive tomorrow between 8:00 - 9:00 AM.</CaloText>
+                  </CaloStack>
+                </CaloStack>
+              </CaloSurface>
+              <CaloSurface padding="size20" elevation="raised" radius="radius6">
+                <CaloStack gap="size12">
+                  <CaloInline align="center" justify="between">
+                    <CaloBadge label="Cafe" variant="neutral" />
+                    <CaloVisual name="smoothie-1" size="md" />
+                  </CaloInline>
+                  <CaloStack gap="size8">
+                    <CaloText role="section">Cafe pickup</CaloText>
+                    <CaloText role="bodyMuted">Keep campaign, product, or status cards in a stable horizontal rail.</CaloText>
+                  </CaloStack>
+                </CaloStack>
+              </CaloSurface>
+              <CaloSurface padding="size20" elevation="raised" radius="radius6">
+                <CaloStack gap="size12">
+                  <CaloInline align="center" justify="between">
+                    <CaloBadge label="Rewards" variant="brand" />
+                    <CaloIcon common="gift" size="md" tone="brand" />
+                  </CaloInline>
+                  <CaloStack gap="size8">
+                    <CaloText role="section">Club balance</CaloText>
+                    <CaloText role="bodyMuted">Use the carousel as the scroll owner; items keep their own content grammar.</CaloText>
+                  </CaloStack>
+                </CaloStack>
+              </CaloSurface>
+            </CaloCarousel>
+          </VariantGroup>
+          <VariantGroup title="Promotion banner rail">
+            <CaloCarousel>
+              <CaloBanner
+                variant="promotion"
+                title="Summer smoothies are back"
+                description="Fresh blends with your next Cafe order."
+                image={smoothieImage}
+                tagLabel="Cafe offer"
+                onPress={previewOnly}
+              />
+              <CaloBanner
+                variant="promotion"
+                title="Fuel your training week"
+                description="High-protein meals matched to your goals."
+                image={mealImage}
+                tagLabel="Featured"
+                onPress={previewOnly}
+              />
+            </CaloCarousel>
+          </VariantGroup>
+          <VariantGroup title="Compact product rail">
+            <CaloCarousel itemSize="auto" pageControl={false}>
+              <CaloCafeProductCard
+                image={smoothieImage}
+                name="Iced Americano"
+                calories="0 cal"
+                price="2.8 BHD"
+                action="add"
+                scrolled
+                onPress={previewOnly}
+                onAddPress={previewOnly}
+              />
+              <CaloCafeProductCard
+                image={smoothieImage}
+                name="Iced Latte"
+                calories="125 cal"
+                price="2.8 BHD"
+                action="add"
+                scrolled
+                onPress={previewOnly}
+                onAddPress={previewOnly}
+              />
+              <CaloCafeProductCard
+                image={smoothieImage}
+                name="Iced Mocha Latte"
+                calories="210 cal"
+                price="2.2 BHD"
+                oldPrice="2.8 BHD"
+                action="add"
+                scrolled
+                onPress={previewOnly}
+                onAddPress={previewOnly}
+              />
+              <CaloCafeProductCard
+                image={smoothieImage}
+                name="Rose Latte"
+                calories="229 cal"
+                price="2.8 BHD"
+                discountLabel="Spring Menu"
+                action="add"
+                scrolled
+                onPress={previewOnly}
+                onAddPress={previewOnly}
+              />
+            </CaloCarousel>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("navigation") ? (
+        <GallerySection title="Navigation" label="Bars">
+          <VariantGroup title="Top action bars">
+            <CaloStack gap="size12">
+              <CaloTopActionBar
+                title="Meal details"
+                leadingActions={[{ label: "Back", icon: <CaloIcon common="back" />, onPress: previewOnly }]}
+                trailingActions={[{ label: "Help", icon: <CaloIcon common="help" />, onPress: previewOnly }]}
+                divider
+              />
+              <CaloTopActionBar
+                title="Swap meal"
+                trailingActions={[{ label: "Done", presentation: "text", onPress: previewOnly }]}
+                divider
+              />
+              <CaloTopActionBar
+                progress={{ value: 2, max: 5, accessibilityLabel: "Step 2 of 5" }}
+                leadingActions={[{ label: "Back", icon: <CaloIcon common="back" />, onPress: previewOnly }]}
+                trailingActions={[{ label: "Help", icon: <CaloIcon common="help" />, onPress: previewOnly }]}
+              />
+              <CaloTopActionBar
+                leadingActions={[{ label: "Back", icon: <CaloIcon common="back" />, onPress: previewOnly }]}
+                trailingActions={[
+                  { label: "Help", icon: <CaloIcon common="help" />, onPress: previewOnly },
+                  { label: "Close", icon: <CaloIcon common="close" />, onPress: previewOnly }
+                ]}
+              />
+              <CaloTopActionBar
+                title="تفاصيل الوجبة"
+                language="ar"
+                leadingActions={[{ label: "Back", icon: <CaloIcon common="back" />, onPress: previewOnly }]}
+                trailingActions={[{ label: "Help", icon: <CaloIcon common="help" />, onPress: previewOnly }]}
+                divider
+              />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Top appbar recipes">
+            <CaloStack gap="size12">
+              <CaloContextTopBar
+                leadingAction={{ label: "Cancel", onPress: previewOnly }}
+                context={{ label: "Regular", value: "SAR 2.7" }}
+                trailingAction={{ label: "Done", onPress: previewOnly }}
+              />
+              <CaloCenteredTitleTopBar
+                title="Swap meal"
+                action={{ label: "Done", onPress: previewOnly }}
+              />
+              <CaloInlineHeader
+                eyebrow="Pickup from"
+                title="Seef Mall"
+                titleAction={{ label: "Change pickup", onPress: previewOnly }}
+                pillAction={{ label: "Rewards", icon: <CaloIcon common="gift" size="sm" tone="brand" weight="fill" />, onPress: previewOnly }}
+                iconAction={{ label: "Search", icon: <CaloIcon common="search" />, onPress: previewOnly }}
+              />
+              <CaloLargeTitleHeader
+                title="Market"
+                pillAction={{ label: "Rewards", icon: <CaloIcon common="gift" size="sm" tone="brand" weight="fill" />, onPress: previewOnly }}
+                iconAction={{ label: "AI search", icon: <CaloIcon common="sparkleSearch" />, onPress: previewOnly }}
+              />
+              <CaloSummaryHeader
+                eyebrow="Cafe rewards"
+                value="1234 points"
+                valueIcon={<CaloIcon common="gift" size="sm" tone="default" weight="fill" />}
+                leadingAction={{ label: "Back", icon: <CaloIcon common="back" />, onPress: previewOnly }}
+              />
+              <CaloLargeTitleHeader
+                title="Shopping bag"
+                iconAction={{ label: "Close", icon: <CaloIcon common="close" />, onPress: previewOnly }}
+              />
+              <CaloContextTopBar
+                language="ar"
+                leadingAction={{ label: "إلغاء", onPress: previewOnly }}
+                context={{ label: "عادي", value: "SAR 2.7" }}
+                trailingAction={{ label: "تم", onPress: previewOnly }}
+              />
+              <CaloLargeTitleHeader
+                language="ar"
+                title="الماركت"
+                pillAction={{ label: "مكآفات", icon: <CaloIcon common="gift" size="sm" tone="brand" weight="fill" />, iconPosition: "trailing", onPress: previewOnly }}
+                iconAction={{ label: "بحث ذكي", icon: <CaloIcon common="sparkleSearch" />, onPress: previewOnly }}
+              />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Main hub bottom navigation">
+            <CaloBottomNavigation selectedId={bottomNavigationTab} onSelect={setBottomNavigationTab} />
+          </VariantGroup>
+          <VariantGroup title="Context screen">
+            <CaloContextScreen
+              title="Meal plan paused"
+              description="Your meal deliveries are paused from Tuesday, 29 June. Resume now to continue receiving your favorite meals!"
+              visual={<CaloVisual name="pause" size="lg" />}
+              footer={<CaloButton label="Resume deliveries" size="large" fullWidth onPress={previewOnly} />}
+              topBar={
+                <CaloLargeTitleHeader
+                  title="Paused"
+                  pillAction={{ label: "Refer & earn", icon: <CaloIcon common="gift" size="sm" tone="brand" weight="fill" />, iconPosition: "leading", onPress: previewOnly }}
+                />
+              }
+              bottomBar={<CaloBottomNavigation selectedId="meals" onSelect={() => previewOnly()} />}
+            />
+          </VariantGroup>
+          <VariantGroup title="Date bars">
+            <CaloStack gap="size12">
+              <CaloDateBar
+                selectedId={selectedDate}
+                onSelect={setSelectedDate}
+                items={[
+                  { id: "may-25", label: "25", dayLabel: "F" },
+                  { id: "may-26", label: "26", dayLabel: "S" },
+                  { id: "may-27", label: "27", dayLabel: "S" },
+                  { id: "may-28", label: "28", dayLabel: "M", state: "today" },
+                  { id: "may-29", label: "29", dayLabel: "T" },
+                  { id: "may-30", label: "30", dayLabel: "W" },
+                  { id: "may-31", label: "31", dayLabel: "T" }
+                ]}
+              />
+              <CaloDateBar
+                sticky
+                selectedId="fri"
+                items={[
+                  { id: "fri", label: "25", dayLabel: "F" },
+                  { id: "sat", label: "26", dayLabel: "S" },
+                  { id: "sun", label: "27", dayLabel: "S" },
+                  { id: "mon", label: "28", dayLabel: "M", state: "today" },
+                  { id: "tue", label: "29", dayLabel: "T" },
+                  { id: "wed", label: "30", dayLabel: "W" },
+                  { id: "thu", label: "31", dayLabel: "T" }
+                ]}
+              />
+              <CaloInline align="center" gap="size12" wrap>
+                <CaloDateBarItem id="skip" label="24" dayLabel="S" status="skip" />
+                <CaloDateBarItem id="pause-one" label="24" dayLabel="S" status="pause" />
+                <CaloDateBarItem id="pause-range" label="24" endLabel="29" status="pause" state="selected" />
+                <CaloDateBarItem id="expired" label="24" dayLabel="S" status="expired" />
+                <CaloDateBarItem id="exclude" label="20" endLabel="24" status="exclude" state="selected" />
+                <CaloDateBarItem id="arabic" label="24" dayLabel="س" status="skip" language="ar" state="selected" />
+              </CaloInline>
+            </CaloStack>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("actions") ? (
+        <GallerySection title="Actions" label="Buttons">
+          <VariantGroup title="Button variants">
+            <CaloInline align="center" gap="size10" wrap>
+              <CaloButton label="Continue" onPress={previewOnly} />
+              <CaloButton label="Preview" variant="secondary" onPress={previewOnly} />
+              <CaloButton label="Tools" variant="utility" onPress={previewOnly} />
+              <CaloButton label="Remove" variant="danger" onPress={previewOnly} />
+              <CaloButton label="Learn more" variant="link" onPress={previewOnly} />
+            </CaloInline>
+          </VariantGroup>
+          <VariantGroup title="Button sizes">
+            <CaloStack gap="size10">
+              <ButtonSizeRow label="Large">
+                <CaloButton label="Continue" size="large" onPress={previewOnly} />
+                <CaloButton label="Preview" variant="secondary" size="large" onPress={previewOnly} />
+              </ButtonSizeRow>
+              <CaloDivider />
+              <ButtonSizeRow label="Medium">
+                <CaloButton label="Continue" size="medium" onPress={previewOnly} />
+                <CaloButton label="Preview" variant="secondary" size="medium" onPress={previewOnly} />
+              </ButtonSizeRow>
+              <CaloDivider />
+              <ButtonSizeRow label="Small">
+                <CaloButton label="Continue" size="small" onPress={previewOnly} />
+                <CaloButton label="Preview" variant="secondary" size="small" onPress={previewOnly} />
+              </ButtonSizeRow>
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Icon button variants">
+            <CaloInline align="center" gap="size10" wrap>
+              <CaloIconButton label="Confirm" icon={<CaloIcon common="check" />} variant="primary" onPress={previewOnly} />
+              <CaloIconButton label="Search" icon={<CaloIcon common="search" />} variant="secondary" onPress={previewOnly} />
+              <CaloIconButton label="Settings" icon={<CaloIcon common="settings" />} variant="neutral" onPress={previewOnly} />
+              <CaloIconButton label="Filter" icon={<CaloIcon common="filter" />} variant="outline" onPress={previewOnly} />
+              <CaloIconButton label="Delete" icon={<CaloIcon common="remove" />} variant="danger" onPress={previewOnly} />
+            </CaloInline>
+          </VariantGroup>
+          <VariantGroup title="Icon button sizes">
+            <CaloStack gap="size10">
+              <ButtonSizeRow label="Large">
+                <CaloIconButton label="Large confirm" icon={<CaloIcon common="check" />} variant="primary" size="large" onPress={previewOnly} />
+                <CaloIconButton label="Large filter" icon={<CaloIcon common="filter" />} variant="outline" size="large" onPress={previewOnly} />
+              </ButtonSizeRow>
+              <CaloDivider />
+              <ButtonSizeRow label="Medium">
+                <CaloIconButton label="Medium confirm" icon={<CaloIcon common="check" />} variant="primary" size="medium" onPress={previewOnly} />
+                <CaloIconButton label="Medium filter" icon={<CaloIcon common="filter" />} variant="outline" size="medium" onPress={previewOnly} />
+              </ButtonSizeRow>
+              <CaloDivider />
+              <ButtonSizeRow label="Small">
+                <CaloIconButton label="Small confirm" icon={<CaloIcon common="check" />} variant="primary" size="small" onPress={previewOnly} />
+                <CaloIconButton label="Small filter" icon={<CaloIcon common="filter" />} variant="outline" size="small" onPress={previewOnly} />
+              </ButtonSizeRow>
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Bottom action bars">
+            <CaloStack gap="size12">
+              <CaloBottomActionBar primaryAction={{ label: "Continue", onPress: previewOnly }} divider />
+              <CaloBottomActionBar
+                primaryAction={{ label: "Apply", onPress: previewOnly }}
+                secondaryAction={{ label: "Clear", onPress: previewOnly }}
+                layout="horizontal"
+                divider
+              />
+              <CaloBottomActionBar
+                primaryAction={{ label: "Continue", disabled: true, onPress: previewOnly }}
+                secondaryAction={{ label: "I'm okay with everything", onPress: previewOnly }}
+                actionOrder="secondaryFirst"
+                layout="verticalTertiary"
+                divider
+              />
+              <CaloBottomActionBar
+                primaryAction={{ label: "Add", priceLabel: "2.8 BHD", onPress: previewOnly }}
+                summary={{ amount: { value: "2,200", unit: "AED", suffix: "per month" }, description: "VAT inclusive" }}
+                divider
+              />
+              <CaloBottomActionBar
+                primaryAction={{ label: "Pay with", paymentMark: "applePay", onPress: previewOnly }}
+                summary={{ amount: { value: "2,420", currency: "SAR" }, description: "VAT inclusive" }}
+                divider
+              />
+              <CaloBottomActionBar
+                primaryAction={{ label: "Add", priceLabel: "2.8 BHD", onPress: previewOnly }}
+                stepper={{
+                  value: actionBarQuantity,
+                  onIncrement: () => setActionBarQuantity((value) => value + 1),
+                  onDecrement: () => setActionBarQuantity((value) => Math.max(0, value - 1))
+                }}
+                divider
+              />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Bottom sheets">
+            <CaloStack gap="size20">
+              <CaloButton label="Open real draggable sheet" variant="secondary" onPress={() => setModalSheetOpen(true)} />
+              <CaloBottomSheet
+                open={modalSheetOpen}
+                onOpenChange={setModalSheetOpen}
+                presentation="modal"
+                type="information"
+                title="Real bottom sheet"
+                description="This sheet slides in, drags down, and dismisses through Gorhom."
+                visual={<CaloVisual name="green-gift" size="xl" />}
+                primaryAction={{ label: "Close", onPress: () => setModalSheetOpen(false) }}
+              />
+              <CaloBottomSheet
+                width="figma"
+                title="Maximum 1 line title"
+                description="Use this space to put a maximum of two lines of your description text."
+                primaryAction={{ label: "Label", onPress: previewOnly }}
+              >
+                <CaloSurface padding="size20" radius="radius3">
+                  <CaloText role="paragraphMedium" tone="muted">Replace this content</CaloText>
+                </CaloSurface>
+              </CaloBottomSheet>
+              <CaloBottomSheet
+                width="figma"
+                type="information"
+                title="Title goes here"
+                description="Use this line for the description text."
+                visual={<CaloVisual name="green-gift" size="xl" />}
+                primaryAction={{ label: "Label", onPress: previewOnly }}
+              />
+              <CaloBottomSheet
+                width="figma"
+                title="العنوان يذهب هنا"
+                description="استخدم هذه المساحة لوصف مختصر."
+                language="ar"
+                primaryAction={{ label: "استمرار", onPress: previewOnly }}
+              >
+                <CaloStack gap="size12">
+                  <CaloText role="paragraphMedium" language="ar">استبدل هذا المحتوى.</CaloText>
+                  <CaloText role="paragraphMedium" language="ar" tone="muted">يحافظ المكون على التمرير والكروم القياسي دون حالة محلية.</CaloText>
+                </CaloStack>
+              </CaloBottomSheet>
+            </CaloStack>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("actions") ? (
+        <GallerySection title="Compact States" label="Badges">
+          <VariantGroup title="Large badges">
+          <CaloInline align="center" gap="size8" wrap>
+            <CaloBadge label="Applied" variant="brand" size="big" leadingIcon trailingIcon />
+            <CaloBadge label="Draft" variant="neutral" size="big" leadingIcon />
+            <CaloBadge label="Remove" variant="danger" size="big" trailingIcon />
+            <CaloBadge label="Meal plans" variant="outline" size="big" />
+            <CaloBadge label="VIP" variant="custom" size="big" />
+          </CaloInline>
+          </VariantGroup>
+          <VariantGroup title="Small badges">
+          <CaloInline align="center" gap="size8" wrap>
+            <CaloBadge label="Fresh" variant="brand" />
+            <CaloBadge label="Info" variant="neutral" />
+            <CaloBadge label="Risk" variant="danger" />
+            <CaloBadge label="Filter" variant="outline" />
+            <CaloBadge label="Special" variant="custom" />
+          </CaloInline>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("selection") ? (
+        <GallerySection title="Selection" label="Controls">
+          <VariantGroup title="Tab menu groups">
+            <CaloStack gap="size12">
+              <CaloTabMenuGroup items={tabMenuOptions.slice(0, 2)} selectedId={outlineTab} onSelect={setOutlineTab} />
+              <CaloTabMenuGroup items={tabMenuOptions} selectedId={outlineTab} onSelect={setOutlineTab} width="hug" />
+              <CaloTabMenuGroup items={chipMenuOptions.slice(0, 2)} selectedId={chipTab} onSelect={setChipTab} variant="chips" />
+              <CaloTabMenuGroup items={chipMenuOptions} selectedId={chipTab} onSelect={setChipTab} variant="chips" width="hug" />
+            </CaloStack>
+          </VariantGroup>
+          <CaloInline align="center" gap="size16" wrap>
+            <SelectionPreview label="Regular meal">
+              <CaloRadio selected={radioSelected === "regular"} label="Regular meal" onSelectedChange={() => setRadioSelected("regular")} />
+            </SelectionPreview>
+            <SelectionPreview label="Low carb">
+              <CaloRadio selected={radioSelected === "low-carb"} label="Low carb" onSelectedChange={() => setRadioSelected("low-carb")} />
+            </SelectionPreview>
+            <SelectionPreview label="Add cutlery">
+              <CaloCheckbox selected={checkboxSelected} label="Add cutlery" onSelectedChange={setCheckboxSelected} />
+            </SelectionPreview>
+            <SelectionPreview label="Disabled">
+              <CaloCheckbox selected disabled />
+            </SelectionPreview>
+          </CaloInline>
+          <CaloInline align="center" gap="size16" wrap>
+            <CaloToggle label="Enable meals" selected={toggleSelected} onSelectedChange={setToggleSelected} />
+            <CaloToggle label="Loading selected" selected loading onSelectedChange={previewOnly} />
+          </CaloInline>
+          <VariantGroup title="Selection card radio group">
+            <CaloInline align="start" gap="size16" wrap>
+              <CaloSelectionCardRadioGroup
+                selectedId={selectionCardOption}
+                onSelect={setSelectionCardOption}
+                options={[
+                  { id: "daily", title: "Daily delivery", description: "Meals arrive every day at your chosen time." },
+                  { id: "weekly", title: "Weekly delivery", description: "Get a weekly box with meals ready to heat." },
+                  { id: "paused", title: "Pause deliveries", description: "Temporarily stop meals while you travel.", disabled: true }
+                ]}
+              />
+              <CaloSelectionCardRadioGroup
+                language="ar"
+                selectedId={selectionCardOption}
+                onSelect={setSelectionCardOption}
+                options={[
+                  { id: "daily", title: "توصيل يومي", description: "تصل وجباتك كل يوم في الوقت الذي تختاره." },
+                  { id: "weekly", title: "توصيل أسبوعي", description: "استلم صندوقا أسبوعيا بوجبات جاهزة للتسخين." },
+                  { id: "paused", title: "إيقاف التوصيل مؤقتا", description: "أوقف الوجبات مؤقتا أثناء السفر.", disabled: true }
+                ]}
+              />
+              <CaloSelectionCardRadioItem title="Standalone row" description="Use only when another component owns the group shell." selected onPress={previewOnly} />
+            </CaloInline>
+          </VariantGroup>
+          <VariantGroup title="Selection card recipes">
+            <CaloInline align="start" gap="size16" wrap>
+              <CaloSelectionCard
+                title="Option title"
+                description="Descriptive text goes here"
+                selected={selectionCardChoice === "visual"}
+                visual="face-savoring-food"
+                visualSize="small"
+                onPress={() => setSelectionCardChoice("visual")}
+              />
+              <CaloSelectionCard
+                title="Option title"
+                selected={selectionCardChoice === "control"}
+                control="checkbox"
+                density="compact"
+                onPress={() => setSelectionCardChoice("control")}
+              />
+              <CaloSelectionCard
+                title="Smoothie"
+                description="Description goes here"
+                selected={selectionCardChoice === "value"}
+                visual="smoothie-l"
+                visualPosition="leading"
+                visualSize="medium"
+                trailingMeta={<CaloSelectionCardPrice value="2.7" currency="BHD" oldValue="3.1 BHD" />}
+                onPress={() => setSelectionCardChoice("value")}
+              />
+              <CaloSelectionCard
+                title="club"
+                titleTone="brand"
+                titleVariant="program"
+                selected={selectionCardChoice === "program"}
+                width="full"
+                titleTrailingMeta={
+                  <CaloToggle
+                    label="Join program"
+                    selected={selectionCardChoice === "program"}
+                    onSelectedChange={(selected) => setSelectionCardChoice(selected ? "program" : "value")}
+                  />
+                }
+                bodyMeta={
+                  <CaloInline align="center" justify="between" gap="size16">
+                    <CaloInline align="center" gap="size4" wrap>
+                      <CaloText role="paragraphLargeStrong">Save</CaloText>
+                      <CaloPriceText value="440" currency="SAR" tone="brand" size="medium" />
+                      <CaloText role="paragraphLargeStrong">by joining Club</CaloText>
+                    </CaloInline>
+                    <CaloPriceText value="699" currency="SAR" size="medium" />
+                  </CaloInline>
+                }
+                onPress={() => setSelectionCardChoice("program")}
+              />
+              <CaloSelectionCard
+                title="For myself"
+                description="Descriptive explanatory text lines go here"
+                selected={selectionCardChoice === "media-control"}
+                control="checkbox"
+                density="media"
+                visual="meal-single-1"
+                visualSize="large"
+                onPress={() => setSelectionCardChoice("media-control")}
+              />
+              <CaloSelectionCard
+                title="Bag 2"
+                selected={selectionCardChoice === "metric-summary"}
+                control="checkbox"
+                density="media"
+                bodyMeta={<CaloSelectionCardMacros calories="1234 kcal" macros={[{ label: "Protein", value: "120g", tone: "protein" }, { label: "Carbs", value: "123g", tone: "carbs" }, { label: "Fat", value: "123g", tone: "fat" }]} />}
+                onPress={() => setSelectionCardChoice("metric-summary")}
+              />
+              <CaloSelectionCard
+                language="ar"
+                title="عنوان الخيار"
+                description="النص الوصفي يظهر هنا"
+                selected={selectionCardChoice === "arabic"}
+                control="checkbox"
+                visual="meal-single-1"
+                visualSize="large"
+                density="media"
+                onPress={() => setSelectionCardChoice("arabic")}
+              />
+            </CaloInline>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("selection") ? (
+        <GallerySection title="Quantity" label="Steppers">
+          <VariantGroup title="Stepper variants">
+          <CaloInline align="center" gap="size12" wrap>
+            <CaloStepper value={stepperValue} size="large" onIncrement={() => setStepperValue((value) => value + 1)} onDecrement={() => setStepperValue((value) => Math.max(0, value - 1))} />
+            <CaloStepper value={compactValue} variant="compact" compactMode="auto" onIncrement={() => setCompactValue((value) => value + 1)} onDecrement={() => setCompactValue((value) => Math.max(0, value - 1))} />
+            <CaloStepper value={1} variant="compact" compactMode="delete" onIncrement={previewOnly} onDecrement={previewOnly} />
+          </CaloInline>
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("forms") ? (
+        <GallerySection title="Inputs" label="Forms">
+          <CaloInput label="Full name" required helperText="Use the name shown on the account." value={fieldValue} onChangeText={setFieldValue} />
+          <CaloTextArea label="Delivery note" optional maxLength={120} value={noteValue} onChangeText={setNoteValue} />
+          <CaloVerificationCodeInput value={codeValue} helperText="Enter the 6 digit code sent to your phone." onChangeText={setCodeValue} />
+          <CaloPhoneInput value={phoneValue} helperText="We only use this for delivery updates." onChangeText={setPhoneValue} />
+          <CaloCardDetailsInput
+            cardNumber={cardNumber}
+            expiry={expiry}
+            cvv={cvv}
+            helperText="Card details stay grouped as one payment object."
+            onCardNumberChange={setCardNumber}
+            onExpiryChange={setExpiry}
+            onCvvChange={setCvv}
+          />
+          <CaloPromoCodeInput value={promoValue} state="applied" helperText="Promo codes use the ticket-leading field with a right action." onChangeText={setPromoValue} onApply={previewOnly} />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("feedback") ? (
+        <GallerySection title="Feedback" label="Toast">
+          <CaloToast message="Your plan was updated successfully." state="success" onDismiss={previewOnly} />
+          <CaloToast message="Some meals are unavailable for this branch." state="warning" onDismiss={previewOnly} />
+          <CaloToast message="Payment failed. Try another method." state="error" onDismiss={previewOnly} />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("commerce") ? (
+        <GallerySection title="Offers" label="Voucher">
+          <VariantGroup title="Banners">
+            <CaloStack gap="size12">
+              <CaloBanner
+                variant="optIn"
+                title="Unlock 7 days offer"
+                description={[
+                  "Get ",
+                  { text: "10% off +", strong: true },
+                  " ",
+                  { text: "free daily juice", strong: true },
+                  " worth 366 SAR with monthly & weekly plan."
+                ]}
+                visualName="smoothie-1"
+                control={{ type: "toggle", label: "Unlock 7 days offer", selected: bannerSelected, onSelectedChange: setBannerSelected }}
+              />
+              <CaloBanner
+                variant="optIn"
+                title="عرض فتح لمدة 7 أيام"
+                description="احصل على خصم 10% + عصير مجاني يومياً بقيمة 366 ريال سعودي مع الخطة الشهرية والأسبوعية."
+                language="ar"
+                selected
+                visualName="smoothie-1"
+                control={{ type: "toggle", label: "عرض فتح لمدة 7 أيام", selected: true, onSelectedChange: previewOnly }}
+              />
+              <CaloBanner
+                variant="action"
+                state="warning"
+                title={["Your plan is ending in ", { text: "1 day", tone: "warning" }, "!"]}
+                description="Today is your last delivery. Renew now to continue your meal plan."
+                action={{ label: "Renew my plan", onPress: previewOnly }}
+                onDismiss={previewOnly}
+                visualName="meal-tray-fork"
+              />
+              <CaloBanner
+                variant="action"
+                title="You skipped this bag"
+                description="You skipped this bag's delivery so there are no meals for us to show you."
+                action={{ label: "Unskip bag", onPress: previewOnly }}
+                onDismiss={previewOnly}
+                visualName="calo-bag-nice-today"
+              />
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Promotion banners">
+            <CaloStack gap="size16">
+              <CaloCarousel>
+                <CaloBanner
+                  variant="promotion"
+                  title="Summer smoothies are back"
+                  description="Fresh blends with your next Cafe order."
+                  image={smoothieImage}
+                  tagLabel="Cafe offer"
+                  onPress={previewOnly}
+                />
+                <CaloBanner
+                  variant="promotion"
+                  title="Fuel your training week"
+                  description="High-protein meals matched to your goals."
+                  image={mealImage}
+                  tagLabel="Featured"
+                  onPress={previewOnly}
+                />
+              </CaloCarousel>
+              <CaloBanner
+                variant="promotion"
+                title="Summer smoothies are back"
+                description="Fresh blends with your next Cafe order."
+                image={smoothieImage}
+                tagLabel="Cafe offer"
+                onPress={previewOnly}
+                onDismiss={previewOnly}
+              />
+              <CaloInline gap="size16" wrap>
+                <CaloBanner
+                  variant="promotion"
+                  title="Fuel your training week"
+                  description="High-protein meals matched to your goals."
+                  image={mealImage}
+                  tagLabel="Featured"
+                  onPress={previewOnly}
+                />
+                <CaloBanner
+                  variant="promotion"
+                  title="عودة عروض العصائر"
+                  description="خلطات منعشة مع طلبك القادم من كافيه."
+                  image={smoothieImage}
+                  language="ar"
+                  tagLabel="عرض كافيه"
+                  onPress={previewOnly}
+                  onDismiss={previewOnly}
+                />
+              </CaloInline>
+            </CaloStack>
+          </VariantGroup>
+          <VariantGroup title="Voucher states">
+          <CaloVoucherCard title="Get 20% off" condition="Applies to orders above 12 BHD" state="available" onPress={previewOnly} onInfoPress={previewOnly} />
+          <CaloVoucherCard title="Free smoothie" condition="Applied to your next delivery" state="applied" visualName="smoothie-1" onPress={previewOnly} />
+          <CaloVoucherCard title="Club reward" condition="This voucher is no longer valid" state="disabled" visualName="green-gift" />
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("commerce") ? (
+        <GallerySection title="Delivery Status" label="Home">
+          <VariantGroup title="Expanded active states">
+            <CaloDeliveryStatusCard status="active" onSkipPress={previewOnly} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="active-address-time" onSkipPress={previewOnly} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="active-address" onSkipPress={previewOnly} onToggleExpanded={previewOnly} />
+          </VariantGroup>
+          <VariantGroup title="Expanded progress states">
+            <CaloDeliveryStatusCard status="ready" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="on-the-way" statusText="Your driver is on the way" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="nearby" statusText="Nearby, delivering to Home" etaText="Arriving by 8:45 - 9:00 AM" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="delay" statusText="Running a bit late, but it's coming!" onToggleExpanded={previewOnly} />
+          </VariantGroup>
+          <VariantGroup title="Collapsed states">
+            <CaloDeliveryStatusCard status="active" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="active-address-time" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="active-address" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="ready" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="on-the-way" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="nearby" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="delay" defaultExpanded={false} onToggleExpanded={previewOnly} />
+          </VariantGroup>
+          <VariantGroup title="Terminal states">
+            <CaloDeliveryStatusCard status="delivered-rating" onNegativeRatingPress={previewOnly} onPositiveRatingPress={previewOnly} />
+            <CaloDeliveryStatusCard status="delivered-done" deliveredAtText="Delivered at 9:00 PM to Home" />
+            <CaloDeliveryStatusCard status="skipped" statusText="You skipped this delivery" deliveredAtText="No meals scheduled for this bag" />
+            <CaloDeliveryStatusCard status="cancelled" statusText="This delivery was cancelled" deliveredAtText="Contact support if this looks wrong" />
+            <CaloDeliveryStatusCard status="failed" statusText="We couldn't deliver this bag" deliveredAtText="Contact support to reschedule" />
+          </VariantGroup>
+          <VariantGroup title="Small screen">
+            <CaloDeliveryStatusCard status="active" size="compact" onSkipPress={previewOnly} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="active" defaultExpanded={false} size="compact" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="nearby" size="compact" statusText="Nearby, delivering to Home" etaText="Arriving by 8:45 - 9:00 AM" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard status="delivered-done" size="compact" deliveredAtText="Delivered at 9:00 PM to Home" />
+          </VariantGroup>
+          <VariantGroup title="Arabic states">
+            <CaloDeliveryStatusCard language="ar" status="active-address-time" onSkipPress={previewOnly} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard language="ar" status="active-address-time" defaultExpanded={false} onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard language="ar" status="nearby" statusText="قريب منك، يتم التوصيل إلى المنزل" etaText="يصل بين 8:45 - 9:00 ص" onToggleExpanded={previewOnly} />
+            <CaloDeliveryStatusCard language="ar" status="delivered-rating" onNegativeRatingPress={previewOnly} onPositiveRatingPress={previewOnly} />
+            <CaloDeliveryStatusCard language="ar" status="delivered-done" deliveredAtText="تم التوصيل الساعة 9:00 م إلى المنزل" />
+            <CaloDeliveryStatusCard language="ar" status="failed" statusText="تعذر توصيل هذه الحقيبة" deliveredAtText="تواصل مع الدعم لإعادة الجدولة" />
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("commerce") ? (
+        <GallerySection title="Payment" label="Methods">
+          <CaloPaymentMethodList
+            selectedId={paymentMethodId}
+            onSelect={setPaymentMethodId}
+            footerAction={{
+              label: "See all payment methods",
+              onPress: previewOnly,
+              trailingIcon: <CaloIcon name="CaretDown" tone="brand" size="sm" />
+            }}
+            options={[
+              { id: "wallet", type: "wallet", balance: "10 BHD" },
+              { id: "apple-pay", type: "applePay" },
+              { id: "saved-card", type: "savedCard", brand: "visa", last4: "4242" },
+              { id: "new-card", type: "newCard" },
+              { id: "tabby", type: "tabby", descriptionEmphasis: "Learn more", descriptionEmphasisTone: "brand" },
+              { id: "tamara", type: "tamara" }
+            ]}
+            newCardDetails={{
+              cardNumber,
+              expiry,
+              cvv,
+              onCardNumberChange: setCardNumber,
+              onExpiryChange: setExpiry,
+              onCvvChange: setCvv,
+              helperText: "We will verify your card with a small temporary charge."
+            }}
+          />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("food") ? (
+        <GallerySection title="Dietary Cards" label="Food">
+          <CaloInline gap="size16" wrap>
+            <CaloDietaryCard type="balanced" selected={dietaryPlan === "balanced"} onPress={() => setDietaryPlan("balanced")} />
+            <CaloDietaryCard type="highProtein" selected={dietaryPlan === "highProtein"} onPress={() => setDietaryPlan("highProtein")} />
+            <CaloDietaryCard type="personalized" selected={dietaryPlan === "personalized"} onPress={() => setDietaryPlan("personalized")} onEditMacrosPress={previewOnly} />
+            <CaloDietaryCard type="lowCarb" language="ar" selected={dietaryPlan === "lowCarb"} onPress={() => setDietaryPlan("lowCarb")} />
+          </CaloInline>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("food") ? (
+        <GallerySection title="Category Tile Grid" label="Food">
+          <CaloCategoryTileGrid items={cafeCategoryItems} onSelect={previewOnly} />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("food") ? (
+        <GallerySection title="Meal Cards" label="Food">
+          <CaloMacroSummary macros={macros} />
+          <CaloFoodPreferenceWarning label="Contains dairy" tone="warning" />
+          <CaloInline align="center" gap="size8" wrap>
+            <CaloRatingChip label="Loved it" selected={rating === "Loved it"} onPress={() => setRating("Loved it")} />
+            <CaloRatingChip label="Okay" selected={rating === "Okay"} onPress={() => setRating("Okay")} />
+          </CaloInline>
+          <CaloInline align="start" gap="size12" wrap>
+            <CaloCompactVariantTile
+              image={sauceImage}
+              title="Rose Sauce"
+              meta="120 kcal"
+              selected={selectedVariant === "rose"}
+              onPress={() => setSelectedVariant("rose")}
+            />
+            <CaloCompactVariantTile
+              image={sauceImage}
+              title="Spicy Sauce"
+              meta="80 kcal"
+              selected={selectedVariant === "spicy"}
+              onPress={() => setSelectedVariant("spicy")}
+            />
+            <CaloCompactVariantTile
+              image={sauceImage}
+              title="صلصة الورد"
+              meta="120 ك.كال"
+              language="ar"
+              selected={selectedVariant === "arabic"}
+              onPress={() => setSelectedVariant("arabic")}
+            />
+          </CaloInline>
+          <CaloProductTile
+            image={smoothieImage}
+            name="Mango protein smoothie"
+            calories="210 Cal"
+            price="2.4 BHD"
+            badges={[{ label: "New", variant: "brand" }]}
+            favorite
+            quantity={compactValue}
+            onFavoritePress={previewOnly}
+            onIncrement={() => setCompactValue((value) => value + 1)}
+            onDecrement={() => setCompactValue((value) => Math.max(0, value - 1))}
+          />
+          <CaloProductTile
+            image={mealImage}
+            name="Meal title goes here"
+            calories="123 kcal"
+            price="2.5 BHD"
+            badges={[{ label: "Label", variant: "neutral" }]}
+            metadataLayout="inline"
+          />
+          <CaloStack gap="size12">
+            <CaloCompactProductRowCard
+              image={smoothieImage}
+              title="The Brain Wizard Bar"
+              meta="150 kcal"
+              price="2.5"
+              priceUnit="BHD"
+              action="add"
+              onAddPress={() => setMarketQuantity(1)}
+            />
+            <CaloCompactProductRowCard
+              image={smoothieImage}
+              title="بار معالج الدماغ"
+              meta="495 ك.كال"
+              price="2.5"
+              priceUnit="د.ب"
+              action="stepper"
+              quantity={Math.max(1, marketQuantity)}
+              language="ar"
+              onIncrement={() => setMarketQuantity((value) => value + 1)}
+              onDecrement={() => setMarketQuantity((value) => Math.max(0, value - 1))}
+            />
+          </CaloStack>
+          <CaloInline gap="size16" wrap>
+            <CaloMarketProductCard
+              image={mealImage}
+              name="Maximum 2 lines of market product title"
+              price="3.5 BHD"
+              oldPrice="3.96 BHD"
+              discountLabel="15% off"
+              action={marketQuantity > 0 ? "stepper" : "add"}
+              quantity={marketQuantity}
+              onAddPress={() => setMarketQuantity(1)}
+              onIncrement={() => setMarketQuantity((value) => value + 1)}
+              onDecrement={() => setMarketQuantity((value) => Math.max(0, value - 1))}
+            />
+            <CaloCafeProductCard
+              image={smoothieImage}
+              name="Mango protein smoothie"
+              calories="210 kcal"
+              price="2.4 BHD"
+              action="stepper"
+              quantity={cafeQuantity}
+              scrolled
+              onIncrement={() => setCafeQuantity((value) => value + 1)}
+              onDecrement={() => setCafeQuantity((value) => Math.max(0, value - 1))}
+            />
+          </CaloInline>
+          <CaloSelectableMealTile
+            image={mealImage}
+            name="Chicken teriyaki rice bowl"
+            subtitle="Lunch"
+            calories="520 Cal"
+            macros={macros}
+            badges={[{ label: "High protein", variant: "brand" }]}
+            selected={mealSelected}
+            onPress={() => setMealSelected((selected) => !selected)}
+          />
+          <CaloMenuMealRow
+            image={mealImage}
+            name="Chicken teriyaki rice bowl"
+            mealType="Lunch"
+            calories="520 Cal"
+            macros={macros}
+            badges={[{ label: "New", variant: "outline" }]}
+            imageBottomBadge={{ label: "Contains dairy", tone: "danger" }}
+            favorite
+            onFavoritePress={previewOnly}
+            onSwapPress={previewOnly}
+            onCustomizePress={previewOnly}
+          />
+          <CaloMenuMealRow
+            image={smoothieImage}
+            name="Mango protein smoothie"
+            mealType="Snack"
+            calories="210 Cal"
+            macros={macros}
+            mode="rate"
+            selectedRatingId={rowRating}
+            onRatingSelect={setRowRating}
+          />
+          <CaloSwapMealCard image={mealImage} name="Grilled chicken with saffron rice" mealType="Dinner" calories="610 Cal" macros={macros} state="default" onPress={previewOnly} onFavoritePress={previewOnly} />
+          <CaloSwapMealCard image={mealImage} name="Grilled chicken with saffron rice" mealType="Dinner" calories="610 Cal" macros={macros} state="loading" />
+          <CaloSwapMealCard image={mealImage} name="Grilled chicken with saffron rice" mealType="Dinner" calories="610 Cal" macros={macros} state="fetching" />
+          <CaloSwapMealCard image={mealImage} name="Grilled chicken with saffron rice" mealType="Dinner" calories="610 Cal" macros={macros} state="selected" />
+          <CaloMealRow
+            image={mealImage}
+            name="Grilled chicken with saffron rice"
+            mealType="Dinner"
+            calories="610 Cal"
+            macros={macros}
+            badges={[{ label: "Chef pick", variant: "outline" }]}
+            warnings={[{ label: "Contains nuts", tone: "danger" }]}
+            selected
+            favorite
+            actionLabel="Swap"
+            onActionPress={previewOnly}
+            onFavoritePress={previewOnly}
+          />
+          <CaloMealRatingCard
+            image={mealImage}
+            title="Chicken teriyaki rice bowl"
+            description="Tell us how this meal landed so future menus learn your taste."
+            badgeLabel="Lunch"
+            selectedOptionId={cardRating}
+            onOptionSelect={setCardRating}
+          />
+          <CaloCustomizationOptionCard
+            image={ingredientPenneImage}
+            quantityTag="2x"
+            title="Penne"
+            metadata={["235 kcal", "120g"]}
+            price="(+ SAR 3)"
+            warning="Contains gluten"
+            detailsTitle="Ingredients"
+            details={["Durum wheat semolina, water, ", { text: "gluten", tone: "danger" }, ", sea salt."]}
+            macros={macros}
+            defaultExpanded
+            secondaryActionLabel="Swap sauce"
+            selected={checkboxSelected}
+            onPress={() => setCheckboxSelected((selected) => !selected)}
+            onSecondaryActionPress={previewOnly}
+          />
+          <CaloCustomizationOptionCard
+            image={ingredientPenneImage}
+            title="Penne"
+            metadata={["235 kcal", "120g"]}
+            detailsTitle="Ingredients"
+            details={["Durum wheat semolina, water, sea salt."]}
+            macros={macros}
+            selected={!checkboxSelected}
+            onPress={() => setCheckboxSelected((selected) => !selected)}
+          />
+          <CaloCustomizationOptionCard
+            image={ingredientPenneImage}
+            title="بيني"
+            metadata={["235 سعرة", "120غ"]}
+            price="(+ 3 ر.س)"
+            warning={{ label: "يحتوي على الغلوتين", tone: "danger" }}
+            detailsTitle="المكونات"
+            details={["سميد القمح القاسي، ماء، ", { text: "غلوتين", tone: "danger" }, "، ملح بحري."]}
+            macros={[
+              { label: "ب", value: "37غ", tone: "protein" },
+              { label: "ك", value: "42غ", tone: "carbs" },
+              { label: "د", value: "14غ", tone: "fat" }
+            ]}
+            defaultExpanded
+            secondaryActionLabel="بدل الصوص"
+            selected
+            language="ar"
+            onPress={previewOnly}
+            onSecondaryActionPress={previewOnly}
+          />
+          <CaloCustomizationOptionCard title="Choose spicy sauce" subtitle="One sauce per meal" price="Free" selectionType="radio" selected={radioSelected === "spicy"} onPress={() => setRadioSelected("spicy")} />
+          <CaloCustomizationOptionCard image={ingredientPenneImage} title="Unavailable pasta" metadata={["235 kcal", "120g"]} selected={false} disabled onPress={previewOnly} />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("commerce") ? (
+        <GallerySection title="Cart Items" label="Cafe + Market">
+          <VariantGroup title="Cart item variants">
+          <CaloCartItemCard
+            family="cafe"
+            image={mealImage}
+            name="Chicken katsu curry"
+            details="Extra sauce, no sesame"
+            price="3.5 BHD"
+            oldPrice="3.96 BHD"
+            quantity={stepperValue}
+            onEditPress={previewOnly}
+            onIncrement={() => setStepperValue((value) => value + 1)}
+            onDecrement={() => setStepperValue((value) => Math.max(0, value - 1))}
+          />
+          <CaloDivider />
+          <CaloCartItemCard family="market" image={marketImage} name="Organic salad bowl" price="2.9 BHD" quantity={1} onIncrement={previewOnly} onDecrement={previewOnly} />
+          <CaloDivider />
+          <CaloCartItemCard family="cafe" variant="loyalty" image={smoothieImage} name="Reward smoothie" details="Club reward item" price="Free" quantity={1} onEditPress={previewOnly} onIncrement={previewOnly} onDecrement={previewOnly} />
+          <CaloDivider />
+          <CaloCartItemCard family="cafe" variant="unavailable" image={mealImage} name="Breakfast egg wrap" price="2.1 BHD" unavailableLabel="Not available at this branch" onRemovePress={previewOnly} />
+          </VariantGroup>
+        </GallerySection>
+        ) : null}
+
+        {/* ===== Web / marketing components (Healthy UI "Web Components") ===== */}
+        {filterVisible("marketing") ? (
+        <GallerySection title="FAQ" label="Marketing">
+          <CaloFaqAccordion
+            expandMode="single"
+            defaultOpenIds={["pause"]}
+            items={[
+              { id: "pause", question: "How do I pause my subscription?", answer: "To put your subscription on hold, sign in to your account, go to 'Account Settings', and choose 'Pause Subscription'. You can set the duration of the pause according to your needs." },
+              { id: "delivery", question: "When will my meals arrive?", answer: "Your meals are delivered fresh before 7 AM on the days you choose." },
+              { id: "swap", question: "Can I swap a meal I don't like?", answer: "Yes — open the menu for that day and pick any alternative before the cut-off time." }
+            ]}
+          />
+          <CaloFaqAccordion
+            expandMode="multiple"
+            size="M"
+            language="ar"
+            defaultOpenIds={["pause"]}
+            items={[
+              { id: "pause", question: "كيف يمكنني إيقاف اشتراكي مؤقتًا؟", answer: 'لإيقاف اشتراكك مؤقتًا، سجّل الدخول إلى حسابك، ثم انتقل إلى "إعدادات الحساب"، واختر "إيقاف الاشتراك مؤقتًا".' },
+              { id: "delivery", question: "متى ستصل وجباتي؟", answer: "تصلك وجباتك طازجة قبل الساعة 7 صباحًا في الأيام التي تختارها." }
+            ]}
+          />
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("marketing") ? (
+        <GallerySection title="Marketing Cards" label="Marketing">
+          <CaloInline gap="size16" wrap>
+            <CaloTestimonialCard
+              avatar={{ uri: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200" }}
+              name="Safa Ebrahim"
+              subtitle="Calo subscription"
+              rating={5}
+              quote="I've been subscribed to Calo for over a year and a half now, and I can't imagine being without it! I reached my goal weight, but most of all, I love the flexibility and the outstanding customer service."
+            />
+            <CaloSupportPromptCard
+              title="Got more questions?"
+              description="Start a live chat with us or fill out the form. We're here to help!"
+              avatars={[
+                { uri: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120" },
+                { uri: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120" },
+                { uri: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120" }
+              ]}
+              action={{ label: "Chat with us", onPress: previewOnly }}
+            />
+            <CaloUgcCard
+              image={{ uri: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400" }}
+              avatar={{ uri: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120" }}
+              handle="@amaal"
+            />
+            <CaloFeatureCard
+              image={{ uri: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=600" }}
+              title="Calories and macros that match your goals"
+              description="Eat with confidence knowing every meal is cooked and portioned to your goals."
+            />
+          </CaloInline>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("marketing") ? (
+        <GallerySection title="Partner Cards" label="Marketing">
+          <CaloStack gap="size16">
+            <CaloPartnerCard
+              logo={<CaloText role="heading4">Fitness First</CaloText>}
+              locations={["Deira City Center", "Bur Juman Centre", "DIFC"]}
+              perks={["3 branches across Dubai", "Mixed gym & ladies gym", "Personal trainers & free classes"]}
+            />
+            <CaloPartnerCard
+              language="ar"
+              logo={<CaloText role="heading4">Fitness First</CaloText>}
+              locations={["سيتي سنتر ديرة", "مول بر جمان", "مركز المالي"]}
+              perks={["ثلاثة فروع في دبي", "صالة رياضية مختلطة وصالة رياضية للسيدات", "مدربون شخصيون ودروس مجانية"]}
+            />
+          </CaloStack>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("food") ? (
+        <GallerySection title="Plan Cards" label="Food">
+          <CaloPlanCardGrid>
+            <CaloPlanCard type="balanced" selected onSelect={previewOnly} onLearnMore={previewOnly} />
+            <CaloPlanCard type="highProtein" onSelect={previewOnly} onLearnMore={previewOnly} />
+            <CaloPlanCard type="chefPicks" onSelect={previewOnly} onLearnMore={previewOnly} />
+            <CaloPlanCard type="customMacros" onSelect={previewOnly} onLearnMore={previewOnly} />
+          </CaloPlanCardGrid>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("selection") ? (
+        <GallerySection title="Quantity Row" label="Steppers">
+          <CaloStack gap="size8">
+            <CaloQuantityRow label="Meals per day" value={webMeals} min={1} max={6} onIncrement={() => setWebMeals((v) => Math.min(6, v + 1))} onDecrement={() => setWebMeals((v) => Math.max(1, v - 1))} />
+            <CaloQuantityRow label="Protein boost" subLabel="+12g protein per meal" value={1} max={3} error="Limited to 3 per plan" onIncrement={previewOnly} onDecrement={previewOnly} />
+            <CaloQuantityRow label="وجبات في اليوم" subLabel="عدد الوجبات لكل يوم" value={webMeals} min={1} max={6} language="ar" onIncrement={() => setWebMeals((v) => Math.min(6, v + 1))} onDecrement={() => setWebMeals((v) => Math.max(1, v - 1))} />
+          </CaloStack>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("navigation") ? (
+        <GallerySection title="Pagination" label="Navigation">
+          <CaloStack gap="size24">
+            <CaloPagination page={paginationPage} pageCount={7} onChange={setPaginationPage} />
+            <CaloPagination page={paginationPage} pageCount={7} size="small" onChange={setPaginationPage} />
+            <CaloPagination page={paginationPage} pageCount={20} siblingCount={1} showPrevNext onChange={setPaginationPage} />
+            <CaloPagination page={paginationPage} pageCount={7} language="ar" onChange={setPaginationPage} />
+          </CaloStack>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("food") ? (
+        <GallerySection title="Meal Feature Cards" label="Food">
+          <CaloInline gap="size16" wrap>
+            <CaloMealMacroCard
+              image={{ uri: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600" }}
+              visual="avocado"
+              title="Low carb"
+              macros={[
+                { label: "Protein", value: "40%", tone: "protein" },
+                { label: "Carbs", value: "20%", tone: "carbs" },
+                { label: "Fat", value: "40%", tone: "fat" }
+              ]}
+            />
+            <CaloMealMacroCard
+              image={{ uri: "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=600" }}
+              visual="meat"
+              title="High Protein Plan"
+              macros={[
+                { label: "Protein", value: "50%", tone: "protein" },
+                { label: "Carbs", value: "25%", tone: "carbs" },
+                { label: "Fat", value: "25%", tone: "fat" }
+              ]}
+            />
+          </CaloInline>
+          <CaloInline gap="size16" wrap>
+            <CaloDishCard
+              image={{ uri: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=400" }}
+              calories="646 kcal"
+              isNew
+              title="Spiced Cajun Salmon Salad"
+              description="Description up to 2 lines talking about the food"
+              macros={[
+                { label: "Pro", value: "20g", tone: "protein" },
+                { label: "Carbs", value: "19g", tone: "carbs" },
+                { label: "Fat", value: "19g", tone: "fat" }
+              ]}
+            />
+            <CaloDishCard
+              image={{ uri: "https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?w=400" }}
+              calories="646 kcal"
+              title="Asian Beef Rice Bowl"
+              detailed={false}
+            />
+          </CaloInline>
+        </GallerySection>
+        ) : null}
+
+        {filterVisible("commerce") ? (
+        <GallerySection title="Checkout Summary" label="Commerce">
+          <CaloInline gap="size16" wrap>
+            <CaloCheckoutSummaryCard
+              subtitle="Balanced, 5 Meals, 5 Days per week"
+              visual={{ uri: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400" }}
+              promoValue=""
+              onPromoChangeText={previewOnly}
+              promoState="default"
+              onPromoApply={previewOnly}
+              lineItems={[
+                { label: "Plan price", value: "2,200", currency: "SAR" },
+                { label: "Delivery fee", value: "FREE", tone: "positive" },
+                { label: "VAT(5%)", value: "115", currency: "SAR", info: true }
+              ]}
+              total={{ label: "Total", value: "2,085", currency: "SAR" }}
+              checkoutVariant="default"
+              onCheckout={previewOnly}
+            />
+            <CaloCheckoutSummaryCard
+              subtitle="Balanced, 5 Meals, 5 Days per week"
+              visual={{ uri: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400" }}
+              promoValue="CALO2025"
+              promoState="applied"
+              onPromoRemove={previewOnly}
+              lineItems={[
+                { label: "Plan price", value: "2,200", currency: "SAR" },
+                { label: "Delivery fee", value: "FREE", tone: "positive" },
+                { label: "Discount", value: "115", currency: "SAR", tone: "positive", negative: true },
+                { label: "VAT(5%)", value: "115", currency: "SAR", info: true }
+              ]}
+              total={{ label: "Total", value: "2,085", currency: "SAR" }}
+              checkoutVariant="applePay"
+              onApplePay={previewOnly}
+            />
+            <CaloCheckoutSummaryCard
+              subtitle="Balanced, 5 Meals, 5 Days per week"
+              visual={{ uri: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400" }}
+              promoValue="CALO2025"
+              promoState="error"
+              onPromoChangeText={previewOnly}
+              onPromoApply={previewOnly}
+              promoErrorLabel="This promo code is not valid for this plan."
+              lineItems={[
+                { label: "Plan price", value: "2,200", currency: "SAR" },
+                { label: "Delivery fee", value: "FREE", tone: "positive" },
+                { label: "VAT(5%)", value: "115", currency: "SAR", info: true }
+              ]}
+              total={{ label: "Total", value: "2,085", currency: "SAR" }}
+              onCheckout={previewOnly}
+            />
+          </CaloInline>
+        </GallerySection>
+        ) : null}
+      </CaloStack>
+  );
+}
+
+function GallerySection({ title, label, children }: { title: string; label: string; children: React.ReactNode }) {
+  return (
+    <CaloStack gap="size16">
+      <CaloInline align="center" justify="between">
+        <CaloText role="section">{title}</CaloText>
+        <CaloBadge label={label} variant="neutral" />
+      </CaloInline>
+      <CaloStack gap="size28">{children}</CaloStack>
+    </CaloStack>
+  );
+}
+
+export function ComponentGalleryFilters({
+  selectedFilter,
+  onFilterChange
+}: {
+  selectedFilter: GalleryCategory;
+  visibleSectionCount?: number;
+  onFilterChange: (filter: GalleryCategory) => void;
+}) {
+  return (
+    <CaloStack gap="size8">
+      <CaloInline align="center" gap="size8" wrap>
+        {galleryFilters.map((filter) => (
+          <CaloButton
+            key={filter.id}
+            label={filter.label}
+            size="small"
+            variant={selectedFilter === filter.id ? "secondary" : "utility"}
+            onPress={() => onFilterChange(filter.id)}
+          />
+        ))}
+      </CaloInline>
+    </CaloStack>
+  );
+}
+
+function VariantGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <CaloStack gap="size16">
+      <CaloText role="paragraphMediumStrong">{title}</CaloText>
+      {children}
+    </CaloStack>
+  );
+}
+
+function ButtonSizeRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <CaloInline align="center" gap="size20" wrap>
+      <CaloText role="paragraphMediumStrong">{label}</CaloText>
+      <CaloInline align="center" gap="size10" wrap>
+        {children}
+      </CaloInline>
+    </CaloInline>
+  );
+}
+
+function TypographySpecimen({
+  roleName,
+  role,
+  sample,
+  usage,
+  language = "en"
+}: {
+  roleName: string;
+  role: React.ComponentProps<typeof CaloText>["role"];
+  sample: string;
+  usage: string;
+  language?: React.ComponentProps<typeof CaloText>["language"];
+}) {
+  return (
+    <CaloInline align="center" justify="between" gap="size16" wrap>
+      <CaloStack gap="size4">
+        <CaloText role="paragraphMediumStrong">{roleName}</CaloText>
+        <CaloText role="captionSmall" tone="muted">{usage}</CaloText>
+      </CaloStack>
+      <CaloText role={role} language={language}>{sample}</CaloText>
+    </CaloInline>
+  );
+}
+
+function isHealthySansAvailable() {
+  if (typeof document === "undefined") return false;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) return false;
+
+  const text = "وجبة الغداء";
+  const quotedFamily = JSON.stringify("HealthySans-Bold");
+  const measure = (font: string) => {
+    context.font = font;
+    return context.measureText(text).width;
+  };
+
+  const healthySansWidth = measure(`700 24px ${quotedFamily}`);
+  const serifWidth = measure("700 24px serif");
+  const sansWidth = measure("700 24px sans-serif");
+
+  return Math.abs(healthySansWidth - serifWidth) > 1 && Math.abs(healthySansWidth - sansWidth) > 1;
+}
+
+function SelectionPreview({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <CaloInline align="center" gap="size8">
+      {children}
+      <CaloText role="body">{label}</CaloText>
+    </CaloInline>
+  );
+}