@vtex/faststore 0.0.1

package/dist/particles/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/particles/carousel/carousel.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  Children,\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nexport type CarouselVariant = 'slide' | 'scroll';\n\nexport type CarouselContextValue = {\n  currentPage: number;\n  itemCount: number;\n  itemsPerPage: number;\n  totalPages: number;\n  variant: CarouselVariant;\n  infiniteMode: boolean;\n  goToPage: (page: number) => void;\n  next: () => void;\n  previous: () => void;\n  canGoNext: boolean;\n  canGoPrevious: boolean;\n  setItemCount: (count: number) => void;\n};\n\nexport type CarouselRootProps = ComponentPropsWithRef<'section'> & {\n  infiniteMode?: boolean;\n  variant?: CarouselVariant;\n  itemsPerPage?: number;\n  defaultPage?: number;\n  label?: string;\n};\n\nexport type CarouselTrackProps = ComponentPropsWithRef<'div'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselBulletsProps = ComponentPropsWithRef<'div'> & {\n  ariaLabel?: string;\n  bulletLabel?: string;\n  hideWhenSingle?: boolean;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nexport function useCarousel(): CarouselContextValue {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside CarouselRoot.');\n  return ctx;\n}\n\nexport function CarouselRoot({\n  infiniteMode = false,\n  variant = 'slide',\n  itemsPerPage = 1,\n  defaultPage = 0,\n  label = 'Carousel',\n  children,\n  ...props\n}: CarouselRootProps) {\n  const [currentPage, setCurrentPage] = useState(defaultPage);\n  const [itemCount, setItemCountState] = useState(0);\n\n  const perPage = Math.max(1, itemsPerPage);\n  const totalPages = Math.max(1, Math.ceil(itemCount / perPage));\n\n  const setItemCount = useCallback((count: number) => {\n    setItemCountState((prev) => (prev === count ? prev : count));\n  }, []);\n\n  // Keep the current page in range when the number of pages shrinks.\n  useEffect(() => {\n    if (itemCount === 0) return;\n    setCurrentPage((page) => Math.min(page, totalPages - 1));\n  }, [itemCount, totalPages]);\n\n  const goToPage = useCallback(\n    (page: number) => {\n      setCurrentPage(Math.max(0, Math.min(page, totalPages - 1)));\n    },\n    [totalPages],\n  );\n\n  const next = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page + 1) % totalPages : Math.min(page + 1, totalPages - 1)));\n  }, [infiniteMode, totalPages]);\n\n  const previous = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page - 1 + totalPages) % totalPages : Math.max(page - 1, 0)));\n  }, [infiniteMode, totalPages]);\n\n  const canGoNext = infiniteMode ? totalPages > 1 : currentPage < totalPages - 1;\n  const canGoPrevious = infiniteMode ? totalPages > 1 : currentPage > 0;\n\n  const ctx = useMemo<CarouselContextValue>(\n    () => ({\n      currentPage,\n      itemCount,\n      itemsPerPage: perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    }),\n    [\n      currentPage,\n      itemCount,\n      perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    ],\n  );\n\n  return (\n    <CarouselContext value={ctx}>\n      <section\n        {...props}\n        data-fs-carousel=\"\"\n        data-fs-carousel-variant={variant}\n        aria-roledescription=\"carousel\"\n        aria-label={label}\n      >\n        {children}\n      </section>\n    </CarouselContext>\n  );\n}\n\nexport function CarouselTrack({ children, style, ref, onScroll, ...props }: CarouselTrackProps) {\n  const { setItemCount, itemsPerPage, currentPage, variant, goToPage } = useCarousel();\n  const items = Children.toArray(children);\n  const count = items.length;\n  const scrollRef = useRef<HTMLDivElement>(null);\n  // True while an internal scrollTo animation runs, so the native scroll events it emits do not\n  // feed back into goToPage and fight the animation. Cleared once the target page is reached.\n  const programmaticScroll = useRef(false);\n\n  // Scroll mode needs the internal scrollRef to drive scrollTo, but must still honor a\n  // consumer-forwarded ref (the slide branch gets it for free through the element).\n  const mergedScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      scrollRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  useEffect(() => {\n    setItemCount(count);\n  }, [count, setItemCount]);\n\n  // In scroll mode the track is the native scroll container; move it to the current page unless it\n  // is already there (e.g. the user just scrolled), so a programmatic scroll never fights the user.\n  useEffect(() => {\n    if (variant !== 'scroll') return;\n    const el = scrollRef.current;\n    if (!el || typeof el.scrollTo !== 'function') return;\n    if (el.clientWidth > 0 && Math.round(el.scrollLeft / el.clientWidth) === currentPage) return;\n    programmaticScroll.current = true;\n    el.scrollTo({ left: currentPage * el.clientWidth, behavior: 'smooth' });\n  }, [variant, currentPage]);\n\n  // Sync a user scroll back into the paging state so bullets and Previous/Next stay accurate.\n  function handleScroll(event: React.UIEvent<HTMLDivElement>) {\n    onScroll?.(event);\n    const { clientWidth, scrollLeft } = event.currentTarget;\n    if (clientWidth <= 0) return;\n    const page = Math.round(scrollLeft / clientWidth);\n    if (programmaticScroll.current) {\n      if (page === currentPage) programmaticScroll.current = false;\n      return;\n    }\n    if (page !== currentPage) goToPage(page);\n  }\n\n  const itemStyle: React.CSSProperties = { flex: `0 0 ${100 / itemsPerPage}%`, boxSizing: 'border-box' };\n\n  const renderedItems = items.map((child, index) => (\n    <div\n      key={index}\n      data-fs-carousel-item=\"\"\n      style={variant === 'scroll' ? { ...itemStyle, scrollSnapAlign: 'start' } : itemStyle}\n    >\n      {child}\n    </div>\n  ));\n\n  if (variant === 'scroll') {\n    return (\n      <div\n        {...props}\n        ref={mergedScrollRef}\n        onScroll={handleScroll}\n        data-fs-carousel-track=\"\"\n        style={{ display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory', ...style }}\n      >\n        {renderedItems}\n      </div>\n    );\n  }\n\n  return (\n    <div {...props} ref={ref} data-fs-carousel-track=\"\" style={{ overflow: 'hidden', ...style }}>\n      <div\n        data-fs-carousel-viewport=\"\"\n        style={{ display: 'flex', transform: `translateX(-${currentPage * 100}%)`, transition: 'transform 300ms ease' }}\n      >\n        {renderedItems}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselPrevious({ children, onClick, ...props }: CarouselPreviousProps) {\n  const { previous, canGoPrevious } = useCarousel();\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoPrevious}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) previous();\n      }}\n      aria-label=\"Previous\"\n      data-fs-carousel-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselNext({ children, onClick, ...props }: CarouselNextProps) {\n  const { next, canGoNext } = useCarousel();\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoNext}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) next();\n      }}\n      aria-label=\"Next\"\n      data-fs-carousel-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselBullets({\n  ariaLabel = 'Choose page',\n  bulletLabel = 'Go to page {page}',\n  hideWhenSingle = true,\n  ...props\n}: CarouselBulletsProps) {\n  const { totalPages, currentPage, goToPage } = useCarousel();\n\n  if (hideWhenSingle && totalPages <= 1) return null;\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, page: number) {\n    let target = page;\n    switch (event.key) {\n      case 'ArrowRight':\n        target = Math.min(page + 1, totalPages - 1);\n        break;\n      case 'ArrowLeft':\n        target = Math.max(page - 1, 0);\n        break;\n      case 'Home':\n        target = 0;\n        break;\n      case 'End':\n        target = totalPages - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    goToPage(target);\n    const bullets = event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[data-fs-carousel-bullet]');\n    bullets?.[target]?.focus();\n  }\n\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a labelled group of pagination buttons is not a <fieldset>\n    <div role=\"group\" aria-label={ariaLabel} data-fs-carousel-bullets=\"\" {...props}>\n      {Array.from({ length: totalPages }, (_, page) => {\n        const isActive = page === currentPage;\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            aria-label={bulletLabel.replace('{page}', String(page + 1))}\n            aria-current={isActive}\n            data-fs-carousel-bullet=\"\"\n            data-fs-carousel-bullet-selected={String(isActive)}\n            onClick={() => goToPage(page)}\n            onKeyDown={(event) => handleKeyDown(event, page)}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nexport const CarouselRootDefinition = defineComponent<CarouselRootProps>({\n  name: 'CarouselRoot',\n  importPath: '@vtex/faststore/components',\n  component: CarouselRoot,\n  editor: { label: 'Carousel Root', category: 'layout' },\n  schema: {\n    infiniteMode: { type: 'boolean', default: false, label: 'Infinite Mode' },\n    variant: { type: ['slide', 'scroll'] as const, default: 'slide', label: 'Variant' },\n    itemsPerPage: { type: 'number', default: 1, label: 'Items Per Page' },\n    defaultPage: { type: 'number', default: 0, label: 'Default Page' },\n    label: { type: 'string', default: 'Carousel', label: 'Aria Label' },\n  },\n  guideline:\n    'Root of the carousel. Provides paging state to all parts. Compose as: CarouselRoot > (CarouselTrack > [item children] + CarouselPrevious + CarouselNext + CarouselBullets). Set infiniteMode=true to loop seamlessly (arrows never disable); variant=\"scroll\" for native overflow, \"slide\" for transform transitions. itemsPerPage sets how many children are visible per page. Holds no product or media data — nest any children in CarouselTrack.',\n});\n\nexport const CarouselTrackDefinition = defineComponent<CarouselTrackProps>({\n  name: 'CarouselTrack',\n  importPath: '@vtex/faststore/components',\n  component: CarouselTrack,\n  editor: { label: 'Carousel Track', category: 'layout' },\n  schema: {},\n  guideline:\n    'Lays out the carousel items as a single track and reports the child count to CarouselRoot. Wraps each child in an item slot sized to 100/itemsPerPage percent. In slide variant it translates by page; in scroll variant it is the native scroll-snap container. Place the iterated children (e.g. product cards) directly inside. Must be inside CarouselRoot.',\n});\n\nexport const CarouselPreviousDefinition = defineComponent<CarouselPreviousProps>({\n  name: 'CarouselPrevious',\n  importPath: '@vtex/faststore/components',\n  component: CarouselPrevious,\n  editor: { label: 'Carousel Previous', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page backward. Disabled on the first page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the last page). Accepts any children (Icon, text). Must be inside CarouselRoot.',\n});\n\nexport const CarouselNextDefinition = defineComponent<CarouselNextProps>({\n  name: 'CarouselNext',\n  importPath: '@vtex/faststore/components',\n  component: CarouselNext,\n  editor: { label: 'Carousel Next', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page forward. Disabled on the last page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the first page). Accepts any children (Icon, text). Must be inside CarouselRoot.',\n});\n\nexport const CarouselBulletsDefinition = defineComponent<CarouselBulletsProps>({\n  name: 'CarouselBullets',\n  importPath: '@vtex/faststore/components',\n  component: CarouselBullets,\n  editor: { label: 'Carousel Bullets', category: 'action' },\n  schema: {\n    ariaLabel: { type: 'string', default: 'Choose page', label: 'Aria Label' },\n    bulletLabel: { type: 'string', default: 'Go to page {page}', label: 'Bullet Label Template' },\n    hideWhenSingle: { type: 'boolean', default: true, label: 'Hide when single page' },\n  },\n  guideline:\n    'Renders one bullet button per page and marks the active page. Supports ArrowLeft/ArrowRight/Home/End keyboard navigation. Returns null when there is a single page unless hideWhenSingle={false}. Use {page} in bulletLabel for the 1-based page number. Must be inside CarouselRoot.',\n});\n\nexport const Carousel = {\n  Root: CarouselRoot,\n  Track: CarouselTrack,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Bullets: CarouselBullets,\n};\n"],"mappings":";;;;;;AA2DA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAgB,cAAoC;CAClD,MAAM,MAAM,WAAW,eAAe;CACtC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,uDAAuD;CACjF,OAAO;AACT;AAEA,SAAgB,aAAa,EAC3B,eAAe,OACf,UAAU,SACV,eAAe,GACf,cAAc,GACd,QAAQ,YACR,UACA,GAAG,SACiB;CACpB,MAAM,CAAC,aAAa,kBAAkB,SAAS,WAAW;CAC1D,MAAM,CAAC,WAAW,qBAAqB,SAAS,CAAC;CAEjD,MAAM,UAAU,KAAK,IAAI,GAAG,YAAY;CACxC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,YAAY,OAAO,CAAC;CAE7D,MAAM,eAAe,aAAa,UAAkB;EAClD,mBAAmB,SAAU,SAAS,QAAQ,OAAO,KAAM;CAC7D,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,IAAI,cAAc,GAAG;EACrB,gBAAgB,SAAS,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;CACzD,GAAG,CAAC,WAAW,UAAU,CAAC;CAE1B,MAAM,WAAW,aACd,SAAiB;EAChB,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC,CAAC;CAC5D,GACA,CAAC,UAAU,CACb;CAEA,MAAM,OAAO,kBAAkB;EAC7B,gBAAgB,SAAU,gBAAgB,OAAO,KAAK,aAAa,KAAK,IAAI,OAAO,GAAG,aAAa,CAAC,CAAE;CACxG,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,MAAM,WAAW,kBAAkB;EACjC,gBAAgB,SAAU,gBAAgB,OAAO,IAAI,cAAc,aAAa,KAAK,IAAI,OAAO,GAAG,CAAC,CAAE;CACxG,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,MAAM,YAAY,eAAe,aAAa,IAAI,cAAc,aAAa;CAC7E,MAAM,gBAAgB,eAAe,aAAa,IAAI,cAAc;CAEpE,MAAM,MAAM,eACH;EACL;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,iBAAD;EAAiB,OAAO;EACtB,UAAA,oBAAC,WAAD;GACE,GAAI;GACJ,oBAAiB;GACjB,4BAA0B;GAC1B,wBAAqB;GACrB,cAAY;GAEX;EACM,CAAA;CACM,CAAA;AAErB;AAEA,SAAgB,cAAc,EAAE,UAAU,OAAO,KAAK,UAAU,GAAG,SAA6B;CAC9F,MAAM,EAAE,cAAc,cAAc,aAAa,SAAS,aAAa,YAAY;CACnF,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CACvC,MAAM,QAAQ,MAAM;CACpB,MAAM,YAAY,OAAuB,IAAI;CAG7C,MAAM,qBAAqB,OAAO,KAAK;CAIvC,MAAM,kBAAkB,aACrB,SAAgC;EAC/B,UAAU,UAAU;EACpB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAEA,gBAAgB;EACd,aAAa,KAAK;CACpB,GAAG,CAAC,OAAO,YAAY,CAAC;CAIxB,gBAAgB;EACd,IAAI,YAAY,UAAU;EAC1B,MAAM,KAAK,UAAU;EACrB,IAAI,CAAC,MAAM,OAAO,GAAG,aAAa,YAAY;EAC9C,IAAI,GAAG,cAAc,KAAK,KAAK,MAAM,GAAG,aAAa,GAAG,WAAW,MAAM,aAAa;EACtF,mBAAmB,UAAU;EAC7B,GAAG,SAAS;GAAE,MAAM,cAAc,GAAG;GAAa,UAAU;EAAS,CAAC;CACxE,GAAG,CAAC,SAAS,WAAW,CAAC;CAGzB,SAAS,aAAa,OAAsC;EAC1D,WAAW,KAAK;EAChB,MAAM,EAAE,aAAa,eAAe,MAAM;EAC1C,IAAI,eAAe,GAAG;EACtB,MAAM,OAAO,KAAK,MAAM,aAAa,WAAW;EAChD,IAAI,mBAAmB,SAAS;GAC9B,IAAI,SAAS,aAAa,mBAAmB,UAAU;GACvD;EACF;EACA,IAAI,SAAS,aAAa,SAAS,IAAI;CACzC;CAEA,MAAM,YAAiC;EAAE,MAAM,OAAO,MAAM,aAAa;EAAI,WAAW;CAAa;CAErG,MAAM,gBAAgB,MAAM,KAAK,OAAO,UACtC,oBAAC,OAAD;EAEE,yBAAsB;EACtB,OAAO,YAAY,WAAW;GAAE,GAAG;GAAW,iBAAiB;EAAQ,IAAI;EAE1E,UAAA;CACE,GALE,KAKF,CACN;CAED,IAAI,YAAY,UACd,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACL,UAAU;EACV,0BAAuB;EACvB,OAAO;GAAE,SAAS;GAAQ,WAAW;GAAQ,gBAAgB;GAAe,GAAG;EAAM;EAEpF,UAAA;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,0BAAuB;EAAG,OAAO;GAAE,UAAU;GAAU,GAAG;EAAM;EACxF,UAAA,oBAAC,OAAD;GACE,6BAA0B;GAC1B,OAAO;IAAE,SAAS;IAAQ,WAAW,eAAe,cAAc,IAAI;IAAK,YAAY;GAAuB;GAE7G,UAAA;EACE,CAAA;CACF,CAAA;AAET;AAEA,SAAgB,iBAAiB,EAAE,UAAU,SAAS,GAAG,SAAgC;CACvF,MAAM,EAAE,UAAU,kBAAkB,YAAY;CAChD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,UAAU,CAAC;EACX,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,SAAS;EACxC;EACA,cAAW;EACX,6BAA0B;EAC1B,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,SAAgB,aAAa,EAAE,UAAU,SAAS,GAAG,SAA4B;CAC/E,MAAM,EAAE,MAAM,cAAc,YAAY;CACxC,OACE,oBAAC,UAAD;EACE,MAAK;EACL,UAAU,CAAC;EACX,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,KAAK;EACpC;EACA,cAAW;EACX,yBAAsB;EACtB,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,SAAgB,gBAAgB,EAC9B,YAAY,eACZ,cAAc,qBACd,iBAAiB,MACjB,GAAG,SACoB;CACvB,MAAM,EAAE,YAAY,aAAa,aAAa,YAAY;CAE1D,IAAI,kBAAkB,cAAc,GAAG,OAAO;CAE9C,SAAS,cAAc,OAA+C,MAAc;EAClF,IAAI,SAAS;EACb,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,SAAS,KAAK,IAAI,OAAO,GAAG,aAAa,CAAC;IAC1C;GACF,KAAK;IACH,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC;IAC7B;GACF,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS,aAAa;IACtB;GACF,SACE;EACJ;EACA,MAAM,eAAe;EACrB,SAAS,MAAM;EAEf,CADgB,MAAM,cAAc,eAAe,iBAAoC,2BAA2B,EAAA,GACxG,OAAO,EAAE,MAAM;CAC3B;CAEA,OAEE,oBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAW,4BAAyB;EAAG,GAAI;EACtE,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,SAAS;GAC/C,MAAM,WAAW,SAAS;GAC1B,OACE,oBAAC,UAAD;IAEE,MAAK;IACL,cAAY,YAAY,QAAQ,UAAU,OAAO,OAAO,CAAC,CAAC;IAC1D,gBAAc;IACd,2BAAwB;IACxB,oCAAkC,OAAO,QAAQ;IACjD,eAAe,SAAS,IAAI;IAC5B,YAAY,UAAU,cAAc,OAAO,IAAI;GAChD,GARM,IAQN;EAEL,CAAC;CACE,CAAA;AAET;AAEA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAiB,UAAU;CAAS;CACrD,QAAQ;EACN,cAAc;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAgB;EACxE,SAAS;GAAE,MAAM,CAAC,SAAS,QAAQ;GAAY,SAAS;GAAS,OAAO;EAAU;EAClF,cAAc;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAiB;EACpE,aAAa;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAe;EACjE,OAAO;GAAE,MAAM;GAAU,SAAS;GAAY,OAAO;EAAa;CACpE;CACA,WACE;AACJ,CAAC;AAED,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAqB,UAAU;CAAS;CACzD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAiB,UAAU;CAAS;CACrD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAS;CACxD,QAAQ;EACN,WAAW;GAAE,MAAM;GAAU,SAAS;GAAe,OAAO;EAAa;EACzE,aAAa;GAAE,MAAM;GAAU,SAAS;GAAqB,OAAO;EAAwB;EAC5F,gBAAgB;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAwB;CACnF;CACA,WACE;AACJ,CAAC;AAED,MAAa,WAAW;CACtB,MAAM;CACN,OAAO;CACP,UAAU;CACV,MAAM;CACN,SAAS;AACX"}

