@pallamart/pm-design-system 1.0.1 → 2.1.0

package/dist/constants/color/index.d.ts

@@ -0,0 +1 @@
+export * from './pallamart-color.js';

package/dist/constants/color/index.js

@@ -0,0 +1 @@
+export * from './pallamart-color.js';

package/dist/{color.d.ts → constants/color/pallamart-color.d.ts}

@@ -16,4 +16,3 @@ export declare enum PallamartColor {
     Yellow = "#eab308",
     Green = "#559B60"
 }
-export { PallamartColor as Color };

package/dist/{color.js → constants/color/pallamart-color.js}

@@ -17,4 +17,3 @@ export var PallamartColor;
     PallamartColor["Yellow"] = "#eab308";
     PallamartColor["Green"] = "#559B60";
 })(PallamartColor || (PallamartColor = {}));
-export { PallamartColor as Color };

package/dist/constants/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color/index.js';
+export * from './presets/index.js';
+export * from './theme/index.js';
+export * from './z-index/index.js';

package/dist/constants/index.js

@@ -0,0 +1,4 @@
+export * from './color/index.js';
+export * from './presets/index.js';
+export * from './theme/index.js';
+export * from './z-index/index.js';

package/dist/constants/presets/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pallamart-external-tailwind-preset.js';
+export * from './pallamart-internal-tailwind-preset.js';

package/dist/constants/presets/index.js

@@ -0,0 +1,2 @@
+export * from './pallamart-external-tailwind-preset.js';
+export * from './pallamart-internal-tailwind-preset.js';

package/dist/constants/presets/pallamart-external-tailwind-preset.d.ts

@@ -0,0 +1,2 @@
+import type { Config } from 'tailwindcss';
+export declare const PallamartExternalTailwindPreset: Partial<Config>;

package/dist/{tailwind-preset.js → constants/presets/pallamart-external-tailwind-preset.js}

