@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/stories/templates/breadcrumb.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BreadcrumbTemplate } from '../../src/templates/breadcrumb';
+declare const meta: Meta<typeof BreadcrumbTemplate>;
+export default meta;
+type Story = StoryObj<typeof BreadcrumbTemplate>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const CustomSeparator: Story;
+export declare const Ellipsis: Story;
+export declare const ExplicitCurrent: Story;
+//# sourceMappingURL=breadcrumb.stories.d.ts.map

package/dist/stories/templates/breadcrumb.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACL,kBAAkB,EAEnB,MAAM,gCAAgC,CAAA;AA0BvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAwEzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEhD,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA"}

package/dist/stories/templates/carousel.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CarouselTemplate } from '../../src/templates/carousel';
+declare const meta: Meta<typeof CarouselTemplate>;
+export default meta;
+type Story = StoryObj<typeof CarouselTemplate>;
+export declare const Default: Story;
+export declare const Playground: Story;
+//# sourceMappingURL=carousel.stories.d.ts.map

package/dist/stories/templates/carousel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkHvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAyB9C,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA"}

package/dist/stories/templates/comprehensive-form.stories.d.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Comprehensive form showcasing all form input types with consistent sizing and validation states.
+ * This template helps verify that all form components have consistent visual appearance and spacing.
+ */
+export declare const AllFormInputs: Story;
+/**
+ * Shows all form inputs in small size for compact layouts.
+ */
+export declare const SmallSize: Story;
+/**
+ * Shows all form inputs in large size for accessibility or desktop layouts.
+ */
+export declare const LargeSize: Story;
+/**
+ * Shows all form inputs in error state to verify consistent error styling.
+ */
+export declare const ErrorState: Story;
+/**
+ * Shows all form inputs in success state to verify consistent success styling.
+ */
+export declare const SuccessState: Story;
+//# sourceMappingURL=comprehensive-form.stories.d.ts.map

package/dist/stories/templates/comprehensive-form.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comprehensive-form.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/comprehensive-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAatD,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAelC;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAkM3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA"}

package/dist/stories/templates/gallery.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GalleryTemplate } from '../../src/templates/gallery';
+declare const meta: Meta<typeof GalleryTemplate>;
+export default meta;
+type Story = StoryObj<typeof GalleryTemplate>;
+export declare const Playground: Story;
+//# sourceMappingURL=gallery.stories.d.ts.map

package/dist/stories/templates/gallery.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/gallery.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAgD7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CA0FtC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AAE7C,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAA"}

package/dist/stories/templates/numeric-input.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NumericInputTemplate } from '../../src/templates/numeric-input';
+declare const meta: Meta<typeof NumericInputTemplate>;
+export default meta;
+type Story = StoryObj<typeof NumericInputTemplate>;
+export declare const Default: Story;
+export declare const Playground: Story;
+//# sourceMappingURL=numeric-input.stories.d.ts.map

package/dist/stories/templates/numeric-input.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-input.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/numeric-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AAExE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CA0J3C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA"}

package/dist/stories/templates/popover.stories.d.ts

@@ -0,0 +1,55 @@
+import type { StoryObj } from "@storybook/react";
+import { PopoverTemplate } from "../../src/templates/popover";
+declare const meta: {
+    title: string;
+    component: typeof PopoverTemplate;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        placement: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        border: {
+            control: "boolean";
+        };
+        shadow: {
+            control: "boolean";
+        };
+        showArrow: {
+            control: "boolean";
+        };
+        showCloseButton: {
+            control: "boolean";
+        };
+    };
+    args: {
+        border: true;
+        children: import("react/jsx-runtime").JSX.Element;
+        description: string;
+        placement: "bottom";
+        shadow: true;
+        showArrow: true;
+        showCloseButton: false;
+        size: "md";
+        title: string;
+        trigger: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const WithCloseButton: Story;
+export declare const WithoutArrow: Story;
+//# sourceMappingURL=popover.stories.d.ts.map

package/dist/stories/templates/popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACL,eAAe,EAEhB,MAAM,6BAA6B,CAAA;AAEpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AAEnC,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA"}

package/dist/stories/templates/product-card.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductCardTemplate } from '../../src/templates/product-card';
+declare const meta: Meta<typeof ProductCardTemplate>;
+export default meta;
+type Story = StoryObj<typeof ProductCardTemplate>;
+export declare const Default: Story;
+export declare const Playground: Story;
+export declare const OnSale: Story;
+export declare const OutOfStock: Story;
+//# sourceMappingURL=product-card.stories.d.ts.map