package/dist/particles/checkbox/checkbox.d.ts

@@ -0,0 +1,40 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/particles/checkbox/checkbox.d.ts
+export type CheckboxRootProps = {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  className?: string;
+  children?: ReactNode;
+};
+export type CheckboxIndicatorProps = ComponentPropsWithRef<'span'> & {
+  keepMounted?: boolean;
+};
+export type CheckboxGroupProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  allValues?: string[];
+  disabled?: boolean;
+};
+export declare const CheckboxRootDefinition: ComponentDefinition<CheckboxRootProps>;
+export declare const CheckboxIndicatorDefinition: ComponentDefinition<CheckboxIndicatorProps>;
+export declare const CheckboxGroupDefinition: ComponentDefinition<CheckboxGroupProps>;
+export declare function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxIndicator({ keepMounted, className, children, ...props }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxGroup({ className, children, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+};
+//#endregion
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/particles/checkbox/checkbox.js

@@ -0,0 +1,82 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/particles/checkbox/checkbox.tsx
+const CheckboxRootDefinition = defineComponent({
+	name: "CheckboxRoot",
+	importPath: "@vtex/faststore/components",
+	component: CheckboxRoot,
+	editor: {
+		label: "Checkbox Root",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Form checkbox that integrates with Field for labeling and validation. Requires a Checkbox.Indicator child for visual state. Use indeterminate for partial selection in nested lists."
+});
+const CheckboxIndicatorDefinition = defineComponent({
+	name: "CheckboxIndicator",
+	importPath: "@vtex/faststore/components",
+	component: CheckboxIndicator,
+	editor: {
+		label: "Checkbox Indicator",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Visual indicator inside Checkbox.Root showing checked/indeterminate state. Render a checkmark SVG as a child. Visible only when checked or indeterminate via data-checked/data-indeterminate."
+});
+const CheckboxGroupDefinition = defineComponent({
+	name: "CheckboxGroup",
+	importPath: "@vtex/faststore/components",
+	component: CheckboxGroup$1,
+	editor: {
+		label: "Checkbox Group",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Shared state container for a series of checkboxes. Use allValues to enable select-all behavior. Contains Checkbox.Root children with individual value props."
+});
+function CheckboxRoot({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, className, children }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		checked,
+		defaultChecked,
+		onCheckedChange,
+		indeterminate,
+		disabled,
+		readOnly,
+		required,
+		name,
+		value,
+		id,
+		className,
+		"data-fs-checkbox-root": "",
+		children
+	});
+}
+function CheckboxIndicator({ keepMounted = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		...props,
+		keepMounted,
+		className,
+		"data-fs-checkbox-indicator": "",
+		children
+	});
+}
+function CheckboxGroup$1({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		...props,
+		className,
+		"data-fs-checkbox-group": "",
+		children
+	});
+}
+const Checkbox$1 = {
+	Root: CheckboxRoot,
+	Indicator: CheckboxIndicator
+};
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup, CheckboxGroupDefinition, CheckboxIndicator, CheckboxIndicatorDefinition, CheckboxRoot, CheckboxRootDefinition };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/particles/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["CheckboxGroup","BaseCheckbox","BaseCheckboxGroup","Checkbox"],"sources":["../../../src/particles/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type CheckboxRootProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type CheckboxIndicatorProps = ComponentPropsWithRef<'span'> & {\n  keepMounted?: boolean;\n};\n\nexport type CheckboxGroupProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  allValues?: string[];\n  disabled?: boolean;\n};\n\nexport const CheckboxRootDefinition = defineComponent<CheckboxRootProps>({\n  name: 'CheckboxRoot',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxRoot,\n  editor: { label: 'Checkbox Root', category: 'action' },\n  schema: {},\n  guideline:\n    'Form checkbox that integrates with Field for labeling and validation. Requires a Checkbox.Indicator child for visual state. Use indeterminate for partial selection in nested lists.',\n});\n\nexport const CheckboxIndicatorDefinition = defineComponent<CheckboxIndicatorProps>({\n  name: 'CheckboxIndicator',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxIndicator,\n  editor: { label: 'Checkbox Indicator', category: 'layout' },\n  schema: {},\n  guideline:\n    'Visual indicator inside Checkbox.Root showing checked/indeterminate state. Render a checkmark SVG as a child. Visible only when checked or indeterminate via data-checked/data-indeterminate.',\n});\n\nexport const CheckboxGroupDefinition = defineComponent<CheckboxGroupProps>({\n  name: 'CheckboxGroup',\n  importPath: '@vtex/faststore/components',\n  component: CheckboxGroup,\n  editor: { label: 'Checkbox Group', category: 'layout' },\n  schema: {},\n  guideline:\n    'Shared state container for a series of checkboxes. Use allValues to enable select-all behavior. Contains Checkbox.Root children with individual value props.',\n});\n\nexport function CheckboxRoot({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  disabled,\n  readOnly,\n  required,\n  name,\n  value,\n  id,\n  className,\n  children,\n}: CheckboxRootProps) {\n  return (\n    <BaseCheckbox.Root\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      indeterminate={indeterminate}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      value={value}\n      id={id}\n      className={className}\n      data-fs-checkbox-root=\"\"\n    >\n      {children}\n    </BaseCheckbox.Root>\n  );\n}\n\nexport function CheckboxIndicator({ keepMounted = false, className, children, ...props }: CheckboxIndicatorProps) {\n  return (\n    <BaseCheckbox.Indicator {...props} keepMounted={keepMounted} className={className} data-fs-checkbox-indicator=\"\">\n      {children}\n    </BaseCheckbox.Indicator>\n  );\n}\n\nexport function CheckboxGroup({ className, children, ...props }: CheckboxGroupProps) {\n  return (\n    <BaseCheckboxGroup {...props} className={className} data-fs-checkbox-group=\"\">\n      {children}\n    </BaseCheckboxGroup>\n  );\n}\n\nexport const Checkbox = {\n  Root: CheckboxRoot,\n  Indicator: CheckboxIndicator,\n};\n"],"mappings":";;;;;;;AAiCA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAiB,UAAU;CAAS;CACrD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAS;CAC1D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAWA;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,aAAa,EAC3B,SACA,gBACA,iBACA,eACA,UACA,UACA,UACA,MACA,OACA,IACA,WACA,YACoB;CACpB,OACE,oBAACC,SAAa,MAAd;EACW;EACO;EACC;EACF;EACL;EACA;EACA;EACJ;EACC;EACH;EACO;EACX,yBAAsB;EAErB;CACgB,CAAA;AAEvB;AAEA,SAAgB,kBAAkB,EAAE,cAAc,OAAO,WAAW,UAAU,GAAG,SAAiC;CAChH,OACE,oBAACA,SAAa,WAAd;EAAwB,GAAI;EAAoB;EAAwB;EAAW,8BAA2B;EAC3G;CACqB,CAAA;AAE5B;AAEA,SAAgBD,gBAAc,EAAE,WAAW,UAAU,GAAG,SAA6B;CACnF,OACE,oBAACE,eAAD;EAAmB,GAAI;EAAkB;EAAW,0BAAuB;EACxE;CACgB,CAAA;AAEvB;AAEA,MAAaC,aAAW;CACtB,MAAM;CACN,WAAW;AACb"}

