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

package/dist/forms/slider.d.ts

@@ -0,0 +1,143 @@
+import { Size } from '../variants.js';
+export declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, {
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/slider.js

@@ -0,0 +1,62 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../variants.js';
+export const slider = tv({
+    slots: {
+        base: 'relative w-full',
+        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
+        range: 'absolute h-full rounded-full bg-primary-500',
+        thumb: [
+            'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
+            'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+            'hover:scale-110 transition-transform cursor-pointer'
+        ],
+        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-default-700',
+        value: 'mt-1 text-sm text-default-500'
+    },
+    variants: {
+        size: {
+            [Size.SM]: {
+                track: 'h-1',
+                thumb: 'w-3 h-3',
+                mark: 'text-xs top-4',
+                label: 'text-xs',
+                value: 'text-xs'
+            },
+            [Size.BASE]: {
+                track: 'h-2',
+                thumb: 'w-4 h-4',
+                mark: 'text-sm top-6',
+                label: 'text-sm',
+                value: 'text-sm'
+            },
+            [Size.LG]: {
+                track: 'h-3',
+                thumb: 'w-5 h-5',
+                mark: 'text-base top-7',
+                label: 'text-base',
+                value: 'text-base'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed',
+                thumb: 'cursor-not-allowed hover:scale-100 active:scale-100'
+            }
+        },
+        hasError: {
+            true: {
+                track: 'bg-danger-200',
+                range: 'bg-danger-500',
+                thumb: 'border-danger-500 focus:ring-danger-500',
+                label: 'text-danger-600',
+                value: 'text-danger-600'
+            }
+        }
+    },
+    defaultVariants: {
+        size: Size.BASE,
+        disabled: false,
+        hasError: false
+    }
+});

package/dist/header/Breadcrumbs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { breadcrumbs, type BreadcrumbsProps } from './breadcrumbs.js';
+	import { breadcrumbs } from './breadcrumbs.js';
+	import type { BreadcrumbsProps } from '../index.js';
 
 	let {
 		items = [],

package/dist/header/Breadcrumbs.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type BreadcrumbsProps } from './breadcrumbs.js';
+import type { BreadcrumbsProps } from '../index.js';
 declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/header/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { type PageHeaderProps } from './pageheaders.js';
+	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
 	let {
@@ -19,7 +19,7 @@
 </script>
 
 <div class={headerClasses}>
-	<div class="min-w-0 flex-1">
+	<div class="flex-1 min-w-0">
 		{#if hasBreadcrumbs}
 			<Breadcrumbs items={breadcrumbs} />
 		{/if}

package/dist/header/PageHeader.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PageHeaderProps } from './pageheaders.js';
+import type { PageHeaderProps } from '../index.js';
 declare const PageHeader: import("svelte").Component<PageHeaderProps, {}, "">;
 type PageHeader = ReturnType<typeof PageHeader>;
 export default PageHeader;

package/dist/header/breadcrumbs.d.ts

@@ -1,11 +1,13 @@
-import type { Component } from 'svelte';
-export type BreadcrumbItem = {
+type BreadcrumbItem = {
     label: string;
     href: string;
     current?: boolean;
 };
 export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -26,6 +28,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -73,6 +78,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, undefined, {
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -93,6 +101,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -140,6 +151,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -160,6 +174,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -206,15 +223,4 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     separator: string;
     wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
-export type BreadcrumbsProps = {
-    items: BreadcrumbItem[];
-    size?: keyof typeof breadcrumbs.variants.size;
-    weight?: keyof typeof breadcrumbs.variants.weight;
-    color?: keyof typeof breadcrumbs.variants.color;
-    icon?: Component;
-    class?: string;
-    listclass?: string;
-    itemclass?: string;
-    separatorclass?: string;
-    wrapperclass?: string;
-};
+export type { BreadcrumbItem };

package/dist/header/breadcrumbs.js

@@ -9,6 +9,9 @@ export const breadcrumbs = tv({
     },
     variants: {
         size: {
+            xs: {
+                base: 'items-center text-xs'
+            },
             sm: {
                 base: 'items-center text-sm'
             },
@@ -28,6 +31,9 @@ export const breadcrumbs = tv({
             },
             semibold: {
                 item: 'font-semibold'
+            },
+            bold: {
+                item: 'font-bold'
             }
         },
         color: {

package/dist/helper/date.d.ts

@@ -0,0 +1,7 @@
+export declare const DATE_FORMAT: {
+    ISO: string;
+    READABLE: string;
+    SHORT: string;
+};
+export declare function formatDateTime(time: Date | string, format?: string): string;
+export declare function getRelativeTime(time: Date | string): string;

package/dist/helper/date.js

@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+dayjs.extend(relativeTime);
+export const DATE_FORMAT = {
+    ISO: 'YYYY-MM-DDTHH:mm:ssZ',
+    READABLE: 'MMM D, YYYY h:mm A',
+    SHORT: 'MM/DD/YYYY HH:mm'
+};
+export function formatDateTime(time, format = DATE_FORMAT.READABLE) {
+    return dayjs(time).format(format);
+}
+export function getRelativeTime(time) {
+    const date = dayjs(time);
+    return date.fromNow();
+}