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

package/AGENTS.md

@@ -11,11 +11,16 @@ Use these imports:
 ```tsx
 import { Button } from "@stamcat/craftsman/Button";
 import { Checkbox } from "@stamcat/craftsman/Checkbox";
+import { DatePicker } from "@stamcat/craftsman/DatePicker";
 import { Input } from "@stamcat/craftsman/Input";
 import { InputPassword } from "@stamcat/craftsman/InputPassword";
+import { InputPhone } from "@stamcat/craftsman/InputPhone";
 import { Loader } from "@stamcat/craftsman/Loader";
 import { Modal } from "@stamcat/craftsman/Modal";
 import { RadioButton } from "@stamcat/craftsman/RadioButton";
+import { Select } from "@stamcat/craftsman/Select";
+import { Text } from "@stamcat/craftsman/Text";
+import { Textarea } from "@stamcat/craftsman/Textarea";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -27,6 +32,125 @@ Do not assume a root export like `@stamcat/craftsman` unless that export is expl
 3. Do not import storybook files or internal style utilities from consuming applications.
 4. Prefer standard React props first; use custom props only when required.
 
+## Code Block Rendering
+
+Craftsman's global styles automatically style `<code>` and `<code><pre>` elements. **Never create custom inline styles or wrapper divs to simulate a code block.** Use the native elements directly:
+
+```tsx
+// Inline code — renders with pill/badge style
+<code>someValue</code>
+
+// Block code — renders with dark background, padding, and border-radius
+<code><pre>{`your
+multiline
+code here`}</pre></code>
+```
+
+The two modes are driven by `_code.scss`:
+- `<code>` alone → light gray background, inline display
+- `<code>` containing `<pre>` → dark background (`--gray800`), block display, padded and rounded
+
+Do not create `preStyle`, `codeBlockStyle`, or equivalent inline style objects for this purpose. The global styles handle it.
+
+## Style Utilities
+
+Craftsman provides TypeScript helpers and matching Sass functions for color, spacing, and breakpoints. Always use these instead of hard-coded values so theming and overrides work correctly.
+
+### color()
+
+**TypeScript** — import from `@stamcat/craftsman/styles`:
+
+```ts
+import { color, colors, hexToRgba } from "@stamcat/craftsman/styles";
+
+// Returns var(--blue500)
+color("blue500")
+
+// Returns rgb(from var(--blue500) r g b / 0.5)
+color("blue500", "rgba", 0.5)
+
+// Fallback for environments that don't support CSS relative color syntax
+hexToRgba(colors.blue500, 0.5)
+```
+
+**Sass** — import `functions` as `u`:
+
+```scss
+@use "@stamcat/craftsman/styles/utilities/functions" as u;
+
+.element {
+  color:      #{u.color(blue500)};
+  background: #{u.color(black, rgba, 0.4)};
+}
+```
+
+- `color(name)` → `var(--name)` — always prefer this over hard-coded hex values so theme overrides apply.
+- `color(name, rgba, alpha)` → `rgb(from var(--name) r g b / alpha)` — uses CSS relative color syntax; verify browser support for your target.
+- Never hard-code hex color values. Always use `color()` or a CSS variable.
+
+### width()
+
+**TypeScript** — import from `@stamcat/craftsman/styles`:
+
+```ts
+import { width } from "@stamcat/craftsman/styles";
+
+width("gutter")        // var(--w-gutter, 16px)
+width("gutter", 0.5)   // calc(var(--w-gutter, 16px) * 0.5)
+width("column", 3)     // calc((var(--w-column) * 3) + (var(--w-gutter) * 2))
+```
+
+**Sass** — import `functions` as `u`:
+
+```scss
+@use "@stamcat/craftsman/styles/utilities/functions" as u;
+
+.card {
+  padding:   #{u.width(gutter)};
+  gap:       #{u.width(gutter, 0.5)};
+  max-width: #{u.width(column, 4)};
+}
+```
+
+Valid keys: `text` · `gutter` · `column` · `tablet` · `desktop` · `extDesktop` · `mobileMax` · `tabletMax` · `desktopMax`
+
+- The `column` key automatically accounts for gutters between columns.
+- Never use hard-coded `px` values for spacing or layout widths. Always use `width()`.
+
+### breakpoint()
+
+**TypeScript** — returns a full `@media` rule string for CSS-in-JS:
+
+```ts
+import { breakpoint, media } from "@stamcat/craftsman/styles";
+
+// Full rule — use inside styled-components, emotion, or style injection
+breakpoint("desktop", "font-size: 18px;")
+// => "@media (min-width: 1040px) { font-size: 18px; }"
+
+// Raw query string only — use for conditional logic or matchMedia
+media.tablet  // => "(min-width: 660px)"
+```
+
+**Sass** — `@include breakpoint(key)` wraps content in the correct `@media` query:
+
+```scss
+@use "@stamcat/craftsman/styles/utilities/functions" as u;
+
+.sidebar {
+  display: none;
+
+  @include u.breakpoint(tablet) {
+    display: block;
+  }
+}
+```
+
+Available breakpoint keys: `tablet` · `tabletMax` · `tabletOnly` · `desktop` · `desktopMax` · `desktopOnly` · `extDesktop` · `mobileMax` · `mobileOnly` · `mobileTablet`
+
+- Breakpoint values come from `_config.scss` and stay in sync with any project overrides.
+- Never hard-code `@media (min-width: 1040px)` or similar — always use `breakpoint()` so values stay consistent with config.
+
 ## Component Contracts
 
 ### Button
@@ -48,8 +172,8 @@ Behavior notes:
 
 - `type` defaults to `"button"`.
 - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
-- Theme class merge: if `theme.components.button` is a string, it is appended to the class list.
-- `className` is preserved and merged after variant/theme classes.
+- `className` is preserved and merged after component classes.
+- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
 - If `children` is empty (per `isEmpty`), the component renders nothing.
 - `size` is clamped to `[0.1, 10]` before styling is applied.
 - When `size` is provided, Button scales:
@@ -310,12 +434,247 @@ Example:
 <Loader type="spinner" color="var(--blue500)" width={40} aria-label="Loading" />
 ```
 
