odj-svelte-ui 0.1.0

package/dist/device-mockups/theme.d.ts

@@ -0,0 +1,516 @@
+declare const android: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const defaultMockup: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const desktop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const ios: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const laptop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const smartwatch: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const tablet: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            slot?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/theme.js

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+// Android
+const android = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl",
+        slot: "rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// DefaultMockup
+const defaultMockup = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// Desktop
+const desktop = tv({
+    slots: {
+        inner: "rounded-xl overflow-hidden h-[140px] md:h-[262px]",
+        bot: "relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]",
+        botUnder: "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]",
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]"
+    }
+});
+// ios
+const ios = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// laptop
+const laptop = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]",
+        inner: "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800",
+        bot: "relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]",
+        botCen: "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800"
+    }
+});
+// smartwatch
+const smartwatch = tv({
+    slots: {
+        div: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]",
+        slot: "rounded-[2rem] overflow-hidden h-[193px] w-[188px]",
+        rightTop: "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg",
+        rightBot: "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg",
+        top: "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]",
+        bot: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]"
+    }
+});
+// tablet
+const tablet = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]",
+        slot: "rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/type.d.ts

@@ -0,0 +1,61 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { DeviceVariantType } from "../types";
+interface DeviceMockupProps {
+    children: Snippet;
+    device?: DeviceVariantType;
+}
+interface MockupBaseProps extends HTMLAttributes<HTMLElement> {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+}
+interface AndroidProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+    div7Class?: string;
+}
+interface DefaultMockupProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface IosProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface SmartwatchProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface TabletProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+export { type DeviceMockupProps, type AndroidProps, type DefaultMockupProps, type IosProps, type SmartwatchProps, type TabletProps, type MockupBaseProps };

package/dist/device-mockups/type.js

@@ -0,0 +1 @@
+export {};