From 5a96e28b384bc213f612538017fc545200d381d6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 14 May 2025 14:56:29 +0200
Subject: [PATCH] fix: check issues

---
 src/lib/components/avatar.svelte             |  8 +++++++-
 src/lib/components/billing/selectPlan.svelte |  3 +--
 src/lib/components/box.svelte                |  7 +++----
 src/lib/components/card.svelte               | 15 +++++++++++---
 src/lib/components/creditCardInfo.svelte     |  4 ++--
 src/lib/components/labelCard.svelte          | 21 +++++++++++++++++---
 src/lib/components/navbar.svelte             | 11 +++++++++-
 src/lib/components/tab.svelte                |  3 +--
 src/lib/elements/forms/inputDateTime.svelte  |  2 +-
 src/lib/helpers/types.ts                     | 13 ++++++++++++
 src/lib/layout/activity.svelte               |  4 ++--
 11 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
index 0ff36651a..e341375aa 100644
--- a/src/lib/components/avatar.svelte
+++ b/src/lib/components/avatar.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
     import { Avatar } from '@appwrite.io/pink-svelte';
-    import type { AvatarProps } from '@appwrite.io/pink-svelte/dist/avatar/Avatar.svelte';
+
+    type AvatarProps = Partial<{
+        src: string;
+        alt: string;
+        size: 'xs' | 's' | 'm' | 'l' | 'xl';
+        empty: boolean;
+    }>;
 
     export let size: AvatarProps['size'] = 'm';
     export let src: AvatarProps['src'] = undefined;
diff --git a/src/lib/components/billing/selectPlan.svelte b/src/lib/components/billing/selectPlan.svelte
index 8aae2f0ac..2b9d9498f 100644
--- a/src/lib/components/billing/selectPlan.svelte
+++ b/src/lib/components/billing/selectPlan.svelte
@@ -24,8 +24,7 @@
                     tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
                     tooltipText={plan.$id === BillingPlan.FREE
                         ? 'You are limited to 1 Free organization per account.'
-                        : ''}
-                    padding={1.5}>
+                        : ''}>
                     <svelte:fragment slot="custom" let:disabled>
                         <div
                             class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
index 448f93c85..d129900a0 100644
--- a/src/lib/components/box.svelte
+++ b/src/lib/components/box.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
     import { Card } from '@appwrite.io/pink-svelte';
-    import type Base from '@appwrite.io/pink-svelte/dist/card/Base.svelte';
-    import type { ComponentProps } from 'svelte';
+    import type { BaseCardProps } from './card.svelte';
 
-    export let radius: ComponentProps<Base>['radius'] = 'm';
-    export let padding: ComponentProps<Base>['padding'] = 's';
+    export let radius: BaseCardProps['radius'] = 'm';
+    export let padding: BaseCardProps['padding'] = 's';
 </script>
 
 <Card.Base variant="secondary" {radius} {padding}>
diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index 28af1975c..fd94436ab 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -1,7 +1,16 @@
+<script context="module" lang="ts">
+    export type BaseCardProps = Partial<{
+        variant: 'primary' | 'secondary';
+        radius: 's' | 'm' | 'l';
+        padding: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
+        border: 'solid' | 'dashed';
+        shadow?: boolean;
+        disabled?: boolean;
+    }>;
+</script>
+
 <script lang="ts">
     import { Card, Layout } from '@appwrite.io/pink-svelte';
-    import type Base from '@appwrite.io/pink-svelte/dist/card/Base.svelte';
-    import type { ComponentProps } from 'svelte';
 
     type BaseProps = {
         isDashed?: boolean;
@@ -20,7 +29,7 @@
         isButton?: never;
     };
 
-    type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps) & ComponentProps<Base>;
+    type $$Props = BaseProps & (ButtonProps | AnchorProps | BaseProps) & BaseCardProps;
 
     export let isDashed = false;
     export let isButton = false;
diff --git a/src/lib/components/creditCardInfo.svelte b/src/lib/components/creditCardInfo.svelte
index 7ab6ced30..849146456 100644
--- a/src/lib/components/creditCardInfo.svelte
+++ b/src/lib/components/creditCardInfo.svelte
@@ -2,9 +2,9 @@
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { Badge, Layout, Link, Popover, Table } from '@appwrite.io/pink-svelte';
     import CreditCardBrandImage from './creditCardBrandImage.svelte';