package/dist/particles/container/container.d.ts

@@ -0,0 +1,20 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/container/container.d.ts
+/** Props for {@link Container}. Extends all native `<div>` attributes. */
+export type ContainerProps = ComponentPropsWithRef<'div'>;
+/**
+ * Container component that centers content with responsive max-width.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <ProductTitle title="Product Name" />
+ * </Container>
+ * ```
+ */
+export declare const ContainerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare function Container({ className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=container.d.ts.map

package/dist/particles/container/container.js

@@ -0,0 +1,36 @@
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/particles/container/container.tsx
+/**
+* Container component that centers content with responsive max-width.
+*
+* @example
+* ```tsx
+* <Container>
+*   <ProductTitle title="Product Name" />
+* </Container>
+* ```
+*/
+const ContainerDefinition = defineComponent({
+	name: "Container",
+	importPath: "@vtex/faststore/components",
+	component: Container,
+	editor: {
+		label: "Container",
+		category: "layout"
+	},
+	schema: {}
+});
+function Container({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-container": "",
+		children
+	});
+}
+//#endregion
+export { Container, ContainerDefinition };
+
+//# sourceMappingURL=container.js.map

package/dist/particles/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/particles/container/container.tsx"],"sourcesContent":["import { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\n\n/** Props for {@link Container}. Extends all native `<div>` attributes. */\nexport type ContainerProps = ComponentPropsWithRef<'div'>;\n\n/**\n * Container component that centers content with responsive max-width.\n *\n * @example\n * ```tsx\n * <Container>\n *   <ProductTitle title=\"Product Name\" />\n * </Container>\n * ```\n */\nexport const ContainerDefinition = defineComponent<ContainerProps>({\n  name: 'Container',\n  importPath: '@vtex/faststore/components',\n  component: Container,\n  editor: { label: 'Container', category: 'layout' },\n  schema: {},\n});\n\nexport function Container({ className, children, ...props }: ContainerProps) {\n  return (\n    <div {...props} className={className} data-fs-container=\"\">\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,sBAAsB,gBAAgC;CACjE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAa,UAAU;CAAS;CACjD,QAAQ,CAAC;AACX,CAAC;AAED,SAAgB,UAAU,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC3E,OACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,qBAAkB;EACrD;CACE,CAAA;AAET"}

package/dist/particles/dialog/dialog.d.ts

@@ -0,0 +1,54 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/particles/dialog/dialog.d.ts
+export type DialogRootProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  modal?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: {
+    isCanceled: boolean;
+  }) => void;
+  children?: ReactNode;
+};
+export type DialogTriggerProps = ComponentPropsWithRef<'button'>;
+export type DialogPortalProps = {
+  children?: ReactNode;
+};
+export type DialogBackdropProps = ComponentPropsWithRef<'div'>;
+export type DialogViewportProps = ComponentPropsWithRef<'div'>;
+export type DialogPopupProps = ComponentPropsWithRef<'div'>;
+export type DialogTitleProps = ComponentPropsWithRef<'h2'>;
+export type DialogDescriptionProps = ComponentPropsWithRef<'p'>;
+export type DialogCloseProps = ComponentPropsWithRef<'button'>;
+export declare const DialogRootDefinition: ComponentDefinition<DialogRootProps>;
+export declare const DialogTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare const DialogPortalDefinition: ComponentDefinition<DialogPortalProps>;
+export declare const DialogBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DialogViewportDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DialogPopupDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DialogTitleDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const DialogDescriptionDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const DialogCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
+export declare function DialogRoot({ open, defaultOpen, modal, onOpenChange, children }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogTrigger({ className, children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogPortal({ children }: DialogPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogBackdrop({ className, children, ...props }: DialogBackdropProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogViewport({ className, children, ...props }: DialogViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogPopup({ className, children, ...props }: DialogPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogTitle({ className, children, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogDescription({ className, children, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogClose({ className, children, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: {
+  Root: typeof DialogRoot;
+  Trigger: typeof DialogTrigger;
+  Portal: typeof DialogPortal;
+  Backdrop: typeof DialogBackdrop;
+  Viewport: typeof DialogViewport;
+  Popup: typeof DialogPopup;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Close: typeof DialogClose;
+};
+//#endregion
+//# sourceMappingURL=dialog.d.ts.map

package/dist/particles/dialog/dialog.js

@@ -0,0 +1,192 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/particles/dialog/dialog.tsx
+const DialogRootDefinition = defineComponent({
+	name: "DialogRoot",
+	importPath: "@vtex/faststore/components",
+	component: DialogRoot,
+	editor: {
+		label: "Dialog Root",
+		category: "layout"
+	},
+	schema: { modal: {
+		type: "boolean",
+		default: true,
+		label: "Modal"
+	} },
+	guideline: "Root of a dialog overlay. Compose as: DialogRoot > (DialogTrigger + DialogPortal > (DialogBackdrop + DialogViewport > DialogPopup > (DialogTitle + content + DialogClose))). Set modal=false only when the dialog must coexist with page interactions."
+});
+const DialogTriggerDefinition = defineComponent({
+	name: "DialogTrigger",
+	importPath: "@vtex/faststore/components",
+	component: DialogTrigger,
+	editor: {
+		label: "Dialog Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Opens the dialog when clicked. Direct child of DialogRoot. Accepts any children (text, Icon). Base UI connects it to DialogRoot via context — no explicit wiring needed."
+});
+const DialogPortalDefinition = defineComponent({
+	name: "DialogPortal",
+	importPath: "@vtex/faststore/components",
+	component: DialogPortal,
+	editor: {
+		label: "Dialog Portal",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Renders its children outside the DOM tree (into document.body). Place DialogBackdrop and DialogViewport as direct children, in that order."
+});
+const DialogBackdropDefinition = defineComponent({
+	name: "DialogBackdrop",
+	importPath: "@vtex/faststore/components",
+	component: DialogBackdrop,
+	editor: {
+		label: "Dialog Backdrop",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Semi-transparent overlay behind the popup. Direct child of DialogPortal, before DialogViewport. Clicking it closes the dialog unless disablePointerDismissal is set on DialogRoot."
+});
+const DialogViewportDefinition = defineComponent({
+	name: "DialogViewport",
+	importPath: "@vtex/faststore/components",
+	component: DialogViewport,
+	editor: {
+		label: "Dialog Viewport",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Positioning container for DialogPopup. Direct child of DialogPortal, after DialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place DialogPopup inside."
+});
+const DialogPopupDefinition = defineComponent({
+	name: "DialogPopup",
+	importPath: "@vtex/faststore/components",
+	component: DialogPopup,
+	editor: {
+		label: "Dialog Popup",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "The visible dialog panel, inside DialogViewport. Place DialogTitle (required), optional DialogDescription, your content, and DialogClose inside. Style with a background, padding, and shadow."
+});
+const DialogTitleDefinition = defineComponent({
+	name: "DialogTitle",
+	importPath: "@vtex/faststore/components",
+	component: DialogTitle,
+	editor: {
+		label: "Dialog Title",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Required heading inside DialogPopup — sets the accessible name of the dialog for screen readers. Use sr-only to hide it visually when a visual title already exists."
+});
+const DialogDescriptionDefinition = defineComponent({
+	name: "DialogDescription",
+	importPath: "@vtex/faststore/components",
+	component: DialogDescription,
+	editor: {
+		label: "Dialog Description",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Optional description inside DialogPopup, after DialogTitle. Provides additional context to screen readers. Omit if the dialog content is self-explanatory."
+});
+const DialogCloseDefinition = defineComponent({
+	name: "DialogClose",
+	importPath: "@vtex/faststore/components",
+	component: DialogClose,
+	editor: {
+		label: "Dialog Close",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Closes the dialog when clicked. Place inside DialogPopup — can appear multiple times (e.g., close icon at top-right and a Cancel button at the bottom)."
+});
+function DialogRoot({ open, defaultOpen, modal = true, onOpenChange, children }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		defaultOpen,
+		modal,
+		onOpenChange,
+		children
+	});
+}
+function DialogTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...props,
+		className,
+		"data-fs-dialog-trigger": "",
+		children
+	});
+}
+function DialogPortal({ children }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { children });
+}
+function DialogBackdrop({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...props,
+		className,
+		"data-fs-dialog-backdrop": "",
+		children
+	});
+}
+function DialogViewport({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-dialog-viewport": "",
+		children
+	});
+}
+function DialogPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		...props,
+		className,
+		"data-fs-dialog-popup": "",
+		children
+	});
+}
+function DialogTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		...props,
+		className,
+		"data-fs-dialog-title": "",
+		children
+	});
+}
+function DialogDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		...props,
+		className,
+		"data-fs-dialog-description": "",
+		children
+	});
+}
+function DialogClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		...props,
+		className,
+		"data-fs-dialog-close": "",
+		children
+	});
+}
+const Dialog$1 = {
+	Root: DialogRoot,
+	Trigger: DialogTrigger,
+	Portal: DialogPortal,
+	Backdrop: DialogBackdrop,
+	Viewport: DialogViewport,
+	Popup: DialogPopup,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose
+};
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogBackdropDefinition, DialogClose, DialogCloseDefinition, DialogDescription, DialogDescriptionDefinition, DialogPopup, DialogPopupDefinition, DialogPortal, DialogPortalDefinition, DialogRoot, DialogRootDefinition, DialogTitle, DialogTitleDefinition, DialogTrigger, DialogTriggerDefinition, DialogViewport, DialogViewportDefinition };
+
+//# sourceMappingURL=dialog.js.map

package/dist/particles/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["BaseDialog","Dialog"],"sources":["../../../src/particles/dialog/dialog.tsx"],"sourcesContent":["'use client';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DialogRootProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  modal?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DialogPortalProps = {\n  children?: ReactNode;\n};\n\nexport type DialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DialogRootDefinition = defineComponent<DialogRootProps>({\n  name: 'DialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: DialogRoot,\n  editor: { label: 'Dialog Root', category: 'layout' },\n  schema: {\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a dialog overlay. Compose as: DialogRoot > (DialogTrigger + DialogPortal > (DialogBackdrop + DialogViewport > DialogPopup > (DialogTitle + content + DialogClose))). Set modal=false only when the dialog must coexist with page interactions.',\n});\n\nexport const DialogTriggerDefinition = defineComponent<DialogTriggerProps>({\n  name: 'DialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DialogTrigger,\n  editor: { label: 'Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the dialog when clicked. Direct child of DialogRoot. Accepts any children (text, Icon). Base UI connects it to DialogRoot via context — no explicit wiring needed.',\n});\n\nexport const DialogPortalDefinition = defineComponent<DialogPortalProps>({\n  name: 'DialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: DialogPortal,\n  editor: { label: 'Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body). Place DialogBackdrop and DialogViewport as direct children, in that order.',\n});\n\nexport const DialogBackdropDefinition = defineComponent<DialogBackdropProps>({\n  name: 'DialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DialogBackdrop,\n  editor: { label: 'Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of DialogPortal, before DialogViewport. Clicking it closes the dialog unless disablePointerDismissal is set on DialogRoot.',\n});\n\nexport const DialogViewportDefinition = defineComponent<DialogViewportProps>({\n  name: 'DialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: DialogViewport,\n  editor: { label: 'Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for DialogPopup. Direct child of DialogPortal, after DialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place DialogPopup inside.',\n});\n\nexport const DialogPopupDefinition = defineComponent<DialogPopupProps>({\n  name: 'DialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: DialogPopup,\n  editor: { label: 'Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible dialog panel, inside DialogViewport. Place DialogTitle (required), optional DialogDescription, your content, and DialogClose inside. Style with a background, padding, and shadow.',\n});\n\nexport const DialogTitleDefinition = defineComponent<DialogTitleProps>({\n  name: 'DialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: DialogTitle,\n  editor: { label: 'Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside DialogPopup — sets the accessible name of the dialog for screen readers. Use sr-only to hide it visually when a visual title already exists.',\n});\n\nexport const DialogDescriptionDefinition = defineComponent<DialogDescriptionProps>({\n  name: 'DialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: DialogDescription,\n  editor: { label: 'Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Optional description inside DialogPopup, after DialogTitle. Provides additional context to screen readers. Omit if the dialog content is self-explanatory.',\n});\n\nexport const DialogCloseDefinition = defineComponent<DialogCloseProps>({\n  name: 'DialogClose',\n  importPath: '@vtex/faststore/components',\n  component: DialogClose,\n  editor: { label: 'Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the dialog when clicked. Place inside DialogPopup — can appear multiple times (e.g., close icon at top-right and a Cancel button at the bottom).',\n});\n\nexport function DialogRoot({ open, defaultOpen, modal = true, onOpenChange, children }: DialogRootProps) {\n  return (\n    <BaseDialog.Root open={open} defaultOpen={defaultOpen} modal={modal} onOpenChange={onOpenChange}>\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nexport function DialogTrigger({ className, children, ...props }: DialogTriggerProps) {\n  return (\n    <BaseDialog.Trigger {...props} className={className} data-fs-dialog-trigger=\"\">\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nexport function DialogPortal({ children }: DialogPortalProps) {\n  return <BaseDialog.Portal>{children}</BaseDialog.Portal>;\n}\n\nexport function DialogBackdrop({ className, children, ...props }: DialogBackdropProps) {\n  return (\n    <BaseDialog.Backdrop {...props} className={className} data-fs-dialog-backdrop=\"\">\n      {children}\n    </BaseDialog.Backdrop>\n  );\n}\n\nexport function DialogViewport({ className, children, ...props }: DialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function DialogPopup({ className, children, ...props }: DialogPopupProps) {\n  return (\n    <BaseDialog.Popup {...props} className={className} data-fs-dialog-popup=\"\">\n      {children}\n    </BaseDialog.Popup>\n  );\n}\n\nexport function DialogTitle({ className, children, ...props }: DialogTitleProps) {\n  return (\n    <BaseDialog.Title {...props} className={className} data-fs-dialog-title=\"\">\n      {children}\n    </BaseDialog.Title>\n  );\n}\n\nexport function DialogDescription({ className, children, ...props }: DialogDescriptionProps) {\n  return (\n    <BaseDialog.Description {...props} className={className} data-fs-dialog-description=\"\">\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nexport function DialogClose({ className, children, ...props }: DialogCloseProps) {\n  return (\n    <BaseDialog.Close {...props} className={className} data-fs-dialog-close=\"\">\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\nexport const Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Portal: DialogPortal,\n  Backdrop: DialogBackdrop,\n  Viewport: DialogViewport,\n  Popup: DialogPopup,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n};\n"],"mappings":"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"}