package/dist/stories/templates/product-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/product-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAYtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CA2H1C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEjD,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA"}

package/dist/stories/templates/select.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SelectTemplate } from '../../src/templates/select';
+declare const meta: Meta<typeof SelectTemplate>;
+export default meta;
+type Story = StoryObj<typeof SelectTemplate>;
+export declare const Playground: Story;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+//# sourceMappingURL=select.stories.d.ts.map

package/dist/stories/templates/select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAS3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAoFrC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAenB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAA"}

package/dist/stories/templates/tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabsTemplate } from '../../src/templates/tabs';
+declare const meta: Meta<typeof TabsTemplate>;
+export default meta;
+type Story = StoryObj<typeof TabsTemplate>;
+export declare const Default: Story;
+export declare const Playground: Story;
+//# sourceMappingURL=tabs.stories.d.ts.map

package/dist/stories/templates/tabs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAsFnC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAyC1C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA"}

package/dist/templates/accordion.js

@@ -1,21 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "../molecules/accordion.js";
-function AccordionTemplate({ items, showIndicator = true, indicatorIcon = 'token-icon-accordion-chevron', variant = 'default', size = 'md', shadow = 'none', collapsible = true, multiple = false, defaultValue, value, onChange, ref, className, ...accordionProps }) {
+function AccordionTemplate({ items, showIndicator = true, indicatorIcon = "token-icon-accordion-chevron", variant = "default", size = "md", shadow = "none", collapsible = true, multiple = false, defaultValue, value, onChange, ref, className, ...accordionProps }) {
     return /*#__PURE__*/ jsx(Accordion, {
-        ref: ref,
-        variant: variant,
-        size: size,
-        shadow: shadow,
+        className: className,
         collapsible: collapsible,
-        multiple: multiple,
         defaultValue: defaultValue,
-        value: value,
+        multiple: multiple,
         onChange: onChange,
-        className: className,
+        ref: ref,
+        shadow: shadow,
+        size: size,
+        value: value,
+        variant: variant,
         ...accordionProps,
         children: items.map((item)=>/*#__PURE__*/ jsxs(Accordion.Item, {
-                value: item.value,
                 disabled: item.disabled,
+                value: item.value,
                 children: [
                     /*#__PURE__*/ jsxs(Accordion.Header, {
                         children: [

package/dist/templates/breadcrumb.js

@@ -0,0 +1,78 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment } from "react";
+import { Breadcrumb } from "../molecules/breadcrumb.js";
+const BreadcrumbTemplateLink = Breadcrumb.Link;
+function getDisplayItems(items, maxItems) {
+    if (maxItems <= 0 || items.length <= maxItems) return items;
+    if (1 === maxItems) {
+        const lastItem = items.at(-1);
+        return lastItem ? [
+            lastItem
+        ] : [];
+    }
+    const firstItem = items[0];
+    return firstItem ? [
+        firstItem,
+        "ellipsis",
+        ...items.slice(-(maxItems - 1))
+    ] : [];
+}
+function getItemKey(item, index) {
+    if ("ellipsis" === item) return `ellipsis-${index}`;
+    return item.value ?? `${index}-${String(item.label)}`;
+}
+function BreadcrumbTemplate({ items, maxItems = 0, linkAs, linkProps, separator, separatorIcon = "token-icon-breadcrumb-separator", iconSize, separatorIconSize, ellipsisIconSize, ref, ...breadcrumbProps }) {
+    const displayItems = getDisplayItems(items, maxItems);
+    const hasExplicitCurrent = displayItems.some((item)=>"ellipsis" !== item && item.isCurrent);
+    return /*#__PURE__*/ jsx(Breadcrumb, {
+        ref: ref,
+        ...breadcrumbProps,
+        children: /*#__PURE__*/ jsx(Breadcrumb.List, {
+            children: displayItems.map((item, index)=>{
+                const isLastItem = index === displayItems.length - 1;
+                if ("ellipsis" === item) return /*#__PURE__*/ jsxs(external_react_Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Breadcrumb.Ellipsis, {
+                            iconSize: ellipsisIconSize
+                        }),
+                        !isLastItem && /*#__PURE__*/ jsx(Breadcrumb.Separator, {
+                            icon: separatorIcon,
+                            iconSize: separatorIconSize,
+                            children: separator
+                        })
+                    ]
+                }, getItemKey(item, index));
+                const isCurrent = hasExplicitCurrent ? item.isCurrent : isLastItem;
+                const itemContent = /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        item.icon && /*#__PURE__*/ jsx(Breadcrumb.Icon, {
+                            icon: item.icon,
+                            size: item.iconSize ?? iconSize
+                        }),
+                        item.label
+                    ]
+                });
+                return /*#__PURE__*/ jsxs(external_react_Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Breadcrumb.Item, {
+                            children: isCurrent ? /*#__PURE__*/ jsx(Breadcrumb.CurrentLink, {
+                                children: itemContent
+                            }) : /*#__PURE__*/ jsx(BreadcrumbTemplateLink, {
+                                ...linkProps,
+                                as: linkAs,
+                                children: itemContent,
+                                href: item.href || "#"
+                            })
+                        }),
+                        !isLastItem && /*#__PURE__*/ jsx(Breadcrumb.Separator, {
+                            icon: item.separatorIcon ?? separatorIcon,
+                            iconSize: item.separatorIconSize ?? separatorIconSize,
+                            children: separator
+                        })
+                    ]
+                }, getItemKey(item, index));
+            })
+        })
+    });
+}
+export { BreadcrumbTemplate };

package/dist/templates/carousel.js

@@ -1,31 +1,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Carousel } from "../molecules/carousel.js";
-function CarouselTemplate({ slides, showControls = true, showIndicators = true, showAutoplay = false, prevIcon = 'token-icon-carousel-prev', nextIcon = 'token-icon-carousel-next', size, objectFit, aspectRatio, orientation, loop, autoplay, allowMouseDrag, slidesPerPage, slidesPerMove, spacing, padding, imageAs, width, height, className, onPageChange, ...carouselProps }) {
+function CarouselTemplate({ slides, showControls = true, showIndicators = true, showAutoplay = false, prevIcon = "token-icon-carousel-prev", nextIcon = "token-icon-carousel-next", size, objectFit, aspectRatio, orientation, loop, autoplay, allowMouseDrag, slidesPerPage, slidesPerMove, spacing, padding, imageAs, width, height, className, onPageChange, ...carouselProps }) {
     return /*#__PURE__*/ jsxs(Carousel, {
-        size: size,
-        objectFit: objectFit,
+        allowMouseDrag: allowMouseDrag,
         aspectRatio: aspectRatio,
+        autoplay: autoplay,
+        className: className,
+        height: height,
+        imageAs: imageAs,
+        loop: loop,
+        objectFit: objectFit,
+        onPageChange: onPageChange,
         orientation: orientation,
+        padding: padding,
+        size: size,
         slideCount: slides.length,
-        loop: loop,
-        autoplay: autoplay,
-        allowMouseDrag: allowMouseDrag,
-        slidesPerPage: slidesPerPage,
         slidesPerMove: slidesPerMove,
+        slidesPerPage: slidesPerPage,
         spacing: spacing,
-        padding: padding,
-        imageAs: imageAs,
         width: width,
-        height: height,
-        className: className,
-        onPageChange: onPageChange,
         ...carouselProps,
         children: [
             /*#__PURE__*/ jsx(Carousel.Slides, {
-                slides: slides,
                 imageAs: imageAs,
-                width: width,
-                height: height
+                slides: slides
             }),
             (showControls || showIndicators) && /*#__PURE__*/ jsxs(Carousel.Control, {
                 children: [

package/dist/templates/gallery.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Carousel } from "../molecules/carousel.js";
+import { Gallery } from "../organisms/gallery.js";
+function resolveSlides(items, renderSlide) {
+    if (!renderSlide) return items;
+    return items.map((item, index)=>({
+            ...item,
+            content: renderSlide({
+                item,
+                index
+            })
+        }));
+}
+function GalleryTemplate({ items, orientation, carouselWidth, carouselHeight, fitParent = false, carouselClassName, slidesClassName, mainClassName, thumbnailsClassName, thumbnailsScrollAreaClassName, thumbnailsListClassName, thumbnailClassName, renderThumbnail, renderSlide, showControls = false, showIndicators = false, showAutoplay = false, controlsClassName, indicatorsClassName, controlPosition = "unset", prevIcon = "token-icon-carousel-prev", nextIcon = "token-icon-carousel-next", previousTriggerClassName, nextTriggerClassName, autoplayTriggerClassName, aspectRatio, size, objectFit, loop, autoplay, allowMouseDrag, imageAs, onPageChange, thumbnailImageAs, ...galleryProps }) {
+    const resolvedItems = resolveSlides(items, renderSlide);
+    const resolvedOrientation = orientation ?? "vertical";
+    const resolvedCarouselWidth = carouselWidth ?? (fitParent ? "100%" : void 0);
+    const resolvedCarouselHeight = carouselHeight;
+    const resolvedCarouselProps = {
+        orientation: resolvedOrientation,
+        aspectRatio: aspectRatio ?? "portrait",
+        size: size ?? "full",
+        objectFit: objectFit ?? "cover",
+        loop: loop ?? true,
+        autoplay,
+        allowMouseDrag,
+        imageAs,
+        onPageChange,
+        className: carouselClassName,
+        width: resolvedCarouselWidth,
+        height: resolvedCarouselHeight
+    };
+    return /*#__PURE__*/ jsxs(Gallery, {
+        ...galleryProps,
+        carouselProps: resolvedCarouselProps,
+        items: resolvedItems,
+        orientation: resolvedOrientation,
+        thumbnailImageAs: thumbnailImageAs ?? imageAs,
+        children: [
+            /*#__PURE__*/ jsx(Gallery.Thumbnails, {
+                className: thumbnailsClassName,
+                listClassName: thumbnailsListClassName,
+                renderThumbnail: renderThumbnail,
+                scrollAreaClassName: thumbnailsScrollAreaClassName,
+                thumbnailClassName: thumbnailClassName
+            }),
+            /*#__PURE__*/ jsx(Gallery.Main, {
+                className: mainClassName,
+                children: /*#__PURE__*/ jsxs(Gallery.Carousel, {
+                    children: [
+                        /*#__PURE__*/ jsx(Gallery.Slides, {
+                            className: slidesClassName
+                        }),
+                        (showControls || showIndicators) && /*#__PURE__*/ jsxs(Carousel.Control, {
+                            className: controlsClassName,
+                            controlPosition: controlPosition,
+                            children: [
+                                showControls && /*#__PURE__*/ jsx(Carousel.Previous, {
+                                    className: previousTriggerClassName,
+                                    icon: prevIcon
+                                }),
+                                showControls && showIndicators && /*#__PURE__*/ jsx("div", {
+                                    className: "flex-1"
+                                }),
+                                showIndicators && /*#__PURE__*/ jsx(Carousel.Indicators, {
+                                    className: indicatorsClassName,
+                                    children: resolvedItems.map((item, index)=>/*#__PURE__*/ jsx(Carousel.Indicator, {
+                                            index: index
+                                        }, `gallery-indicator-${item.id}`))
+                                }),
+                                showControls && showIndicators && /*#__PURE__*/ jsx("div", {
+                                    className: "flex-1"
+                                }),
+                                showControls && /*#__PURE__*/ jsx(Carousel.Next, {
+                                    className: nextTriggerClassName,
+                                    icon: nextIcon
+                                })
+                            ]
+                        }),
+                        showAutoplay && /*#__PURE__*/ jsx(Carousel.Autoplay, {
+                            className: autoplayTriggerClassName
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { GalleryTemplate };

package/dist/templates/numeric-input.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumericInput } from "../atoms/numeric-input.js";
-function NumericInputTemplate({ showControls = true, showScrubber = false, controlsPosition = 'right', incrementIcon = 'token-icon-numeric-input-increment', decrementIcon = 'token-icon-numeric-input-decrement', className, ref, ...numericInputProps }) {
-    if ('right' === controlsPosition) return /*#__PURE__*/ jsx(NumericInput, {
+function NumericInputTemplate({ showControls = true, showScrubber = false, controlsPosition = "right", incrementIcon = "token-icon-numeric-input-increment", decrementIcon = "token-icon-numeric-input-decrement", className, ref, ...numericInputProps }) {
+    if ("right" === controlsPosition) return /*#__PURE__*/ jsx(NumericInput, {
         ...numericInputProps,
-        ref: ref,
         className: className,
+        ref: ref,
         children: /*#__PURE__*/ jsxs(NumericInput.Control, {
             children: [
                 showScrubber && /*#__PURE__*/ jsx(NumericInput.Scrubber, {}),
@@ -24,8 +24,8 @@ function NumericInputTemplate({ showControls = true, showScrubber = false, contr
     });
     return /*#__PURE__*/ jsx(NumericInput, {
         ...numericInputProps,
-        ref: ref,
         className: className,
+        ref: ref,
         children: /*#__PURE__*/ jsxs("div", {
             className: "flex items-center gap-50",
             children: [

package/dist/templates/popover.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "../molecules/popover.js";
+function PopoverTemplate({ children, contentClassName, contentProps, contentRef, description, disabled = false, showArrow = true, showCloseButton = false, title, trigger, triggerClassName, triggerProps, triggerRef, ...rootProps }) {
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        ...rootProps,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Trigger, {
+                ...triggerProps,
+                className: triggerClassName,
+                disabled: disabled,
+                ref: triggerRef,
+                children: trigger
+            }),
+            /*#__PURE__*/ jsx(Popover.Positioner, {
+                children: /*#__PURE__*/ jsxs(Popover.Content, {
+                    ...contentProps,
+                    className: contentClassName,
+                    ref: contentRef,
+                    children: [
+                        showCloseButton && /*#__PURE__*/ jsx(Popover.CloseTrigger, {}),
+                        showArrow && /*#__PURE__*/ jsx(Popover.Arrow, {}),
+                        title && /*#__PURE__*/ jsx(Popover.Title, {
+                            children: title
+                        }),
+                        description && /*#__PURE__*/ jsx(Popover.Description, {
+                            children: description
+                        }),
+                        children
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { PopoverTemplate };

package/dist/templates/product-card.js

@@ -2,22 +2,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge } from "../atoms/badge.js";
 import { ProductCard } from "../molecules/product-card.js";
 import { slugify } from "../utils.js";
-function ProductCardTemplate({ image, name, price, originalPrice, badges, rating, stock, showActions = true, onAddToCart, onViewDetails, onAddToWishlist, cartButtonText = 'Add to Cart', detailButtonText = 'View Details', wishlistButtonText = 'Add to Wishlist', layout = 'column', className }) {
+function ProductCardTemplate({ image, name, price, originalPrice, badges, rating, stock, showActions = true, onAddToCart, onViewDetails, onAddToWishlist, cartButtonText = "Add to Cart", detailButtonText = "View Details", wishlistButtonText = "Add to Wishlist", layout = "column", className }) {
     return /*#__PURE__*/ jsxs(ProductCard, {
-        layout: layout,
         className: className,
+        layout: layout,
         children: [
             image && /*#__PURE__*/ jsx(ProductCard.Image, {
-                src: image.src,
-                alt: image.alt
+                alt: image.alt,
+                src: image.src
             }),
             badges && badges.length > 0 && /*#__PURE__*/ jsx(ProductCard.Badges, {
                 children: badges.map((badge)=>{
-                    if ('dynamic' === badge.variant) return /*#__PURE__*/ jsx(Badge, {
-                        variant: "dynamic",
+                    if ("dynamic" === badge.variant) return /*#__PURE__*/ jsx(Badge, {
                         bgColor: badge.bgColor,
-                        fgColor: badge.fgColor,
                         borderColor: badge.borderColor,
+                        fgColor: badge.fgColor,
+                        variant: "dynamic",
                         children: badge.children
                     }, slugify(badge.children));
                     return /*#__PURE__*/ jsx(Badge, {
@@ -33,7 +33,7 @@ function ProductCardTemplate({ image, name, price, originalPrice, badges, rating
                 className: "flex items-baseline gap-100",
                 children: [
                     originalPrice && /*#__PURE__*/ jsx("span", {
-                        className: "text-fg-muted line-through",
+                        className: "line-through",
                         children: originalPrice
                     }),
                     price && /*#__PURE__*/ jsx(ProductCard.Price, {
@@ -51,7 +51,7 @@ function ProductCardTemplate({ image, name, price, originalPrice, badges, rating
                         }
                     }),
                     rating.reviewCount && /*#__PURE__*/ jsxs("span", {
-                        className: "text-fg-muted text-sm",
+                        className: "text-sm",
                         children: [
                             "(",
                             rating.reviewCount,
@@ -61,7 +61,7 @@ function ProductCardTemplate({ image, name, price, originalPrice, badges, rating
                 ]
             }),
             stock && /*#__PURE__*/ jsx(ProductCard.Stock, {
-                status: stock.status || 'in-stock',
+                status: stock.status || "in-stock",
                 children: stock.label
             }),
             showActions && (onAddToCart || onViewDetails || onAddToWishlist) && /*#__PURE__*/ jsxs(ProductCard.Actions, {

package/dist/templates/select.js

@@ -0,0 +1,43 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "../molecules/select.js";
+function SelectTemplate({ items, label, labelProps, placeholder, valueText, valueTextProps, showIndicator = true, renderItem, ref, ...selectProps }) {
+    return /*#__PURE__*/ jsxs(Select, {
+        items: items,
+        ref: ref,
+        ...selectProps,
+        children: [
+            label ? /*#__PURE__*/ jsx(Select.Label, {
+                ...labelProps,
+                children: label
+            }) : null,
+            /*#__PURE__*/ jsx(Select.Control, {
+                children: /*#__PURE__*/ jsx(Select.Trigger, {
+                    children: /*#__PURE__*/ jsx(Select.ValueText, {
+                        placeholder: placeholder,
+                        ...valueTextProps,
+                        children: valueText
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Select.Positioner, {
+                children: /*#__PURE__*/ jsx(Select.Content, {
+                    children: items.map((item)=>/*#__PURE__*/ jsxs(Select.Item, {
+                            item: item,
+                            children: [
+                                renderItem ? /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        renderItem(item),
+                                        /*#__PURE__*/ jsx(Select.ItemText, {
+                                            className: "sr-only"
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ jsx(Select.ItemText, {}),
+                                showIndicator && /*#__PURE__*/ jsx(Select.ItemIndicator, {})
+                            ]
+                        }, item.value))
+                })
+            })
+        ]
+    });
+}
+export { SelectTemplate };

package/dist/templates/tabs.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "../molecules/tabs.js";
-function TabsTemplate({ items, showIndicator = false, variant = 'default', size = 'md', fitted = false, justify = 'start', orientation = 'horizontal', defaultValue, value, onValueChange, ref, className, ...tabsProps }) {
+function TabsTemplate({ items, showIndicator = false, variant = "default", size = "md", fitted = false, justify = "start", orientation = "horizontal", defaultValue, value, onValueChange, ref, className, ...tabsProps }) {
     return /*#__PURE__*/ jsxs(Tabs, {
-        ref: ref,
-        variant: variant,
-        size: size,
+        className: className,
+        defaultValue: defaultValue,
         fitted: fitted,
         justify: justify,
+        onValueChange: onValueChange,
         orientation: orientation,
-        defaultValue: defaultValue,
+        ref: ref,
+        size: size,
         value: value,
-        onValueChange: onValueChange,
-        className: className,
+        variant: variant,
         ...tabsProps,
         children: [
             /*#__PURE__*/ jsxs(Tabs.List, {
                 children: [
                     items.map((item)=>/*#__PURE__*/ jsx(Tabs.Trigger, {
-                            value: item.value,
                             disabled: item.disabled,
+                            value: item.value,
                             children: item.label
                         }, item.value)),
                     showIndicator && /*#__PURE__*/ jsx(Tabs.Indicator, {})

package/dist/test/visual.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=visual.spec.d.ts.map