@arch-cadre/ui 0.0.10 → 0.0.15

package/src/providers/auth-provider.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import type { AuthSession } from "@arch-cadre/core";
+import * as React from "react";
 import { createContext, type ReactNode, useEffect, useState } from "react";
 import { mutate } from "swr";
 import { PageLoader } from "../shared/page-loader";
 
 export const AuthContext = createContext<
   | {
-    user: AuthSession["user"] | null | undefined;
-    session: AuthSession["session"] | null | undefined;
-    kryoPrefix: string;
-    isLoading: boolean;
-    refetchUser: () => Promise<void>;
-  }
+      user: AuthSession["user"] | null | undefined;
+      session: AuthSession["session"] | null | undefined;
+      kryoPrefix: string;
+      isLoading: boolean;
+      refetchUser: () => Promise<void>;
+    }
   | undefined
 >(undefined);
 

package/src/providers/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { AuthSession } from "@arch-cadre/core";
+import * as React from "react";
 import { useEffect, useState } from "react";
 import { SWRConfig } from "swr";
 import { Toaster } from "../components/sonner";

package/src/shared/access-denied.tsx

@@ -1,4 +1,5 @@
 import { Icon } from "@iconify/react";
+import * as React from "react";
 import { Button } from "../components/button";
 
 export function AccessDenied() {

package/src/shared/loader.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@radix-ui/react-slot";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../lib/utils";
 
 const loaderVariants = cva("spinner", {
@@ -58,7 +59,7 @@ function Loader({
                 }
             `}
       </style>
-      {/** biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
+      {/** biome-ignore lint/a11y/noSvgWithoutTitle: <all> */}
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"

package/src/shared/page-loader.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { Logo } from "../logo";
 import { Loader } from "./loader";
 

package/src/shared/scroll-fade-effect.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { cn } from "../lib/utils";
 

package/src/styles/globals.css

@@ -8,293 +8,307 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --container: 1024px;
-
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-
-    --font-sans: var(--font-syne-sans);
-    --font-mono: var(--font-syne-mono);
-
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
+  --container: 1024px;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --font-sans: var(--font-syne-sans);
+  --font-mono: var(--font-syne-mono);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
 :root {
-    --radius: 0.5rem;
-    --background: oklch(0.985 0 0);
-    --foreground: oklch(0.24 0.06 245.57);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.24 0.06 245.57);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.24 0.06 245.57);
-    --primary: oklch(0.24 0.06 245.57);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.24 0.06 245.57);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.24 0.06 245.57);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(1 0 0);
-    --sidebar-foreground: oklch(0.24 0.06 245.57);
-    --sidebar-primary: oklch(0.24 0.06 245.57);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.24 0.06 245.57);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+  --radius: 0.5rem;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.24 0.06 245.57);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.24 0.06 245.57);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.24 0.06 245.57);
+  --primary: oklch(0.24 0.06 245.57);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.24 0.06 245.57);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.24 0.06 245.57);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.24 0.06 245.57);
+  --sidebar-primary: oklch(0.24 0.06 245.57);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.24 0.06 245.57);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
-@layer base {
-    * {
-        @apply border-border outline-ring/50;
-    }
-    body {
-        @apply bg-background text-foreground;
-    }
+@layer utilities {
+  /* Squircle style with fallback */
+  .squircle {
+    border-radius: 1rem;
+  }
 
-    body:before {
-        content: "";
-        z-index: 1;
-        pointer-events: none;
-        opacity: 0.1;
-        filter: url(#grain);
-        background: #000;
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
+  @supports (corner-shape: squircle) {
+    .squircle {
+      border-radius: 2rem;
+      corner-shape: squircle;
     }
+  }
+}
 
-    [data-slot="sidebar-wrapper"]:before {
-        content: "";
-        z-index: 51;
-        pointer-events: none;
-        opacity: 0.1;
-        filter: url(#grain);
-        background: #000;
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-    }
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 
-    svg.grain-noise {
-        z-index: -1;
-        width: 0;
-        height: 0;
-        position: absolute;
-    }
+  body:before {
+    content: "";
+    z-index: 1;
+    pointer-events: none;
+    opacity: 0.1;
+    filter: url(#grain);
+    background: #000;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
 
-    .container {
-        max-width: var(--container);
-        margin: 0 auto;
-        @apply px-4 sm:px-6 lg:px-8;
-    }
+  [data-slot="sidebar-wrapper"]:before {
+    content: "";
+    z-index: 51;
+    pointer-events: none;
+    opacity: 0.1;
+    filter: url(#grain);
+    background: #000;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
 
-    @keyframes show-top-mask {
-        to {
-            --top-mask-height: var(--mask-height);
-        }
+  svg.grain-noise {
+    z-index: -1;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  .container {
+    max-width: var(--container);
+    margin: 0 auto;
+    @apply px-4 sm:px-6 lg:px-8;
+  }
+
+  @keyframes show-top-mask {
+    to {
+      --top-mask-height: var(--mask-height);
     }
+  }
 
-    @keyframes hide-bottom-mask {
-        to {
-            --bottom-mask-height: 0px;
-        }
+  @keyframes hide-bottom-mask {
+    to {
+      --bottom-mask-height: 0px;
     }
+  }
 
-    @keyframes show-left-mask {
-        to {
-            --left-mask-width: var(--mask-width);
-        }
+  @keyframes show-left-mask {
+    to {
+      --left-mask-width: var(--mask-width);
     }
+  }
 
-    @keyframes hide-right-mask {
-        to {
-            --right-mask-width: 0px;
-        }
+  @keyframes hide-right-mask {
+    to {
+      --right-mask-width: 0px;
     }
+  }
 }
 
 @property --top-mask-height {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 0px;
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
 }
 
 @property --bottom-mask-height {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 64px;
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 64px;
 }
 
 @property --left-mask-width {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 0px;
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
 }
 
 @property --right-mask-width {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 64px;
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 64px;
 }
 
 @utility scroll-fade-effect-y {
-    --mask-height: 64px;
-    --mask-offset-top: 0px;
-    --mask-offset-bottom: 0px;
-    --scroll-buffer: 2rem;
-
-    /* Set up the mask layers */
-    mask-image:
-        linear-gradient(to top, transparent, black 90%),
-        linear-gradient(to bottom, transparent 0%, black 100%),
-        linear-gradient(black, black);
-
-    mask-size:
-        100% var(--top-mask-height),
-        100% var(--bottom-mask-height),
-        100% 100%;
-    mask-repeat: no-repeat, no-repeat, no-repeat;
-    mask-position:
-        0 var(--mask-offset-top),
-        0 calc(100% - var(--mask-offset-bottom)),
-        0 0;
-    /* Exclude the gradient areas from the solid mask */
-    mask-composite: exclude;
-
-    animation-name: show-top-mask, hide-bottom-mask;
-    animation-timeline: scroll(self), scroll(self);
-    animation-range:
-        0 var(--scroll-buffer),
-        calc(100% - var(--scroll-buffer)) 100%;
-    animation-fill-mode: both;
+  --mask-height: 64px;
+  --mask-offset-top: 0px;
+  --mask-offset-bottom: 0px;
+  --scroll-buffer: 2rem;
+
+  /* Set up the mask layers */
+  mask-image:
+    linear-gradient(to top, transparent, black 90%),
+    linear-gradient(to bottom, transparent 0%, black 100%),
+    linear-gradient(black, black);
+
+  mask-size:
+    100% var(--top-mask-height),
+    100% var(--bottom-mask-height),
+    100% 100%;
+  mask-repeat: no-repeat, no-repeat, no-repeat;
+  mask-position:
+    0 var(--mask-offset-top),
+    0 calc(100% - var(--mask-offset-bottom)),
+    0 0;
+  /* Exclude the gradient areas from the solid mask */
+  mask-composite: exclude;
+
+  animation-name: show-top-mask, hide-bottom-mask;
+  animation-timeline: scroll(self), scroll(self);
+  animation-range:
+    0 var(--scroll-buffer),
+    calc(100% - var(--scroll-buffer)) 100%;
+  animation-fill-mode: both;
 }
 
 @utility scroll-fade-effect-x {
-    --mask-width: 64px;
-    --mask-offset-left: 0px;
-    --mask-offset-right: 0px;
-    --scroll-buffer: 2rem;
-
-    mask-image:
-        linear-gradient(to left, transparent, black 90%),
-        linear-gradient(to right, transparent 0%, black 100%),
-        linear-gradient(black, black);
-
-    mask-size:
-        var(--left-mask-width) 100%,
-        var(--right-mask-width) 100%,
-        100% 100%;
-    mask-repeat: no-repeat, no-repeat, no-repeat;
-    mask-position:
-        var(--mask-offset-left) 0,
-        calc(100% - var(--mask-offset-right)) 0,
-        0 0;
-    mask-composite: exclude;
-
-    animation-name: show-left-mask, hide-right-mask;
-    animation-timeline: scroll(self inline), scroll(self inline);
-    animation-range:
-        0 var(--scroll-buffer),
-        calc(100% - var(--scroll-buffer)) 100%;
-    animation-fill-mode: both;
+  --mask-width: 64px;
+  --mask-offset-left: 0px;
+  --mask-offset-right: 0px;
+  --scroll-buffer: 2rem;
+
+  mask-image:
+    linear-gradient(to left, transparent, black 90%),
+    linear-gradient(to right, transparent 0%, black 100%),
+    linear-gradient(black, black);
+
+  mask-size:
+    var(--left-mask-width) 100%,
+    var(--right-mask-width) 100%,
+    100% 100%;
+  mask-repeat: no-repeat, no-repeat, no-repeat;
+  mask-position:
+    var(--mask-offset-left) 0,
+    calc(100% - var(--mask-offset-right)) 0,
+    0 0;
+  mask-composite: exclude;
+
+  animation-name: show-left-mask, hide-right-mask;
+  animation-timeline: scroll(self inline), scroll(self inline);
+  animation-range:
+    0 var(--scroll-buffer),
+    calc(100% - var(--scroll-buffer)) 100%;
+  animation-fill-mode: both;
 }
 
 @keyframes progress-fast {
-    0% {
-        transform: translateX(-100%);
-    }
-    50% {
-        transform: translateX(-20%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(-20%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .animate-progress-fast {
-    animation: progress-fast 1.5s infinite linear;
+  animation: progress-fast 1.5s infinite linear;
 }

package/biome.json

@@ -1,38 +0,0 @@
-{
-  "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
-  "vcs": {
-    "enabled": true,
-    "clientKind": "git",
-    "useIgnoreFile": true
-  },
-  "files": {
-    "ignoreUnknown": true,
-    "includes": ["**", "!node_modules", "!.next", "!dist", "!build"]
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "suspicious": {
-        "noUnknownAtRules": "off"
-      }
-    },
-    "domains": {
-      "next": "recommended",
-      "react": "recommended"
-    }
-  },
-  "assist": {
-    "actions": {
-      "source": {
-        "organizeImports": "on"
-      }
-    }
-  }
-}