@stamcat/craftsman 0.0.25 → 0.0.27-alpha.0

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";
+import "@stamcat/craftsman/styles/globalStyles.module.scss";
 
 const appTheme = {
 	root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.25",
+  "version": "0.0.27-alpha.0",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -54,6 +54,9 @@
       "types": "./src/utilities/index.d.ts",
       "default": "./Utilities.esm.js"
     },
+    "./styles/globalStyles.module.scss": {
+      "default": "./src/styles/global/globalStyles.module.scss"
+    },
     "./Button": {
       "types": "./src/components/Button.d.ts",
       "default": "./src/components/Button.esm.js"

package/src/components/Button.esm.js

@@ -1,3 +1,4 @@
+"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";

package/src/components/Checkbox.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { Input as e } from "./Input.esm.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Checkbox.tsx

package/src/components/Input.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { isEmpty as e } from "../utilities/validations.esm.js";
 import t from "./Input.module.esm.js";
 import n from "clsx";

package/src/components/InputPassword.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { Button as e } from "./Button.esm.js";
 import { Input as t } from "./Input.esm.js";
 import { jsx as n } from "react/jsx-runtime";

package/src/components/Loader.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { isEmpty as e } from "../utilities/validations.esm.js";
 import { loaders as t } from "../styles/global/components/loaders.esm.js";
 import n from "../styles/global/components/loaders.module.esm.js";

package/src/components/Modal.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { isEmpty as e } from "../utilities/validations.esm.js";
 import { color as t } from "../styles/utilities/color.esm.js";
 import { Button as n } from "./Button.esm.js";

package/src/components/RadioButton.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import { Input as e } from "./Input.esm.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/RadioButton.tsx

package/src/styles/components/ThemeProvider.d.ts

@@ -2,6 +2,8 @@ import { Theme } from '../theme/types';
 type ThemeProviderProps = {
     theme?: Theme;
     children?: React.ReactNode;
+    precedence?: string;
+    href?: string;
 };
-export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ theme, children, precedence, href, }: ThemeProviderProps): import("react").JSX.Element;
 export {};

package/src/styles/components/ThemeProvider.esm.js

@@ -1,8 +1,12 @@
 import { themeBuilder as e } from "../theme/theme.esm.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/styles/components/ThemeProvider.tsx
-function i({ theme: i, children: a }) {
-	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", { dangerouslySetInnerHTML: { __html: e(i || {}) } }), a] });
+function i({ theme: i, children: a, precedence: o = "default", href: s = "stamcat-craftsman-theme-provider" }) {
+	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", {
+		precedence: o,
+		href: s,
+		dangerouslySetInnerHTML: { __html: e(i || {}) }
+	}), a] });
 }
 //#endregion
 export { i as ThemeProvider };

package/src/styles/global/globalStyles.d.ts

@@ -1 +1,3 @@
-export declare const globalStyles = "globalStyles";
+import { default as styles } from './globalStyles.module.scss';
+export declare const globalStyles: CSSModuleClasses;
+export default styles;

package/src/styles/global/globalStyles.esm.js

@@ -1,4 +1,5 @@
+import e from "./globalStyles.module.esm.js";
 //#region src/styles/global/globalStyles.ts
-var e = "globalStyles";
+var t = e;
 //#endregion
-export { e as globalStyles };
+export { t as globalStyles };

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

