@arch-cadre/ui 0.0.6

package/src/postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/src/providers/auth-provider.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { AuthSession } from "@arch-cadre/core";
+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>;
+  }
+  | undefined
+>(undefined);
+
+export default function AuthProvider({
+  children,
+  initialSession,
+  kryoPrefix = "/kryo",
+}: {
+  children: ReactNode;
+  initialSession?: AuthSession;
+  kryoPrefix?: string;
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refetchUser = async () => {
+    mutate("user");
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 800);
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader text="User checking" />;
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user: initialSession?.user,
+        session: initialSession?.session,
+        kryoPrefix,
+        isLoading,
+        refetchUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// export const useUser = () => {
+//   const context = useContext(AuthContext);
+//   if (!context) {
+//     throw new Error("useUser must be used within AuthProvider");
+//   }
+//   return context;
+// };

package/src/providers/index.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type { AuthSession } from "@arch-cadre/core";
+import { useEffect, useState } from "react";
+import { SWRConfig } from "swr";
+import { Toaster } from "../components/sonner";
+import { TooltipProvider } from "../components/tooltip";
+import { PageLoader } from "../shared/page-loader";
+import AuthProvider from "./auth-provider";
+
+export const AppProvider = ({
+  children,
+  initialSession,
+  kryoPrefix,
+}: {
+  children: React.ReactElement;
+  initialSession?: AuthSession;
+  kryoPrefix?: string;
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 800);
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader text="Initializing" />;
+  }
+
+  return (
+    <SWRConfig
+      value={{
+        fetcher: (url: string) =>
+          fetch(url).then((response) => response.json()),
+        revalidateIfStale: true,
+      }}
+    >
+      <AuthProvider initialSession={initialSession} kryoPrefix={kryoPrefix}>
+        <TooltipProvider>
+          {children}
+
+          <Toaster position="top-right" expand={true} />
+        </TooltipProvider>
+      </AuthProvider>
+    </SWRConfig>
+  );
+};

package/src/shared/access-denied.tsx

@@ -0,0 +1,30 @@
+import { Icon } from "@iconify/react";
+import { Button } from "../components/button";
+
+export function AccessDenied() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6 p-4">
+      <div className="bg-destructive/10 p-6 rounded-full">
+        <Icon
+          icon="solar:shield-warning-bold-duotone"
+          className="size-16 text-destructive"
+        />
+      </div>
+      <div className="space-y-2">
+        <h2 className="text-2xl font-bold tracking-tight">Access Denied</h2>
+        <p className="text-muted-foreground max-w-[400px]">
+          You do not have the required permissions to access this area. Please
+          contact your administrator if you believe this is an error.
+        </p>
+      </div>
+      <div className="flex gap-4">
+        <Button asChild variant="outline">
+          <a href="/">Go back home</a>
+        </Button>
+        <Button asChild>
+          <a href="/signin">Sign in with another account</a>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/shared/loader.tsx

@@ -0,0 +1,108 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const loaderVariants = cva("spinner", {
+  variants: {
+    variant: {
+      default: "stroke-primary",
+      dark: "stroke-white",
+      destructive: "stroke-destructive",
+      secondary: "stroke-secondary",
+      ghost: "stroke-accent",
+    },
+    size: {
+      default: "h-5 w-5",
+      md: "h-10 w-10",
+      lg: "h-60 w-60",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+export interface LoaderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof loaderVariants> {
+  asChild?: boolean;
+}
+
+function Loader({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof loaderVariants> &
+  LoaderProps) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp className="flex items-center justify-center" {...props}>
+      <style>
+        {`
+                .spinner {
+                  animation: animate-rotate 2s linear infinite;
+                  z-index: 2;
+                  max-width: 5rem;
+                  max-height: 5rem;
+
+                  .path {
+                    stroke-linecap: round;
+                    animation: animate-dash 1.75s ease-in-out infinite;
+                  }
+                }
+            `}
+      </style>
+      {/** biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className={cn(loaderVariants({ variant, size, className }))}
+      >
+        <g>
+          <circle
+            cx={12}
+            cy={12}
+            r={9.5}
+            fill="none"
+            strokeLinecap="round"
+            strokeWidth={3}
+          >
+            <animate
+              attributeName="stroke-dasharray"
+              calcMode="spline"
+              dur="1.5s"
+              keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+              keyTimes="0;0.475;0.95;1"
+              repeatCount="indefinite"
+              values="0 150;42 150;42 150;42 150"
+            />
+            <animate
+              attributeName="stroke-dashoffset"
+              calcMode="spline"
+              dur="1.5s"
+              keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+              keyTimes="0;0.475;0.95;1"
+              repeatCount="indefinite"
+              values="0;-16;-59;-59"
+            />
+          </circle>
+          <animateTransform
+            attributeName="transform"
+            dur="2s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;360 12 12"
+          />
+        </g>
+      </svg>
+    </Comp>
+  );
+}
+
+export { Loader, loaderVariants };

package/src/shared/page-loader.tsx

@@ -0,0 +1,23 @@
+import { Logo } from "../logo";
+import { Loader } from "./loader";
+
+interface PageLoaderProps {
+  withLogo?: boolean;
+  text?: string;
+}
+
+export function PageLoader({ withLogo = true, text }: PageLoaderProps) {
+  return (
+    <div className="bg-background absolute inset-0 flex flex-col items-center justify-center space-y-6">
+      {withLogo && (
+        <div className="mb-6">
+          <Logo />
+        </div>
+      )}
+
+      <Loader />
+
+      {text && <div className="text-xs lowercase">{text}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { cn } from "../lib/utils";
+
+export function ScrollFadeEffect({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical";
+}) {
+  return (
+    <div
+      data-orientation={orientation}
+      className={cn(
+        "data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto",
+        "data-[orientation=horizontal]:scroll-fade-effect-x data-[orientation=vertical]:scroll-fade-effect-y",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,300 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import "tw-animate-css";
+
+@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);
+}
+
+: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);
+}
+
+.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);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+
+    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;
+    }
+
+    [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;
+    }
+
+    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 show-left-mask {
+        to {
+            --left-mask-width: var(--mask-width);
+        }
+    }
+
+    @keyframes hide-right-mask {
+        to {
+            --right-mask-width: 0px;
+        }
+    }
+}
+
+@property --top-mask-height {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+}
+
+@property --bottom-mask-height {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 64px;
+}
+
+@property --left-mask-width {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+}
+
+@property --right-mask-width {
+    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;
+}
+
+@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;
+}
+
+@keyframes progress-fast {
+    0% {
+        transform: translateX(-100%);
+    }
+    50% {
+        transform: translateX(-20%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+.animate-progress-fast {
+    animation: progress-fast 1.5s infinite linear;
+}

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
+    "module": "CommonJS",
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "isolatedModules": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.*"]
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": false,
+    "baseUrl": ".",
+    "paths": {
+      "@arch-cadre/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}