@flamingo-stack/openframe-frontend-core 0.0.380 → 0.0.381-snapshot.20260708122906

package/src/components/ui/input.tsx

@@ -15,10 +15,11 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   endAdornment?: React.ReactNode;
   /** Label text displayed above the input */
   label?: string;
-  /** Error message displayed below the input */
+  /** Status message displayed below the input */
   error?: string;
-  /** Color variant for error state: "error" (red) or "warning" (yellow) */
-  errorVariant?: "error" | "warning";
+  /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey).
+      Only "error" and "warning" mark the field invalid (colored border). */
+  errorVariant?: "error" | "warning" | "success" | "muted";
   /** When true, shows a loading spinner as end adornment */
   loading?: boolean;
 }
@@ -30,7 +31,9 @@ const invalidBorderClasses = {
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, invalid = false, startAdornment, endAdornment, label, error, errorVariant = "error", loading = false, ...props }, ref) => {
-    const isInvalid = invalid || !!error
+    // success/muted are informational — they never paint the invalid border
+    const variantIsInvalid = errorVariant === "error" || errorVariant === "warning"
+    const isInvalid = invalid || (!!error && variantIsInvalid)
 
     // Range inputs get a clean slider rendering — no label wrapper, borders, or adornments
     if (type === 'range') {
@@ -83,7 +86,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           // Disabled
           props.disabled && "!cursor-not-allowed bg-ods-bg",
           // Invalid
-          isInvalid && invalidBorderClasses[errorVariant],
+          isInvalid && invalidBorderClasses[variantIsInvalid ? (errorVariant as "error" | "warning") : "error"],
           className
         )}
       >

package/src/stories/auth/AcceptInvitation.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
 import {
   AcceptInvitationForm,
   type AuthSsoProvider,
@@ -15,7 +14,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'Accept Invitation from the auth redesign. Presentational + controlled: read-only invited email, a Terms gate, and SSO providers to join the org. Shown inside AuthShell without tabs. SSO buttons stay disabled until the Terms checkbox is checked.',
+          'Accept Invitation from the auth redesign. Presentational + controlled: read-only invited email (prefilled from the invitation link) and SSO providers to join the org. Shown inside AuthShell without tabs.',
       },
     },
   },
@@ -28,9 +27,7 @@ type Story = StoryObj<typeof meta>
 const SSO_PROVIDERS: AuthSsoProvider[] = ['openframe', 'google', 'microsoft']
 
 /** Full page: invitation form + marketing panel (no tabs). */
-function AcceptInvitationPage({ initialChecked = false }: { initialChecked?: boolean }) {
-  const [agreedToTerms, setAgreedToTerms] = useState(initialChecked)
-
+function AcceptInvitationPage() {
   return (
     <AuthShell
       mobileTagline={
@@ -43,24 +40,15 @@ function AcceptInvitationPage({ initialChecked = false }: { initialChecked?: boo
     >
       <AcceptInvitationForm
         email="roman@mail.com"
-        agreedToTerms={agreedToTerms}
-        onAgreedToTermsChange={setAgreedToTerms}
         ssoProviders={SSO_PROVIDERS}
         onSsoClick={() => {}}
         onBackToLogin={() => {}}
-        termsUrl="#terms"
-        privacyPolicyUrl="#privacy"
       />
     </AuthShell>
   )
 }
 
-/** Terms unchecked — SSO buttons disabled. */
-export const NoCheck: Story = {
+/** Prefilled invited email, SSO providers ready to pick. */
+export const Default: Story = {
   render: () => <AcceptInvitationPage />,
 }
-
-/** Terms accepted — SSO buttons enabled. */
-export const WithCheck: Story = {
-  render: () => <AcceptInvitationPage initialChecked />,
-}

package/src/stories/auth/PasswordReset.stories.tsx

@@ -44,6 +44,7 @@ function PasswordResetPage({ initialPassword = '', initialConfirm = '' }: { init
         onConfirmPasswordChange={setConfirmPassword}
         onSubmit={() => {}}
         onCancel={() => {}}
+        onBackToLogin={() => {}}
         submitDisabled={!isValid}
         errors={{
           confirmPassword: