negodesign 0.0.72 → 0.0.74

package/dist/components/ui/social-login/social-login.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import {
+    GoogleIcon,
+    Facebook01Icon,
+    Linkedin01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { t } from "../../../i18n";
+  import Separator from "../separator/separator.svelte";
+  import type { SocialLoginItem, SocialProvider } from "../../pages/security/login/types";
+  import type { IconSvgElement } from "@hugeicons/svelte";
+
+  type Props = {
+    items?: SocialLoginItem[];
+    label?: string;
+    showSeparator?: boolean;
+    variant?: "default" | "compact" | "icons-only";
+  };
+
+  let {
+    items = [],
+    label,
+    showSeparator = true,
+    variant = "default",
+  }: Props = $props();
+
+  const defaultIcons: Record<SocialProvider, IconSvgElement> = {
+    GOOGLE: GoogleIcon,
+    FACEBOOK: Facebook01Icon,
+    LINKEDIN: Linkedin01Icon,
+  };
+
+  const defaultLabels: Record<SocialProvider, string> = {
+    GOOGLE: "Google",
+    FACEBOOK: "Facebook",
+    LINKEDIN: "LinkedIn",
+  };
+</script>
+
+{#if items.length > 0}
+  {#if showSeparator}
+    <div class="relative my-2 text-center">
+      <div class="absolute inset-0 flex items-center">
+        <Separator />
+      </div>
+      <span
+        class="relative bg-white dark:bg-background px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+      >
+        {label ?? $t("label.or.continue.with")}
+      </span>
+    </div>
+  {/if}
+
+  <div class="flex gap-2">
+    {#each items as item}
+      {#if variant === "icons-only"}
+        <button
+          type="button"
+          onclick={item.onclick}
+          class="flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors"
+          aria-label={item.label ?? defaultLabels[item.provider]}
+        >
+          <HugeiconsIcon icon={item.icon ?? defaultIcons[item.provider]} size={18} />
+        </button>
+      {:else}
+        <button
+          type="button"
+          onclick={item.onclick}
+          class="flex items-center justify-center gap-2 flex-1 px-4 py-2.5 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors text-sm font-medium text-gray-700"
+        >
+          <HugeiconsIcon icon={item.icon ?? defaultIcons[item.provider]} size={18} />
+          {#if variant === "default"}
+            <span>{item.label ?? defaultLabels[item.provider]}</span>
+          {/if}
+        </button>
+      {/if}
+    {/each}
+  </div>
+{/if}

package/dist/components/ui/social-login/social-login.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SocialLoginItem } from "../../pages/security/login/types";
+type Props = {
+    items?: SocialLoginItem[];
+    label?: string;
+    showSeparator?: boolean;
+    variant?: "default" | "compact" | "icons-only";
+};
+declare const SocialLogin: import("svelte").Component<Props, {}, "">;
+type SocialLogin = ReturnType<typeof SocialLogin>;
+export default SocialLogin;

package/dist/components/ui/star-rating/star-rating-star.svelte

@@ -1,67 +1,67 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { StarRatingStarProps } from "./types";
-	import { useStarRatingContext } from "./star-rating.svelte";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { StarHalfIcon, StarIcon } from "@hugeicons/core-free-icons";
-
-	let { index, class: className, state: _state }: StarRatingStarProps = $props();
-
-	const rating = useStarRatingContext();
-
-	const fraction = $derived.by(() => Math.min(Math.max(rating.value - index, 0), 1));
-	const isActive = $derived(fraction >= 1);
-	const isPartial = $derived(fraction > 0 && fraction < 1);
-	const isCurrentHovered = $derived(rating.hovered === index);
-	const filled = $derived(isActive || isPartial || isCurrentHovered);
-
-	const displayState = $derived(isPartial ? "partial" : isActive ? "active" : "inactive");
-	const iconClass = $derived(
-		filled ? "text-amber-500 fill-current" : "text-muted-foreground fill-transparent"
-	);
-
-	function handleClick() {
-		if (rating.disabled || rating.readOnly) return;
-		rating.selectValue(index + 1);
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			handleClick();
-		}
-	}
-</script>
-
-<span
-	role="radio"
-	aria-checked={isActive ? "true" : isPartial ? "mixed" : "false"}
-	data-star-rating
-	data-state={displayState}
-	data-disabled={rating.disabled ? "true" : undefined}
-	tabindex={rating.disabled ? -1 : 0}
-	class={cn(
-		"ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2",
-		className
-	)}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	onmouseenter={() => rating.setHovered(index)}
-	onmouseleave={() => rating.setHovered(null)}
->
-	<div class="relative size-full">
-		{#if isPartial}
-			<HugeiconsIcon
-				icon={StarHalfIcon}
-				strokeWidth={2}
-				class={cn("absolute top-0 left-0 size-full transition-all", iconClass)}
-			/>
-		{:else}
-			<HugeiconsIcon
-				icon={StarIcon}
-				strokeWidth={2}
-				class={cn("size-full transition-all", iconClass)}
-			/>
-		{/if}
-	</div>
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { StarRatingStarProps } from "./types";
+	import { useStarRatingContext } from "./star-rating.svelte";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { StarHalfIcon, StarIcon } from "@hugeicons/core-free-icons";
+
+	let { index, class: className, state: _state }: StarRatingStarProps = $props();
+
+	const rating = useStarRatingContext();
+
+	const fraction = $derived.by(() => Math.min(Math.max(rating.value - index, 0), 1));
+	const isActive = $derived(fraction >= 1);
+	const isPartial = $derived(fraction > 0 && fraction < 1);
+	const isCurrentHovered = $derived(rating.hovered === index);
+	const filled = $derived(isActive || isPartial || isCurrentHovered);
+
+	const displayState = $derived(isPartial ? "partial" : isActive ? "active" : "inactive");
+	const iconClass = $derived(
+		filled ? "text-amber-500 fill-current" : "text-muted-foreground fill-transparent"
+	);
+
+	function handleClick() {
+		if (rating.disabled || rating.readOnly) return;
+		rating.selectValue(index + 1);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+<span
+	role="radio"
+	aria-checked={isActive ? "true" : isPartial ? "mixed" : "false"}
+	data-star-rating
+	data-state={displayState}
+	data-disabled={rating.disabled ? "true" : undefined}
+	tabindex={rating.disabled ? -1 : 0}
+	class={cn(
+		"ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2",
+		className
+	)}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	onmouseenter={() => rating.setHovered(index)}
+	onmouseleave={() => rating.setHovered(null)}
+>
+	<div class="relative size-full">
+		{#if isPartial}
+			<HugeiconsIcon
+				icon={StarHalfIcon}
+				strokeWidth={2}
+				class={cn("absolute top-0 left-0 size-full transition-all", iconClass)}
+			/>
+		{:else}
+			<HugeiconsIcon
+				icon={StarIcon}
+				strokeWidth={2}
+				class={cn("size-full transition-all", iconClass)}
+			/>
+		{/if}
+	</div>
 </span>

package/dist/components/ui/star-rating/star-rating.svelte

@@ -1,150 +1,150 @@
-<script lang="ts" module>
-	import { getContext, setContext } from "svelte";
-
-	export type StarRatingContext = {
-		get value(): number;
-		get count(): number;
-		get disabled(): boolean;
-		get readOnly(): boolean;
-		get hovered(): number | null;
-		setHovered: (index: number | null) => void;
-		selectValue: (value: number) => void;
-	};
-
-	const STAR_RATING_CONTEXT_KEY = "scn-star-rating";
-
-	export function setStarRatingContext(ctx: StarRatingContext): StarRatingContext {
-		return setContext(STAR_RATING_CONTEXT_KEY, ctx);
-	}
-
-	export function useStarRatingContext(): StarRatingContext {
-		return getContext<StarRatingContext>(STAR_RATING_CONTEXT_KEY);
-	}
-</script>
-
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-	import type { StarRatingItem } from "./types";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(0),
-		onValueChange,
-		count = 5,
-		max = count,
-		orientation = "horizontal",
-		readOnly = false,
-		disabled = false,
-		class: className,
-		children,
-		onkeydown,
-		onmouseleave,
-		...restProps
-	}: {
-		ref?: HTMLDivElement | null;
-		value?: number;
-		onValueChange?: (value: number) => void;
-		count?: number;
-		max?: number;
-		orientation?: "horizontal" | "vertical";
-		readOnly?: boolean;
-		disabled?: boolean;
-		class?: string;
-		children?: Snippet<[{ items: StarRatingItem[] }]>;
-		onkeydown?: (e: KeyboardEvent) => void;
-		onmouseleave?: (e: MouseEvent) => void;
-		[key: string]: unknown;
-	} = $props();
-
-	const total = $derived.by(() => {
-		const n = typeof max === "number" && Number.isFinite(max) && max > 0 ? max : count;
-		return Math.floor(n);
-	});
-
-	let hovered = $state<number | null>(null);
-
-	function setHovered(index: number | null) {
-		if (disabled) return;
-		hovered = index;
-	}
-
-	function selectValue(next: number) {
-		if (disabled || readOnly) return;
-		value = Math.min(Math.max(next, 0), total);
-		onValueChange?.(value);
-	}
-
-	function starState(index: number): StarRatingItem["state"] {
-		const fraction = value - index;
-		if (fraction >= 1) return "active";
-		if (fraction > 0) return "partial";
-		return "inactive";
-	}
-
-	const items = $derived.by(() =>
-		Array.from({ length: total }, (_, index) => ({ index, state: starState(index) }))
-	);
-
-	function handleKeydown(e: KeyboardEvent) {
-		onkeydown?.(e);
-		if (disabled || readOnly) return;
-		if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-			e.preventDefault();
-			selectValue(Math.round(value) + 1);
-		} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-			e.preventDefault();
-			selectValue(Math.round(value) - 1);
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			selectValue(1);
-		} else if (e.key === "End") {
-			e.preventDefault();
-			selectValue(total);
-		} else if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			if (hovered !== null) selectValue(hovered + 1);
-		}
-	}
-
-	function handleMouseLeave(e: MouseEvent) {
-		hovered = null;
-		onmouseleave?.(e);
-	}
-
-	setStarRatingContext({
-		get value() {
-			return value;
-		},
-		get count() {
-			return total;
-		},
-		get disabled() {
-			return disabled;
-		},
-		get readOnly() {
-			return readOnly;
-		},
-		get hovered() {
-			return hovered;
-		},
-		setHovered,
-		selectValue
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="star-rating"
-	data-star-rating
-	data-orientation={orientation}
-	role="radiogroup"
-	aria-disabled={disabled ? "true" : undefined}
-	data-disabled={disabled ? "true" : undefined}
-	class={cn("group flex w-fit place-items-center gap-1 rounded-md outline-hidden", className)}
-	onkeydown={handleKeydown}
-	onmouseleave={handleMouseLeave}
-	{...restProps}
->
-	{@render children?.({ items })}
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+
+	export type StarRatingContext = {
+		get value(): number;
+		get count(): number;
+		get disabled(): boolean;
+		get readOnly(): boolean;
+		get hovered(): number | null;
+		setHovered: (index: number | null) => void;
+		selectValue: (value: number) => void;
+	};
+
+	const STAR_RATING_CONTEXT_KEY = "scn-star-rating";
+
+	export function setStarRatingContext(ctx: StarRatingContext): StarRatingContext {
+		return setContext(STAR_RATING_CONTEXT_KEY, ctx);
+	}
+
+	export function useStarRatingContext(): StarRatingContext {
+		return getContext<StarRatingContext>(STAR_RATING_CONTEXT_KEY);
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import type { StarRatingItem } from "./types";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(0),
+		onValueChange,
+		count = 5,
+		max = count,
+		orientation = "horizontal",
+		readOnly = false,
+		disabled = false,
+		class: className,
+		children,
+		onkeydown,
+		onmouseleave,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		value?: number;
+		onValueChange?: (value: number) => void;
+		count?: number;
+		max?: number;
+		orientation?: "horizontal" | "vertical";
+		readOnly?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet<[{ items: StarRatingItem[] }]>;
+		onkeydown?: (e: KeyboardEvent) => void;
+		onmouseleave?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	} = $props();
+
+	const total = $derived.by(() => {
+		const n = typeof max === "number" && Number.isFinite(max) && max > 0 ? max : count;
+		return Math.floor(n);
+	});
+
+	let hovered = $state<number | null>(null);
+
+	function setHovered(index: number | null) {
+		if (disabled) return;
+		hovered = index;
+	}
+
+	function selectValue(next: number) {
+		if (disabled || readOnly) return;
+		value = Math.min(Math.max(next, 0), total);
+		onValueChange?.(value);
+	}
+
+	function starState(index: number): StarRatingItem["state"] {
+		const fraction = value - index;
+		if (fraction >= 1) return "active";
+		if (fraction > 0) return "partial";
+		return "inactive";
+	}
+
+	const items = $derived.by(() =>
+		Array.from({ length: total }, (_, index) => ({ index, state: starState(index) }))
+	);
+
+	function handleKeydown(e: KeyboardEvent) {
+		onkeydown?.(e);
+		if (disabled || readOnly) return;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+			e.preventDefault();
+			selectValue(Math.round(value) + 1);
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+			e.preventDefault();
+			selectValue(Math.round(value) - 1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			selectValue(1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			selectValue(total);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (hovered !== null) selectValue(hovered + 1);
+		}
+	}
+
+	function handleMouseLeave(e: MouseEvent) {
+		hovered = null;
+		onmouseleave?.(e);
+	}
+
+	setStarRatingContext({
+		get value() {
+			return value;
+		},
+		get count() {
+			return total;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get readOnly() {
+			return readOnly;
+		},
+		get hovered() {
+			return hovered;
+		},
+		setHovered,
+		selectValue
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="star-rating"
+	data-star-rating
+	data-orientation={orientation}
+	role="radiogroup"
+	aria-disabled={disabled ? "true" : undefined}
+	data-disabled={disabled ? "true" : undefined}
+	class={cn("group flex w-fit place-items-center gap-1 rounded-md outline-hidden", className)}
+	onkeydown={handleKeydown}
+	onmouseleave={handleMouseLeave}
+	{...restProps}
+>
+	{@render children?.({ items })}
 </div>

package/dist/components/ui/table/table-body.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
-</script>
-
-<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
-	{@render children?.()}
-</tbody>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>

package/dist/components/ui/table/table-caption.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
-</script>
-
-<caption
-	bind:this={ref}
-	data-slot="table-caption"
-	class={cn("text-muted-foreground mt-4 text-sm", className)}
-	{...restProps}
->
-	{@render children?.()}
-</caption>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

package/dist/components/ui/table/table-cell.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLTdAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLTdAttributes> = $props();
-</script>
-
-<td bind:this={ref} data-slot="table-cell" class={cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
-	{@render children?.()}
-</td>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td bind:this={ref} data-slot="table-cell" class={cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>

package/dist/components/ui/table/table-footer.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
-</script>
-
-<tfoot
-	bind:this={ref}
-	data-slot="table-footer"
-	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
-	{...restProps}
->
-	{@render children?.()}
-</tfoot>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>