-    import type { RootProp } from '@appwrite.io/pink-svelte/dist/table';
+    import type { TableRootProp } from '$lib/helpers/types';
 
-    export let root: RootProp;
+    export let root: TableRootProp;
     export let paymentMethod: PaymentMethodData;
     export let isBackup: boolean = false;
 </script>
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index ffcd8474c..8f2cc80c4 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -1,9 +1,24 @@
 <script lang="ts">
     import { Card, Tooltip, Icon } from '@appwrite.io/pink-svelte';
-    import { type ComponentProps } from 'svelte';
-    import type Selector from '@appwrite.io/pink-svelte/dist/card/Selector.svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import type { BaseCardProps } from './card.svelte';
+    import type { ComponentType } from 'svelte';
 
-    type Props = ComponentProps<Selector>;
+    type Props = BaseCardProps &
+        HTMLAttributes<HTMLInputElement> & {
+            name: string;
+            value: string;
+            group: string;
+            title: string;
+            info?: string | undefined;
+            icon?: ComponentType;
+            imageHeight?: number;
+            imageWidth?: number;
+            imageRadius?: 'xxs' | 'xs' | 's' | 'm' | 'l';
+            disabled?: boolean;
+            src?: string;
+            alt?: string | undefined;
+        };
 
     export let group: string;
     export let value: string;
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 1cf4327d9..02ac75d28 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -7,6 +7,15 @@
         platformCount: number;
         pingCount: number;
     };
+
+    export type BaseNavbarProps = HTMLAttributes<HTMLHeadElement> & {
+        logo: {
+            src: string;
+            alt: string;
+        };
+        avatar: string;
+        sideBarIsOpen: boolean;
+    };
 </script>
 
 <script lang="ts">
@@ -24,7 +33,6 @@
         Typography
     } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
-    import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
     import {
         IconChevronRight,
         IconLogoutRight,
@@ -46,6 +54,7 @@
     import { isCloud } from '$lib/system.js';
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import type { HTMLAttributes } from 'svelte/elements';
 
     let showSupport = false;
 
diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 48946ea47..8c8d2041e 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -5,13 +5,12 @@
     import { getElementDir } from '$lib/helpers/style';
     import { waitUntil } from '$lib/helpers/waitUntil';
     import { Tabs } from '@appwrite.io/pink-svelte';
-    import type { Variant } from '@appwrite.io/pink-svelte/dist/tabs/types';
 
     export let selected = false;
     export let href: string = null;
     export let event: string = null;
     export let noscroll = false;
-    export let root: { variant: Variant; stretch: boolean } = {
+    export let root: { variant: 'primary' | 'secondary'; stretch: boolean } = {
         variant: 'primary',
         stretch: false
     };
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index 9a6a0b90a..9114e9f9c 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -3,7 +3,7 @@
     import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
     export let id: string;
-    export let label: string; // TODO: make label optional, here and in the library!
+    export let label: string = '';
     export let value: string;
     export let required = false;
     export let nullable = false;
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index cc00eb785..97cb72a01 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -52,3 +52,16 @@ export function isValueOfStringEnum<T extends Record<string, string>>(
 ): value is T[keyof T] {
     return Object.values<string>(enumType).includes(value);
 }
+
+export type TableRootProp = {
+    allowSelection: boolean;
+    selectedRows: string[];
+    selectedAll: boolean;
+    selectedNone: boolean;
+    selectedSome: boolean;
+    columns: Record<Column['id'], Column>;
+    toggle: (id: string) => void;
+    toggleAll: () => void;
+    addAvailableId: (id: string) => void;
+    removeAvailableId: (id: string) => void;
+};
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index 792bea865..f78f3bbe1 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -5,13 +5,13 @@
     import type { Models } from '@appwrite.io/console';
     import { Layout, Table, Card, Empty } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
-    import type { Column } from '@appwrite.io/pink-svelte/dist/table';
+    import type { PinkColumn } from '$lib/helpers/types';
 
     export let logs: Models.LogList;
     export let offset = 0;
     export let limit = 0;
 
-    const columns: Column[] = [
+    const columns: PinkColumn[] = [
         { id: 'user' },
         { id: 'event' },
         { id: 'location' },