@majapisoftwares/ui 4.3.16 → 5.0.0

package/src/templates/signup-form.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useId, useState, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldDescription,
+} from "../components/ui/field";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+
+export interface SignupValues {
+  name: string;
+  email: string;
+  password: string;
+}
+export interface SignupFormProps {
+  onSubmit: (values: SignupValues) => void;
+  pending?: boolean;
+  error?: string;
+  title?: string;
+  description?: string;
+  submitLabel?: string;
+  minPasswordLength?: number;
+  footer?: ReactNode;
+  terms?: ReactNode;
+}
+export function SignupForm({
+  onSubmit,
+  pending = false,
+  error,
+  title = "Criar sua conta",
+  description = "Comece a organizar seu trabalho em um só lugar.",
+  submitLabel = "Criar conta",
+  minPasswordLength = 12,
+  footer,
+  terms,
+}: SignupFormProps) {
+  const id = useId(),
+    [mismatch, setMismatch] = useState(false);
+  return (
+    <form
+      className="wb-auth-form"
+      aria-busy={pending}
+      onSubmit={(event) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        const password = String(data.get("password") ?? "");
+        if (password !== String(data.get("confirmPassword") ?? "")) {
+          setMismatch(true);
+          return;
+        }
+        setMismatch(false);
+        onSubmit({
+          name: String(data.get("name") ?? ""),
+          email: String(data.get("email") ?? ""),
+          password,
+        });
+      }}
+    >
+      <header>
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </header>
+      {error ? (
+        <Alert variant="destructive">
+          <AlertTitle>Não foi possível criar a conta</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor={`${id}-name`}>Nome completo</FieldLabel>
+          <Input
+            id={`${id}-name`}
+            name="name"
+            autoComplete="name"
+            required
+            disabled={pending}
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor={`${id}-email`}>E-mail</FieldLabel>
+          <Input
+            id={`${id}-email`}
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            disabled={pending}
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor={`${id}-password`}>Senha</FieldLabel>
+          <Input
+            id={`${id}-password`}
+            name="password"
+            type="password"
+            autoComplete="new-password"
+            required
+            minLength={minPasswordLength}
+            disabled={pending}
+          />
+          <FieldDescription>
+            Use pelo menos {minPasswordLength} caracteres.
+          </FieldDescription>
+        </Field>
+        <Field data-invalid={mismatch || undefined}>
+          <FieldLabel htmlFor={`${id}-confirm`}>Confirmar senha</FieldLabel>
+          <Input
+            id={`${id}-confirm`}
+            name="confirmPassword"
+            type="password"
+            autoComplete="new-password"
+            required
+            aria-invalid={mismatch || undefined}
+            aria-describedby={mismatch ? `${id}-mismatch` : undefined}
+            disabled={pending}
+            onChange={() => setMismatch(false)}
+          />
+          {mismatch ? (
+            <FieldDescription id={`${id}-mismatch`} role="alert">
+              As senhas precisam ser iguais.
+            </FieldDescription>
+          ) : null}
+        </Field>
+        {terms ? <FieldDescription>{terms}</FieldDescription> : null}
+        <Button type="submit" disabled={pending}>
+          {pending ? "Criando conta…" : submitLabel}
+        </Button>
+      </FieldGroup>
+      {footer ? <footer>{footer}</footer> : null}
+    </form>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/base.css

@@ -1,360 +0,0 @@
-@import 'tailwindcss';
-@import './styles/MultiText.css' layer(base);
-@import './styles/Input.css' layer(base);
-@import './styles/Tabs.css' layer(base);
-@import './styles/Pagination.css' layer(base);
-@source "..";
-
-@custom-variant dark (&:where(.dark, .dark *));
-@custom-variant not-dark (html:not(.dark) &);
-@custom-variant scrolled (html.scrolled &);
-@custom-variant not-scrolled (html:not(.scrolled) &);
-@custom-variant touch (html.touch &);
-@plugin "@tailwindcss/typography";
-@plugin "@tailwindcss/forms";
-
-body.ui-theme-default {
-    @apply flex h-full flex-col
-    bg-zinc-50 text-zinc-950
-    dark:bg-zinc-950 dark:text-zinc-50
-}
-
-button {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-.prose input[type=checkbox], .prose input[type=radio], .ui-checkbox[type=checkbox], .ui-checkbox[type=radio] {
-    @apply h-4 w-4 transition-colors
-
-    border-zinc-300 text-primary-500 ring-offset-zinc-100
-    dark:border-zinc-600 dark:bg-zinc-900 dark:ring-offset-zinc-900
-
-    hover:bg-zinc-100 hover:checked:bg-primary-400
-    dark:hover:bg-zinc-800
-
-    checked:border-primary-500
-    dark:checked:bg-primary-500 dark:checked:border-primary-500
-
-    focus:outline-hidden focus:ring-primary-500 focus:ring-2
-}
-
-.prose input[type=checkbox], .ui-checkbox[type=checkbox] {
-    @apply rounded-sm;
-}
-
-.prose input[type=radio], .ui-checkbox[type=radio] {
-    @apply rounded-full;
-}
-
-#__next {
-    height: 100%;
-}
-
-input[type="datetime-local"]::-webkit-date-and-time-value,
-input[type="date"]::-webkit-date-and-time-value,
-input[type="time"]::-webkit-date-and-time-value {
-    text-align: left;
-}
-
-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator {
-    color: transparent;
-    background: none;
-    z-index: 1;
-}
-
-input[type="checkbox"]:indeterminate {
-    @apply dark:bg-primary-500 dark:border-primary-500
-}
-
-@page {
-    margin: 0;
-}
-
-.tsqd-parent-container {
-    pointer-events: auto;
-}
-
-@media print {
-    .tsqd-parent-container {
-        display: none;
-    }
-}
-
-/**/
-
-@theme {
-    --color-primary-50: oklch(0.977 0.013 236.62);
-    --color-primary-100: oklch(0.951 0.026 236.824);
-    --color-primary-200: oklch(0.901 0.058 230.902);
-    --color-primary-300: oklch(0.828 0.111 230.318);
-    --color-primary-400: oklch(0.746 0.16 232.661);
-    --color-primary-500: oklch(0.685 0.169 237.323);
-    --color-primary-600: oklch(0.588 0.158 241.966);
-    --color-primary-700: oklch(0.5 0.134 242.749);
-    --color-primary-800: oklch(0.443 0.11 240.79);
-    --color-primary-900: oklch(0.391 0.09 240.876);
-    --color-primary-950: oklch(0.293 0.066 243.157);
-
-    --color-on-primary: #fff;
-
-    --color-success-50: oklch(0.982 0.018 155.826);
-    --color-success-100: oklch(0.962 0.044 156.743);
-    --color-success-200: oklch(0.925 0.084 155.995);
-    --color-success-300: oklch(0.871 0.15 154.449);
-    --color-success-400: oklch(0.792 0.209 151.711);
-    --color-success-500: oklch(0.723 0.219 149.579);
-    --color-success-600: oklch(0.627 0.194 149.214);
-    --color-success-700: oklch(0.527 0.154 150.069);
-    --color-success-800: oklch(0.448 0.119 151.328);
-    --color-success-900: oklch(0.393 0.095 152.535);
-    --color-success-950: oklch(0.266 0.065 152.934);
-
-    --color-error-50: oklch(0.971 0.013 17.38);
-    --color-error-100: oklch(0.936 0.032 17.717);
-    --color-error-200: oklch(0.885 0.062 18.334);
-    --color-error-300: oklch(0.808 0.114 19.571);
-    --color-error-400: oklch(0.704 0.191 22.216);
-    --color-error-500: oklch(0.637 0.237 25.331);
-    --color-error-600: oklch(0.577 0.245 27.325);
-    --color-error-700: oklch(0.505 0.213 27.518);
-    --color-error-800: oklch(0.444 0.177 26.899);
-    --color-error-900: oklch(0.396 0.141 25.723);
-    --color-error-950: oklch(0.258 0.092 26.042);
-
-    --color-warn-50: oklch(0.987 0.026 102.212);
-    --color-warn-100: oklch(0.973 0.071 103.193);
-    --color-warn-200: oklch(0.945 0.129 101.54);
-    --color-warn-300: oklch(0.905 0.182 98.111);
-    --color-warn-400: oklch(0.852 0.199 91.936);
-    --color-warn-500: oklch(0.795 0.184 86.047);
-    --color-warn-600: oklch(0.681 0.162 75.834);
-    --color-warn-700: oklch(0.554 0.135 66.442);
-    --color-warn-800: oklch(0.476 0.114 61.907);
-    --color-warn-900: oklch(0.421 0.095 57.708);
-    --color-warn-950: oklch(0.286 0.066 53.813);
-
-    --color-current: currentColor;
-
-    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-    --font-weight-inherit: inherit;
-
-    --animate-slide-down-and-fade: slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-slide-left-and-fade: slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-slide-up-and-fade: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-slide-right-and-fade: slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-elastic-slide-down-and-fade: elasticSlideDownAndFade 350ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-elastic-slide-left-and-fade: elasticSlideLeftAndFade 350ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-elastic-slide-up-and-fade: elasticSlideUpAndFade 350ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-elastic-slide-right-and-fade: elasticSlideRightAndFade 350ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-fade-out: fadeOut 150ms ease-in;
-    --animate-fade-in: fadeIn 150ms ease-in;
-    --animate-skeleton-shiny: skeletonShiny 4s infinite linear;
-    --animate-slide-down: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
-    --animate-slide-up: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
-
-    @keyframes slideDownAndFade {
-        from {
-            opacity: 0;
-            transform: translateY(-2px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-    @keyframes slideLeftAndFade {
-        0% {
-            opacity: 0;
-            transform: translateX(2px);
-        }
-        100% {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-    @keyframes slideUpAndFade {
-        from {
-            opacity: 0;
-            transform: translateY(2px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-    @keyframes slideRightAndFade {
-        from {
-            opacity: 0;
-            transform: translateX(-2px);
-        }
-        to {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-    @keyframes elasticSlideDownAndFade {
-        0% {
-            opacity: 0;
-            transform: translateY(-4px) scale(0.8);
-        }
-        50% {
-            opacity: 1;
-            transform: translateY(1px) scale(1);
-        }
-        100% {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-        }
-    }
-    @keyframes elasticSlideLeftAndFade {
-        0% {
-            opacity: 0;
-            transform: translateX(-4px) scale(0.8);
-        }
-        50% {
-            opacity: 1;
-            transform: translateX(-1px) scale(1);
-        }
-        100% {
-            opacity: 1;
-            transform: translateX(0) scale(1);
-        }
-    }
-    @keyframes elasticSlideUpAndFade {
-        0% {
-            opacity: 0;
-            transform: translateY(4px) scale(0.8);
-        }
-        50% {
-            opacity: 1;
-            transform: translateY(-1px) scale(1);
-        }
-        100% {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-        }
-    }
-    @keyframes elasticSlideRightAndFade {
-        0% {
-            opacity: 0;
-            transform: translateX(4px) scale(0.8);
-        }
-        50% {
-            opacity: 1;
-            transform: translateX(1px) scale(1);
-        }
-        100% {
-            opacity: 1;
-            transform: translateX(0) scale(1);
-        }
-    }
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-        }
-        to {
-            opacity: 0;
-        }
-    }
-    @keyframes pulsehide {
-        0%,
-        100% {
-            opacity: 0;
-        }
-        50% {
-            opacity: 1;
-        }
-    }
-    @keyframes skeletonShiny {
-        0% {
-            background-position: 200%;
-        }
-        100% {
-            background-position: -200%;
-        }
-    }
-    @keyframes slideDown {
-        from {
-            height: 0;
-        }
-        to {
-            /*noinspection CssUnresolvedCustomProperty*/
-            height: var(--radix-accordion-content-height);
-        }
-    }
-    @keyframes slideUp {
-        from {
-            /*noinspection CssUnresolvedCustomProperty*/
-            height: var(--radix-accordion-content-height);
-        }
-        to {
-            height: 0;
-        }
-    }
-
-    --animate-star-movement-bottom: star-movement-bottom linear infinite alternate;
-    --animate-star-movement-top: star-movement-top linear infinite alternate;
-    @keyframes star-movement-bottom {
-        0% {
-            transform: translate(0%, 0%);
-            opacity: 1;
-        }
-        100% {
-            transform: translate(-100%, 0%);
-            opacity: 0;
-        }
-    }
-    @keyframes star-movement-top {
-        0% {
-            transform: translate(0%, 0%);
-            opacity: 1;
-        }
-        100% {
-            transform: translate(100%, 0%);
-            opacity: 0;
-        }
-    }
-
-    --animate-slow-pulse: pulse 4s linear infinite;
-
-    --animate-bubble: bubble 4s infinite ease-in-out;
-    @keyframes bubble {
-        0%,
-        100% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(-10px);
-        }
-    }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-gray-200, currentColor);
-    }
-}

package/bootstrap/AppProps.d.ts

@@ -1,9 +0,0 @@
-import type { AppProps as NAppProps } from "next/app";
-import type { NextComponentType, NextPageContext } from "next/dist/shared/lib/utils";
-import type { ReactNode } from "react";
-export type AppProps<LayoutProps = void> = Omit<NAppProps, "Component"> & {
-    Component: NextComponentType<NextPageContext, any, any> & {
-        getLayout: (children: ReactNode, props: LayoutProps) => ReactNode;
-        layoutProps: LayoutProps;
-    };
-};

package/bootstrap/AppProps.js

@@ -1 +0,0 @@
-export {};

package/bootstrap/index.d.ts

@@ -1 +0,0 @@
-import "focus-visible";

package/bootstrap/index.js

@@ -1 +0,0 @@
-import "focus-visible";

package/bootstrap/modeScript.d.ts

@@ -1,2 +0,0 @@
-declare const modeScript = "\n  let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n\n  updateMode()\n  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)\n  window.addEventListener('storage', updateModeWithoutTransitions)\n\n  function updateMode() {\n    let isSystemDarkMode = darkModeMediaQuery.matches\n    let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)\n\n    if (isDarkMode) {\n      document.documentElement.classList.add('dark')\n    } else {\n      document.documentElement.classList.remove('dark')\n    }\n\n    if (isDarkMode === isSystemDarkMode) {\n      delete window.localStorage.isDarkMode\n    }\n  }\n\n  function disableTransitionsTemporarily() {\n    document.documentElement.classList.add('**:transition-none!')\n    window.setTimeout(() => {\n      document.documentElement.classList.remove('**:transition-none!')\n    }, 0)\n  }\n\n  function updateModeWithoutTransitions() {\n    disableTransitionsTemporarily()\n    updateMode()\n  }\n";
-export default modeScript;

package/bootstrap/modeScript.js

@@ -1,35 +0,0 @@
-const modeScript = `
-  let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-
-  updateMode()
-  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
-  window.addEventListener('storage', updateModeWithoutTransitions)
-
-  function updateMode() {
-    let isSystemDarkMode = darkModeMediaQuery.matches
-    let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
-
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
-
-    if (isDarkMode === isSystemDarkMode) {
-      delete window.localStorage.isDarkMode
-    }
-  }
-
-  function disableTransitionsTemporarily() {
-    document.documentElement.classList.add('**:transition-none!')
-    window.setTimeout(() => {
-      document.documentElement.classList.remove('**:transition-none!')
-    }, 0)
-  }
-
-  function updateModeWithoutTransitions() {
-    disableTransitionsTemporarily()
-    updateMode()
-  }
-`;
-export default modeScript;

package/bootstrap/nprogress.d.ts

@@ -1 +0,0 @@
-export default function setupNProgress(color?: string): void;

package/bootstrap/nprogress.js

@@ -1,19 +0,0 @@
-import ProgressBar from "@badrap/bar-of-progress";
-import Router from "next/router";
-export default function setupNProgress(color = "#0ea5e9") {
-    const progress = new ProgressBar({
-        size: 2,
-        color,
-        className: "bar-of-progress",
-        delay: 100,
-    });
-    // this fixes safari jumping to the bottom of the page
-    // when closing the search modal using the `esc` key
-    if (typeof window !== "undefined") {
-        progress.start();
-        progress.finish();
-    }
-    Router.events.on("routeChangeStart", () => progress.start());
-    Router.events.on("routeChangeComplete", () => progress.finish());
-    Router.events.on("routeChangeError", () => progress.finish());
-}

package/bootstrap/scrolledScript.d.ts

@@ -1,2 +0,0 @@
-declare const scrolledScript = "\n  window.addEventListener(\"scroll\", () => {\n    if (window.scrollY) {\n      document.documentElement.classList.add(\"scrolled\")\n    } else {\n      document.documentElement.classList.remove(\"scrolled\")\n    }\n  })\n  \n  const isTouchDevice =\n    typeof window !== \"undefined\" &&\n    (!!(\n      typeof window !== \"undefined\" &&\n      (\"ontouchstart\" in window ||\n        (window.DocumentTouch &&\n          typeof document !== \"undefined\" &&\n          document instanceof window.DocumentTouch))\n    ) ||\n      !!(\n        typeof navigator !== \"undefined\" &&\n        (navigator.maxTouchPoints || navigator.msMaxTouchPoints)\n      ));\n  if (isTouchDevice) {\n    document.documentElement.classList.add(\"touch\")\n  }\n";
-export default scrolledScript;

package/bootstrap/scrolledScript.js

@@ -1,27 +0,0 @@
-const scrolledScript = `
-  window.addEventListener("scroll", () => {
-    if (window.scrollY) {
-      document.documentElement.classList.add("scrolled")
-    } else {
-      document.documentElement.classList.remove("scrolled")
-    }
-  })
-  
-  const isTouchDevice =
-    typeof window !== "undefined" &&
-    (!!(
-      typeof window !== "undefined" &&
-      ("ontouchstart" in window ||
-        (window.DocumentTouch &&
-          typeof document !== "undefined" &&
-          document instanceof window.DocumentTouch))
-    ) ||
-      !!(
-        typeof navigator !== "undefined" &&
-        (navigator.maxTouchPoints || navigator.msMaxTouchPoints)
-      ));
-  if (isTouchDevice) {
-    document.documentElement.classList.add("touch")
-  }
-`;
-export default scrolledScript;

package/bootstrap/setupFocusManager.d.ts

@@ -1 +0,0 @@
-export {};

package/bootstrap/setupFocusManager.js

@@ -1,13 +0,0 @@
-import { focusManager } from "@tanstack/react-query";
-focusManager.setEventListener((handleFocus) => {
-    const listener = () => handleFocus();
-    // Listen to visibilitychange
-    if (typeof window !== "undefined" && window.addEventListener) {
-        window.addEventListener("focus", listener, false);
-    }
-    return () => {
-        if (typeof window !== "undefined") {
-            window.removeEventListener("focus", listener);
-        }
-    };
-});

package/bootstrap/suppressConsoleLog.d.ts

@@ -1 +0,0 @@
-export {};

package/bootstrap/suppressConsoleLog.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-console */
-import { isBrowser } from "../utils/isBrowser";
-const consoleLog = console.log;
-if (isBrowser && process.env.NODE_ENV !== "development") {
-    console.log = () => {
-        return consoleLog("Suppressed log in production");
-    };
-}

package/components/Accordion/Accordion.d.ts

@@ -1,16 +0,0 @@
-import { type ComponentProps, type ReactNode } from "react";
-import * as RAccordion from "@radix-ui/react-accordion";
-declare function Accordion({ children, className, ...props }: ComponentProps<typeof RAccordion.Root>): import("react").JSX.Element;
-declare namespace Accordion {
-    var Item: typeof AccordionItem;
-}
-export default Accordion;
-declare function AccordionItem({ children, title, value, className, triggerClassName, contentClassName, contentInnerClassName, }: {
-    children?: ReactNode;
-    title: ReactNode;
-    value?: string;
-    className?: string;
-    triggerClassName?: string;
-    contentClassName?: string;
-    contentInnerClassName?: string;
-}): import("react").JSX.Element;