+### Textarea
+
+Import:
+
+```tsx
+import { Textarea } from "@stamcat/craftsman/Textarea";
+```
+
+Props:
+
+- Inherits all native `<textarea>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `rows?: number`
+
+Behavior notes:
+
+- Shares the same `InputWrapper` as `Input` — label, error, and required behavior is identical.
+- `id` is auto-generated via `useId` if not provided.
+
+Example:
+
+```tsx
+<Textarea
+  label="Your Message"
+  placeholder="Type here"
+  rows={4}
+  required
+/>
+```
+
+### Select
+
+Import:
+
+```tsx
+import { Select } from "@stamcat/craftsman/Select";
+```
+
+Props:
+
+- Inherits all native `<select>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `options?: Array<{ label: string; value: string }>`
+
+Behavior notes:
+
+- Built on the native `<select>` element via `InputWrapper`.
+- Pass options as a plain array — do not render `<option>` children manually.
+- `id` is auto-generated via `useId` if not provided.
+
+Example:
+
+```tsx
+<Select
+  label="Favorite Fruit"
+  required
+  options={[
+    { value: "", label: "Select one..." },
+    { value: "apple", label: "Apple" },
+    { value: "banana", label: "Banana" },
+  ]}
+/>
+```
+
+### InputPhone
+
+Import:
+
+```tsx
+import { InputPhone } from "@stamcat/craftsman/InputPhone";
+```
+
+Props:
+
+- Extends `PhoneInputProps` from `react-international-phone`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `defaultCountry?: string` (default: `"us"`)
+- `preferredCountries?: string[]`
+- `endAdornment?: ReactNode`
+
+Behavior notes:
+
+- Powered by `react-international-phone` for i18n-aware phone number formatting.
+- Country selector dropdown opens below the field; ensure the container has at least 350px of vertical space.
+- Use `preferredCountries` to surface commonly used countries at the top of the dropdown.
+
+Example:
+
+```tsx
+<InputPhone
+  label="Phone Number"
+  defaultCountry="us"
+  preferredCountries={["us", "gb", "ca"]}
+  required
+/>
+```
+
+### DatePicker
+
+Import:
+
+```tsx
+import { DatePicker } from "@stamcat/craftsman/DatePicker";
+```
+
+Props:
+
+- Extends `DatePickerProps` from `react-date-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `value?: Date | null`
+- `onChange?: (value: DatePickerProps["value"]) => void`
+
+Behavior notes:
+
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has at least 400px of vertical space.
+- Use `useState` to manage the selected date value.
+
+Example:
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker
+  label="Appointment Date"
+  value={date}
+  onChange={setDate}
+  required
+/>
+```
+
+### Text
+
+Import:
+
+```tsx
+import { Text } from "@stamcat/craftsman/Text";
+```
+
+Props:
+
+- Inherits all native HTML element props.
+- `as?: TextTags` — HTML tag to render (default: `"div"`)
+- `richText?: boolean` — when `true`, renders sanitized HTML from a string `children` value (always renders as `<div>`)
+- `type?: TextType` — overrides base type styling (e.g. `"display"`, `"heading"`)
+- `size?: TextSize` — overrides base size styling
+- `alignment?: "center" | "left" | "right"` — legacy text-align shorthand
+
+Behavior notes:
+
+- Uses global HTML5 tag declarations by default; `type` and `size` override base styling.
+- `richText` mode sanitizes HTML via DOMPurify. Always pass a string as `children` in this mode.
+- Prefer semantic HTML5 tags via `as` over using `type`/`size` overrides.
+
+Example:
+
+```tsx
+// Semantic heading
+<Text as="h2">Section Title</Text>
+
+// Sanitized rich text from a CMS
+<Text richText>{'<p><strong>Hello</strong> world</p>'}</Text>
+```
+
+### Toast (react-toastify)
+
+Craftsman re-exports `toast` and `ToastContainer` from `react-toastify`. No custom wrapper is needed.
+
+Import:
+
+```tsx
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+```
+
+Usage:
+
+- Render one `<ToastContainer>` near the root of your app.
+- Call `toast(...)` anywhere in response to user actions.
+- `ToastContainer` props: `position`, `autoClose`, `theme` (`"light" | "dark" | "colored"`), `closeOnClick`, `pauseOnHover`, `draggable`, `newestOnTop`.
+
+Example:
+
+```tsx
+// Root layout
+<ToastContainer position="bottom-right" autoClose={3000} theme="light" />
+
+// Anywhere in the app
+toast("Saved successfully!");
+toast.error("Something went wrong.");
+toast.success("Profile updated.");
+toast.warning("Unsaved changes.");
+toast.info("New version available.");
+```
+
 ## Styling Expectations
 
 - Components are built with SCSS modules and class-based variant hooks.
 - If your app does not include this package's global CSS variable setup, visual output may differ.
 - Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
 
