@arch-cadre/ui 0.0.44 → 0.0.47

package/src/postcss.config.mjs

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

package/src/providers/auth-provider.tsx

@@ -1,66 +0,0 @@
-"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>;
-  }
-  | 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

@@ -1,50 +0,0 @@
-"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";
-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) => responseon()),
-        revalidateIfStale: true,
-      }}
-    >
-      <AuthProvider initialSession={initialSession} kryoPrefix={kryoPrefix}>
-        <TooltipProvider>
-          {children}
-
-          <Toaster position="top-right" expand={true} />
-        </TooltipProvider>
-      </AuthProvider>
-    </SWRConfig>
-  );
-};

package/src/shared/access-denied.tsx

@@ -1,31 +0,0 @@
-import { Icon } from "@iconify/react";
-import * as React from "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

@@ -1,109 +0,0 @@
-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", {
-  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: <all> */}
-      <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

@@ -1,24 +0,0 @@
-import * as React from "react";
-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

@@ -1,23 +0,0 @@
-import * as 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

@@ -1,314 +0,0 @@
-@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 utilities {
-  /* Squircle style with fallback */
-  .squircle {
-    border-radius: 1rem;
-  }
-
-  @supports (corner-shape: squircle) {
-    .squircle {
-      border-radius: 2rem;
-      corner-shape: squircle;
-    }
-  }
-}
-
-@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.json

@@ -1,24 +0,0 @@
-{
-  "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"]
-}