@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/team/__tests__/team-components.test.tsx

@@ -0,0 +1,352 @@
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import {
+  MembersTable,
+  RoleSelector,
+  InviteMemberDialog,
+  PendingInvitationCallout,
+  DomainClaimCard,
+  LeaveTeamDialog,
+  OrgSwitcher,
+} from '../index'
+import type { MemberRow, InvitationLite, DomainClaimLite, TeamLite, CompanyLite } from '../types'
+
+// ---------- MembersTable ---------------------------------------------------
+
+describe('MembersTable', () => {
+  const baseMembers: MemberRow[] = [
+    {
+      id: 'm1',
+      userId: 'u1',
+      teamId: 't1',
+      role: 'owner',
+      joinedAt: '2025-01-01',
+      user: { id: 'u1', email: 'owner@x.com', firstName: 'Olivia', lastName: 'Owner' },
+    },
+    {
+      id: 'm2',
+      userId: 'u2',
+      teamId: 't1',
+      role: 'member',
+      joinedAt: '2025-01-02',
+      user: { id: 'u2', email: 'mem@x.com', firstName: 'Mike', lastName: 'Member' },
+    },
+  ]
+
+  it('renders a row per member with name + email + role', () => {
+    render(<MembersTable members={baseMembers} />)
+    expect(screen.getByText('Olivia Owner')).toBeInTheDocument()
+    expect(screen.getByText('owner@x.com')).toBeInTheDocument()
+    expect(screen.getAllByText('Owner').length).toBeGreaterThan(0)
+    expect(screen.getByText('Mike Member')).toBeInTheDocument()
+  })
+
+  it('hides the actions column when canManage is false', () => {
+    render(<MembersTable members={baseMembers} />)
+    expect(screen.queryByText('Remove')).not.toBeInTheDocument()
+  })
+
+  it('shows RoleSelector + Remove when canManage is true', () => {
+    const onChangeRole = jest.fn()
+    const onRemove = jest.fn()
+    render(
+      <MembersTable
+        members={baseMembers}
+        canManage
+        onChangeRole={onChangeRole}
+        onRemove={onRemove}
+      />
+    )
+    const removes = screen.getAllByText('Remove')
+    expect(removes).toHaveLength(2)
+    fireEvent.click(removes[1])
+    expect(onRemove).toHaveBeenCalledWith('u2')
+
+    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[]
+    fireEvent.change(selects[1], { target: { value: 'admin' } })
+    expect(onChangeRole).toHaveBeenCalledWith('u2', 'admin')
+  })
+
+  it('respects classNames overrides', () => {
+    const { container } = render(
+      <MembersTable members={baseMembers} classNames={{ root: 'my-root-class' }} />
+    )
+    expect(container.firstChild).toHaveClass('my-root-class')
+  })
+
+  it('shows the empty state when no members', () => {
+    render(<MembersTable members={[]} />)
+    expect(screen.getByText('No members yet.')).toBeInTheDocument()
+  })
+})
+
+// ---------- RoleSelector ---------------------------------------------------
+
+describe('RoleSelector', () => {
+  it('renders the supplied roles and fires onChange', () => {
+    const onChange = jest.fn()
+    render(
+      <RoleSelector
+        value="member"
+        onChange={onChange}
+        availableRoles={['admin', 'member', 'viewer']}
+      />
+    )
+    const select = screen.getByRole('combobox') as HTMLSelectElement
+    expect(select.value).toBe('member')
+    // Only the three supplied roles should be rendered.
+    const options = Array.from(select.querySelectorAll('option')).map((o) => o.value)
+    expect(options).toEqual(['admin', 'member', 'viewer'])
+    fireEvent.change(select, { target: { value: 'admin' } })
+    expect(onChange).toHaveBeenCalledWith('admin')
+  })
+
+  it('honors disabled', () => {
+    render(<RoleSelector value="viewer" onChange={() => {}} disabled />)
+    expect(screen.getByRole('combobox')).toBeDisabled()
+  })
+})
+
+// ---------- InviteMemberDialog --------------------------------------------
+
+describe('InviteMemberDialog', () => {
+  it('does not render the panel until the trigger is clicked', () => {
+    render(<InviteMemberDialog teamId="t1" onSubmit={jest.fn()} />)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /invite member/i }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('submits email + role + teamId via onSubmit and shows a success line', async () => {
+    const onSubmit = jest.fn().mockResolvedValue({ id: 'i1' } as InvitationLite)
+    const onInvited = jest.fn()
+    render(
+      <InviteMemberDialog
+        teamId="t1"
+        onSubmit={onSubmit}
+        onInvited={onInvited}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /invite member/i }))
+
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'newhire@x.com' },
+    })
+    fireEvent.change(screen.getByLabelText('Invite role'), {
+      target: { value: 'admin' },
+    })
+
+    await act(async () => {
+      fireEvent.submit(screen.getByRole('dialog').querySelector('form')!)
+    })
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: 'newhire@x.com',
+      teamId: 't1',
+      role: 'admin',
+    })
+    expect(onInvited).toHaveBeenCalled()
+    expect(screen.getByText(/Invitation sent to newhire@x.com/)).toBeInTheDocument()
+  })
+
+  it('surfaces submit errors inline', async () => {
+    const onSubmit = jest.fn().mockRejectedValue(new Error('domain not allowed'))
+    render(<InviteMemberDialog teamId="t1" onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByRole('button', { name: /invite member/i }))
+    fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'a@x.com' } })
+
+    await act(async () => {
+      fireEvent.submit(screen.getByRole('dialog').querySelector('form')!)
+    })
+    expect(screen.getByRole('alert')).toHaveTextContent('domain not allowed')
+  })
+
+  it('honors classNames slots', () => {
+    render(
+      <InviteMemberDialog
+        teamId="t1"
+        onSubmit={jest.fn()}
+        classNames={{ trigger: 'my-trigger' }}
+      />
+    )
+    expect(screen.getByRole('button', { name: /invite member/i })).toHaveClass(
+      'my-trigger'
+    )
+  })
+})
+
+// ---------- PendingInvitationCallout --------------------------------------
+
+describe('PendingInvitationCallout', () => {
+  const invitation: InvitationLite = {
+    id: 'i1',
+    email: 'a@x.com',
+    teamId: 't1',
+    role: 'admin',
+    expiresAt: '2099-01-01',
+    isExpired: false,
+    isAccepted: false,
+  }
+
+  it('renders the message + team name + role', () => {
+    render(
+      <PendingInvitationCallout
+        invitation={invitation}
+        teamName="Acme Eng"
+      />
+    )
+    expect(screen.getByText(/You.*invited/i)).toBeInTheDocument()
+    expect(screen.getByText('Acme Eng')).toBeInTheDocument()
+    expect(screen.getByText('admin')).toBeInTheDocument()
+  })
+
+  it('falls back to "team #<id>" when no team name is supplied', () => {
+    render(<PendingInvitationCallout invitation={invitation} />)
+    expect(screen.getByText('team #t1')).toBeInTheDocument()
+  })
+
+  it('calls onAccept + onAccepted', async () => {
+    const onAccept = jest.fn().mockResolvedValue(undefined)
+    const onAccepted = jest.fn()
+    render(
+      <PendingInvitationCallout
+        invitation={invitation}
+        teamName="Acme"
+        onAccept={onAccept}
+        onAccepted={onAccepted}
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /accept/i }))
+    })
+    expect(onAccept).toHaveBeenCalledWith(invitation)
+    expect(onAccepted).toHaveBeenCalledWith(invitation)
+  })
+
+  it('only renders Decline when an onDecline is provided', () => {
+    const { rerender } = render(
+      <PendingInvitationCallout invitation={invitation} teamName="Acme" />
+    )
+    expect(screen.queryByRole('button', { name: /decline/i })).not.toBeInTheDocument()
+    rerender(
+      <PendingInvitationCallout
+        invitation={invitation}
+        teamName="Acme"
+        onDecline={jest.fn()}
+      />
+    )
+    expect(screen.getByRole('button', { name: /decline/i })).toBeInTheDocument()
+  })
+})
+
+// ---------- DomainClaimCard ------------------------------------------------
+
+describe('DomainClaimCard', () => {
+  const baseClaim: DomainClaimLite = {
+    id: 'd1',
+    companyId: 'c1',
+    domain: 'acme.com',
+    verified: false,
+    verificationToken: 'startsim-verify=xyz',
+    createdAt: '2025-01-01',
+  }
+
+  it('renders the DNS TXT block when a verification token is present', () => {
+    render(<DomainClaimCard claim={baseClaim} />)
+    expect(screen.getByText('acme.com')).toBeInTheDocument()
+    expect(screen.getByText('startsim-verify=xyz')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /verify dns/i })).toBeInTheDocument()
+  })
+
+  it('hides verification UI once verified=true', () => {
+    render(<DomainClaimCard claim={{ ...baseClaim, verified: true }} />)
+    expect(screen.getByText('Verified')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /verify dns/i })).not.toBeInTheDocument()
+  })
+
+  it('initiate-email then submit-code calls the verify handler', async () => {
+    const onInitiateEmail = jest.fn().mockResolvedValue(undefined)
+    const onVerifyEmail = jest.fn().mockResolvedValue(undefined)
+    render(
+      <DomainClaimCard
+        claim={baseClaim}
+        onInitiateEmail={onInitiateEmail}
+        onVerifyEmail={onVerifyEmail}
+      />
+    )
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /email attestation/i }))
+    })
+    expect(onInitiateEmail).toHaveBeenCalledWith(baseClaim)
+
+    const code = screen.getByLabelText('Attestation code')
+    fireEvent.change(code, { target: { value: '123456' } })
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /submit code/i }))
+    })
+    expect(onVerifyEmail).toHaveBeenCalledWith(baseClaim, '123456')
+  })
+
+  it('renders Revoke when onRevoke is provided', () => {
+    render(<DomainClaimCard claim={baseClaim} onRevoke={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /revoke/i })).toBeInTheDocument()
+  })
+})
+
+// ---------- LeaveTeamDialog ------------------------------------------------
+
+describe('LeaveTeamDialog', () => {
+  const team: TeamLite = { id: 't1', slug: 'eng', name: 'Engineering', companyId: 'c1' }
+
+  it('opens on trigger click, fires onSubmit + onLeft on confirm', async () => {
+    const onSubmit = jest.fn().mockResolvedValue(undefined)
+    const onLeft = jest.fn()
+    render(<LeaveTeamDialog team={team} onSubmit={onSubmit} onLeft={onLeft} />)
+    fireEvent.click(screen.getByRole('button', { name: /leave team/i }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    await act(async () => {
+      // Click the confirm button (red); it's the second 'Leave team' on screen.
+      fireEvent.click(screen.getAllByRole('button', { name: /leave team/i })[1])
+    })
+    expect(onSubmit).toHaveBeenCalledWith(team)
+    expect(onLeft).toHaveBeenCalledWith(team)
+  })
+
+  it('surfaces backend "last owner" errors inline', async () => {
+    const onSubmit = jest.fn().mockRejectedValue(new Error('Cannot remove the last owner'))
+    render(<LeaveTeamDialog team={team} onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByRole('button', { name: /leave team/i }))
+    await act(async () => {
+      fireEvent.click(screen.getAllByRole('button', { name: /leave team/i })[1])
+    })
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      /cannot remove the last owner/i
+    )
+  })
+})
+
+// ---------- OrgSwitcher ----------------------------------------------------
+
+describe('OrgSwitcher', () => {
+  const companies: CompanyLite[] = [
+    { id: 'c1', slug: 'acme', name: 'Acme' },
+    { id: 'c2', slug: 'beta', name: 'Beta' },
+  ]
+
+  it('renders an option per company + fires onSwitch on change', () => {
+    const onSwitch = jest.fn()
+    render(
+      <OrgSwitcher companies={companies} currentCompanyId="c1" onSwitch={onSwitch} />
+    )
+    const select = screen.getByRole('combobox') as HTMLSelectElement
+    expect(select.value).toBe('c1')
+    fireEvent.change(select, { target: { value: 'c2' } })
+    expect(onSwitch).toHaveBeenCalledWith('c2')
+  })
+
+  it('renders nothing when there are no companies', () => {
+    const { container } = render(
+      <OrgSwitcher companies={[]} currentCompanyId={null} onSwitch={() => {}} />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/components/team/domain-claim-card-default-class-names.ts

@@ -0,0 +1,45 @@
+/** Default Tailwind classes for {@link DomainClaimCard}. startsim-o7s. */
+export interface DomainClaimCardClassNames {
+  root?: string
+  header?: string
+  domain?: string
+  statusBadge?: string
+  statusVerified?: string
+  statusUnverified?: string
+  body?: string
+  sectionLabel?: string
+  tokenRow?: string
+  tokenCode?: string
+  helpText?: string
+  actions?: string
+  primaryButton?: string
+  secondaryButton?: string
+  revokeButton?: string
+  errorText?: string
+  codeInput?: string
+}
+
+export const DOMAIN_CLAIM_DEFAULTS: Required<DomainClaimCardClassNames> = {
+  root: 'rounded-xl border border-gray-200 bg-white p-5',
+  header: 'flex items-center justify-between gap-3',
+  domain: 'text-base font-semibold text-gray-900',
+  statusBadge: 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+  statusVerified: 'bg-green-100 text-green-800',
+  statusUnverified: 'bg-yellow-100 text-yellow-800',
+  body: 'mt-4 space-y-3 text-sm text-gray-700',
+  sectionLabel: 'text-xs font-medium uppercase tracking-wide text-gray-500',
+  tokenRow: 'flex items-center gap-2',
+  tokenCode:
+    'flex-1 rounded-md bg-gray-50 px-3 py-2 font-mono text-xs text-gray-900',
+  helpText: 'text-xs text-gray-500',
+  actions: 'mt-4 flex flex-wrap items-center gap-2',
+  primaryButton:
+    'rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+  secondaryButton:
+    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50',
+  revokeButton:
+    'rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50',
+  errorText: 'mt-2 text-sm text-red-600',
+  codeInput:
+    'w-24 rounded-md border border-gray-300 px-2 py-1.5 text-sm tracking-widest outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+}

package/src/components/team/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Headless team-management UI components (startsim-o7s).
+ *
+ * Each component accepts a `classNames` slot map with sensible Tailwind
+ * defaults so each app's `/settings/team` and `/settings/domains` page
+ * is a thin wrapper, not a re-implementation. Same pattern as the
+ * SignupForm/ResetPasswordForm/SignInForm quartet shipped earlier.
+ */
+
+export { MembersTable } from './MembersTable'
+export type { MembersTableProps } from './MembersTable'
+export type { MembersTableClassNames } from './members-table-default-class-names'
+export { MEMBERS_TABLE_DEFAULTS } from './members-table-default-class-names'
+
+export { RoleSelector } from './RoleSelector'
+export type { RoleSelectorProps } from './RoleSelector'
+export type { RoleSelectorClassNames } from './role-selector-default-class-names'
+export { ROLE_SELECTOR_DEFAULTS } from './role-selector-default-class-names'
+
+export { InviteMemberDialog } from './InviteMemberDialog'
+export type { InviteMemberDialogProps } from './InviteMemberDialog'
+export type { InviteMemberDialogClassNames } from './invite-member-dialog-default-class-names'
+export { INVITE_DIALOG_DEFAULTS } from './invite-member-dialog-default-class-names'
+
+export { PendingInvitationCallout } from './PendingInvitationCallout'
+export type { PendingInvitationCalloutProps } from './PendingInvitationCallout'
+export type { PendingInvitationCalloutClassNames } from './pending-invitation-callout-default-class-names'
+export { PENDING_INVITE_DEFAULTS } from './pending-invitation-callout-default-class-names'
+
+export { DomainClaimCard } from './DomainClaimCard'
+export type { DomainClaimCardProps } from './DomainClaimCard'
+export type { DomainClaimCardClassNames } from './domain-claim-card-default-class-names'
+export { DOMAIN_CLAIM_DEFAULTS } from './domain-claim-card-default-class-names'
+
+export { LeaveTeamDialog } from './LeaveTeamDialog'
+export type { LeaveTeamDialogProps } from './LeaveTeamDialog'
+export type { LeaveTeamDialogClassNames } from './leave-team-dialog-default-class-names'
+export { LEAVE_DIALOG_DEFAULTS } from './leave-team-dialog-default-class-names'
+
+export { OrgSwitcher } from './OrgSwitcher'
+export type { OrgSwitcherProps } from './OrgSwitcher'
+export type { OrgSwitcherClassNames } from './org-switcher-default-class-names'
+export { ORG_SWITCHER_DEFAULTS } from './org-switcher-default-class-names'
+
+// Shared types
+export {
+  userDisplayName,
+  userInitials,
+  type TeamRole,
+  type TeamLite,
+  type CompanyLite,
+  type MemberUserLite,
+  type MemberRow,
+  type InvitationLite,
+  type DomainVerificationMethod,
+  type DomainClaimLite,
+} from './types'

package/src/components/team/invite-member-dialog-default-class-names.ts

@@ -0,0 +1,41 @@
+/** Default Tailwind classes for {@link InviteMemberDialog}. startsim-o7s. */
+export interface InviteMemberDialogClassNames {
+  trigger?: string
+  overlay?: string
+  panel?: string
+  header?: string
+  title?: string
+  body?: string
+  fieldRow?: string
+  label?: string
+  input?: string
+  errorText?: string
+  successText?: string
+  footer?: string
+  cancelButton?: string
+  submitButton?: string
+}
+
+export const INVITE_DIALOG_DEFAULTS: Required<InviteMemberDialogClassNames> = {
+  trigger:
+    'inline-flex items-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-700',
+  overlay:
+    'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4',
+  panel:
+    'w-full max-w-md rounded-xl bg-white shadow-xl ring-1 ring-black/5',
+  header: 'border-b border-gray-100 px-6 py-4',
+  title: 'text-base font-semibold text-gray-900',
+  body: 'space-y-4 px-6 py-4',
+  fieldRow: '',
+  label: 'block text-sm font-medium text-gray-700 mb-1',
+  input:
+    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+  errorText: 'text-sm text-red-600',
+  successText: 'text-sm text-green-600',
+  footer:
+    'flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3',
+  cancelButton:
+    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
+  submitButton:
+    'rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+}

package/src/components/team/leave-team-dialog-default-class-names.ts

@@ -0,0 +1,33 @@
+/** Default Tailwind classes for {@link LeaveTeamDialog}. startsim-o7s. */
+export interface LeaveTeamDialogClassNames {
+  trigger?: string
+  overlay?: string
+  panel?: string
+  header?: string
+  title?: string
+  body?: string
+  warningText?: string
+  errorText?: string
+  footer?: string
+  cancelButton?: string
+  confirmButton?: string
+}
+
+export const LEAVE_DIALOG_DEFAULTS: Required<LeaveTeamDialogClassNames> = {
+  trigger:
+    'inline-flex items-center rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50',
+  overlay:
+    'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4',
+  panel: 'w-full max-w-md rounded-xl bg-white shadow-xl ring-1 ring-black/5',
+  header: 'border-b border-gray-100 px-6 py-4',
+  title: 'text-base font-semibold text-gray-900',
+  body: 'space-y-3 px-6 py-4 text-sm text-gray-700',
+  warningText: 'text-sm text-gray-600',
+  errorText: 'text-sm text-red-600',
+  footer:
+    'flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3',
+  cancelButton:
+    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
+  confirmButton:
+    'rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50',
+}

package/src/components/team/members-table-default-class-names.ts

@@ -0,0 +1,39 @@
+/** Default Tailwind classes for {@link MembersTable}. startsim-o7s. */
+export interface MembersTableClassNames {
+  root?: string
+  table?: string
+  thead?: string
+  headerRow?: string
+  th?: string
+  tbody?: string
+  row?: string
+  cell?: string
+  avatar?: string
+  name?: string
+  email?: string
+  roleBadge?: string
+  actions?: string
+  removeButton?: string
+  emptyRow?: string
+}
+
+export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
+  root: 'w-full overflow-x-auto rounded-lg border border-gray-200',
+  table: 'w-full text-sm text-left',
+  thead: 'bg-gray-50 text-xs uppercase tracking-wide text-gray-500',
+  headerRow: '',
+  th: 'px-4 py-2 font-medium',
+  tbody: 'divide-y divide-gray-100 bg-white',
+  row: 'hover:bg-gray-50',
+  cell: 'px-4 py-3 align-middle',
+  avatar:
+    'flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-xs font-medium text-gray-600',
+  name: 'font-medium text-gray-900',
+  email: 'text-gray-500',
+  roleBadge:
+    'inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700',
+  actions: 'flex items-center justify-end gap-2',
+  removeButton:
+    'rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:opacity-50',
+  emptyRow: 'px-4 py-6 text-center text-sm text-gray-500',
+}

package/src/components/team/org-switcher-default-class-names.ts

@@ -0,0 +1,13 @@
+/** Default Tailwind classes for {@link OrgSwitcher}. startsim-o7s. */
+export interface OrgSwitcherClassNames {
+  root?: string
+  label?: string
+  select?: string
+}
+
+export const ORG_SWITCHER_DEFAULTS: Required<OrgSwitcherClassNames> = {
+  root: 'inline-flex items-center gap-2',
+  label: 'text-xs font-medium uppercase tracking-wide text-gray-500',
+  select:
+    'rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+}

package/src/components/team/pending-invitation-callout-default-class-names.ts

@@ -0,0 +1,22 @@
+/** Default Tailwind classes for {@link PendingInvitationCallout}. startsim-o7s. */
+export interface PendingInvitationCalloutClassNames {
+  root?: string
+  message?: string
+  emphasized?: string
+  actions?: string
+  acceptButton?: string
+  declineButton?: string
+  errorText?: string
+}
+
+export const PENDING_INVITE_DEFAULTS: Required<PendingInvitationCalloutClassNames> = {
+  root: 'flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3',
+  message: 'flex-1 text-sm text-blue-900',
+  emphasized: 'font-semibold',
+  actions: 'flex items-center gap-2',
+  acceptButton:
+    'rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50',
+  declineButton:
+    'rounded-md border border-blue-300 px-3 py-1.5 text-sm font-medium text-blue-700 hover:bg-blue-100',
+  errorText: 'mt-2 text-sm text-red-600',
+}

package/src/components/team/role-selector-default-class-names.ts

@@ -0,0 +1,11 @@
+/** Default Tailwind classes for {@link RoleSelector}. startsim-o7s. */
+export interface RoleSelectorClassNames {
+  root?: string
+  select?: string
+}
+
+export const ROLE_SELECTOR_DEFAULTS: Required<RoleSelectorClassNames> = {
+  root: 'inline-block',
+  select:
+    'rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
+}