@@ -1,5 +1,5 @@
-import { PallamartFontSize, PallamartMotion, PallamartScreens, PallamartSharedScale, } from './shared-tailwind-theme.js';
-export const PallamartTailwindPreset = {
+import { PallamartFontSize, PallamartMotion, PallamartScreens, PallamartSharedScale, } from '../theme/index.js';
+export const PallamartExternalTailwindPreset = {
     theme: {
         screens: PallamartScreens,
         extend: {

package/dist/{internal/tailwind-preset.js → constants/presets/pallamart-internal-tailwind-preset.js}

@@ -1,4 +1,5 @@
-import { PallamartFontSize, PallamartMotion, PallamartScreens, PallamartSharedScale, } from '../shared-tailwind-theme.js';
+import tailwindAnimate from 'tailwindcss-animate';
+import { PallamartFontSize, PallamartMotion, PallamartScreens, PallamartSharedScale, } from '../theme/index.js';
 export const PallamartInternalTailwindPreset = {
     theme: {
         screens: PallamartScreens,
@@ -82,5 +83,5 @@ export const PallamartInternalTailwindPreset = {
             ...PallamartMotion,
         },
     },
-    plugins: [],
+    plugins: [tailwindAnimate],
 };

package/dist/constants/theme/index.d.ts

@@ -0,0 +1,4 @@
+export * from './pallamart-font-size.js';
+export * from './pallamart-motion.js';
+export * from './pallamart-screens.js';
+export * from './pallamart-shared-scale.js';

package/dist/constants/theme/index.js

@@ -0,0 +1,4 @@
+export * from './pallamart-font-size.js';
+export * from './pallamart-motion.js';
+export * from './pallamart-screens.js';
+export * from './pallamart-shared-scale.js';

package/dist/constants/theme/pallamart-font-size.d.ts

@@ -0,0 +1,44 @@
+export declare const PallamartFontSize: {
+    'header-0': [string, {
+        fontWeight: number;
+    }];
+    'header-1': [string, {
+        fontWeight: number;
+    }];
+    'header-1-regular': [string, {
+        fontWeight: number;
+    }];
+    'keyboard-1': [string, {
+        fontWeight: number;
+    }];
+    'body-1': [string, {
+        fontWeight: number;
+    }];
+    'header-2': [string, {
+        fontWeight: number;
+    }];
+    'header-2-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-2': [string, {
+        fontWeight: number;
+    }];
+    'header-3': [string, {
+        fontWeight: number;
+    }];
+    'header-3-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-3': [string, {
+        fontWeight: number;
+    }];
+    'header-4': [string, {
+        fontWeight: number;
+    }];
+    'header-4-regular': [string, {
+        fontWeight: number;
+    }];
+    'body-4': [string, {
+        fontWeight: number;
+    }];
+};

package/dist/constants/theme/pallamart-font-size.js

@@ -0,0 +1,16 @@
+export const PallamartFontSize = {
+    'header-0': ['86px', { fontWeight: 700 }],
+    'header-1': ['40px', { fontWeight: 700 }],
+    'header-1-regular': ['40px', { fontWeight: 400 }],
+    'keyboard-1': ['21px', { fontWeight: 400 }],
+    'body-1': ['18px', { fontWeight: 400 }],
+    'header-2': ['28px', { fontWeight: 700 }],
+    'header-2-regular': ['28px', { fontWeight: 400 }],
+    'body-2': ['16px', { fontWeight: 400 }],
+    'header-3': ['20px', { fontWeight: 600 }],
+    'header-3-regular': ['20px', { fontWeight: 400 }],
+    'body-3': ['12px', { fontWeight: 400 }],
+    'header-4': ['16px', { fontWeight: 600 }],
+    'header-4-regular': ['16px', { fontWeight: 400 }],
+    'body-4': ['8px', { fontWeight: 400 }],
+};

package/dist/{shared-tailwind-theme.d.ts → constants/theme/pallamart-motion.d.ts}

@@ -1,72 +1,3 @@
-export declare const PallamartScreens: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-};
-export declare const PallamartFontSize: {
-    'header-0': [string, {
-        fontWeight: number;
-    }];
-    'header-1': [string, {
-        fontWeight: number;
-    }];
-    'header-1-regular': [string, {
-        fontWeight: number;
-    }];
-    'keyboard-1': [string, {
-        fontWeight: number;
-    }];
-    'body-1': [string, {
-        fontWeight: number;
-    }];
-    'header-2': [string, {
-        fontWeight: number;
-    }];
-    'header-2-regular': [string, {
-        fontWeight: number;
-    }];
-    'body-2': [string, {
-        fontWeight: number;
-    }];
-    'header-3': [string, {
-        fontWeight: number;
-    }];
-    'header-3-regular': [string, {
-        fontWeight: number;
-    }];
-    'body-3': [string, {
-        fontWeight: number;
-    }];
-    'header-4': [string, {
-        fontWeight: number;
-    }];
-    'header-4-regular': [string, {
-        fontWeight: number;
-    }];
-    'body-4': [string, {
-        fontWeight: number;
-    }];
-};
-export declare const PallamartSharedScale: {
-    height: {
-        '168': string;
-    };
-    width: {
-        '168': string;
-    };
-    maxHeight: {
-        '168': string;
-    };
-    maxWidth: {
-        '168': string;
-    };
-    transitionProperty: {
-        move: string;
-    };
-};
 export declare const PallamartMotion: {
     keyframes: {
         'fade-in': {

package/dist/{shared-tailwind-theme.js → constants/theme/pallamart-motion.js}

@@ -1,36 +1,3 @@
-export const PallamartScreens = {
-    'xs': '386px',
-    'sm': '480px',
-    'md': '768px',
-    'lg': '976px',
-    'xl': '1128px',
-    '2xl': '1528px',
-};
-export const PallamartFontSize = {
-    'header-0': ['86px', { fontWeight: 700 }],
-    'header-1': ['40px', { fontWeight: 700 }],
-    'header-1-regular': ['40px', { fontWeight: 400 }],
-    'keyboard-1': ['21px', { fontWeight: 400 }],
-    'body-1': ['18px', { fontWeight: 400 }],
-    'header-2': ['28px', { fontWeight: 700 }],
-    'header-2-regular': ['28px', { fontWeight: 400 }],
-    'body-2': ['16px', { fontWeight: 400 }],
-    'header-3': ['20px', { fontWeight: 600 }],
-    'header-3-regular': ['20px', { fontWeight: 400 }],
-    'body-3': ['12px', { fontWeight: 400 }],
-    'header-4': ['16px', { fontWeight: 600 }],
-    'header-4-regular': ['16px', { fontWeight: 400 }],
-    'body-4': ['8px', { fontWeight: 400 }],
-};
-export const PallamartSharedScale = {
-    height: { '168': '42rem' },
-    width: { '168': '42rem' },
-    maxHeight: { '168': '42rem' },
-    maxWidth: { '168': '42rem' },
-    transitionProperty: {
-        move: 'left, right',
-    },
-};
 export const PallamartMotion = {
     keyframes: {
         'fade-in': {

package/dist/constants/theme/pallamart-screens.d.ts

@@ -0,0 +1,8 @@
+export declare const PallamartScreens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};

package/dist/constants/theme/pallamart-screens.js

@@ -0,0 +1,8 @@
+export const PallamartScreens = {
+    'xs': '386px',
+    'sm': '480px',
+    'md': '768px',
+    'lg': '976px',
+    'xl': '1128px',
+    '2xl': '1528px',
+};

package/dist/constants/theme/pallamart-shared-scale.d.ts

@@ -0,0 +1,17 @@
+export declare const PallamartSharedScale: {
+    height: {
+        '168': string;
+    };
+    width: {
+        '168': string;
+    };
+    maxHeight: {
+        '168': string;
+    };
+    maxWidth: {
+        '168': string;
+    };
+    transitionProperty: {
+        move: string;
+    };
+};

package/dist/constants/theme/pallamart-shared-scale.js

@@ -0,0 +1,9 @@
+export const PallamartSharedScale = {
+    height: { '168': '42rem' },
+    width: { '168': '42rem' },
+    maxHeight: { '168': '42rem' },
+    maxWidth: { '168': '42rem' },
+    transitionProperty: {
+        move: 'left, right',
+    },
+};

package/dist/constants/z-index/index.d.ts

@@ -0,0 +1 @@
+export * from './pallamart-z-index.js';

package/dist/constants/z-index/index.js

@@ -0,0 +1 @@
+export * from './pallamart-z-index.js';

package/dist/{z-index.d.ts → constants/z-index/pallamart-z-index.d.ts}

@@ -6,4 +6,3 @@ export declare enum PallamartZIndex {
     LayerModal = "z-30",
     ModalOverlay = "z-[39]"
 }
-export { PallamartZIndex as ZIndex };

package/dist/{z-index.js → constants/z-index/pallamart-z-index.js}

@@ -7,4 +7,3 @@ export var PallamartZIndex;
     PallamartZIndex["LayerModal"] = "z-30";
     PallamartZIndex["ModalOverlay"] = "z-[39]";
 })(PallamartZIndex || (PallamartZIndex = {}));
-export { PallamartZIndex as ZIndex };

package/dist/external/index.d.ts

@@ -1,3 +1,3 @@
-export * from '../color.js';
-export * from '../tailwind-preset.js';
-export * from '../z-index.js';
+export * from '../constants/color/index.js';
+export * from '../constants/presets/pallamart-external-tailwind-preset.js';
+export * from '../constants/z-index/index.js';

package/dist/external/index.js

@@ -1,3 +1,3 @@
-export * from '../color.js';
-export * from '../tailwind-preset.js';
-export * from '../z-index.js';
+export * from '../constants/color/index.js';
+export * from '../constants/presets/pallamart-external-tailwind-preset.js';
+export * from '../constants/z-index/index.js';

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export * from './color.js';
-export * from './tailwind-preset.js';
-export * from './z-index.js';
+export * from './constants/index.js';
+export * from './services/index.js';

package/dist/index.js

@@ -1,3 +1,2 @@
-export * from './color.js';
-export * from './tailwind-preset.js';
-export * from './z-index.js';
+export * from './constants/index.js';
+export * from './services/index.js';

package/dist/internal/index.d.ts

@@ -1,2 +1,2 @@
-export * from '../z-index.js';
-export * from './tailwind-preset.js';
+export * from '../constants/presets/pallamart-internal-tailwind-preset.js';
+export * from '../constants/z-index/index.js';

package/dist/internal/index.js

@@ -1,2 +1,2 @@
-export * from '../z-index.js';
-export * from './tailwind-preset.js';
+export * from '../constants/presets/pallamart-internal-tailwind-preset.js';
+export * from '../constants/z-index/index.js';

package/dist/services/index.d.ts

@@ -0,0 +1 @@
+export * from './pallamart-class-name-service.js';

package/dist/services/index.js

@@ -0,0 +1 @@
+export * from './pallamart-class-name-service.js';

package/dist/services/pallamart-class-name-service.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from 'clsx';
+export declare class PallamartClassNameService {
+    static merge(...classNames: ClassValue[]): string;
+}

package/dist/services/pallamart-class-name-service.js

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export class PallamartClassNameService {
+    static merge(...classNames) {
+        return twMerge(clsx(classNames));
+    }
+}

package/dist/styles/components/loaders/index.css

@@ -1,2 +1,3 @@
 @import url('dot-loader-dark.css');
 @import url('dot-loader.css');
+@import url('skeleton.css');

package/dist/styles/components/loaders/skeleton.css

@@ -0,0 +1,40 @@
+.pm-skeleton {
+	background: color-mix(in oklch, var(--foreground) 10%, transparent);
+	display: block;
+	isolation: isolate;
+	overflow: hidden;
+	position: relative;
+}
+
+.pm-skeleton::after {
+	animation: pm-skeleton-sweep 1.4s linear infinite;
+	background: linear-gradient(
+		90deg,
+		transparent 0%,
+		color-mix(in oklch, var(--foreground) 12%, transparent) 50%,
+		transparent 100%
+	);
+	content: '';
+	inset: 0;
+	position: absolute;
+	transform: translate3d(-100%, 0, 0);
+	will-change: transform;
+}
+
+@keyframes pm-skeleton-sweep {
+	0% {
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	100% {
+		transform: translate3d(100%, 0, 0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.pm-skeleton::after {
+		animation: none;
+		opacity: 0.5;
+		transform: none;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallamart/pm-design-system",
-	"version": "1.0.1",
+	"version": "2.1.0",
 	"private": false,
 	"type": "module",
 	"main": "./dist/index.js",
@@ -12,14 +12,14 @@
 			"default": "./dist/index.js"
 		},
 		"./tailwind-preset": {
-			"types": "./dist/tailwind-preset.d.ts",
-			"import": "./dist/tailwind-preset.js",
-			"default": "./dist/tailwind-preset.js"
+			"types": "./dist/constants/presets/pallamart-external-tailwind-preset.d.ts",
+			"import": "./dist/constants/presets/pallamart-external-tailwind-preset.js",
+			"default": "./dist/constants/presets/pallamart-external-tailwind-preset.js"
 		},
 		"./shared-tailwind-theme": {
-			"types": "./dist/shared-tailwind-theme.d.ts",
-			"import": "./dist/shared-tailwind-theme.js",
-			"default": "./dist/shared-tailwind-theme.js"
+			"types": "./dist/constants/theme/index.d.ts",
+			"import": "./dist/constants/theme/index.js",
+			"default": "./dist/constants/theme/index.js"
 		},
 		"./styles.css": "./dist/styles/index.css",
 		"./external": {
@@ -28,9 +28,9 @@
 			"default": "./dist/external/index.js"
 		},
 		"./external/tailwind-preset": {
-			"types": "./dist/external/tailwind-preset.d.ts",
-			"import": "./dist/external/tailwind-preset.js",
-			"default": "./dist/external/tailwind-preset.js"
+			"types": "./dist/constants/presets/pallamart-external-tailwind-preset.d.ts",
+			"import": "./dist/constants/presets/pallamart-external-tailwind-preset.js",
+			"default": "./dist/constants/presets/pallamart-external-tailwind-preset.js"
 		},
 		"./external/styles.css": "./dist/styles/external.css",
 		"./internal": {
@@ -39,9 +39,9 @@
 			"default": "./dist/internal/index.js"
 		},
 		"./internal/tailwind-preset": {
-			"types": "./dist/internal/tailwind-preset.d.ts",
-			"import": "./dist/internal/tailwind-preset.js",
-			"default": "./dist/internal/tailwind-preset.js"
+			"types": "./dist/constants/presets/pallamart-internal-tailwind-preset.d.ts",
+			"import": "./dist/constants/presets/pallamart-internal-tailwind-preset.js",
+			"default": "./dist/constants/presets/pallamart-internal-tailwind-preset.js"
 		},
 		"./internal/styles.css": "./dist/styles/internal.css"
 	},
@@ -99,5 +99,10 @@
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/pallamart/pm-design-system.git"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^2.6.1",
+		"tailwindcss-animate": "^1.0.7"
 	}
 }

package/dist/external/tailwind-preset.d.ts

@@ -1 +0,0 @@
-export { PallamartTailwindPreset, PallamartTailwindPreset as PallamartExternalTailwindPreset, } from '../tailwind-preset.js';

package/dist/external/tailwind-preset.js

@@ -1 +0,0 @@
-export { PallamartTailwindPreset, PallamartTailwindPreset as PallamartExternalTailwindPreset, } from '../tailwind-preset.js';

package/dist/styles/external/index/z-index.ts

@@ -1,8 +0,0 @@
-export enum ZIndex {
-	LayerBase = 'z-0',
-	LayerUpperBase = 'z-10',
-	LayerBaseHeader = 'z-20',
-	BaseOverlay = 'z-[29]',
-	LayerModal = 'z-30',
-	ModalOverlay = 'z-[39]',
-}

package/dist/styles/index/z-index.ts

@@ -1,8 +0,0 @@
-export enum ZIndex {
-	LayerBase = 'z-0',
-	LayerUpperBase = 'z-10',
-	LayerBaseHeader = 'z-20',
-	BaseOverlay = 'z-[29]',
-	LayerModal = 'z-30',
-	ModalOverlay = 'z-[39]',
-}

package/dist/tailwind-preset.d.ts

@@ -1,2 +0,0 @@
-import type { Config } from 'tailwindcss';
-export declare const PallamartTailwindPreset: Partial<Config>;