@majapisoftwares/ui 4.3.17 → 6.0.0

package/src/templates/login-form.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useId, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Field, FieldGroup, FieldLabel } from "../components/ui/field";
+import { Alert, AlertDescription } from "../components/ui/alert";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { defineMessages, useMessages } from "../lib/i18n";
+
+const messages = defineMessages({
+  en: {
+    title: "Welcome back",
+    email: "Email",
+    password: "Password",
+    submit: "Log in",
+    pending: "Logging in…",
+  },
+  "pt-BR": {
+    title: "Bem-vindo de volta",
+    email: "E-mail",
+    password: "Senha",
+    submit: "Entrar",
+    pending: "Entrando…",
+  },
+});
+
+export interface LoginValues {
+  email: string;
+  password: string;
+}
+export interface LoginFormProps {
+  onSubmit: (values: LoginValues) => void;
+  pending?: boolean;
+  error?: string;
+  title?: string;
+  description?: string;
+  submitLabel?: string;
+  /** Shown next to the password label, e.g. a "Forgot password?" link. */
+  recovery?: ReactNode;
+  /** Shown above the fields, e.g. OAuth buttons. */
+  alternative?: ReactNode;
+  footer?: ReactNode;
+}
+export function LoginForm({
+  onSubmit,
+  pending = false,
+  error,
+  title,
+  description,
+  submitLabel,
+  recovery,
+  alternative,
+  footer,
+}: LoginFormProps) {
+  const id = useId();
+  const t = useMessages(messages);
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <CardTitle className="text-xl">{title ?? t.title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        <form
+          aria-busy={pending}
+          onSubmit={(event) => {
+            event.preventDefault();
+            const data = new FormData(event.currentTarget);
+            onSubmit({
+              email: String(data.get("email") ?? ""),
+              password: String(data.get("password") ?? ""),
+            });
+          }}
+        >
+          <FieldGroup>
+            {alternative}
+            {error ? (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+            <Field>
+              <FieldLabel htmlFor={`${id}-email`}>{t.email}</FieldLabel>
+              <Input
+                id={`${id}-email`}
+                name="email"
+                type="email"
+                autoComplete="username"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Field>
+              <div className="flex items-center">
+                <FieldLabel htmlFor={`${id}-password`}>{t.password}</FieldLabel>
+                {recovery ? (
+                  <div className="ml-auto text-sm">{recovery}</div>
+                ) : null}
+              </div>
+              <Input
+                id={`${id}-password`}
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Button type="submit" disabled={pending}>
+              {pending ? t.pending : (submitLabel ?? t.submit)}
+            </Button>
+            {footer ? (
+              <div className="text-center text-sm text-muted-foreground">
+                {footer}
+              </div>
+            ) : null}
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/src/templates/signup-form.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { useId, useState, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "../components/ui/field";
+import { Alert, AlertDescription } from "../components/ui/alert";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { defineMessages, useMessages } from "../lib/i18n";
+
+const messages = defineMessages({
+  en: {
+    title: "Create an account",
+    name: "Name",
+    email: "Email",
+    password: "Password",
+    confirm: "Confirm password",
+    minLength: (n: number) => `At least ${n} characters.`,
+    mismatch: "Passwords don't match.",
+    submit: "Create account",
+    pending: "Creating account…",
+  },
+  "pt-BR": {
+    title: "Criar conta",
+    name: "Nome",
+    email: "E-mail",
+    password: "Senha",
+    confirm: "Confirmar senha",
+    minLength: (n: number) => `Pelo menos ${n} caracteres.`,
+    mismatch: "As senhas não coincidem.",
+    submit: "Criar conta",
+    pending: "Criando conta…",
+  },
+});
+
+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;
+  terms?: ReactNode;
+  footer?: ReactNode;
+}
+export function SignupForm({
+  onSubmit,
+  pending = false,
+  error,
+  title,
+  description,
+  submitLabel,
+  minPasswordLength = 12,
+  terms,
+  footer,
+}: SignupFormProps) {
+  const id = useId(),
+    t = useMessages(messages),
+    [mismatch, setMismatch] = useState(false);
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <CardTitle className="text-xl">{title ?? t.title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        <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,
+            });
+          }}
+        >
+          <FieldGroup>
+            {error ? (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+            <Field>
+              <FieldLabel htmlFor={`${id}-name`}>{t.name}</FieldLabel>
+              <Input
+                id={`${id}-name`}
+                name="name"
+                autoComplete="name"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor={`${id}-email`}>{t.email}</FieldLabel>
+              <Input
+                id={`${id}-email`}
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor={`${id}-password`}>{t.password}</FieldLabel>
+              <Input
+                id={`${id}-password`}
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={minPasswordLength}
+                disabled={pending}
+              />
+              <FieldDescription>
+                {t.minLength(minPasswordLength)}
+              </FieldDescription>
+            </Field>
+            <Field data-invalid={mismatch || undefined}>
+              <FieldLabel htmlFor={`${id}-confirm`}>{t.confirm}</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">
+                  {t.mismatch}
+                </FieldDescription>
+              ) : null}
+            </Field>
+            {terms ? <FieldDescription>{terms}</FieldDescription> : null}
+            <Button type="submit" disabled={pending}>
+              {pending ? t.pending : (submitLabel ?? t.submit)}
+            </Button>
+            {footer ? (
+              <div className="text-center text-sm text-muted-foreground">
+                {footer}
+              </div>
+            ) : null}
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

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;