negodesign 0.0.75 → 0.0.76

package/dist/components/ui/modal/share/ui/ModalShareSelection.svelte

@@ -1,103 +1,156 @@
-<script lang="ts">
-  import { cn } from "../../../../../utils";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import ModalCore from "../../core/ui/ModalCore.svelte";
-  import type { ModalShareSelectionProps, ModelSocialShare } from "../types";
-
-  let {
-    title,
-    subtitle,
-    networks = [],
-    linkLabel = "Or copy link",
-    linkValue = "",
-    copyText = "Copy",
-    copiedText = "Copied!",
-    isOpen = $bindable(false),
-    onShare,
-    onCopy,
-    onClose,
-    class: className,
-  }: ModalShareSelectionProps = $props();
-
-  let copied = $state(false);
-
-  function handleCopy() {
-    navigator.clipboard.writeText(linkValue).then(() => {
-      copied = true;
-      onCopy?.(linkValue);
-      setTimeout(() => (copied = false), 2000);
-    });
-  }
-</script>
-
-<ModalCore
-  bind:isOpen
-  {title}
-  {subtitle}
-  showProgress={false}
-  showBack={false}
-  {onClose}
-  class={cn("max-w-lg", className)}
->
-  {#snippet content()}
-    <!-- Social Networks -->
-    <div class="flex flex-wrap items-center justify-center gap-4">
-      {#each networks as network (network.name)}
-        <button
-          type="button"
-          class="group flex flex-col items-center gap-2"
-          onclick={() => onShare?.(network)}
-        >
-          <div
-            class={cn(
-              "flex size-14 items-center justify-center rounded-full border-2 border-border transition-all duration-200",
-              "hover:scale-110 hover:shadow-md"
-            )}
-            style={network.color ? `border-color: ${network.color}30` : ""}
-          >
-            {#if typeof network.icon === "string"}
-              <i
-                class="{network.icon} text-2xl transition-colors"
-                style={network.color ? `color: ${network.color}` : ""}
-              ></i>
-            {:else}
-              <HugeiconsIcon
-                icon={network.icon}
-                class="size-6 transition-colors"
-                style={network.color ? `color: ${network.color}` : ""}
-              />
-            {/if}
-          </div>
-          <span class="text-xs text-muted-foreground">{network.name}</span>
-        </button>
-      {/each}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <!-- Copy Link -->
-    <div>
-      <p class="mb-3 text-sm font-medium text-muted-foreground">{linkLabel}</p>
-      <div class="flex items-center gap-2">
-        <input
-          type="text"
-          readonly
-          value={linkValue}
-          class="flex-1 rounded-lg border border-border bg-muted px-4 py-2.5 text-sm text-foreground outline-none"
-        />
-        <button
-          type="button"
-          class={cn(
-            "shrink-0 rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors",
-            copied
-              ? "bg-green-500 text-white"
-              : "bg-primary text-primary-foreground hover:bg-primary/90"
-          )}
-          onclick={handleCopy}
-        >
-          {copied ? copiedText : copyText}
-        </button>
-      </div>
-    </div>
-  {/snippet}
-</ModalCore>
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalShareSelectionProps, ModelSocialShare } from "../types";
+
+  const defaultNetworks: ModelSocialShare[] = [
+    { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
+    {
+      name: "Instagram",
+      img: "/img/icons8-instagram-48.png",
+      color: "#E4405F",
+    },
+    { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
+    { name: "Twitter", img: "/img/icons8-twitterx-50.png", color: "#000000" },
+    { name: "LinkedIn", img: "/img/icons8-linkedin-48.png", color: "#0A66C2" },
+    {
+      name: "Pinterest",
+      img: "/img/icons8-pinterest-48.png",
+      color: "#E60023",
+    },
+    { name: "Tumblr", img: "/img/icons8-tumblr-48.png", color: "#36465D" },
+  ];
+
+  let {
+    title,
+    subtitle,
+    networks,
+    isWhatsapp = true,
+    isInstagram = true,
+    isFacebook = true,
+    isTwitter = true,
+    isLinkedin = true,
+    isPinterest = false,
+    isTumblr = false,
+    linkLabel = "Or copy link",
+    linkValue = "",
+    copyText = "Copy",
+    copiedText = "Copied!",
+    isOpen = $bindable(false),
+    onShare,
+    onCopy,
+    onClose,
+    class: className,
+  }: ModalShareSelectionProps = $props();
+
+  let copied = $state(false);
+
+  const networkFlags: Record<string, boolean> = $derived({
+    whatsapp: isWhatsapp,
+    instagram: isInstagram,
+    facebook: isFacebook,
+    twitter: isTwitter,
+    linkedin: isLinkedin,
+    pinterest: isPinterest,
+    tumblr: isTumblr,
+  });
+
+  const visibleNetworks = $derived(
+    (networks?.length ? networks : defaultNetworks).filter(
+      (network) => networkFlags[network.name.toLowerCase()] ?? true,
+    ),
+  );
+
+  function handleCopy() {
+    navigator.clipboard.writeText(linkValue).then(() => {
+      copied = true;
+      onCopy?.(linkValue);
+      setTimeout(() => (copied = false), 2000);
+    });
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-lg", className)}
+>
+  {#snippet content()}
+    <!-- Social Networks -->
+    {#if visibleNetworks.length > 0}
+      <div class="flex flex-wrap items-center justify-center gap-4">
+        {#each visibleNetworks as network (network.name)}
+          <button
+            type="button"
+            class="group flex flex-col items-center gap-2"
+            onclick={() => onShare?.(network)}
+          >
+            <div
+              class={cn(
+                "flex size-14 items-center justify-center rounded-full border-2 border-border bg-white transition-all duration-200",
+                "hover:scale-110 hover:shadow-md",
+              )}
+              style={network.color ? `border-color: ${network.color}30` : ""}
+            >
+              {#snippet icon()}
+                {#if network.img}
+                  <img
+                    src={network.img}
+                    alt={network.name}
+                    class="size-7 object-contain transition-transform duration-200 group-hover:scale-110"
+                    loading="lazy"
+                  />
+                {:else if typeof network.icon === "string"}
+                  <i
+                    class="{network.icon} text-2xl transition-colors"
+                    style={network.color ? `color: ${network.color}` : ""}
+                  ></i>
+                {:else if network.icon}
+                  <HugeiconsIcon
+                    icon={network.icon}
+                    class="size-6 transition-colors"
+                    style={network.color ? `color: ${network.color}` : ""}
+                  />
+                {/if}
+              {/snippet}
+              {@render icon()}
+            </div>
+            <span class="text-xs text-muted-foreground">{network.name}</span>
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    <!-- Copy Link -->
+    <div>
+      <p class="mb-3 text-sm font-medium text-muted-foreground">{linkLabel}</p>
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          readonly
+          value={linkValue}
+          class="flex-1 rounded-lg border border-border bg-muted px-4 py-2.5 text-sm text-foreground outline-none"
+        />
+        <button
+          type="button"
+          class={cn(
+            "shrink-0 rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors",
+            copied
+              ? "bg-green-500 text-white"
+              : "bg-primary text-primary-foreground hover:bg-primary/90",
+          )}
+          onclick={handleCopy}
+        >
+          {copied ? copiedText : copyText}
+        </button>
+      </div>
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/docs/DocsSidebar.svelte

@@ -11,7 +11,13 @@
     SidebarMenuButton,
     SidebarMenuItem,
   } from "../components/ui/sidebar";
-  import { DocumentCodeIcon } from "@hugeicons/core-free-icons";
+  import {
+    AppWindowIcon,
+    DocumentCodeIcon,
+    FormIcon,
+    Login01Icon,
+    UserAdd01Icon,
+  } from "@hugeicons/core-free-icons";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { page } from "$app/state";
   import { categories, components } from "./components";
@@ -21,6 +27,15 @@
   }
 
   const path = $derived(page.url.pathname);
+
+  const authDemos = [
+    { href: "/login/admin/01", label: "Login — Variant 01", icon: Login01Icon },
+    { href: "/login/admin/01", label: "Login — Variant 02", icon: Login01Icon },
+    { href: "/login/admin/01", label: "Login — Variant 03", icon: Login01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 01", icon: UserAdd01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 02", icon: UserAdd01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 03", icon: UserAdd01Icon },
+  ];
 </script>
 
 <Sidebar collapsible="icon">
@@ -66,6 +81,48 @@
       </SidebarGroupContent>
     </SidebarGroup>
 
+    <SidebarGroup>
+      <SidebarGroupLabel class="uppercase tracking-wider text-muted-foreground/70">
+        Live Demos
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/modal"}>
+              {#snippet child({ props })}
+                <a href="/modal" {...props} class="flex items-center gap-2">
+                  <HugeiconsIcon icon={AppWindowIcon} class="size-4" />
+                  <span>Modals</span>
+                </a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/form"}>
+              {#snippet child({ props })}
+                <a href="/form" {...props} class="flex items-center gap-2">
+                  <HugeiconsIcon icon={FormIcon} class="size-4" />
+                  <span>Form</span>
+                </a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          {#each authDemos as demo}
+            <SidebarMenuItem>
+              <SidebarMenuButton isActive={path === demo.href}>
+                {#snippet child({ props })}
+                  <a href={demo.href} {...props} class="flex items-center gap-2">
+                    <HugeiconsIcon icon={demo.icon} class="size-4" />
+                    <span>{demo.label}</span>
+                  </a>
+                {/snippet}
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          {/each}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+
     {#each categories as category (category)}
       {@const list = componentList(category)}
       {#if list.length > 0}

package/dist/docs/components.js

@@ -743,7 +743,7 @@ let selected = $state(null);
         slug: "modal-share-selection",
         name: "ModalShareSelection",
         category: "Modals",
-        description: "Social share modal with network icons, copy-to-clipboard link input, and close button. Third variation of the modal system.",
+        description: "Social share modal with branded network images, copy-to-clipboard link input, and close button. Third variation of the modal system.",
         path: "src/lib/components/ui/modal/share/ui/ModalShareSelection.svelte",
         importPath: "ModalShareSelection",
         examples: [
@@ -758,12 +758,34 @@ let isOpen = $state(false);
   bind:isOpen
   title="Share this design"
   linkValue="https://example.com/design/123"
-  networks={[
-    { name: "Pinterest", icon: "nd-pinterest-icon", color: "#E60023" },
-    { name: "Twitter", icon: "nd-twitter-icon", color: "#1DA1F2" },
-    { name: "Instagram", icon: "nd-instagram-icon", color: "#E4405F" },
-    { name: "Facebook", icon: "nd-facebook-icon", color: "#1877F2" },
-  ]}
+  isWhatsapp
+  isInstagram
+  isFacebook
+  isTwitter
+  isLinkedin
+  isPinterest
+  isTumblr
+  onShare={(network) => console.log(network)}
+  onCopy={(link) => console.log(link)}
+/>`,
+            },
+            {
+                title: "Modal Share Selection — custom networks",
+                code: `import { ModalShareSelection } from "negodesign"
+import type { ModelSocialShare } from "negodesign"
+
+let isOpen = $state(false);
+
+const networks: ModelSocialShare[] = [
+  { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
+  { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
+];
+
+<ModalShareSelection
+  bind:isOpen
+  title="Share this design"
+  linkValue="https://example.com/design/123"
+  {networks}
   onShare={(network) => console.log(network)}
   onCopy={(link) => console.log(link)}
 />`,
@@ -772,7 +794,14 @@ let isOpen = $state(false);
         props: [
             { name: "title", type: "string", description: "Required. Modal title", required: true },
             { name: "subtitle", type: "string", description: "Subtitle below the title" },
-            { name: "networks", type: "ModelSocialShare[]", description: "Required. Social networks: { name, icon, color?, url? }", required: true },
+            { name: "networks", type: "ModelSocialShare[]", description: "Custom networks: { name, icon?, img?, color?, url? }. When omitted, the built-in networks are used." },
+            { name: "isWhatsapp", type: "boolean", description: "Shows the WhatsApp network (built-in, uses /img/icons8-whatsapp-48.png)", default: "true" },
+            { name: "isInstagram", type: "boolean", description: "Shows the Instagram network", default: "true" },
+            { name: "isFacebook", type: "boolean", description: "Shows the Facebook network", default: "true" },
+            { name: "isTwitter", type: "boolean", description: "Shows the Twitter/X network", default: "true" },
+            { name: "isLinkedin", type: "boolean", description: "Shows the LinkedIn network", default: "true" },
+            { name: "isPinterest", type: "boolean", description: "Shows the Pinterest network", default: "true" },
+            { name: "isTumblr", type: "boolean", description: "Shows the Tumblr network", default: "true" },
             { name: "linkLabel", type: "string", description: "Text above the link input", default: "Or copy link" },
             { name: "linkValue", type: "string", description: "URL to share/copy" },
             { name: "copyText", type: "string", description: "Copy button text", default: "Copy" },
@@ -1258,6 +1287,63 @@ let isOpen = $state(false);
             { name: "termsOfService", type: "LinkProps", description: "Terms of service link" },
         ],
     },
+    {
+        slug: "page-register",
+        name: "PageRegister",
+        category: "Login / Security",
+        description: "Register page in a split layout: hero carousel and authentication card with configurable fields (name, email, password, phone, birthday, gender).",
+        path: "src/lib/components/pages/security/register/PageRegister.svelte",
+        importPath: "PageRegister",
+        examples: [
+            {
+                title: "Register Page — All Fields",
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  title="Negodesign"
+  fields={{
+    isName: true,
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+    isBirthday: true,
+    isGender: true,
+    isPhone: true,
+  }}
+  onSubmit={(data) => console.log(data)}
+/>`,
+                href: "/register/admin/01",
+            },
+            {
+                title: "Register Page — Minimal (email + password)",
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  variant={2}
+  title="Negodesign"
+  fields={{
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+  }}
+  onSubmit={(data) => console.log(data)}
+/>`,
+            },
+        ],
+        props: [
+            { name: "variant", type: "1 | 2 | 3", description: "Layout variant (1: grid pattern, 2: hero image, 3: glass morphism)", default: "1" },
+            { name: "title", type: "string", description: "Title shown in the hero/header" },
+            { name: "fields", type: "RegisterFormFields", description: "Fields to show: { isName?, isEmail?, isPassword?, isConfirmPassword?, isBirthday?, isGender?, isPhone? }" },
+            { name: "carousel", type: "RegisterCarouselItem[]", description: "Hero slides: { title, description, buttonText, buttonUrl? }" },
+            { name: "type", type: "'NUMBER' | 'DOT' | 'POINTER'", description: "Carousel indicator style" },
+            { name: "children", type: "Snippet", description: "Custom content replacing the register card" },
+            { name: "onSubmit", type: "(RegisterRequestDto) => void", description: "Called on submit: { name?, email, password?, confirmPassword?, birthday?, gender?, phone? }" },
+            { name: "login", type: "LinkProps", description: "Link to login page" },
+            { name: "privacyPolicy", type: "LinkProps", description: "Privacy policy link" },
+            { name: "termsOfService", type: "LinkProps", description: "Terms of service link" },
+            { name: "socialLogins", type: "SocialLoginItem[]", description: "Social login providers: { provider, icon?, label?, onclick? }" },
+        ],
+    },
     {
         slug: "company-profile",
         name: "CompanyProfile",

package/dist/globals.css

@@ -1784,12 +1784,6 @@
       border-color: color-mix(in oklab, var(--primary) 30%, transparent);
     }
   }
-  .border-primary\/50 {
-    border-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
-    }
-  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
@@ -1799,18 +1793,6 @@
   .border-white {
     border-color: var(--color-white);
   }
-  .border-white\/10 {
-    border-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-  .border-white\/20 {
-    border-color: color-mix(in srgb, #fff 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-    }
-  }
   .border-white\/30 {
     border-color: color-mix(in srgb, #fff 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2072,6 +2054,12 @@
       background-color: color-mix(in oklab, var(--primary) 20%, transparent);
     }
   }
+  .bg-primary\/40 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 40%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -2144,6 +2132,12 @@
       background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
     }
   }
+  .bg-white\/80 {
+    background-color: color-mix(in srgb, #fff 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -2190,10 +2184,6 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-primary {
-    --tw-gradient-from: var(--primary);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-primary\/10 {
     --tw-gradient-from: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2234,13 +2224,6 @@
     --tw-gradient-to: var(--muted);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-primary\/70 {
-    --tw-gradient-to: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--primary) 70%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-purple-600 {
     --tw-gradient-to: var(--color-purple-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2786,24 +2769,6 @@
   .text-white\! {
     color: var(--color-white) !important;
   }
-  .text-white\/50 {
-    color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 50%, transparent);
-    }
-  }
-  .text-white\/60 {
-    color: color-mix(in srgb, #fff 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 60%, transparent);
-    }
-  }
-  .text-white\/70 {
-    color: color-mix(in srgb, #fff 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 70%, transparent);
-    }
-  }
   .text-white\/80 {
     color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3141,6 +3106,12 @@
       --tw-scale-z: 105%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
+    .group-hover\:scale-110:is(:where(.group):hover *) {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
     .group-hover\:bg-black\/30:is(:where(.group):hover *) {
       background-color: color-mix(in srgb, #000 30%, transparent);
     }
@@ -3359,36 +3330,6 @@
     content: var(--tw-content);
     border-radius: calc(var(--radius) * 2.2);
   }
-  .before\:bg-linear-to-br::before {
-    content: var(--tw-content);
-    --tw-gradient-position: to bottom right;
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      --tw-gradient-position: to bottom right in oklab;
-    }
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .before\:from-primary\/40::before {
-    content: var(--tw-content);
-    --tw-gradient-from: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--primary) 40%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .before\:via-primary\/10::before {
-    content: var(--tw-content);
-    --tw-gradient-via: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .before\:to-transparent::before {
-    content: var(--tw-content);
-    --tw-gradient-to: transparent;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .after\:pointer-events-none::after {
     content: var(--tw-content);
     pointer-events: none;
@@ -3491,14 +3432,6 @@
         border-color: color-mix(in oklab, var(--primary) 50%, transparent);
       }
     }
-    .hover\:border-white\/20:hover {
-      border-color: color-mix(in srgb, #fff 20%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-white\/20:hover {
-        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
-    }
     .hover\:bg-accent:hover {
       background-color: var(--accent);
     }
@@ -3631,14 +3564,6 @@
     .hover\:bg-sidebar-accent:hover {
       background-color: var(--sidebar-accent);
     }
-    .hover\:bg-white\/8:hover {
-      background-color: color-mix(in srgb, #fff 8%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/8:hover {
-        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
-      }
-    }
     .hover\:bg-white\/15:hover {
       background-color: color-mix(in srgb, #fff 15%, transparent);
     }
@@ -3720,14 +3645,6 @@
     .hover\:text-white:hover {
       color: var(--color-white);
     }
-    .hover\:text-white\/80:hover {
-      color: color-mix(in srgb, #fff 80%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:text-white\/80:hover {
-        color: color-mix(in oklab, var(--color-white) 80%, transparent);
-      }
-    }
     .hover\:underline:hover {
       text-decoration-line: underline;
     }