+## Theme Authoring
+
+- `theme.root` supports JS style objects and raw CSS/Sass strings.
+- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
+- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
+- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
+- For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
+
+Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
+
+Example:
+
+```tsx
+import greenRoot from "./green.root.scss?inline";
+import greenButton from "./green.button.scss?inline";
+
+export const theme = {
+  widths: {
+    gutter: 20,
+    tablet: 768,
+  },
+  root: greenRoot,
+  components: {
+    button: greenButton,
+  },
+};
+```
+
 ## Utility Functions
 
 ### `isEmpty`
@@ -350,6 +709,37 @@ if (Object.keys(obj).length === 0) { ... }
 if (arr.length === 0) { ... }
 ```
 
+### Style utilities parity (`color`, `width`, `breakpoint`)
+
+These utility patterns exist in both TypeScript and Sass.
+
+TypeScript usage:
+
+```ts
+import { color, width, breakpoint } from "@stamcat/craftsman/styles";
+
+const accent = color("blue500");
+const alphaAccent = color("blue500", "rgba", 0.32);
+const twoColumns = width("column", 2);
+const mobileRule = breakpoint("mobileMax", "h4{font-size:14px;}");
+```
+
+Sass usage (framework source):
+
+```scss
+@use "./src/styles/utilities" as u;
+
+.example {
+  color: #{u.color(blue500)};
+  background: #{u.color(blue500, rgba, 0.32)};
+  max-width: #{u.width(column, 2)};
+}
+
+@include u.breakpoint(mobileMax) {
+  .example { font-size: #{u.width(text)}; }
+}
+```
+
 ## Code Generation Patterns to Prefer
 
 1. Generate fully typed React usage examples.
@@ -367,6 +757,6 @@ if (arr.length === 0) { ... }
 
 If uncertain about available exports:
 
-1. Use only `Button`, `Checkbox`, `Input`, `InputPassword`, `Loader`, `Modal`, and `RadioButton` from their component entry points.
+1. Use only `Button`, `Checkbox`, `DatePicker`, `Input`, `InputPassword`, `InputPhone`, `Loader`, `Modal`, `RadioButton`, `Select`, `Text`, and `Textarea` from their component entry points.
 2. Do not invent package APIs.
 3. Prefer native HTML elements for anything not explicitly exported.

package/Components.esm.js

@@ -1,20 +1,30 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
-import { Button as t } from "./src/components/Button.esm.js";
-import { Input as n } from "./src/components/Input.esm.js";
-import { InputPassword as r } from "./src/components/InputPassword.esm.js";
-import { Loader as i } from "./src/components/Loader.esm.js";
-import { RadioButton as a } from "./src/components/RadioButton.esm.js";
-import { Checkbox as o } from "./src/components/Checkbox.esm.js";
-import { Modal as s } from "./src/components/Modal.esm.js";
+import { Button as t } from "./src/components/Button/Button.esm.js";
+import { Input as n } from "./src/components/Input/Input2.esm.js";
+import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
+import { Loader as i } from "./src/components/Loader/Loader.esm.js";
+import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
+import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
+import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
+import { Text as c } from "./src/components/Text/Text2.esm.js";
+import { Modal as l } from "./src/components/Modal/Modal.esm.js";
+import { Select as u } from "./src/components/Select/Select.esm.js";
+import { DatePicker as d } from "./src/components/Input/DatePicker.esm.js";
+import { InputPhone as f } from "./src/components/Input/InputPhone.esm.js";
 //#region src/components/index.ts
-var c = /* @__PURE__ */ e({
+var p = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
+	DatePicker: () => d,
 	Input: () => n,
 	InputPassword: () => r,
+	InputPhone: () => f,
 	Loader: () => i,
-	Modal: () => s,
-	RadioButton: () => a
+	Modal: () => l,
+	RadioButton: () => a,
+	Select: () => u,
+	Text: () => c,
+	Textarea: () => s
 });
 //#endregion
-export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, s as Modal, a as RadioButton, c as components_exports };
+export { t as Button, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, p as components_exports };

package/README.md

@@ -17,7 +17,7 @@ Use this pattern in React Server Component architectures (for example Next.js Ap
 
 ```tsx
 import { ThemeProvider } from "@stamcat/craftsman/styles";
-import "@stamcat/craftsman/styles/globalStyles.module.scss";
+import "@stamcat/craftsman/styles/globalStyles";
 
 const appTheme = {
 	root: {
@@ -50,3 +50,8 @@ import { Modal } from "@stamcat/craftsman/Modal";
 
 - `ThemeProvider` injects theme CSS variables and component override rules.
 - Global styles should be loaded once at app root.
+- Base defaults are emitted in the `craftsman-base` layer and theme overrides in `craftsman-theme`.
+- For equal specificity, `craftsman-theme` overrides `craftsman-base`.
+- `theme.components.input` targets only non-radio and non-checkbox inputs.
+- `theme.root` and `theme.components.*` support JS style objects and raw CSS/Sass strings.
+- For Sass file workflows, import compiled CSS text via `*.scss?inline` and pass that string into the theme object.

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, LayoutWidthsSchema as s, MaxScreenWidthSchema as c, ScreenWidthSchema as l, zLabelPosition as u, zTextInputExclusions as d, zTextInputType as f, zTextInputTypes as p } from "./src/styles/utilities/types.esm.js";
-import { breakpoint as m, media as h, width as g, widths as _ } from "./src/styles/utilities/layout.esm.js";
-import { themeBuilder as v } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as y } from "./src/styles/components/ThemeProvider.esm.js";
-export { a as BaseWidthSchema, o as BreakpointSchema, s as LayoutWidthsSchema, c as MaxScreenWidthSchema, l as ScreenWidthSchema, y as ThemeProvider, m as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, h as media, v as themeBuilder, g as width, _ as widths, u as zLabelPosition, d as zTextInputExclusions, f as zTextInputType, p 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.1",
+  "version": "0.0.27-alpha.11",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -24,7 +24,9 @@
   },
   "dependencies": {
     "clsx": "2.1.1",
-    "dompurify": "3.4.12",
+    "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",
@@ -38,7 +40,7 @@
   },
   "devDependencies": {},
   "overrides": {
-    "postcss": "8.5.20",
+    "postcss": "8.5.23",
     "sharp": "0.35.3"
   },
   "exports": {
@@ -54,11 +56,11 @@
       "types": "./src/utilities/index.d.ts",
       "default": "./Utilities.esm.js"
     },
-    "./styles/globalStyles.module.scss": {
-      "default": "./src/styles/global/globalStyles.module.scss"
+    "./styles/globalStyles.scss": {
+      "default": "./src/styles/global/globalStyles.scss"
     },
-    "./styles/global/globalStyles.module.scss": {
-      "default": "./src/styles/global/globalStyles.module.scss"
+    "./styles/config": {
+      "default": "./src/styles/_config.scss"
     },
     "./Button": {
       "types": "./src/components/Button.d.ts",
@@ -84,9 +86,29 @@
       "types": "./src/components/Checkbox.d.ts",
       "default": "./src/components/Checkbox.esm.js"
     },
+    "./Textarea": {
+      "types": "./src/components/Textarea.d.ts",
+      "default": "./src/components/Textarea.esm.js"
+    },
+    "./Text": {
+      "types": "./src/components/Text.d.ts",
+      "default": "./src/components/Text.esm.js"
+    },
     "./Modal": {
       "types": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"
+    },
+    "./Select": {
+      "types": "./src/components/Select.d.ts",
+      "default": "./src/components/Select.esm.js"
+    },
+    "./DatePicker": {
+      "types": "./src/components/DatePicker.d.ts",
+      "default": "./src/components/DatePicker.esm.js"
+    },
+    "./InputPhone": {
+      "types": "./src/components/InputPhone.d.ts",
+      "default": "./src/components/InputPhone.esm.js"
     }
   }
 }

package/src/components/{Button.d.ts → Button/Button.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonType } from '../styles/global/components/button';
+import { ButtonType } from '../../styles';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/Button/Button.esm.js

@@ -0,0 +1,26 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import { width as t } from "../../styles/utilities/layout.esm.js";
+import "../../../Styles.esm.js";
+import n from "clsx";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var a = (a) => {
+	let { type: o = "button", variant: s = "default", size: c, styles: l, className: u, style: d, ...f } = a, p = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, m = e(l) ? void 0 : l, h = p ? {
+		borderRadius: `calc(var(--btn-border-radius) * ${p})`,
+		padding: `calc(var(--btn-pad-y) * ${p}) calc(var(--btn-pad-x) * ${p})`,
+		fontSize: `max(10px, calc(${t("text")} * ${p}))`
+	} : {};
+	return e(a.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i("button", {
+		type: o,
+		className: n(s, u),
+		style: {
+			...h,
+			...m,
+			...d
+		},
+		...f
+	});
+};
+//#endregion
+export { a as Button };

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)};
+    }
+
+}