negodesign 0.0.25 → 0.0.27

package/dist/components/ui/tabs/tabs-list.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const tabsListVariants = tv({
-		base: "rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
-		variants: {
-			variant: {
-				default: "cn-tabs-list-variant-default bg-muted",
-				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
-</script>
-
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		variant = "default",
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps & {
-		variant?: TabsListVariant;
-	} = $props();
-</script>
-
-<TabsPrimitive.List
-	bind:ref
-	data-slot="tabs-list"
-	data-variant={variant}
-	class={cn(tabsListVariants({ variant }), className)}
-	{...restProps}
-/>
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.TriggerProps = $props();
-</script>
-
-<TabsPrimitive.Trigger
-	bind:ref
-	data-slot="tabs-trigger"
-	class={cn(
-		"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-		className
-	)}
-	{...restProps}
-/>
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(""),
-		class: className,
-		...restProps
-	}: TabsPrimitive.RootProps = $props();
-</script>
-
-<TabsPrimitive.Root
-	bind:ref
-	bind:value
-	data-slot="tabs"
-	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
-	{...restProps}
-/>
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>

package/dist/globals.css

@@ -6,11 +6,13 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-900: oklch(39.6% 0.141 25.723);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-slate-400: oklch(70.4% 0.04 256.788);
     --color-slate-500: oklch(55.4% 0.046 257.417);
@@ -55,6 +57,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
@@ -282,6 +285,9 @@
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
   }
+  .-top-6 {
+    top: calc(var(--spacing) * -6);
+  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
@@ -315,6 +321,9 @@
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
+  .-right-8 {
+    right: calc(var(--spacing) * -8);
+  }
   .right-0 {
     right: 0px;
   }
@@ -330,6 +339,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-10 {
+    right: calc(var(--spacing) * 10);
+  }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
   }
@@ -345,6 +357,9 @@
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .-left-8 {
+    left: calc(var(--spacing) * -8);
+  }
   .left-0 {
     left: 0px;
   }
@@ -480,9 +495,15 @@
   .-mr-2 {
     margin-right: calc(var(--spacing) * -2);
   }
+  .mr-0 {
+    margin-right: 0px;
+  }
   .mr-0\.5 {
     margin-right: calc(var(--spacing) * 0.5);
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .-mb-8 {
     margin-bottom: calc(var(--spacing) * -8);
   }
@@ -492,6 +513,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -507,8 +531,8 @@
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
-  .ml-10 {
-    margin-left: calc(var(--spacing) * 10);
+  .ml-0 {
+    margin-left: 0px;
   }
   .ml-auto {
     margin-left: auto;
@@ -687,8 +711,8 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-30 {
-    height: calc(var(--spacing) * 30);
+  .h-25 {
+    height: calc(var(--spacing) * 25);
   }
   .h-50 {
     height: calc(var(--spacing) * 50);
@@ -792,11 +816,17 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .w-30 {
     width: calc(var(--spacing) * 30);
   }
-  .w-37\.5 {
-    width: calc(var(--spacing) * 37.5);
+  .w-50 {
+    width: calc(var(--spacing) * 50);
   }
   .w-56 {
     width: calc(var(--spacing) * 56);
@@ -807,6 +837,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-75 {
+    width: calc(var(--spacing) * 75);
+  }
   .w-\[15px\] {
     width: 15px;
   }
@@ -879,6 +912,9 @@
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
+  .min-w-25 {
+    min-width: calc(var(--spacing) * 25);
+  }
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
@@ -994,6 +1030,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-pointer\! {
+    cursor: pointer !important;
+  }
   .cursor-text {
     cursor: text;
   }
@@ -1229,6 +1268,9 @@
   .rounded-tr-\[35px\] {
     border-top-right-radius: 35px;
   }
+  .rounded-tr-lg {
+    border-top-right-radius: var(--radius);
+  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius);
   }
@@ -1359,6 +1401,18 @@
       background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
+  .bg-black\/15 {
+    background-color: color-mix(in srgb, #000 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
+  }
+  .bg-black\/20 {
+    background-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1383,6 +1437,9 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-700\! {
+    background-color: var(--color-blue-700) !important;
+  }
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
@@ -1410,6 +1467,9 @@
       background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
     }
   }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1557,6 +1617,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1737,6 +1800,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1824,6 +1891,9 @@
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
@@ -1851,6 +1921,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-white\! {
+    color: var(--color-white) !important;
+  }
   .text-white\/80 {
     color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3245,12 +3318,18 @@
     }
   }
   @media (width >= 48rem) {
+    .md\:right-10 {
+      right: calc(var(--spacing) * 10);
+    }
     .md\:mx-4 {
       margin-inline: calc(var(--spacing) * 4);
     }
     .md\:my-2 {
       margin-block: calc(var(--spacing) * 2);
     }
+    .md\:mt-3 {
+      margin-top: calc(var(--spacing) * 3);
+    }
     .md\:mt-10 {
       margin-top: calc(var(--spacing) * 10);
     }
@@ -3260,8 +3339,11 @@
     .md\:flex {
       display: flex;
     }
-    .md\:h-37\.5 {
-      height: calc(var(--spacing) * 37.5);
+    .md\:h-20 {
+      height: calc(var(--spacing) * 20);
+    }
+    .md\:h-25 {
+      height: calc(var(--spacing) * 25);
     }
     .md\:h-100 {
       height: calc(var(--spacing) * 100);
@@ -3287,8 +3369,11 @@
     .md\:w-11\/12 {
       width: calc(11 / 12 * 100%);
     }
-    .md\:w-37\.5 {
-      width: calc(var(--spacing) * 37.5);
+    .md\:w-20 {
+      width: calc(var(--spacing) * 20);
+    }
+    .md\:w-25 {
+      width: calc(var(--spacing) * 25);
     }
     .md\:w-225 {
       width: calc(var(--spacing) * 225);
@@ -3296,6 +3381,12 @@
     .md\:max-w-md {
       max-width: var(--container-md);
     }
+    .md\:min-w-32 {
+      min-width: calc(var(--spacing) * 32);
+    }
+    .md\:basis-1\/2 {
+      flex-basis: calc(1 / 2 * 100%);
+    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -3305,6 +3396,9 @@
     .md\:gap-1\.5 {
       gap: calc(var(--spacing) * 1.5);
     }
+    .md\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
     .md\:gap-5 {
       gap: calc(var(--spacing) * 5);
     }
@@ -3336,6 +3430,10 @@
       font-size: var(--text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
+    .md\:text-3xl {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
     .md\:text-4xl {
       font-size: var(--text-4xl);
       line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -3356,6 +3454,12 @@
       font-size: var(--text-xl);
       line-height: var(--tw-leading, var(--text-xl--line-height));
     }
+    .md\:text-\[14px\] {
+      font-size: 14px;
+    }
+    .md\:text-\[15px\] {
+      font-size: 15px;
+    }
     .md\:text-\[20px\] {
       font-size: 20px;
     }
@@ -3396,6 +3500,9 @@
     .lg\:right-0 {
       right: 0px;
     }
+    .lg\:right-12 {
+      right: calc(var(--spacing) * 12);
+    }
     .lg\:-bottom-3 {
       bottom: calc(var(--spacing) * -3);
     }
@@ -3405,14 +3512,20 @@
     .lg\:block {
       display: block;
     }
-    .lg\:h-50 {
-      height: calc(var(--spacing) * 50);
+    .lg\:h-24 {
+      height: calc(var(--spacing) * 24);
+    }
+    .lg\:h-45 {
+      height: calc(var(--spacing) * 45);
     }
     .lg\:h-105 {
       height: calc(var(--spacing) * 105);
     }
-    .lg\:w-50 {
-      width: calc(var(--spacing) * 50);
+    .lg\:w-32 {
+      width: calc(var(--spacing) * 32);
+    }
+    .lg\:w-45 {
+      width: calc(var(--spacing) * 45);
     }
     .lg\:w-105 {
       width: calc(var(--spacing) * 105);
@@ -3420,6 +3533,15 @@
     .lg\:max-w-100 {
       max-width: calc(var(--spacing) * 100);
     }
+    .lg\:basis-1\/3 {
+      flex-basis: calc(1 / 3 * 100%);
+    }
+    .lg\:basis-1\/4 {
+      flex-basis: calc(1 / 4 * 100%);
+    }
+    .lg\:basis-auto {
+      flex-basis: auto;
+    }
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -3429,9 +3551,9 @@
     .lg\:gap-15 {
       gap: calc(var(--spacing) * 15);
     }
-    .lg\:text-2xl {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    .lg\:text-4xl {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
     .lg\:text-\[80px\] {
       font-size: 80px;
@@ -3475,6 +3597,9 @@
   .dark\:border-gray-700:is(.dark *) {
     border-color: var(--color-gray-700);
   }
+  .dark\:bg-background:is(.dark *) {
+    background-color: var(--background);
+  }
   .dark\:bg-black:is(.dark *) {
     background-color: var(--color-black);
   }

package/dist/hooks/responsive.svelte.d.ts

@@ -1,3 +1,3 @@
-export declare function useIsMobile(): {
+export declare function useDevice(): {
     readonly isMobile: boolean;
 };

package/dist/hooks/responsive.svelte.js

@@ -1,6 +1,6 @@
 import { onMount } from "svelte";
 const MOBILE_BREAKPOINT = 768;
-export function useIsMobile() {
+export function useDevice() {
     let isMobile = $state(false);
     onMount(() => {
         const update = () => {