package/dist/particles/document-field/document-field.d.ts

@@ -0,0 +1,61 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { applyMask } from "../shared/input-mask.js";
+import { ComponentPropsWithRef, FocusEvent } from "react";
+//#region src/particles/document-field/document-field.d.ts
+export type DocumentType = 'CPF';
+export type DocumentSpec = {
+  id: DocumentType;
+  name: string;
+  mask: string;
+  validate: (value: string) => boolean;
+};
+export type DocumentFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  invalid?: boolean;
+  errorMessage?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  documentType?: DocumentType;
+};
+/**
+ * CPF check-digit validation, ported from the legacy `validateCPF`. Strips non-digits, requires
+ * exactly 11 digits, rejects all-equal sequences (e.g. `111.111.111-11`), and verifies both check
+ * digits. Runs on blur/submit only, never per keystroke.
+ */
+export declare function validateCPF(value: string): boolean;
+export declare const DOCUMENTS: Record<DocumentType, DocumentSpec>;
+/** True when `type` is a document type this build supports (lets a host gate the field by locale). */
+export declare function isSupportedDocumentType(type: unknown): type is DocumentType;
+/**
+ * Apply a document type's mask to raw input: strip non-digits for digit-only masks, then truncate to
+ * the mask's slot count so excess characters never trail past the mask (e.g. a 15-digit paste into
+ * the 11-slot CPF mask yields `111.444.777-35`, not `111.444.777-358888`).
+ */
+export declare function maskDocumentValue(rawValue: string, documentType: DocumentType): string;
+/**
+ * Check-digit validity for a document value. An **empty** value is valid (the field is optional),
+ * mirroring the legacy `validateCardholderDocument`; a non-empty value must pass the document
+ * type's check-digit validation.
+ */
+export declare function isValidDocument(value: string, documentType: DocumentType): boolean;
+export declare const DocumentFieldDefinition: ComponentDefinition<DocumentFieldProps>;
+/**
+ * Presentational tax-document input (particle). Composes the `Field` particle (`Field.Root` +
+ * `Field.Label` + `Field.Control` + `Field.Error`) and owns the locale mask (applied progressively on
+ * every change, never blocking typing) plus check-digit validation (run on blur/submit only — never
+ * per keystroke). An empty value is valid (the field is optional). It surfaces `errorMessage` inline
+ * when the check digit fails or when the host forces `invalid` (e.g. a server error surfaced by the
+ * form that owns the write). It consumes no GraphQL and no domain context — value flows through
+ * `value`/`defaultValue`/`onValueChange`, and `documentType` selects the mask + validator.
+ */
+export declare function DocumentField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, documentType, className, ...props }: DocumentFieldProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { applyMask };
+//# sourceMappingURL=document-field.d.ts.map