@stamcat/craftsman 0.0.23-alpha.8 → 0.0.23-alpha.9

package/src/styles/global/components/loaders.module.scss

@@ -0,0 +1,240 @@
+.dots {
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1s infinite linear alternate;
+    width: var(--_l5w);
+    margin: 0 var(--_l5w2);
+}
+@keyframes l5 {
+    0% {
+        box-shadow:
+            var(--_l5w2) 0 var(--_l5c),
+            var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
+        background: var(--_l5c);
+    }
+    33% {
+        box-shadow:
+            var(--_l5w2) 0 var(--_l5c),
+            var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
+        background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
+    }
+    66% {
+        box-shadow:
+            var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
+            var(--_l5w3) 0 var(--_l5c);
+        background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
+    }
+    100% {
+        box-shadow:
+            var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
+            var(--_l5w3) 0 var(--_l5c);
+        background: var(--_l5c);
+    }
+}
+
+.dots-bounce {
+    width: var(--_gw);
+    aspect-ratio: 2;
+    background:
+        var(--_g) 0% 50%,
+        var(--_g) 50% 50%,
+        var(--_g) 100% 50%;
+    background-size: calc(100% / 3) 50%;
+    animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+    20% {
+        background-position:
+            0% 0%,
+            50% 50%,
+            100% 50%;
+    }
+    40% {
+        background-position:
+            0% 100%,
+            50% 0%,
+            100% 50%;
+    }
+    60% {
+        background-position:
+            0% 50%,
+            50% 100%,
+            100% 0%;
+    }
+    80% {
+        background-position:
+            0% 50%,
+            50% 50%,
+            100% 100%;
+    }
+}
+
+.dots-trace {
+    width: var(--_dtw);
+    aspect-ratio: 4;
+    background: radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0 / calc(100% / 3) 100% space;
+    clip-path: inset(0 100% 0 0);
+    animation: l1 1s steps(4) infinite;
+       
+}
+@keyframes l1 {
+    to {
+        clip-path: inset(0 -34% 0 0);
+    }
+}
+
+.dots-orbit {
+  width: var(--_dow);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--_doc);
+  display: grid;
+  animation: l22-0 2s infinite linear;
+    &:before,
+    &:after {
+        content: "";
+        grid-area: 1/1;
+        margin: 15%;
+        border-radius: 50%;
+        background: inherit;
+        transform: rotate(0deg) translate(150%);
+        animation: l22 1s infinite;
+    }
+    &:after {
+        animation-delay: -.5s
+    }
+}
+
+@keyframes l22-0 {
+  100% {transform: rotate(1turn)}
+}
+@keyframes l22 {
+  100% {transform: rotate(1turn) translate(150%)}
+}
+
+.dashes {
+    width: var(--_dshw);
+    height: calc(var(--_dshw) * 0.3);
+    background:
+        linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px,
+        linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px,
+        linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;
+    background-repeat: no-repeat;
+    animation: dashes 1s infinite linear;
+        
+}
+@keyframes dashes {
+    0% {
+        background-size:
+            var(--_dshw2) 4px,
+            var(--_dshw2) 4px,
+            var(--_dshw2) 4px;
+        opacity: 1;
+    }
+    33% {
+        background-size:
+            var(--_dshw2) var(--_dshw2),
+            var(--_dshw2) 4px,
+            var(--_dshw2) 4px;
+        opacity: 0.7;
+    }
+    66% {
+        background-size:
+            var(--_dshw2) 4px,
+            var(--_dshw2) var(--_dshw2),
+            var(--_dshw2) 4px;
+        opacity: 0.7;
+    }
+    100% {
+        background-size:
+            var(--_dshw2) 4px,
+            var(--_dshw2) 4px,
+            var(--_dshw2) var(--_dshw2);
+        opacity: 1;
+    }
+}
+
+.spinner {
+  width: var(--_spnw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);
+  border-right-color: var(--_spnc);
+  animation: l2 1s infinite linear;
+}
+@keyframes l2 {to{transform: rotate(1turn)}}
+
+.swirl {
+  width: var(--_swrlw);
+  padding: var(--_swrlw2);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--_swrlc);
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}
+
+.ball {
+  width: var(--_ballw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: 
+    radial-gradient(farthest-side,var(--_ballc) 95%,#0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat,
+    radial-gradient(farthest-side,#0000 calc(100% - var(--_ballw2)),#ccc 0);
+  animation: l9 2s infinite linear;
+}
+@keyframes l9 {to{transform: rotate(1turn)}}
+
+.boxy {
+  width: var(--_boxw);
+  height: var(--_boxw2);
+  -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
+  background:
+   linear-gradient(var(--_boxc) 0 0) left -25% top 0 /20% 100% no-repeat
+   #ddd;
+  animation: l7 1s infinite steps(6);
+}
+@keyframes l7 {
+    100% {background-position: right -25% top 0}
+}
+
+.factory {
+  width: var(--_ftyw);
+  height: var(--_ftyw2);
+  box-shadow: 0 3px 0 var(--_ftyc);
+  position: relative;
+  clip-path: inset(-40px 0 -5px);
+  &:before {
+    content: "";
+    position: absolute;
+    inset: auto calc(50% - 17px) 0;
+    height: var(--_ftyw3);
+    --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
+    background: var(--g),var(--g),var(--g),var(--g);
+    background-size: var(--_ftyw4) 14px;
+    animation:
+        l7-1 2s infinite linear,
+        l7-2 2s infinite linear;
+    }
+}
+@keyframes l7-1 {
+  0%,
+  100%  {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
+  17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
+  35%   {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
+  52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
+  70%,
+  98%  {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
+}
+@keyframes l7-2 {
+  0%,70% {transform:translate(0)}
+  100%  {transform:translate(200%)}
+}
+

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

@@ -0,0 +1,19 @@
+import { defaultColors as e } from "./constants.esm.js";
+import { getCraftsmanConfig as t } from "./config.esm.js";
+//#region src/styles/utilities/color.ts
+var n = Object.keys(e).reduce((e, n) => (e[n] = {
+	enumerable: !0,
+	get: () => t().colors[n]
+}, e), {}), r = Object.defineProperties({}, n);
+function i(e, t = 1) {
+	e = e.replace("#", "");
+	let n, r, i;
+	if (e.length === 6) n = Number.parseInt(e.substring(0, 2), 16), r = Number.parseInt(e.substring(2, 4), 16), i = Number.parseInt(e.substring(4, 6), 16);
+	else if (e.length === 8) n = Number.parseInt(e.substring(0, 2), 16), r = Number.parseInt(e.substring(2, 4), 16), i = Number.parseInt(e.substring(4, 6), 16), t = Number.parseInt(e.substring(6, 8), 16) / 255;
+	else if (e.length === 3) n = Number.parseInt(e.charAt(0) + e.charAt(0), 16), r = Number.parseInt(e.charAt(1) + e.charAt(1), 16), i = Number.parseInt(e.charAt(2) + e.charAt(2), 16);
+	else throw Error("Invalid hex color format");
+	return t = Math.max(0, Math.min(1, t)), `rgba(${n}, ${r}, ${i}, ${t})`;
+}
+var a = (e, t = "hex", n = 1) => t === "rgba" ? i(r[e], n) : r[e];
+//#endregion
+export { a as color, r as colors, i as hexToRgba };

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

@@ -0,0 +1,25 @@
+import { defaultColors as e, defaultWidths as t } from "./constants.esm.js";
+//#region src/styles/utilities/config.ts
+var n = {
+	colors: e,
+	widths: t
+}, r = {
+	colors: { ...n.colors },
+	widths: { ...n.widths }
+};
+function i(e) {
+	return {
+		...e,
+		mobileMax: e.tablet - 1e-5,
+		tabletMax: e.desktop - 1e-5,
+		desktopMax: e.extDesktop - 1e-5
+	};
+}
+function a() {
+	return {
+		colors: { ...r.colors },
+		widths: i(r.widths)
+	};
+}
+//#endregion
+export { a as getCraftsmanConfig };

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

@@ -0,0 +1,79 @@
+//#region src/styles/utilities/constants.ts
+var e = {
+	text: "#2e2e2e",
+	primary: "#005cac",
+	transparent: "transparent",
+	white: "#ffffff",
+	black: "#000000",
+	grey50: "#f8fafc",
+	grey100: "#f1f5f9",
+	grey200: "#e2e8f0",
+	grey300: "#cbd5e1",
+	grey400: "#94a3b8",
+	grey500: "#64748b",
+	grey600: "#475569",
+	grey700: "#334155",
+	grey800: "#1e293b",
+	grey900: "#0f172a",
+	blue50: "#eff6ff",
+	blue100: "#dbeafe",
+	blue200: "#bfdbfe",
+	blue300: "#93c5fd",
+	blue400: "#60a5fa",
+	blue500: "#3b82f6",
+	blue600: "#2563eb",
+	blue700: "#1d4ed8",
+	blue800: "#1e40af",
+	blue900: "#1e3a8a",
+	green50: "#f0fdf4",
+	green100: "#dcfce7",
+	green200: "#bbf7d0",
+	green300: "#86efac",
+	green400: "#4ade80",
+	green500: "#22c55e",
+	green600: "#16a34a",
+	green700: "#15803d",
+	green800: "#166534",
+	green900: "#14532d",
+	yellow50: "#fefce8",
+	yellow100: "#fef9c3",
+	yellow200: "#fef08a",
+	yellow300: "#fde047",
+	yellow400: "#facc15",
+	yellow500: "#eab308",
+	yellow600: "#ca8a04",
+	yellow700: "#a16207",
+	yellow800: "#854d0e",
+	yellow900: "#713f12",
+	red50: "#fef2f2",
+	red100: "#fee2e2",
+	red200: "#fecaca",
+	red300: "#fca5a5",
+	red400: "#f87171",
+	red500: "#ef4444",
+	red600: "#dc2626",
+	red700: "#b91c1c",
+	red800: "#991b1b",
+	red900: "#7f1d1d",
+	purple50: "#faf5ff",
+	purple100: "#f3e8ff",
+	purple200: "#e9d5ff",
+	purple300: "#d8b4fe",
+	purple400: "#c084fc",
+	purple500: "#a855f7",
+	purple600: "#9333ea",
+	purple700: "#7e22ce",
+	purple800: "#6b21a8",
+	purple900: "#581c87"
+}, t = {
+	text: 16,
+	column: 60,
+	gutter: 16,
+	extDesktop: 1320,
+	extNav: 1240,
+	desktop: 1040,
+	tablet: 660,
+	extMobile: 320
+};
+//#endregion
+export { e as defaultColors, t as defaultWidths };

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

@@ -0,0 +1,48 @@
+import { getCraftsmanConfig as e } from "./config.esm.js";
+import { css as t } from "@emotion/react";
+//#region src/styles/utilities/layout.ts
+var n = [
+	"text",
+	"column",
+	"gutter",
+	"extDesktop",
+	"extNav",
+	"desktop",
+	"tablet",
+	"extMobile",
+	"mobileMax",
+	"tabletMax",
+	"desktopMax"
+].reduce((t, n) => (t[n] = {
+	enumerable: !0,
+	get: () => e().widths[n]
+}, t), {}), r = Object.defineProperties({}, n), i = {
+	get mobile() {
+		return "(min-width: 0px)";
+	},
+	get tablet() {
+		return `(min-width: ${r.tablet}px)`;
+	},
+	get desktop() {
+		return `(min-width: ${r.desktop}px)`;
+	},
+	get extDesktop() {
+		return `(min-width: ${r.extDesktop}px)`;
+	},
+	get mobileOnly() {
+		return `(min-width: 0px) and (max-width: ${r.mobileMax}px)`;
+	},
+	get tabletOnly() {
+		return `(min-width: ${r.tablet}px) and (max-width: ${r.tabletMax}px)`;
+	},
+	get mobileTablet() {
+		return `(min-width: 0px) and (max-width: ${r.tabletMax}px)`;
+	},
+	get desktopOnly() {
+		return `(min-width: ${r.desktop}px) and (max-width: ${r.desktopMax}px)`;
+	}
+}, a = (e, n) => t`@media ${i[e]} {
+        ${n}
+    }`;
+//#endregion
+export { a as breakpoint, i as media, r as widths };

package/stories/Button.stories.d.ts

@@ -4,5 +4,12 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Text: Story;
 export declare const Disabled: Story;
+export declare const FullyDisabled: Story;
+export declare const Loading: Story;
 export declare const AsSubmit: Story;
+export declare const WithClassName: Story;
+export declare const WithAriaLabel: Story;
+export declare const WithEmotionStyles: Story;

package/stories/Colors.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Palette: Story;

package/stories/Icons.stories.d.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AntDesign: Story;
+export declare const BoxIcons: Story;
+export declare const BootstrapIcons: Story;
+export declare const CssGgIcons: Story;
+export declare const CircumIcons: Story;
+export declare const Devicons: Story;
+export declare const FontAwesome: Story;
+export declare const FontAwesome6: Story;
+export declare const FlatColorIcons: Story;
+export declare const Feather: Story;
+export declare const GameIcons: Story;
+export declare const GithubOcticons: Story;
+export declare const GrommetIcons: Story;
+export declare const HeroIcons: Story;
+export declare const HeroIcons2: Story;
+export declare const IcoMoonFree: Story;
+export declare const Ionicons4: Story;
+export declare const Ionicons5: Story;
+export declare const LineAwesome: Story;
+export declare const Lucide: Story;
+export declare const MaterialDesignIcons: Story;
+export declare const PhosphorIcons: Story;
+export declare const RemixIcons: Story;
+export declare const RadixIcons: Story;
+export declare const SimpleIcons: Story;
+export declare const SimpleLineIcons: Story;
+export declare const TablerIcons: Story;
+export declare const ThemifyIcons: Story;
+export declare const Typicons: Story;
+export declare const VSCodeIcons: Story;
+export declare const WeatherIcons: Story;
+export declare const Palette: Story;

package/stories/Loaders.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Loader } from '../components/Loader';
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const Basic: Story;

package/stories/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from '../components/Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Dialog: Story;
+export declare const Panel: Story;
+export declare const NonDismissableBackground: Story;

package/stories/Toastify.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ToastContainerProps } from 'react-toastify';
+type StoryArgs = Pick<ToastContainerProps, "position" | "autoClose" | "theme" | "closeOnClick" | "pauseOnHover" | "draggable" | "newestOnTop">;
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<StoryArgs>;
+export declare const UsageGuide: Story;

package/stories/Typography.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ScaleAndSemantics: Story;
+export declare const LongFormArticle: Story;

package/styles/global/components/button.d.ts

@@ -1 +1,8 @@
+import { default as z } from 'zod';
+export declare const ButtonType: z.ZodEnum<{
+    text: "text";
+    primary: "primary";
+    default: "default";
+}>;
+export type ButtonType = z.infer<typeof ButtonType>;
 export declare const button: import('@emotion/utils').SerializedStyles;

package/styles/global/components/code.d.ts

@@ -0,0 +1 @@
+export declare const code: import('@emotion/utils').SerializedStyles;

package/styles/global/components/loaders.d.ts

@@ -0,0 +1,17 @@
+import { SerializedStyles } from '@emotion/react';
+import { default as z } from 'zod';
+export declare const LoaderStyleSchema: z.ZodEnum<{
+    dots: "dots";
+    "dots-trace": "dots-trace";
+    "dots-bounce": "dots-bounce";
+    "dots-orbit": "dots-orbit";
+    dashes: "dashes";
+    spinner: "spinner";
+    swirl: "swirl";
+    ball: "ball";
+    boxy: "boxy";
+    factory: "factory";
+}>;
+export type LoaderStyle = z.infer<typeof LoaderStyleSchema>;
+export type LoaderStyleDefinition = (color: string, width?: number) => SerializedStyles;
+export declare const loaders: Record<LoaderStyle, LoaderStyleDefinition>;

package/styles/global/components/typography.d.ts

@@ -0,0 +1,11 @@
+export declare const typography: {
+    body: import('@emotion/utils').SerializedStyles;
+    h1: import('@emotion/utils').SerializedStyles;
+    h2: import('@emotion/utils').SerializedStyles;
+    h3: import('@emotion/utils').SerializedStyles;
+    h4: import('@emotion/utils').SerializedStyles;
+    h5: import('@emotion/utils').SerializedStyles;
+    h6: import('@emotion/utils').SerializedStyles;
+    p: import('@emotion/utils').SerializedStyles;
+};
+export declare const typographyStyles: import('@emotion/utils').SerializedStyles[];

package/styles/global/variables.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string;
+export declare const widths: string;

package/styles/theme/components.d.ts

@@ -1,4 +1,4 @@
-import * as exportedComponents from "../../components";
+import * as exportedComponents from "../../components/index";
 type ExportedComponentName = keyof typeof exportedComponents & string;
 export type RegisteredComponentName = Uncapitalize<ExportedComponentName>;
 export declare const componentSelectors: Record<RegisteredComponentName, string>;

package/styles/theme/constants.d.ts

@@ -1,2 +1 @@
-import { Theme } from './types';
-export declare const defaultAppTheme: Theme;
+export declare const htmlTagNames: Set<string>;

package/styles/theme/types.d.ts

@@ -4,7 +4,7 @@ import { componentSelectors } from './components';
 export type ColorVariableName = `--${ColorKey}`;
 export type RegisteredComponent = keyof typeof componentSelectors;
 export type ComponentThemeOverrides = {
-    [K in RegisteredComponent]?: CSSObject | SerializedStyles;
+    [K in RegisteredComponent]?: CSSObject | SerializedStyles | string;
 };
 export type Colors = Partial<Record<ColorVariableName, string>>;
 export type Theme = {

package/styles/theme/utilities.d.ts

@@ -0,0 +1,2 @@
+import { CSSObject, SerializedStyles } from '@emotion/react';
+export declare function toCSSObject(value: CSSObject | SerializedStyles): CSSObject;

package/styles/utilities/color.d.ts

@@ -1,69 +1,5 @@
-export type ColorType = "rgba" | "hex";
-export declare const colors: {
-    white: string;
-    black: string;
-    transparent: string;
-    grey50: string;
-    grey100: string;
-    grey200: string;
-    grey300: string;
-    grey400: string;
-    grey500: string;
-    grey600: string;
-    grey700: string;
-    grey800: string;
-    grey900: string;
-    blue50: string;
-    blue100: string;
-    blue200: string;
-    blue300: string;
-    blue400: string;
-    blue500: string;
-    blue600: string;
-    blue700: string;
-    blue800: string;
-    blue900: string;
-    green50: string;
-    green100: string;
-    green200: string;
-    green300: string;
-    green400: string;
-    green500: string;
-    green600: string;
-    green700: string;
-    green800: string;
-    green900: string;
-    yellow50: string;
-    yellow100: string;
-    yellow200: string;
-    yellow300: string;
-    yellow400: string;
-    yellow500: string;
-    yellow600: string;
-    yellow700: string;
-    yellow800: string;
-    yellow900: string;
-    red50: string;
-    red100: string;
-    red200: string;
-    red300: string;
-    red400: string;
-    red500: string;
-    red600: string;
-    red700: string;
-    red800: string;
-    red900: string;
-    purple50: string;
-    purple100: string;
-    purple200: string;
-    purple300: string;
-    purple400: string;
-    purple500: string;
-    purple600: string;
-    purple700: string;
-    purple800: string;
-    purple900: string;
-};
+import { ColorType } from './types';
+export declare const colors: Record<string, string>;
 export type ColorKey = keyof typeof colors;
 export declare function hexToRgba(hex: string, alpha?: number): string;
 export declare const color: (name: ColorKey, type?: ColorType, alpha?: number) => string;

package/styles/utilities/config.d.ts

@@ -0,0 +1,7 @@
+import { ResponsiveWidth, SetConfig } from './types';
+export declare function setCraftsmanConfig(config: SetConfig): void;
+export declare function resetCraftsmanConfig(): void;
+export declare function getCraftsmanConfig(): {
+    colors: Record<string, string>;
+    widths: ResponsiveWidth;
+};