@makolabs/ripple 0.0.1-dev.2 → 0.0.1-dev.4

package/dist/modal/modal.d.ts

@@ -0,0 +1,234 @@
+import type { VariantSizes } from '../types/variants.js';
+import type { Snippet } from 'svelte';
+export declare const modal: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        center: {
+            contentWrapper: string;
+        };
+        top: {
+            contentWrapper: string;
+        };
+        bottom: {
+            contentWrapper: string;
+        };
+        left: {
+            contentWrapper: string;
+        };
+        right: {
+            contentWrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: string;
+}, undefined, {
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        center: {
+            contentWrapper: string;
+        };
+        top: {
+            contentWrapper: string;
+        };
+        bottom: {
+            contentWrapper: string;
+        };
+        left: {
+            contentWrapper: string;
+        };
+        right: {
+            contentWrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        center: {
+            contentWrapper: string;
+        };
+        top: {
+            contentWrapper: string;
+        };
+        bottom: {
+            contentWrapper: string;
+        };
+        left: {
+            contentWrapper: string;
+        };
+        right: {
+            contentWrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MakeModalProps = {
+    open?: boolean;
+    onclose?: () => void;
+    title?: string;
+    description?: string;
+    hideCloseButton?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
+    position?: keyof typeof modal.variants.position;
+    size?: VariantSizes;
+    class?: string;
+    backdropclass?: string;
+    contentclass?: string;
+    headerclass?: string;
+    bodyclass?: string;
+    titleclass?: string;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    custom?: Snippet;
+};

package/dist/modal/modal.js

@@ -0,0 +1,81 @@
+import { tv } from 'tailwind-variants';
+export const modal = tv({
+    slots: {
+        base: 'fixed inset-0 z-50 flex items-center justify-center overflow-y-auto',
+        backdrop: 'fixed inset-0 transition-opacity bg-black/50',
+        contentWrapper: 'absolute transform overflow-hidden transition-all px-2',
+        content: 'bg-white overflow-hidden rounded-lg',
+        header: 'px-4 py-3 flex items-center justify-between border-b border-gray-200',
+        body: 'px-3 py-2 max-h-[70dvh] overflow-y-auto',
+        title: 'text-default-900 leading-6 text-base font-semibold',
+        closeButton: 'text-gray-400 hover:text-gray-500 rounded-md cursor-pointer'
+    },
+    variants: {
+        open: {
+            true: {
+                base: 'visible',
+                backdrop: 'visible opacity-100',
+                contentWrapper: 'visible scale-100 opacity-100'
+            },
+            false: {
+                base: 'invisible',
+                backdrop: 'invisible opacity-0',
+                contentWrapper: 'invisible scale-95 opacity-0'
+            }
+        },
+        position: {
+            center: {
+                contentWrapper: 'mx-auto'
+            },
+            top: {
+                contentWrapper: 'mx-auto top-7'
+            },
+            bottom: {
+                contentWrapper: 'mx-auto bottom-7'
+            },
+            left: {
+                contentWrapper: 'left-7'
+            },
+            right: {
+                contentWrapper: 'right-7'
+            }
+        },
+        size: {
+            xs: {
+                contentWrapper: 'w-full max-w-xs'
+            },
+            sm: {
+                contentWrapper: 'w-full max-w-sm'
+            },
+            base: {
+                contentWrapper: 'w-full max-w-md'
+            },
+            lg: {
+                contentWrapper: 'w-full max-w-lg'
+            },
+            xl: {
+                contentWrapper: 'w-full max-w-xl'
+            },
+            '2xl': {
+                contentWrapper: 'w-full max-w-2xl'
+            }
+        },
+        border: {
+            none: {
+                content: 'border-0'
+            },
+            default: {
+                content: 'border border-gray-200'
+            },
+            colored: {
+                content: 'border'
+            }
+        }
+    },
+    defaultVariants: {
+        open: false,
+        position: 'center',
+        size: 'base',
+        color: 'default'
+    }
+});

package/dist/types/variants.d.ts

@@ -0,0 +1,21 @@
+export declare const Color: {
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+};
+export type VariantColors = (typeof Color)[keyof typeof Color];
+export declare const Size: {
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly BASE: "base";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "2xl";
+};
+export type VariantSizes = (typeof Size)[keyof typeof Size];
+export declare const colors: VariantColors[];
+export declare const sizes: VariantSizes[];

package/dist/types/variants.js

@@ -0,0 +1,19 @@
+export const Color = {
+    DEFAULT: 'default',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger'
+};
+export const Size = {
+    XS: 'xs',
+    SM: 'sm',
+    BASE: 'base',
+    LG: 'lg',
+    XL: 'xl',
+    XXL: '2xl'
+};
+export const colors = Object.values(Color);
+export const sizes = Object.values(Size);

package/package.json

@@ -1,104 +1,102 @@
 {
-  "name": "@makolabs/ripple",
-  "version": "0.0.1-dev.2",
-  "description": "Simple Svelte 5 powered component library ✨",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/makolabsai/mako-ui-components.git"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "test:unit": "vitest",
-    "test": "npm run test:unit -- --run && npm run test:e2e",
-    "test:e2e": "playwright test"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "svelte": "./dist/layout/index.js"
-    }
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-cloudflare": "^5.0.1",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@tailwindcss/vite": "^4.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
-    "globals": "^16.0.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "publint": "^0.3.2",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0"
-  },
-  "keywords": [
-    "svelte",
-    "ui",
-    "svelte5",
-    "modal",
-    "navigation",
-    "ripple",
-    "button",
-    "sidebar",
-    "card",
-    "dropdown",
-    "tooltip",
-    "accordion",
-    "tabs",
-    "alert",
-    "badge",
-    "breadcrumb",
-    "carousel",
-    "collapse",
-    "list-group",
-    "pagination",
-    "progress",
-    "spinner",
-    "toast"
-  ],
-  "dependencies": {
-    "tailwind-merge": "^3.0.2",
-    "tailwind-variants": "^1.0.0"
-  }
+	"name": "@makolabs/ripple",
+	"version": "0.0.1-dev.4",
+	"description": "Simple Svelte 5 powered component library ✨",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/makolabsai/mako-ui-components.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-cloudflare": "^5.0.1",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.14",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"@types/node": "^22.13.10",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"jsdom": "^26.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"ui",
+		"svelte5",
+		"modal",
+		"navigation",
+		"ripple",
+		"button",
+		"sidebar",
+		"card",
+		"select",
+		"tooltip",
+		"accordion",
+		"tabs",
+		"alert",
+		"badge",
+		"breadcrumb",
+		"carousel",
+		"collapse",
+		"list-group",
+		"pagination",
+		"progress",
+		"spinner",
+		"toast"
+	],
+	"dependencies": {
+		"echarts": "^5.6.0",
+		"tailwind-merge": "^3.0.2",
+		"tailwind-variants": "^1.0.0"
+	}
 }