@cloudparker/moldex.js 0.0.3 → 0.0.4

package/dist/actions/badge.d.ts

@@ -1,3 +1,4 @@
+import '../tailwind.css';
 export type BadgeProsType = {
     containerClassName?: string;
     badgePositionClassName?: string;

package/dist/actions/badge.js

@@ -1,3 +1,4 @@
+import '../tailwind.css';
 export function badge(node, { containerClassName = '', badgePositionClassName = 'top-0 right-0', badgeContainerClassName = '', badgeClassName = '', badgeBackgroundClassName = '', badgeText = '', hasBadgeBackground = true } = {}) {
     let badgeBackElement = hasBadgeBackground ? `<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75 ${badgeBackgroundClassName}"></span>` : '';
     const badge = document.createElement('span');

package/dist/actions/ripple.d.ts

@@ -1,3 +1,4 @@
+import '../tailwind.css';
 export type RipplePropsType = {
     /**
      * The color of the ripple effect, default is rgba(0, 0, 0, 0.12)

package/dist/actions/ripple.js

@@ -1,3 +1,4 @@
+import '../tailwind.css';
 export const DARK_RIPPLE_COLOR = 'rgba(0, 0, 0, 0.12)';
 export const LIGHT_RIPPLE_COLOR = 'rgba(255, 255, 255, 0.12)';
 export function ripple(node, { color, light } = {}) {

package/dist/button/components/button/button.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { ripple } from "../../../actions/ripple.js";
+<script lang="ts">import "../../../tailwind.css";
+import { ripple } from "../../../actions/ripple.js";
 import Spinner from "../../../common/components/spinner/spinner.svelte";
 import Icon from "../../../icon/components/icon/icon.svelte";
 let {

package/dist/button/components/button/button.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/button/components/button-list-item/button-list-item.svelte

@@ -1,6 +1,7 @@
 <script context="module" lang="ts"></script>
 
-<script lang="ts">import { ripple } from "../../../actions/ripple.js";
+<script lang="ts">import "../../../tailwind.css";
+import { ripple } from "../../../actions/ripple.js";
 import Icon from "../../../icon/components/icon/icon.svelte";
 import {
   mdiCheckCircle,

package/dist/button/components/button-list-item/button-list-item.svelte.d.ts

@@ -18,6 +18,7 @@ export type ListItemType = {
     arrowIconPath?: string;
     arrowClassName?: string;
 };
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/button/components/button-menu/button-menu.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
+<script lang="ts">import "../../../tailwind.css";
+import Icon from "../../../icon/components/icon/icon.svelte";
 import {
   mdiCheckCircle,
   mdiCheckCircleOutline,

package/dist/button/components/button-menu/button-menu.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 import type { ListItemType } from '../button-list-item/button-list-item.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/common/components/drawer/drawer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let {
+<script lang="ts">import "../../../tailwind.css";
+let {
   id = "",
   children,
   backdropClassName = "",

package/dist/common/components/drawer/drawer.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/common/components/navbar/navbar.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Button from "../../../button/components/button/button.svelte";
+<script lang="ts">import "../../../tailwind.css";
+import Button from "../../../button/components/button/button.svelte";
 import Icon from "../../../icon/components/icon/icon.svelte";
 import { mdiMenu } from "../../../icon/services/icon-path-service.js";
 let {

package/dist/common/components/navbar/navbar.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/common/components/spinner/spinner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { className = "" } = $props();
+<script lang="ts">import "../../../tailwind.css";
+let { className = "" } = $props();
 </script>
 
 <svg

package/dist/common/components/spinner/spinner.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/common/components/vertical-rule/verticcal-rule.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { className = "" } = $props();
+<script lang="ts">import "../../../tailwind.css";
+let { className = "" } = $props();
 </script>
 
 <div class="h-6 lg:w-px lg:bg-gray-200 {className}" aria-hidden="true"></div>

package/dist/common/components/vertical-rule/verticcal-rule.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/components/dialog/dialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import Button from "../../../button/components/button/button.svelte";
+<script lang="ts">import "../../../tailwind.css";
+import Button from "../../../button/components/button/button.svelte";
 import { mdiArrowLeft, mdiClose } from "../../../icon/services/icon-path-service.js";
 let {
   id = "",

package/dist/dialog/components/dialog/dialog.svelte.d.ts

@@ -52,6 +52,7 @@ export type DialogExportsType = {
     setOkSpinner: (value: boolean) => void;
     setOkDisabled: (value: boolean) => void;
 };
+import '../../../tailwind.css';
 import type { Snippet } from 'svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/icon/components/icon/icon.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let {
+<script lang="ts">import "../../../tailwind.css";
+let {
   path,
   className = "",
   size = 24,

package/dist/icon/components/icon/icon.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/tailwind.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer utilities {
+  @keyframes ripple-effect {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  .ripple {
+    @apply absolute rounded-full bg-current;
+    transform: scale(0); 
+    animation: ripple-effect 0.5s linear;
+    background-color: var(--ripple-color);
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [