@upstart.gg/sdk 0.0.133 → 0.0.135

package/dist/shared/chunk-GCQURRVB.js

@@ -0,0 +1,837 @@
+/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
+
+import {
+  defineProps
+} from "./chunk-BHC2A43S.js";
+import {
+  defineBrickManifest
+} from "./chunk-TB3X4LRQ.js";
+import {
+  loopRef
+} from "./chunk-BW6EFRSF.js";
+import {
+  string
+} from "./chunk-UQF52PWK.js";
+import {
+  imageRef
+} from "./chunk-W6MRYRGJ.js";
+import {
+  borderRef,
+  roundingRef
+} from "./chunk-NTLAKMMQ.js";
+import {
+  colorPresetRef
+} from "./chunk-TFGGYU6Y.js";
+import {
+  cssLengthRef
+} from "./chunk-BPBKHEQ5.js";
+
+// src/shared/bricks/manifests/images-gallery.manifest.ts
+import { Type } from "@sinclair/typebox";
+import { IoGridOutline } from "react-icons/io5";
+var manifest = defineBrickManifest({
+  type: "images-gallery",
+  name: "Gallery",
+  category: "media",
+  description: "Displays an images collection.",
+  aiInstructions: "This brick should mostly be used for image galleries. Prefer using card bricks for product showcases, articles lists with images, or other collections.",
+  consumesMultipleQueryRows: true,
+  defaultInspectorTab: "content",
+  isContainer: false,
+  minHeight: {
+    desktop: 200
+  },
+  minWidth: {
+    desktop: 300
+  },
+  defaultWidth: {
+    desktop: "400px",
+    mobile: "100%"
+  },
+  icon: IoGridOutline,
+  props: defineProps({
+    colorPreset: Type.Optional(
+      colorPresetRef({
+        title: "Color"
+      })
+    ),
+    loop: Type.Optional(loopRef()),
+    images: Type.Array(
+      Type.Object({
+        image: imageRef({
+          "ui:responsive": "desktop",
+          "ui:no-alt-text": true,
+          "ui:no-object-options": true,
+          "ui:placeholder": "https://example.com/image.jpg"
+        }),
+        legend: Type.Optional(string("Legend"))
+      }),
+      {
+        title: "Images",
+        default: [],
+        maxItems: 12,
+        metadata: {
+          category: "content",
+          consumeQuery: true
+        },
+        examples: [
+          {
+            image: { src: "https://via.placeholder.com/300x200.png?text=Image+1" },
+            legend: "Image 1"
+          },
+          {
+            image: { src: "https://via.placeholder.com/300x200.png?text=Image+2" },
+            legend: "Image 2"
+          },
+          {
+            image: { src: "https://via.placeholder.com/300x200.png?text=Image+3" },
+            legend: "Image 3"
+          }
+        ]
+      }
+    ),
+    columns: Type.Optional(
+      Type.Number({
+        title: "Columns",
+        description: "Number of columns. Only applies to desktop screens. On mobile, it will always display 1 column.",
+        minimum: 1,
+        maximum: 6,
+        default: 3,
+        "ui:field": "slider",
+        "ui:responsive": "desktop"
+      })
+    ),
+    gap: Type.Optional(
+      cssLengthRef({
+        title: "Gap",
+        description: "The gap between the images.",
+        default: "1rem",
+        "ui:styleId": "styles:gap"
+      })
+    ),
+    padding: Type.Optional(
+      cssLengthRef({
+        default: "3rem",
+        description: "Padding inside the gallery.",
+        "ai:instructions": "Use only a single value like '1rem' or '10px'",
+        title: "Padding",
+        "ui:responsive": true,
+        "ui:placeholder": "Not specified",
+        "ui:styleId": "styles:padding"
+      })
+    ),
+    rounding: Type.Optional(roundingRef()),
+    border: Type.Optional(borderRef())
+  })
+});
+var examples = [
+  {
+    description: "Product portfolio gallery (3-column grid)",
+    type: "images-gallery",
+    props: {
+      columns: 3,
+      gap: "2.5rem",
+      padding: "p-4",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Product+1"
+          },
+          legend: "Premium wireless headphones"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Product+2"
+          },
+          legend: "Bluetooth speaker"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Product+3"
+          },
+          legend: "Smart fitness tracker"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Product+4"
+          },
+          legend: "Wireless charging pad"
+        }
+      ]
+    }
+  },
+  {
+    description: "Team photos gallery (4-column grid), light neutral background",
+    type: "images-gallery",
+    props: {
+      columns: 4,
+      gap: "1rem",
+      padding: "p-6",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=CEO"
+          },
+          legend: "Sarah Johnson - Chief Executive Officer"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=CTO"
+          },
+          legend: "Mike Chen - Chief Technology Officer"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Design"
+          },
+          legend: "Emily Rodriguez - Head of Design"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Marketing"
+          },
+          legend: "David Park - Marketing Director"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Sales"
+          },
+          legend: "Lisa Wong - Sales Manager"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Support"
+          },
+          legend: "Alex Thompson - Customer Support Lead"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Dev"
+          },
+          legend: "Carlos Martinez - Senior Developer"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=HR"
+          },
+          legend: "Jennifer Adams - HR Specialist"
+        }
+      ],
+      colorPreset: {
+        color: "neutral-100"
+      }
+    }
+  },
+  {
+    description: "Project showcase (2-column grid with larger spacing)",
+    type: "images-gallery",
+    props: {
+      columns: 2,
+      gap: "1rem",
+      padding: "p-6",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/600x400.png?text=Website+Redesign"
+          },
+          legend: "Modern e-commerce website redesign project"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/600x400.png?text=Mobile+App"
+          },
+          legend: "iOS and Android mobile application"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/600x400.png?text=Brand+Identity"
+          },
+          legend: "Complete brand identity design package"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/600x400.png?text=Dashboard+UI"
+          },
+          legend: "Analytics dashboard user interface"
+        }
+      ]
+    }
+  },
+  {
+    description: "Event photos gallery with tight spacing and minimal padding",
+    type: "images-gallery",
+    props: {
+      columns: 4,
+      gap: "1rem",
+      padding: "p-6",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Opening"
+          },
+          legend: "Conference opening ceremony"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Keynote"
+          },
+          legend: "Keynote presentation"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Workshop"
+          },
+          legend: "Technical workshop session"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Networking"
+          },
+          legend: "Networking lunch break"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Panel"
+          },
+          legend: "Expert panel discussion"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/250x180.png?text=Awards"
+          },
+          legend: "Awards ceremony"
+        }
+      ]
+    }
+  },
+  {
+    description: "Photography portfolio with single column layout and primary background",
+    type: "images-gallery",
+    props: {
+      columns: 1,
+      gap: "3rem",
+      padding: "4rem",
+      colorPreset: {
+        color: "primary-50"
+      },
+      rounding: "rounded-lg",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/800x600.png?text=Landscape+1"
+          },
+          legend: "Mountain sunrise landscape photography"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/800x600.png?text=Portrait+1"
+          },
+          legend: "Professional business portrait session"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/800x600.png?text=Architecture+1"
+          },
+          legend: "Modern architectural photography"
+        }
+      ]
+    }
+  },
+  {
+    description: "Real estate property gallery with secondary colors and borders",
+    type: "images-gallery",
+    props: {
+      columns: 3,
+      gap: "1.5rem",
+      padding: "2rem",
+      colorPreset: {
+        color: "secondary-100"
+      },
+      border: {
+        width: "border",
+        color: "border-secondary-300"
+      },
+      rounding: "rounded-xl",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Living+Room"
+          },
+          legend: "Spacious living room with natural light"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Kitchen"
+          },
+          legend: "Modern kitchen with granite countertops"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Master+Bedroom"
+          },
+          legend: "Master bedroom with walk-in closet"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Bathroom"
+          },
+          legend: "Luxury bathroom with marble finishes"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Backyard"
+          },
+          legend: "Private backyard with pool"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x300.png?text=Garage"
+          },
+          legend: "Two-car garage with storage"
+        }
+      ]
+    }
+  },
+  {
+    description: "Restaurant food gallery with 5-column grid and accent colors",
+    type: "images-gallery",
+    props: {
+      columns: 5,
+      gap: "0.75rem",
+      padding: "1.5rem",
+      colorPreset: {
+        color: "accent-200"
+      },
+      rounding: "rounded-md",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Appetizer"
+          },
+          legend: "Bruschetta with fresh tomatoes"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Soup"
+          },
+          legend: "Creamy mushroom bisque"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Salad"
+          },
+          legend: "Mediterranean quinoa salad"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Main+Course"
+          },
+          legend: "Grilled salmon with herbs"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Dessert"
+          },
+          legend: "Chocolate lava cake"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Beverage"
+          },
+          legend: "Artisan coffee selection"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Pasta"
+          },
+          legend: "Homemade fettuccine alfredo"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Pizza"
+          },
+          legend: "Wood-fired margherita pizza"
+        }
+      ]
+    }
+  },
+  {
+    description: "Art gallery exhibition with 6-column grid and minimal styling",
+    type: "images-gallery",
+    props: {
+      columns: 6,
+      gap: "0.5rem",
+      padding: "1rem",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Abstract+1"
+          },
+          legend: "Abstract composition #1"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Portrait+Art"
+          },
+          legend: "Contemporary portrait"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Landscape+Art"
+          },
+          legend: "Impressionist landscape"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Still+Life"
+          },
+          legend: "Modern still life"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Sculpture"
+          },
+          legend: "Bronze sculpture piece"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Digital+Art"
+          },
+          legend: "Digital artwork collection"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Mixed+Media"
+          },
+          legend: "Mixed media installation"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Photography"
+          },
+          legend: "Fine art photography"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/200x250.png?text=Watercolor"
+          },
+          legend: "Watercolor painting"
+        }
+      ]
+    }
+  },
+  {
+    description: "Fashion lookbook with 2-column layout and neutral dark theme",
+    type: "images-gallery",
+    props: {
+      columns: 2,
+      gap: "2rem",
+      padding: "3rem",
+      colorPreset: {
+        color: "neutral-800"
+      },
+      border: {
+        width: "border-2",
+        color: "border-neutral-600"
+      },
+      rounding: "rounded-2xl",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Spring+Look"
+          },
+          legend: "Spring casual collection 2024"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Summer+Look"
+          },
+          legend: "Summer evening wear"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Business+Look"
+          },
+          legend: "Professional business attire"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Weekend+Look"
+          },
+          legend: "Weekend comfort style"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Formal+Look"
+          },
+          legend: "Formal evening collection"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x600.png?text=Street+Style"
+          },
+          legend: "Urban street fashion"
+        }
+      ]
+    }
+  },
+  {
+    description: "Travel destinations gallery with 3-column grid and no legends",
+    type: "images-gallery",
+    props: {
+      columns: 3,
+      gap: "1.25rem",
+      padding: "2.5rem",
+      colorPreset: {
+        color: "primary-100"
+      },
+      rounding: "rounded-lg",
+      border: {
+        width: "border",
+        color: "border-primary-200"
+      },
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=Paris"
+          }
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=Tokyo"
+          }
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=New+York"
+          }
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=London"
+          }
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=Rome"
+          }
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/350x250.png?text=Barcelona"
+          }
+        }
+      ]
+    }
+  },
+  {
+    description: "Technical equipment gallery with 4-column grid and accent styling",
+    type: "images-gallery",
+    props: {
+      columns: 4,
+      gap: "1rem",
+      padding: "2rem",
+      colorPreset: {
+        color: "accent-100"
+      },
+      border: {
+        width: "border-4",
+        color: "border-accent-400"
+      },
+      rounding: "rounded-xl",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Camera"
+          },
+          legend: "Professional DSLR camera"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Laptop"
+          },
+          legend: "High-performance laptop"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Microphone"
+          },
+          legend: "Studio recording microphone"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Monitor"
+          },
+          legend: "4K professional monitor"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Tablet"
+          },
+          legend: "Digital drawing tablet"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Speakers"
+          },
+          legend: "Studio monitor speakers"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Keyboard"
+          },
+          legend: "Mechanical keyboard"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/300x300.png?text=Mouse"
+          },
+          legend: "Precision gaming mouse"
+        }
+      ]
+    }
+  },
+  {
+    description: "Minimal product showcase with large gaps and no padding",
+    type: "images-gallery",
+    props: {
+      columns: 3,
+      gap: "4rem",
+      padding: "0rem",
+      images: [
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Watch"
+          },
+          legend: "Luxury Swiss timepiece"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Jewelry"
+          },
+          legend: "Handcrafted gold necklace"
+        },
+        {
+          image: {
+            src: "https://via.placeholder.com/400x400.png?text=Sunglasses"
+          },
+          legend: "Designer sunglasses collection"
+        }
+      ]
+    }
+  },
+  {
+    description: "Dynamic product gallery using products query with loop",
+    type: "images-gallery",
+    props: {
+      columns: 4,
+      gap: "1.5rem",
+      padding: "2rem",
+      colorPreset: {
+        color: "primary-50"
+      },
+      rounding: "rounded-lg",
+      border: {
+        width: "border",
+        color: "border-primary-200"
+      },
+      images: [
+        {
+          image: {
+            src: "{{products.image}}"
+          },
+          legend: "{{products.name}} - ${{products.price}}"
+        }
+      ],
+      loop: {
+        over: "products"
+      }
+    }
+  },
+  {
+    description: "Portfolio showcase using portfolioProjects query with loop",
+    type: "images-gallery",
+    props: {
+      columns: 3,
+      gap: "2rem",
+      padding: "3rem",
+      colorPreset: {
+        color: "secondary-100"
+      },
+      rounding: "rounded-xl",
+      images: [
+        {
+          image: {
+            src: "{{portfolioProjects.thumbnail}}"
+          },
+          legend: "{{portfolioProjects.projectName}} - {{portfolioProjects.clientName}} ({{portfolioProjects.year}})"
+        }
+      ],
+      loop: {
+        over: "portfolioProjects"
+      }
+    }
+  },
+  {
+    description: "Event photo gallery using eventPhotos query with loop",
+    type: "images-gallery",
+    props: {
+      columns: 5,
+      gap: "1rem",
+      padding: "1.5rem",
+      colorPreset: {
+        color: "accent-50"
+      },
+      border: {
+        width: "border-2",
+        color: "border-accent-300"
+      },
+      rounding: "rounded-md",
+      images: [
+        {
+          image: {
+            src: "{{eventPhotos.imageUrl}}"
+          },
+          legend: "{{eventPhotos.caption}} - {{eventPhotos.eventDate}}"
+        }
+      ],
+      loop: {
+        over: "eventPhotos"
+      }
+    }
+  },
+  {
+    description: "Team member gallery using teamMembers query with loop",
+    type: "images-gallery",
+    props: {
+      columns: 6,
+      gap: "0.75rem",
+      padding: "2.5rem",
+      colorPreset: {
+        color: "neutral-100"
+      },
+      rounding: "rounded-lg",
+      border: {
+        width: "border",
+        color: "border-neutral-300"
+      },
+      images: [
+        {
+          image: {
+            src: "{{teamMembers.profilePhoto}}"
+          },
+          legend: "{{teamMembers.fullName}} - {{teamMembers.position}}"
+        }
+      ],
+      loop: {
+        over: "teamMembers"
+      }
+    }
+  }
+];
+
+export {
+  manifest,
+  examples
+};
+//# sourceMappingURL=chunk-GCQURRVB.js.map