@stamcat/craftsman 0.0.27-alpha.10 → 0.0.27-alpha.11

package/Styles.esm.js

@@ -1,7 +1,7 @@
 import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
 import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
-import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, LayoutWidthsSchema as c, MaxScreenWidthSchema as l, ScreenWidthSchema as u, TextSize as d, TextTags as f, TextType as p, zLabelPosition as m, zTextInputExclusions as h, zTextInputType as g, zTextInputTypes as _ } from "./src/utilities/types.esm.js";
-import { breakpoint as v, media as y, width as b, widths as x } from "./src/styles/utilities/layout.esm.js";
-import { themeBuilder as S } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as C } from "./src/styles/components/ThemeProvider.esm.js";
-export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as LayoutWidthsSchema, l as MaxScreenWidthSchema, u as ScreenWidthSchema, d as TextSize, f as TextTags, p as TextType, C as ThemeProvider, v as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, y as media, S as themeBuilder, b as width, x as widths, m as zLabelPosition, h as zTextInputExclusions, g as zTextInputType, _ as zTextInputTypes };
+import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, CarouselPageType as c, LayoutWidthsSchema as l, MaxScreenWidthSchema as u, ScreenWidthSchema as d, TextSize as f, TextTags as p, TextType as m, zLabelPosition as h, zTextInputExclusions as g, zTextInputType as _, zTextInputTypes as v } from "./src/utilities/types.esm.js";
+import { breakpoint as y, media as b, width as x, widths as S } from "./src/styles/utilities/layout.esm.js";
+import { themeBuilder as C } from "./src/styles/theme/theme.esm.js";
+import { ThemeProvider as w } from "./src/styles/components/ThemeProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as CarouselPageType, l as LayoutWidthsSchema, u as MaxScreenWidthSchema, d as ScreenWidthSchema, f as TextSize, p as TextTags, m as TextType, w as ThemeProvider, y as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, b as media, C as themeBuilder, x as width, S as widths, h as zLabelPosition, g as zTextInputExclusions, _ as zTextInputType, v as zTextInputTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.10",
+  "version": "0.0.27-alpha.11",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -25,6 +25,8 @@
   "dependencies": {
     "clsx": "2.1.1",
     "dompurify": "3.4.13",
+    "embla-carousel-react": "8.6.0",
+    "pure-react-carousel": "1.35.0",
     "react": "19.2.7",
     "react-date-picker": "12.0.2",
     "react-datetime-picker": "7.0.2",

package/src/components/Carousel/Carousel.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
+import { CarouselPageType } from '../../utilities/types';
+export type CarouselProps = {
+    slides?: React.ReactNode[];
+    options?: EmblaOptionsType;
+    className?: string;
+    style?: React.CSSProperties;
+    buttons?: boolean;
+    pagination?: CarouselPageType;
+};
+export declare const Carousel: React.FC<CarouselProps>;

package/src/components/Carousel/Carousel.scss

@@ -0,0 +1,32 @@
+@use "../../styles/utilities/functions" as u;
+
+.carousel {
+    position: relative;
+
+    &__viewport {
+        overflow: hidden;
+    }
+
+    &__container {
+        display: flex;
+        touch-action: pan-y pinch-zoom;
+    }
+
+    &__slide {
+        flex: 0 0 100%;
+        min-width: 0;
+    }
+
+    &__controls {
+        display: inline-flex;
+        justify-content: space-between;
+        flex-flow: row nowrap;
+        gap: #{u.width("gutter", 0.5)};
+        margin-top: #{u.width("gutter", 0.75)};
+        width: 100%;
+    }
+    &__dots button {
+        margin: 0 #{u.width("gutter", 0.125)};
+    }
+
+}

package/src/components/Loader/types.d.ts

@@ -1,8 +1,8 @@
 import { default as z } from 'zod';
 import { default as React } from 'react';
 export declare const LoaderStyleSchema: z.ZodEnum<{
-    spinner: "spinner";
     dots: "dots";
+    spinner: "spinner";
     "dots-trace": "dots-trace";
     "dots-orbit": "dots-orbit";
     dashes: "dashes";

package/src/stories/molecules/Carousel.scss

@@ -0,0 +1,19 @@
+
+@use "../../styles/utilities/functions" as u;
+
+.carouselWrapper {
+    width: 400px;
+    img {
+        width: 100%;
+    }
+    figcaption {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        font-weight: bold;
+        background-color: #{u.color("white", rgba, 0.75)};
+        padding: #{u.width("gutter", 0.5)} 0 #{u.width("gutter")};
+    }
+
+}

package/src/styles/global/globalStyles.scss

@@ -72,6 +72,10 @@
             @extend %radio;
         }
     }
+    figure {
+        margin: 0;
+        
+    }
     textarea {
         @extend %input-base;
     }

package/src/utilities/types.d.ts

@@ -116,3 +116,8 @@ export declare const TextSize: z.ZodEnum<{
     xsmall: "xsmall";
 }>;
 export type TextSize = z.infer<typeof TextSize>;
+export declare const CarouselPageType: z.ZodEnum<{
+    dots: "dots";
+    numbers: "numbers";
+}>;
+export type CarouselPageType = z.infer<typeof CarouselPageType>;

package/src/utilities/types.esm.js

@@ -74,6 +74,6 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"medium",
 	"small",
 	"xsmall"
-]);
+]), m = e.enum(["dots", "numbers"]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, u as ButtonType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, p as TextSize, d as TextTags, f as TextType, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };
+export { t as BaseWidthSchema, i as BreakpointSchema, u as ButtonType, m as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, p as TextSize, d as TextTags, f as TextType, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };