negodesign 0.0.73 → 0.0.74

package/dist/components/{core/grid → ui/grid/core}/ui/ItemsSimpleGrid.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-  import { useDevice } from "../../../../hooks/responsive.svelte";
-  import type { GridProps } from "../data/types";
-  import Grid02 from "./02/Grid02.svelte";
-  import Grid01 from "./01/Grid01.svelte";
-
-  let { variant, className, isLoading, onClick, items }: GridProps = $props();
-
-  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len <= 3) return "grid grid-cols-3";
-    if (len <= 4) return "grid grid-cols-4";
-    if (len <= 5) return "grid grid-cols-5";
-    if (len <= 6) return "grid grid-cols-6";
-    if (len <= 7) return "grid grid-cols-7";
-    if (len > 7) return styleMobile;
-    return "grid grid-cols-1";
-  };
-
-  const responsive = useDevice();
-</script>
-
-<div
-  class="{responsive.isMobile ? styleMobile : cols()} gap-4 my-2 {className}"
->
-  {#if isLoading}
-    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
-      {#if variant == 2}
-        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
-      {:else}
-        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
-      {/if}
-    {/each}
-  {:else}
-    {#each items as item, i (i)}
-      {#if variant == 2}
-        <Grid02 {...item} {onClick} />
-      {:else}
-        <Grid01 {...item} {onClick} />
-      {/if}
-    {/each}
-  {/if}
-</div>
+<script lang="ts">
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, className, isLoading, onClick, items }: GridProps = $props();
+
+  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len <= 3) return "grid grid-cols-3";
+    if (len <= 4) return "grid grid-cols-4";
+    if (len <= 5) return "grid grid-cols-5";
+    if (len <= 6) return "grid grid-cols-6";
+    if (len <= 7) return "grid grid-cols-7";
+    if (len > 7) return styleMobile;
+    return "grid grid-cols-1";
+  };
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class="{responsive.isMobile ? styleMobile : cols()} gap-4 my-2 {className}"
+>
+  {#if isLoading}
+    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
+      {#if variant == 2}
+        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
+      {:else}
+        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
+      {/if}
+    {/each}
+  {:else}
+    {#each items as item, i (i)}
+      {#if variant == 2}
+        <Grid02 {...item} {onClick} />
+      {:else}
+        <Grid01 {...item} {onClick} />
+      {/if}
+    {/each}
+  {/if}
+</div>

package/dist/components/{core/grid → ui/grid/core}/ui/shared/DescriptionGrid.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-
-    let {
-        isLoading,
-        description,
-        descriptionClass,
-    }: {
-        isLoading?: boolean;
-        description?: string;
-        descriptionClass?: string;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-2.5 bg-gray-500/95" />
-{:else if description}
-    <p
-        class="{descriptionClass} text-center min-w-48 md:w-52 lg:w-56 text-muted-foreground line-clamp-2 md:line-clamp-3"
-    >
-        {description}
-    </p>
-{/if}
+<script lang="ts">
+    import Skeleton from "../../../../skeleton/skeleton.svelte";
+
+    let {
+        isLoading,
+        description,
+        descriptionClass,
+    }: {
+        isLoading?: boolean;
+        description?: string;
+        descriptionClass?: string;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-2.5 bg-gray-500/95" />
+{:else if description}
+    <p
+        class="{descriptionClass} text-center min-w-48 md:w-52 lg:w-56 text-muted-foreground line-clamp-2 md:line-clamp-3"
+    >
+        {description}
+    </p>
+{/if}

package/dist/components/{core/grid → ui/grid/core}/ui/shared/IconRenderGrid.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { IconSvgElement } from "@hugeicons/svelte";
-
-    let {
-        icon,
-        iconClass,
-        isLoading,
-    }: {
-        icon: string | IconSvgElement;
-        iconClass?: string;
-        isLoading?: boolean;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="min-w-17.5 md:min-w-25 h-2.5 bg-gray-400" />
-{:else if typeof icon === "string"}
-    <i class="{icon} text-4xl md:text-6xl {iconClass}"></i>
-{:else}
-    <HugeiconsIcon {icon} class="size-8 md:size-10 {iconClass}" />
-{/if}
+<script lang="ts">
+    import Skeleton from "../../../../skeleton/skeleton.svelte";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { IconSvgElement } from "@hugeicons/svelte";
+
+    let {
+        icon,
+        iconClass,
+        isLoading,
+    }: {
+        icon: string | IconSvgElement;
+        iconClass?: string;
+        isLoading?: boolean;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="min-w-17.5 md:min-w-25 h-2.5 bg-gray-400" />
+{:else if typeof icon === "string"}
+    <i class="{icon} text-4xl md:text-6xl {iconClass}"></i>
+{:else}
+    <HugeiconsIcon {icon} class="size-8 md:size-10 {iconClass}" />
+{/if}

package/dist/components/{core/grid → ui/grid/core}/ui/shared/TitleGrid.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-    import { Skeleton } from "../../../../ui/skeleton";
-
-    let {
-        isLoading,
-        title,
-        titleClass,
-    }: {
-        isLoading?: boolean;
-        title?: string;
-        titleClass?: string;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-12.5 bg-gray-500/95" />
-{:else}
-    <p class={titleClass}>{title}</p>
-{/if}
+<script lang="ts">
+    import { Skeleton } from "../../../../skeleton";
+
+    let {
+        isLoading,
+        title,
+        titleClass,
+    }: {
+        isLoading?: boolean;
+        title?: string;
+        titleClass?: string;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-12.5 bg-gray-500/95" />
+{:else}
+    <p class={titleClass}>{title}</p>
+{/if}

package/dist/components/{core → ui}/hero/SimpleHero.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import { Button } from "../../ui/button/index.js";
-  import type { HeroSimpleProps } from "./types";
-  let {
-    title,
-    subTitle,
-    description,
-    image,
-    buttons,
-    titleClass,
-    subTitleClass,
-    descriptionClass,
-    imageClass,
-  }: HeroSimpleProps = $props();
-</script>
-
-<section class="relative flex p-2">
-  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
-    <div class="flex justify-center items-center">
-      <div class="space-y-1">
-        {#if title}
-          <h1
-            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
-          >
-            {title}
-          </h1>
-        {/if}
-        {#if subTitle}
-          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
-            {subTitle}
-          </p>
-        {/if}
-        {#if description}
-          <p
-            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
-          >
-            {description}
-          </p>
-        {/if}
-        {#if buttons}
-          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
-            {#each buttons as button, i (i)}
-              <Button
-                href={button.href}
-                class={button.className}
-                onclick={button.onClick}
-              >
-                {button.label}
-              </Button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      {#if image}
-        <img
-          src={image}
-          alt={image}
-          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
-        />
-      {/if}
-    </div>
-  </div>
-</section>
+<script lang="ts">
+  import { Button } from "../button/index.js";
+  import type { HeroSimpleProps } from "./types";
+  let {
+    title,
+    subTitle,
+    description,
+    image,
+    buttons,
+    titleClass,
+    subTitleClass,
+    descriptionClass,
+    imageClass,
+  }: HeroSimpleProps = $props();
+</script>
+
+<section class="relative flex p-2">
+  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
+    <div class="flex justify-center items-center">
+      <div class="space-y-1">
+        {#if title}
+          <h1
+            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
+          >
+            {title}
+          </h1>
+        {/if}
+        {#if subTitle}
+          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
+            {subTitle}
+          </p>
+        {/if}
+        {#if description}
+          <p
+            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
+          >
+            {description}
+          </p>
+        {/if}
+        {#if buttons}
+          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
+            {#each buttons as button, i (i)}
+              <Button
+                href={button.href}
+                class={button.className}
+                onclick={button.onClick}
+              >
+                {button.label}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      {#if image}
+        <img
+          src={image}
+          alt={image}
+          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
+        />
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/ui/input-otp/input-otp-group.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="input-otp-group"
-	class={cn(
-		"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center gap-2",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-otp-group"
+	class={cn(
+		"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/input-otp/input-otp-separator.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "../../../utils.js";
-	import { cn } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { MinusSignIcon } from "@hugeicons/core-free-icons";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="input-otp-separator"
-	role="separator"
-	class={cn("flex items-center -mx-1 [&_svg:not([class*='size-'])]:size-4", className)}
-	{...restProps}
->
-	{#if children}
-		{@render children?.()}
-	{:else}
-		<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
-	{/if}
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { MinusSignIcon } from "@hugeicons/core-free-icons";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-otp-separator"
+	role="separator"
+	class={cn("flex items-center -mx-1 [&_svg:not([class*='size-'])]:size-4", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
+	{/if}
 </div>

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
-	import { getInputOTPContext, type OtpCell } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		cell,
-		class: className,
-		...restProps
-	}: WithoutChildren<WithElementRef<HTMLInputAttributes, HTMLInputElement>> & {
-		cell: OtpCell;
-	} = $props();
-
-	const ctx = getInputOTPContext();
-	const index = $derived(cell.index);
-
-	$effect(() => {
-		ctx.registerInput(index, ref);
-	});
-
-	function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
-		ctx.setValueAt(index, event.currentTarget.value);
-	}
-
-	function handleFocus() {
-		ctx.setActive(index);
-		ref?.select();
-	}
-
-	function handleBlur() {
-		ctx.setActive(null);
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		ctx.handleKeyDown(index, event);
-	}
-
-	function handlePaste(event: ClipboardEvent) {
-		ctx.handlePaste(index, event);
-	}
-</script>
-
-<input
-	bind:this={ref}
-	data-slot="input-otp-slot"
-	type="text"
-	inputmode="numeric"
-	autocomplete="one-time-code"
-	maxlength={1}
-	value={cell.char}
-	placeholder={ctx.placeholder}
-	disabled={ctx.disabled}
-	oninput={handleInput}
-	onfocus={handleFocus}
-	onblur={handleBlur}
-	onkeydown={handleKeyDown}
-	onpaste={handlePaste}
-	class={cn(
-		"border-input text-foreground bg-input/30 size-10 rounded-md border text-center text-lg shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-		className
-	)}
-	{...restProps}
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import { getInputOTPContext, type OtpCell } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		cell,
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLInputAttributes, HTMLInputElement>> & {
+		cell: OtpCell;
+	} = $props();
+
+	const ctx = getInputOTPContext();
+	const index = $derived(cell.index);
+
+	$effect(() => {
+		ctx.registerInput(index, ref);
+	});
+
+	function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+		ctx.setValueAt(index, event.currentTarget.value);
+	}
+
+	function handleFocus() {
+		ctx.setActive(index);
+		ref?.select();
+	}
+
+	function handleBlur() {
+		ctx.setActive(null);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		ctx.handleKeyDown(index, event);
+	}
+
+	function handlePaste(event: ClipboardEvent) {
+		ctx.handlePaste(index, event);
+	}
+</script>
+
+<input
+	bind:this={ref}
+	data-slot="input-otp-slot"
+	type="text"
+	inputmode="numeric"
+	autocomplete="one-time-code"
+	maxlength={1}
+	value={cell.char}
+	placeholder={ctx.placeholder}
+	disabled={ctx.disabled}
+	oninput={handleInput}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onkeydown={handleKeyDown}
+	onpaste={handlePaste}
+	class={cn(
+		"border-input text-foreground bg-input/30 size-10 rounded-md border text-center text-lg shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+		className
+	)}
+	{...restProps}
 />