@@ -0,0 +1 @@
+body{color:var(--text);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;font-size:var(--w-text,14px)}code{background-color:var(--gray200);color:var(--gray800);padding:calc(var(--w-gutter,16px) * .125) calc(var(--w-gutter,16px) * .25);margin:calc(var(--w-gutter,16px) * .125);font-size:var(--w-text,14px);display:inline-block}code:has(pre){padding:var(--w-gutter,16px);border-radius:calc(var(--w-gutter,16px) * .5);background-color:var(--gray800);color:var(--gray200)}code:has(pre) pre{margin:0}input[type=checkbox]{appearance:none;box-sizing:border-box;vertical-align:baseline;border:1px solid var(--blue500);background:#fff;border-radius:4px;width:16px;height:16px;margin:0;padding:0;display:inline-block;position:relative;top:.08em}input[type=checkbox]:before{content:"";background:0 0;border-radius:4px;transition:background-color .15s;position:absolute;inset:0}input[type=checkbox]:after{content:"";transform-origin:50%;border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:8px;transition:transform .15s;display:block;position:absolute;top:45%;left:50%;transform:translate(-50%,-58%)rotate(45deg)scale(0)}input[type=checkbox]:checked{border-color:var(--blue500)}input[type=checkbox]:checked:before{background-color:var(--blue500);border-radius:unset}input[type=checkbox]:checked:after{transform:translate(-50%,-58%)rotate(45deg)scale(1)}input[type=checkbox]:disabled{border-color:var(--gray500)}input[type=checkbox]:disabled:before{background-color:var(--gray200)}input[type=checkbox]:disabled:after{border-color:var(--gray200);transform:translate(-50%,-58%)rotate(45deg)scale(1)}input[type=checkbox]:checked:disabled{border-color:var(--gray400)}input[type=checkbox]:checked:disabled:before{background:var(--gray400)}input[type=checkbox]:checked:disabled:after{border-color:var(--white);transform:translate(-50%,-58%)rotate(45deg)scale(1)}input[type=radio]{--radio-btn-size:16px;appearance:none;cursor:pointer;width:var(--radio-btn-size);height:var(--radio-btn-size);border:1px solid var(--blue600);box-sizing:border-box;border-radius:50%;place-content:center;padding:0;transition:border-color .2s;display:inline-grid;position:relative}input[type=radio]:before{content:"";width:calc(var(--radio-btn-size) * .5);height:calc(var(--radio-btn-size) * .5);background-color:var(--blue600);border-radius:50%;transition:transform .2s;transform:scale(0)}input[type=radio]:checked{border-color:var(--gray500)}input[type=radio]:checked:before{transform:scale(1)}a,button.text,button[data-variant=text]{color:var(--blue500);background:0 0;border:none;padding:0}a:not(:disabled):not(.disabled):hover,button.text:not(:disabled):not(.disabled):hover,button[data-variant=text]:not(:disabled):not(.disabled):hover{color:var(--teal700);cursor:pointer;background-color:#0000;text-decoration:underline}button{--btn-pad-y:calc(var(--w-gutter,16px) * .5);--btn-pad-x:calc(var(--w-gutter,16px) * .75);--btn-border-radius:calc(var(--w-gutter,16px) * .75);color:var(--blue600);cursor:pointer;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-border-radius);border:none;border:1px solid var(--blue500);background-color:var(--white);flex-flow:wrap;align-items:center;font-weight:500;transition:all .125s;display:inline-flex}button:not(:disabled):not(.disabled):hover{background-color:var(--teal200)}button:disabled,button.disabled{cursor:not-allowed;border-color:var(--gray200);color:var(--gray400)}button:disabled.primary,button:disabled[data-variant=primary],button.disabled.primary,button.disabled[data-variant=primary]{border-color:var(--gray200);background-color:var(--gray400);color:var(--gray200)}button.primary,button[data-variant=primary]{color:var(--white);background-color:var(--blue500)}button.primary:not(:disabled):not(.disabled):hover,button[data-variant=primary]:not(:disabled):not(.disabled):hover{background-color:var(--blue700)}input:focus{box-shadow:none;outline:0}input{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter,16px) * .5);background-color:var(--white);border-radius:3px}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}input:disabled,input.disabled{border-color:var(--gray200);background-color:var(--gray100)}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#ddd}::-webkit-scrollbar-thumb{background:#000;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#555}body,ul{margin:0;padding:0}body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-color:#fff}fieldset{border:0;padding:0}h1{font-size:calc(var(--w-text,14px) * 3.125);line-height:1.2}h2{font-size:calc(var(--w-text,14px) * 2.625);font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text,14px) * 1.625);line-height:1.1}h4{font-size:calc(var(--w-text,14px) * 1.25);margin:calc(var(--w-gutter,16px) * .5) 0;line-height:1.1}h5{font-size:var(--w-text,14px);line-height:1.2}h6{font-size:calc(var(--w-text,14px) * .875);font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text,14px);margin:0;line-height:1.5}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}

package/src/styles/global/globalStyles.module.esm.js

@@ -0,0 +1,4 @@
+import './globalStyles.module.css';//#region src/styles/global/globalStyles.module.scss
+var e = {};
+//#endregion
+export { e as default };

package/src/styles/index.d.ts

@@ -3,5 +3,5 @@ export * from './utilities/constants';
 export * from './utilities/layout';
 export * from './utilities/types';
 export * from './theme/theme';
-export * from './global/globalStyles';
+export { globalStyles } from './global/globalStyles';
 export { ThemeProvider } from './components/ThemeProvider';