@happyvertical/smrt-ui 0.30.0

package/dist/components/layout/index.js

@@ -0,0 +1,11 @@
+/**
+ * Layout components - Page structure and containers
+ */
+export { default as Container } from './Container.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Masthead } from './Masthead.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as SummaryCard } from './SummaryCard.svelte';

package/dist/components/memberships/MembershipCard.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+import type { Membership, Role, Tenant } from '@happyvertical/smrt-types';
+import { M, useI18n } from '@happyvertical/smrt-ui/i18n';
+import RoleBadge from '../roles/RoleBadge.svelte';
+
+const { t } = useI18n();
+
+interface Props {
+  membership: Membership;
+  tenant: Tenant;
+  role: Role;
+  onremove?: () => void;
+  onchangerole?: () => void;
+}
+
+const { membership, tenant, role, onremove, onchangerole }: Props = $props();
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'active':
+      return 'status-active';
+    case 'pending':
+      return 'status-pending';
+    case 'suspended':
+      return 'status-suspended';
+    default:
+      return '';
+  }
+}
+
+function formatDate(date: Date | string | null | undefined): string {
+  if (!date) return 'N/A';
+  return new Date(date).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+</script>
+
+<div class="membership-card">
+  <div class="main">
+    <div class="tenant-info">
+      <span class="tenant-name">{tenant.name}</span>
+      <span class="status {getStatusColor(membership.status)}">{membership.status}</span>
+    </div>
+
+    <div class="role-info">
+      <RoleBadge {role} />
+    </div>
+  </div>
+
+  <div class="meta">
+    <span class="date">Joined {formatDate(membership.created_at)}</span>
+
+    {#if onchangerole || onremove}
+      <div class="actions">
+        {#if onchangerole}
+          <button type="button" class="action-btn" onclick={onchangerole}>{t(M['ui.membership_card.change_role'])}</button>
+        {/if}
+        {#if onremove}
+          <button type="button" class="action-btn danger" onclick={onremove}>Remove</button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .membership-card {
+    padding: 1rem;
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 0.5rem;
+  }
+
+  .main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .tenant-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .tenant-name {
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .status {
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    text-transform: uppercase;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .status-active {
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-on-success-container);
+  }
+
+  .status-pending {
+    background: var(--smrt-color-warning-container);
+    color: var(--smrt-color-on-warning-container);
+  }
+
+  .status-suspended {
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+  }
+
+  .role-info {
+    flex-shrink: 0;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .date {
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .action-btn {
+    padding: 0.25rem 0.5rem;
+    background: none;
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: 0.25rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+  }
+
+  .action-btn:hover {
+    background: var(--smrt-color-surface-container);
+  }
+
+  .action-btn.danger {
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
+  }
+
+  .action-btn.danger:hover {
+    background: var(--smrt-color-error-container);
+  }
+</style>

package/dist/components/memberships/MembershipCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Membership, Role, Tenant } from '@happyvertical/smrt-types';
+interface Props {
+    membership: Membership;
+    tenant: Tenant;
+    role: Role;
+    onremove?: () => void;
+    onchangerole?: () => void;
+}
+declare const MembershipCard: import("svelte").Component<Props, {}, "">;
+type MembershipCard = ReturnType<typeof MembershipCard>;
+export default MembershipCard;
+//# sourceMappingURL=MembershipCard.svelte.d.ts.map

package/dist/components/memberships/MembershipCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MembershipCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/memberships/MembershipCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAK1E,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAkED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/memberships/MembershipList.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import type { Membership, Role, Tenant } from '@happyvertical/smrt-types';
+import { M, useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import MembershipCard from './MembershipCard.svelte';
+
+const { t } = useI18n();
+
+interface MembershipWithContext {
+  membership: Membership;
+  tenant: Tenant;
+  role: Role;
+}
+
+interface Props {
+  memberships: MembershipWithContext[];
+  onremove?: (membership: Membership) => void;
+  onchangerole?: (membership: Membership) => void;
+  emptyMessage?: string;
+  empty?: Snippet;
+  loading?: boolean;
+}
+
+const {
+  memberships,
+  onremove,
+  onchangerole,
+  emptyMessage = 'No memberships found',
+  empty,
+  loading = false,
+}: Props = $props();
+</script>
+
+<div class="membership-list">
+  {#if loading}
+    <div class="loading">
+      <div class="spinner"></div>
+      <span>{t(M['ui.membership_list.loading'])}</span>
+    </div>
+  {:else if memberships.length === 0}
+    {#if empty}
+      {@render empty()}
+    {:else}
+      <div class="empty">{emptyMessage}</div>
+    {/if}
+  {:else}
+    {#each memberships as { membership, tenant, role } (membership.id)}
+      <MembershipCard
+        {membership}
+        {tenant}
+        {role}
+        onremove={onremove ? () => onremove(membership) : undefined}
+        onchangerole={onchangerole ? () => onchangerole(membership) : undefined}
+      />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .membership-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 2rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full, 9999px);
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .empty {
+    padding: 2rem;
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-variant);
+    border: 1px dashed var(--smrt-color-outline);
+    border-radius: 0.5rem;
+  }
+</style>

package/dist/components/memberships/MembershipList.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Membership, Role, Tenant } from '@happyvertical/smrt-types';
+import type { Snippet } from 'svelte';
+interface MembershipWithContext {
+    membership: Membership;
+    tenant: Tenant;
+    role: Role;
+}
+interface Props {
+    memberships: MembershipWithContext[];
+    onremove?: (membership: Membership) => void;
+    onchangerole?: (membership: Membership) => void;
+    emptyMessage?: string;
+    empty?: Snippet;
+    loading?: boolean;
+}
+declare const MembershipList: import("svelte").Component<Props, {}, "">;
+type MembershipList = ReturnType<typeof MembershipList>;
+export default MembershipList;
+//# sourceMappingURL=MembershipList.svelte.d.ts.map

package/dist/components/memberships/MembershipList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MembershipList.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/memberships/MembershipList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAE1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,UAAU,qBAAqB;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,UAAU,KAAK;IACb,WAAW,EAAE,qBAAqB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4CD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/nav/FilterChips.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+/**
+ * FilterChips - Horizontal filter navigation
+ * refactored for Material 3
+ *
+ * Provides a row of selectable filter chips for filtering lists.
+ * Supports optional counts and "all" option.
+ */
+import { ripple } from '../../actions/ripple.js';
+import { Icon } from '../display/index.js';
+import type { FilterOption } from './types.js';
+
+export interface Props {
+  /** Available filter options */
+  options: FilterOption[];
+  /** Currently selected value */
+  selected: string;
+  /** Called when selection changes */
+  onchange?: (value: string) => void;
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Show "All" option */
+  showAll?: boolean;
+  /** All option label */
+  allLabel?: string;
+}
+
+const {
+  options,
+  selected,
+  onchange,
+  size = 'md',
+  showAll = false,
+  allLabel = 'All',
+}: Props = $props();
+
+// Build full options list with optional "all"
+const allOptions = $derived.by(() => {
+  if (!showAll) return options;
+
+  const totalCount = options.reduce((sum, opt) => sum + (opt.count ?? 0), 0);
+  const allOption: FilterOption = {
+    value: '',
+    label: allLabel,
+    count: totalCount > 0 ? totalCount : undefined,
+  };
+  return [allOption, ...options];
+});
+
+function handleClick(value: string) {
+  if (value !== selected) {
+    onchange?.(value);
+  }
+}
+</script>
+
+<div class="filter-chips" class:sm={size === 'sm'} role="radiogroup">
+  {#each allOptions as option (option.value)}
+    {@const isActive = option.value === selected}
+    <button
+      type="button"
+      class="filter-chip"
+      class:active={isActive}
+      disabled={option.disabled}
+      role="radio"
+      aria-checked={isActive}
+      onclick={() => handleClick(option.value)}
+      use:ripple
+    >
+      {#if isActive}
+        <span class="chip-icon">
+          <Icon name="check" size={18} />
+        </span>
+      {/if}
+      <span class="chip-label">{option.label}</span>
+      {#if option.count !== undefined}
+        <span class="chip-count">{option.count}</span>
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .filter-chips {
+    display: flex;
+    gap: var(--smrt-spacing-2, 8px);
+    flex-wrap: wrap;
+  }
+
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    height: 32px;
+    padding: 0 var(--smrt-spacing-4, 16px);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface-variant);
+    background-color: transparent;
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-md, 8px);
+    cursor: pointer;
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sm .filter-chip {
+    height: 28px;
+    padding: 0 var(--smrt-spacing-3, 12px);
+    font: var(--smrt-typography-label-medium-font);
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .filter-chip:hover:not(:disabled) {
+    background-color: var(--smrt-color-surface-container-high);
+  }
+
+  .filter-chip.active {
+    background-color: var(--smrt-color-secondary-container);
+    border-color: transparent;
+    color: var(--smrt-color-on-secondary-container);
+    padding-left: var(--smrt-spacing-3, 12px);
+  }
+
+  .sm .filter-chip.active {
+    padding-left: var(--smrt-spacing-2, 8px);
+  }
+
+  .filter-chip:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .chip-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .chip-count {
+    font: var(--smrt-typography-label-small-font);
+    opacity: 0.7;
+    margin-left: -2px;
+  }
+
+  .active .chip-count {
+    color: var(--smrt-color-on-secondary-container);
+  }
+</style>

package/dist/components/nav/FilterChips.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { FilterOption } from './types.js';
+export interface Props {
+    /** Available filter options */
+    options: FilterOption[];
+    /** Currently selected value */
+    selected: string;
+    /** Called when selection changes */
+    onchange?: (value: string) => void;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Show "All" option */
+    showAll?: boolean;
+    /** All option label */
+    allLabel?: string;
+}
+declare const FilterChips: import("svelte").Component<Props, {}, "">;
+type FilterChips = ReturnType<typeof FilterChips>;
+export default FilterChips;
+//# sourceMappingURL=FilterChips.svelte.d.ts.map

package/dist/components/nav/FilterChips.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/nav/FilterChips.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}