negodesign 0.0.30 → 0.0.32

package/dist/components/pages/profile-user/shared/ProfileUserSetting.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" module>
+  /**
+   * Preferências de notificações e marketing.
+   * Inclui secções "Email/Notification preferences" e "Enable notification",
+   * além das preferências de marketing.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import Checkbox from "../../../ui/checkbox/checkbox.svelte";
+  import Label from "../../../ui/label/label.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { cn } from "../../../../utils.js";
+  import { t } from "../../../../i18n";
+  import type {
+    ProfileUserMarketingPref,
+    ProfileUserNotificationPref,
+    ProfileUserSettingProps,
+  } from "../types";
+
+  let {
+    notificationPref,
+    enableNotification,
+    marketingPrefs,
+    isLoading = false,
+    className,
+    notificationTitle = $t("profile-user.setting.notification.title"),
+    notificationEmailLabel = $t("profile-user.setting.notification.email.label"),
+    notificationEmailDesc = $t("profile-user.setting.notification.email.desc"),
+    notificationWebLabel = $t("profile-user.setting.notification.web.label"),
+    notificationWebDesc = $t("profile-user.setting.notification.web.desc"),
+    notificationAppLabel = $t("profile-user.setting.notification.app.label"),
+    notificationAppDesc = $t("profile-user.setting.notification.app.desc"),
+    enableTitle = $t("profile-user.setting.enable.title"),
+    enableEmailLabel = $t("profile-user.setting.enable.email"),
+    enableWebLabel = $t("profile-user.setting.enable.web"),
+    enableAppLabel = $t("profile-user.setting.enable.app"),
+    marketingTitle = $t("profile-user.setting.marketing.title"),
+    marketingTypeLabel = $t("profile-user.setting.marketing.type"),
+    marketingEmailLabel = $t("profile-user.setting.marketing.email"),
+    marketingPushLabel = $t("profile-user.setting.marketing.push"),
+  }: ProfileUserSettingProps & {
+    notificationPref?: ProfileUserNotificationPref;
+    enableNotification?: { email?: boolean; web?: boolean; app?: boolean };
+    marketingPrefs?: ProfileUserMarketingPref[];
+    isLoading?: boolean;
+  } = $props();
+
+  let emailEnabled = $state(false);
+  let webEnabled = $state(false);
+  let appEnabled = $state(false);
+
+  let enableEmailChecked = $state(false);
+  let enableWebChecked = $state(false);
+  let enableAppChecked = $state(false);
+
+  $effect(() => {
+    emailEnabled = notificationPref?.emailEnabled ?? false;
+    webEnabled = notificationPref?.webEnabled ?? false;
+    appEnabled = notificationPref?.appEnabled ?? false;
+  });
+
+  $effect(() => {
+    enableEmailChecked = enableNotification?.email ?? false;
+    enableWebChecked = enableNotification?.web ?? false;
+    enableAppChecked = enableNotification?.app ?? false;
+  });
+
+  const marketingState = $state<Record<string, { email: boolean; push: boolean }>>({});
+  $effect(() => {
+    marketingPrefs?.forEach((pref) => {
+      if (!marketingState[pref.id]) {
+        marketingState[pref.id] = {
+          email: pref.email ?? false,
+          push: pref.push ?? false,
+        };
+      }
+    });
+  });
+</script>
+
+<div class={cn("flex flex-col gap-6", className)} data-slot="profile-user-setting">
+  <section class="rounded-lg border bg-card p-6">
+    <h3 class="mb-6 text-lg font-semibold">{notificationTitle}</h3>
+    {#if isLoading}
+      <div class="flex flex-col gap-4">
+        {#each Array.from({ length: 3 }) as _, i (i)}
+          <Skeleton class="h-6 w-full rounded-md" />
+        {/each}
+      </div>
+    {:else}
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationEmailLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationEmailDesc}</p>
+          </div>
+          <Checkbox bind:checked={emailEnabled} />
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationWebLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationWebDesc}</p>
+          </div>
+          <Checkbox bind:checked={webEnabled} />
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationAppLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationAppDesc}</p>
+          </div>
+          <Checkbox bind:checked={appEnabled} />
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  <section class="rounded-lg border bg-card p-6">
+    <h3 class="mb-6 text-lg font-semibold">{enableTitle}</h3>
+    {#if isLoading}
+      <div class="flex flex-col gap-4">
+        {#each Array.from({ length: 3 }) as _, i (i)}
+          <Skeleton class="h-6 w-full rounded-md" />
+        {/each}
+      </div>
+    {:else}
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableEmailLabel}</Label>
+          <Checkbox bind:checked={enableEmailChecked} />
+        </div>
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableWebLabel}</Label>
+          <Checkbox bind:checked={enableWebChecked} />
+        </div>
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableAppLabel}</Label>
+          <Checkbox bind:checked={enableAppChecked} />
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  {#if marketingPrefs && marketingPrefs.length > 0}
+    <section class="rounded-lg border bg-card p-6">
+      <h3 class="mb-6 text-lg font-semibold">{marketingTitle}</h3>
+      {#if isLoading}
+        <div class="flex flex-col gap-4">
+          {#each marketingPrefs as _, i (i)}
+            <Skeleton class="h-12 w-full rounded-md" />
+          {/each}
+        </div>
+      {:else}
+        <div class="overflow-hidden rounded-md border">
+          <div class="grid grid-cols-[1fr_auto_auto] gap-4 border-b bg-muted/50 px-4 py-3 text-sm font-medium">
+            <span>{marketingTypeLabel}</span>
+            <span class="text-center">{marketingEmailLabel}</span>
+            <span class="text-center">{marketingPushLabel}</span>
+          </div>
+          {#each marketingPrefs as pref (pref.id)}
+            <div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <span class="font-medium">{pref.label}</span>
+              <div class="flex justify-center">
+                <Checkbox bind:checked={marketingState[pref.id].email} />
+              </div>
+              <div class="flex justify-center">
+                <Checkbox bind:checked={marketingState[pref.id].push} />
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  {/if}
+</div>

package/dist/components/pages/profile-user/shared/ProfileUserSetting.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ProfileUserMarketingPref, ProfileUserNotificationPref, ProfileUserSettingProps } from "../types";
+type $$ComponentProps = ProfileUserSettingProps & {
+    notificationPref?: ProfileUserNotificationPref;
+    enableNotification?: {
+        email?: boolean;
+        web?: boolean;
+        app?: boolean;
+    };
+    marketingPrefs?: ProfileUserMarketingPref[];
+    isLoading?: boolean;
+};
+declare const ProfileUserSetting: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileUserSetting = ReturnType<typeof ProfileUserSetting>;
+export default ProfileUserSetting;

package/dist/components/pages/profile-user/shared/ProfileUserTabs.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	/**
+	 * Barra de tabs reutilizável para as variantes de perfil.
+	 * Suporta loading state, tabs customizadas, active tab controlável
+	 * e estilos variantes (underline vs pill).
+	 * @component
+	 */
+	export type ProfileUserTabItem = { id: string; label: string };
+	export type ProfileUserTabsStyle = "underline" | "pill";
+</script>
+
+<script lang="ts">
+	import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+	import { cn } from "../../../../utils.js";
+
+	let {
+		tabs,
+		activeTab = $bindable(),
+		style = "underline",
+		isLoading = false,
+		className,
+		onchange,
+	}: {
+		tabs: ProfileUserTabItem[];
+		activeTab?: string;
+		style?: ProfileUserTabsStyle;
+		isLoading?: boolean;
+		className?: string;
+		onchange?: (id: string) => void;
+	} = $props();
+
+	const currentTab = $derived(activeTab ?? tabs[0]?.id ?? "");
+
+	const handleSelect = (id: string) => {
+		activeTab = id;
+		onchange?.(id);
+	};
+</script>
+
+<div
+	class={cn(
+		"mb-6 flex gap-1 border-b overflow-x-auto",
+		style === "pill" && "-mt-12 mb-6 rounded-t-lg border border-t bg-background px-2 py-1 shadow-sm border-b",
+		className
+	)}
+	data-slot="profile-user-tabs"
+>
+	{#if isLoading}
+		{#each tabs as tab (tab.id)}
+			<Skeleton class="h-9 w-32 shrink-0 rounded-t-md" />
+		{/each}
+	{:else}
+		{#each tabs as tab (tab.id)}
+			<button
+				type="button"
+				onclick={() => handleSelect(tab.id)}
+				class={cn(
+					"shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+					style === "underline"
+						? cn(
+								"border-b-2",
+								currentTab === tab.id
+									? "border-foreground text-foreground"
+									: "border-transparent text-muted-foreground hover:text-foreground"
+							)
+						: cn(
+								"rounded-md",
+								currentTab === tab.id
+									? "bg-primary/10 text-primary"
+									: "text-muted-foreground hover:bg-muted hover:text-foreground"
+							)
+				)}
+			>
+				{tab.label}
+			</button>
+		{/each}
+	{/if}
+</div>

package/dist/components/pages/profile-user/shared/ProfileUserTabs.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Barra de tabs reutilizável para as variantes de perfil.
+ * Suporta loading state, tabs customizadas, active tab controlável
+ * e estilos variantes (underline vs pill).
+ * @component
+ */
+export type ProfileUserTabItem = {
+    id: string;
+    label: string;
+};
+export type ProfileUserTabsStyle = "underline" | "pill";
+type $$ComponentProps = {
+    tabs: ProfileUserTabItem[];
+    activeTab?: string;
+    style?: ProfileUserTabsStyle;
+    isLoading?: boolean;
+    className?: string;
+    onchange?: (id: string) => void;
+};
+declare const ProfileUserTabs: import("svelte").Component<$$ComponentProps, {}, "activeTab">;
+type ProfileUserTabs = ReturnType<typeof ProfileUserTabs>;
+export default ProfileUserTabs;

package/dist/components/pages/profile-user/types.d.ts

@@ -0,0 +1,144 @@
+export type ProfileUserVariant = 1 | 2 | 3;
+export interface ProfileUserAddress {
+    id: string | number;
+    label: string;
+    street: string;
+    apartment?: string;
+    state?: string;
+    zip?: string;
+    isDefault?: boolean;
+}
+export interface ProfileUserNote {
+    id: string | number;
+    text: string;
+}
+export interface ProfileUserNotificationPref {
+    emailEnabled?: boolean;
+    webEnabled?: boolean;
+    appEnabled?: boolean;
+}
+export interface ProfileUserMarketingPref {
+    id: string;
+    label: string;
+    email?: boolean;
+    push?: boolean;
+}
+export interface ProfileUserExperience {
+    id: string | number;
+    categoryId: string;
+    program: string;
+    role: string;
+    institution: string;
+    location?: string;
+    startDate?: string;
+    endDate?: string;
+    tags?: {
+        label: string;
+    }[];
+}
+export interface ProfileUserData {
+    id: string | number;
+    avatarUrl: string;
+    bannerUrl?: string;
+    firstName: string;
+    lastName: string;
+    fullName?: string;
+    email: string;
+    phone?: string;
+    role?: string;
+    status?: string;
+    username?: string;
+    defaultAddress?: string;
+    addresses?: ProfileUserAddress[];
+    notes?: ProfileUserNote[];
+    notificationPref?: ProfileUserNotificationPref;
+    enableNotification?: {
+        email?: boolean;
+        web?: boolean;
+        app?: boolean;
+    };
+    marketingPrefs?: ProfileUserMarketingPref[];
+    tabs?: {
+        id: string;
+        label: string;
+    }[];
+    location?: string;
+    verified?: boolean;
+    priceRange?: string;
+    experienceTitle?: string;
+    experiences?: ProfileUserExperience[];
+    experienceCategories?: {
+        id: string;
+        label: string;
+    }[];
+}
+export interface ProfileUserHeaderProps {
+    statusDefault?: string;
+    roleDefault?: string;
+    loginAsUserLabel?: string;
+    onLoginAsUser?: (id: string | number) => void;
+}
+export interface ProfileUserAddressProps {
+    title?: string;
+    addLabel?: string;
+    defaultBadge?: string;
+    emptyText?: string;
+    onAddAddress?: () => void;
+    className?: string;
+}
+export interface ProfileUserResetPasswordProps {
+    title?: string;
+    currentLabel?: string;
+    currentPlaceholder?: string;
+    newLabel?: string;
+    newPlaceholder?: string;
+    confirmLabel?: string;
+    confirmPlaceholder?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    onChangePassword?: (payload: {
+        currentPassword: string;
+        newPassword: string;
+        confirmPassword: string;
+    }) => void;
+    onCancel?: () => void;
+    className?: string;
+}
+export interface ProfileUserSettingProps {
+    className?: string;
+    notificationTitle?: string;
+    notificationEmailLabel?: string;
+    notificationEmailDesc?: string;
+    notificationWebLabel?: string;
+    notificationWebDesc?: string;
+    notificationAppLabel?: string;
+    notificationAppDesc?: string;
+    enableTitle?: string;
+    enableEmailLabel?: string;
+    enableWebLabel?: string;
+    enableAppLabel?: string;
+    marketingTitle?: string;
+    marketingTypeLabel?: string;
+    marketingEmailLabel?: string;
+    marketingPushLabel?: string;
+}
+export interface ProfileUserTabsProps {
+    style?: "underline" | "pill";
+    className?: string;
+    onchange?: (id: string) => void;
+}
+export interface ProfileUserProps {
+    varient?: ProfileUserVariant;
+    data: ProfileUserData;
+    activeTab?: string;
+    isLoading?: boolean;
+    tabs?: {
+        id: string;
+        label: string;
+    }[];
+    userHeader?: ProfileUserHeaderProps;
+    userAddress?: ProfileUserAddressProps;
+    userResetPassword?: ProfileUserResetPasswordProps;
+    userSetting?: ProfileUserSettingProps;
+    userTabs?: ProfileUserTabsProps;
+}

package/dist/components/pages/profile-user/types.js

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

package/dist/components/types.d.ts

@@ -0,0 +1,6 @@
+export type NegoDesignProps = {
+    /** Custom translations per language. Merged with the library's base translations. */
+    translations?: Record<string, Record<string, string>>;
+    /** Conteúdo da aplicação */
+    children?: any;
+};

package/dist/components/types.js

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