@stamcat/craftsman 0.0.30 → 0.0.31-beta.2

package/README.md

@@ -24,7 +24,7 @@ npm install @stamcat/craftsman
 import { ThemeProvider } from "@stamcat/craftsman/styles";
 import { Button } from "@stamcat/craftsman/Button";
 import { Input } from "@stamcat/craftsman/Input";
-import "@stamcat/craftsman/styles/globalStyles";
+import "@stamcat/craftsman/styles/globalStyles.scss";
 
 const appTheme = {
 	root: {
@@ -48,7 +48,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";
+import "@stamcat/craftsman/styles/globalStyles.scss";
 
 const appTheme = {
 	root: {

package/Styles.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.30",
+  "version": "0.0.31-beta.2",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -70,93 +70,99 @@
     "./styles/config": {
       "default": "./src/styles/_config.scss"
     },
+    "./styles/utilities/_functions": {
+      "default": "./src/styles/utilities/_functions.scss"
+    },
+    "./styles/utilities/_placeholders": {
+      "default": "./src/styles/utilities/_placeholders.scss"
+    },
     "./Button": {
-      "types": "./src/components/Button.d.ts",
-      "default": "./src/components/Button.esm.js"
+      "types": "./src/components/Button/Button.d.ts",
+      "default": "./src/components/Button/Button.esm.js"
     },
     "./Input": {
-      "types": "./src/components/Input.d.ts",
-      "default": "./src/components/Input.esm.js"
+      "types": "./src/components/Input/Input.d.ts",
+      "default": "./src/components/Input/Input.esm.js"
     },
     "./InputPassword": {
-      "types": "./src/components/InputPassword.d.ts",
-      "default": "./src/components/InputPassword.esm.js"
+      "types": "./src/components/InputPassword/InputPassword.d.ts",
+      "default": "./src/components/InputPassword/InputPassword.esm.js"
     },
     "./Loader": {
-      "types": "./src/components/Loader.d.ts",
-      "default": "./src/components/Loader.esm.js"
+      "types": "./src/components/Loader/Loader.d.ts",
+      "default": "./src/components/Loader/Loader.esm.js"
     },
     "./RadioButton": {
-      "types": "./src/components/RadioButton.d.ts",
-      "default": "./src/components/RadioButton.esm.js"
+      "types": "./src/components/RadioButton/RadioButton.d.ts",
+      "default": "./src/components/RadioButton/RadioButton.esm.js"
     },
     "./Checkbox": {
-      "types": "./src/components/Checkbox.d.ts",
-      "default": "./src/components/Checkbox.esm.js"
+      "types": "./src/components/Checkbox/Checkbox.d.ts",
+      "default": "./src/components/Checkbox/Checkbox.esm.js"
     },
     "./Textarea": {
-      "types": "./src/components/Textarea.d.ts",
-      "default": "./src/components/Textarea.esm.js"
+      "types": "./src/components/Textarea/Textarea.d.ts",
+      "default": "./src/components/Textarea/Textarea.esm.js"
     },
     "./Text": {
-      "types": "./src/components/Text.d.ts",
-      "default": "./src/components/Text.esm.js"
+      "types": "./src/components/Text/Text.d.ts",
+      "default": "./src/components/Text/Text.esm.js"
     },
     "./Modal": {
-      "types": "./src/components/Modal.d.ts",
-      "default": "./src/components/Modal.esm.js"
+      "types": "./src/components/Modal/Modal.d.ts",
+      "default": "./src/components/Modal/Modal.esm.js"
     },
     "./Select": {
-      "types": "./src/components/Select.d.ts",
-      "default": "./src/components/Select.esm.js"
+      "types": "./src/components/Select/Select.d.ts",
+      "default": "./src/components/Select/Select.esm.js"
     },
     "./DatePicker": {
-      "types": "./src/components/DatePicker.d.ts",
-      "default": "./src/components/DatePicker.esm.js"
+      "types": "./src/components/DatePicker/DatePicker.d.ts",
+      "default": "./src/components/DatePicker/DatePicker.esm.js"
     },
     "./DateRangePicker": {
-      "types": "./src/components/DateRangePicker.d.ts",
-      "default": "./src/components/DateRangePicker.esm.js"
+      "types": "./src/components/DateRangePicker/DateRangePicker.d.ts",
+      "default": "./src/components/DateRangePicker/DateRangePicker.esm.js"
     },
     "./InputPhone": {
-      "types": "./src/components/InputPhone.d.ts",
-      "default": "./src/components/InputPhone.esm.js"
+      "types": "./src/components/InputPhone/InputPhone.d.ts",
+      "default": "./src/components/InputPhone/InputPhone.esm.js"
     },
     "./InputNumber": {
-      "types": "./src/components/InputNumber.d.ts",
-      "default": "./src/components/InputNumber.esm.js"
+      "types": "./src/components/InputNumber/InputNumber.d.ts",
+      "default": "./src/components/InputNumber/InputNumber.esm.js"
     },
     "./Toggle": {
-      "types": "./src/components/Toggle.d.ts",
-      "default": "./src/components/Toggle.esm.js"
+      "types": "./src/components/Toggle/Toggle.d.ts",
+      "default": "./src/components/Toggle/Toggle.esm.js"
     },
     "./Pagination": {
-      "types": "./src/components/Pagination.d.ts",
-      "default": "./src/components/Pagination.esm.js"
+      "types": "./src/components/Pagination/Pagination.d.ts",
+      "default": "./src/components/Pagination/Pagination.esm.js"
     },
     "./Carousel": {
-      "types": "./src/components/Carousel.d.ts",
-      "default": "./src/components/Carousel.esm.js"
+      "types": "./src/components/Carousel/Carousel.d.ts",
+      "default": "./src/components/Carousel/Carousel.esm.js"
     },
     "./TimePicker": {
-      "types": "./src/components/TimePicker.d.ts",
-      "default": "./src/components/TimePicker.esm.js"
+      "types": "./src/components/TimePicker/TimePicker.d.ts",
+      "default": "./src/components/TimePicker/TimePicker.esm.js"
     },
     "./DateTimePicker": {
-      "types": "./src/components/DateTimePicker.d.ts",
-      "default": "./src/components/DateTimePicker.esm.js"
+      "types": "./src/components/DateTimePicker/DateTimePicker.d.ts",
+      "default": "./src/components/DateTimePicker/DateTimePicker.esm.js"
     },
     "./Tooltip": {
-      "types": "./src/components/Tooltip.d.ts",
-      "default": "./src/components/Tooltip.esm.js"
+      "types": "./src/components/Tooltip/Tooltip.d.ts",
+      "default": "./src/components/Tooltip/Tooltip.esm.js"
     },
     "./Notice": {
-      "types": "./src/components/Notice.d.ts",
-      "default": "./src/components/Notice.esm.js"
+      "types": "./src/components/Notice/Notice.d.ts",
+      "default": "./src/components/Notice/Notice.esm.js"
     },
     "./SortableList": {
-      "types": "./src/components/SortableList.d.ts",
-      "default": "./src/components/SortableList.esm.js"
+      "types": "./src/components/SortableList/SortableList.d.ts",
+      "default": "./src/components/SortableList/SortableList.esm.js"
     }
   }
 }

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

@@ -0,0 +1,5 @@
+export type DropEdge = "top" | "bottom";
+export type ItemData = {
+    key: string;
+    index: number;
+};

package/src/styles/index.d.ts

@@ -3,4 +3,6 @@ export * from './utilities/constants';
 export * from './utilities/layout';
 export * from '../utilities/types';
 export * from './theme/theme';
+export type { AppTheme, ColorVariableName, ComponentThemeOverrides, CSSObject, SerializedStyles, RegisteredComponent, Theme, ThemeProviderProps, WidthOverrides, Colors as ThemeColors, } from './theme/types';
+export { type RegisteredComponentName, componentSelectors } from './theme/components';
 export { ThemeProvider } from './components/ThemeProvider';

package/src/styles/theme/types.d.ts

@@ -5,21 +5,21 @@ export type ColorVariableName = `--${ColorKey}`;
 export type CSSObject = {
     [key: string]: string | number | CSSObject | undefined;
 };
-export type LegacySerializedStyles = {
+export type SerializedStyles = {
     name: string;
     styles: string;
-    next?: LegacySerializedStyles;
+    next?: SerializedStyles;
 };
 export type RegisteredComponent = keyof typeof componentSelectors;
 export type ComponentThemeOverrides = {
-    [K in RegisteredComponent]?: CSSObject | LegacySerializedStyles | string;
+    [K in RegisteredComponent]?: CSSObject | SerializedStyles | string;
 };
 export type Colors = Partial<Record<ColorVariableName, string>>;
 export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
 export type Theme = {
     colors?: Colors;
     widths?: WidthOverrides;
-    root?: CSSObject | LegacySerializedStyles | string;
+    root?: CSSObject | SerializedStyles | string;
     components?: ComponentThemeOverrides;
 };
 export type ThemeProviderProps = {

package/src/styles/theme/utilities.d.ts

@@ -1,3 +1,3 @@
-import { CSSObject, LegacySerializedStyles } from './types';
-export declare function toCSSObject(value: CSSObject | LegacySerializedStyles): CSSObject;
+import { CSSObject, SerializedStyles } from './types';
+export declare function toCSSObject(value: CSSObject | SerializedStyles): CSSObject;
 export declare function cssObjectToCssText(selector: string, value: CSSObject): string;

package/src/styles/utilities/layout.esm.js

@@ -6,34 +6,34 @@ var n = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])
 		return "(min-width: 0px)";
 	},
 	get mobileMax() {
-		return `(max-width: ${n.mobileMax}px)`;
+		return `(max-width: ${t.mobileMax}px)`;
 	},
 	get tablet() {
-		return `(min-width: ${n.tablet}px)`;
+		return `(min-width: ${t.tablet}px)`;
 	},
 	get tabletMax() {
-		return `(max-width: ${n.tabletMax}px)`;
+		return `(max-width: ${t.tabletMax}px)`;
 	},
 	get desktop() {
-		return `(min-width: ${n.desktop}px)`;
+		return `(min-width: ${t.desktop}px)`;
 	},
 	get desktopMax() {
-		return `(max-width: ${n.desktopMax}px)`;
+		return `(max-width: ${t.desktopMax}px)`;
 	},
 	get extDesktop() {
-		return `(min-width: ${n.extDesktop}px)`;
+		return `(min-width: ${t.extDesktop}px)`;
 	},
 	get mobileOnly() {
-		return `(min-width: 0px) and (max-width: ${n.mobileMax}px)`;
+		return `(min-width: 0px) and (max-width: ${t.mobileMax}px)`;
 	},
 	get tabletOnly() {
-		return `(min-width: ${n.tablet}px) and (max-width: ${n.tabletMax}px)`;
+		return `(min-width: ${t.tablet}px) and (max-width: ${t.tabletMax}px)`;
 	},
 	get mobileTablet() {
-		return `(min-width: 0px) and (max-width: ${n.tabletMax}px)`;
+		return `(min-width: 0px) and (max-width: ${t.tabletMax}px)`;
 	},
 	get desktopOnly() {
-		return `(min-width: ${n.desktop}px) and (max-width: ${n.desktopMax}px)`;
+		return `(min-width: ${t.desktop}px) and (max-width: ${t.desktopMax}px)`;
 	}
 }, i = (e, t = 1, r = !0) => {
 	let i = n[e];

package/src/styles/global/globalStyles.module.scss

@@ -1 +0,0 @@
-@use "./globalStyles.scss";