@scripso-homepad/ui 0.4.10 → 0.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/index.cjs +122 -43
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +124 -45
  6. package/dist/index.js.map +1 -1
  7. package/dist/web/index.cjs +45 -33
  8. package/dist/web/index.cjs.map +1 -1
  9. package/dist/web/index.d.cts +2 -1
  10. package/dist/web/index.d.ts +2 -1
  11. package/dist/web/index.js +45 -33
  12. package/dist/web/index.js.map +1 -1
  13. package/package.json +3 -2
  14. package/src/components/Calendar.tsx +10 -2
  15. package/src/components/DatePicker.tsx +3 -3
  16. package/src/components/Select.tsx +133 -38
  17. package/src/theme/select.ts +1 -1
  18. package/src/utils/calendarDays.ts +15 -6
  19. package/src/web/components/Badge.tsx +1 -1
  20. package/src/web/components/ConfirmModal.tsx +2 -2
  21. package/src/web/components/Drawer.stories.tsx +7 -7
  22. package/src/web/components/Drawer.tsx +2 -2
  23. package/src/web/components/HistoryTimeline.tsx +2 -2
  24. package/src/web/components/Modal.stories.tsx +1 -1
  25. package/src/web/components/Modal.tsx +27 -10
  26. package/src/web/components/Pagination.tsx +2 -2
  27. package/src/web/components/TableActionButton.tsx +1 -1
  28. package/src/web/components/TableActionsMenu.tsx +1 -1
  29. package/src/web/components/TableIconText.tsx +1 -1
  30. package/src/web/components/Toaster.stories.tsx +7 -7
  31. package/src/web/components/table/constants.ts +2 -2
  32. package/src/web/layout/AppHeader.tsx +1 -1
  33. package/src/web/layout/BuildingSelect.tsx +2 -2
  34. package/src/web/layout/DashboardLayout.stories.tsx +1 -1
  35. package/src/web/layout/SidebarNavItem.tsx +1 -1
  36. package/src/web/layout/SidebarUserCard.tsx +3 -3
  37. package/src/web/styles/typography.css +99 -0
package/src/web/components/Toaster.stories.tsx CHANGED
@@ -27,35 +27,35 @@ function ToastTriggerPanel() {
27
27
  return (
28
28
  <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
29
29
  <div className="mx-auto flex w-full max-w-md flex-col gap-3 rounded-2xl border border-storm-gray-50 bg-white p-6 shadow-sm">
30
- <h2 className="font-sans text-lg font-bold text-slate-blue">Toast preview</h2>
31
- <p className="font-sans text-sm text-storm-gray-400">
30
+ <h2 className="typography-title-sm text-slate-blue">Toast preview</h2>
31
+ <p className="typography-body text-storm-gray-400">
32
32
  Click a button to show a toast in the bottom-right corner.
33
33
  </p>
34
34
  <div className="flex flex-col gap-2">
35
35
  <button
36
36
  type="button"
37
- className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
37
+ className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left typography-14 font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
38
38
  onClick={() => toast.success(toastCopy.title, { description: toastCopy.description })}
39
39
  >
40
40
  Success
41
41
  </button>
42
42
  <button
43
43
  type="button"
44
- className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
44
+ className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left typography-14 font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
45
45
  onClick={() => toast.error(toastCopy.title, { description: toastCopy.description })}
46
46
  >
47
47
  Error
48
48
  </button>
49
49
  <button
50
50
  type="button"
51
- className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
51
+ className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left typography-14 font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
52
52
  onClick={() => toast.warning(toastCopy.title, { description: toastCopy.description })}
53
53
  >
54
54
  Warning
55
55
  </button>
56
56
  <button
57
57
  type="button"
58
- className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
58
+ className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left typography-14 font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
59
59
  onClick={() => toast.info(toastCopy.title, { description: toastCopy.description })}
60
60
  >
61
61
  Info
@@ -95,7 +95,7 @@ export const TitleOnly: Story = {
95
95
  <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
96
96
  <button
97
97
  type="button"
98
- className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 text-sm font-medium text-slate-blue"
98
+ className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 typography-14 font-medium text-slate-blue"
99
99
  onClick={() => toast.success('Request approved.')}
100
100
  >
101
101
  Show title-only toast
package/src/web/components/table/constants.ts CHANGED
@@ -21,10 +21,10 @@ export const tableShellClassName = 'flex flex-col overflow-hidden border bg-stor
21
21
  export const tableFooterShellClassName = 'overflow-hidden rounded-b-xl border bg-storm-gray-0';
22
22
 
23
23
  export const tableHeaderClassName =
24
- 'bg-storm-gray-0 font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400';
24
+ 'bg-storm-gray-0 typography-12 font-normal tracking-normal text-storm-gray-400';
25
25
 
26
26
  export const tableBodyClassName =
27
- 'bg-white font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900';
27
+ 'bg-white typography-14 font-medium tracking-normal text-storm-gray-900';
28
28
 
29
29
  export const tableAlignClasses = {
30
30
  left: '',
package/src/web/layout/AppHeader.tsx CHANGED
@@ -72,7 +72,7 @@ export function AppHeader({
72
72
  className,
73
73
  )}
74
74
  >
75
- <h1 className="truncate text-xl font-bold text-slate-blue">{title}</h1>
75
+ <h1 className="truncate typography-title text-slate-blue">{title}</h1>
76
76
 
77
77
  <div className="flex shrink-0 items-center gap-3">
78
78
  {hasBuildingSelect ? (
package/src/web/layout/BuildingSelect.tsx CHANGED
@@ -141,7 +141,7 @@ export function BuildingSelect({
141
141
  )}
142
142
  >
143
143
  {buildingIcon ?? <BuildingIcon className="shrink-0 text-navy" />}
144
- <span className="min-w-0 flex-1 truncate text-sm font-medium text-slate-blue">
144
+ <span className="min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue">
145
145
  {displayLabel}
146
146
  </span>
147
147
  {chevronIcon ?? (
@@ -190,7 +190,7 @@ export function BuildingSelect({
190
190
  }}
191
191
  onClick={() => selectOption(option)}
192
192
  className={cn(
193
- 'flex w-full rounded-lg px-3 py-2.5 text-left text-sm font-medium text-slate-blue transition-colors',
193
+ 'flex w-full rounded-lg px-3 py-2.5 text-left typography-14 font-medium text-slate-blue transition-colors',
194
194
  !option.disabled && 'cursor-pointer hover:bg-storm-gray-50',
195
195
  (isSelected || isHighlighted) && !option.disabled && 'bg-storm-gray-50',
196
196
  option.disabled && 'cursor-not-allowed opacity-50',
package/src/web/layout/DashboardLayout.stories.tsx CHANGED
@@ -69,7 +69,7 @@ function DashboardLayoutDemo() {
69
69
  }}
70
70
  >
71
71
  <div className="rounded-xl border border-storm-gray-50 bg-white p-6">
72
- <p className="text-sm text-storm-gray-500">Page content goes here.</p>
72
+ <p className="typography-14 text-storm-gray-500">Page content goes here.</p>
73
73
  </div>
74
74
  </DashboardLayout>
75
75
  </WebLayoutCanvas>
package/src/web/layout/SidebarNavItem.tsx CHANGED
@@ -47,7 +47,7 @@ export function SidebarNavItem({ item, isOpen, onNavigate }: SidebarNavItemProps
47
47
  <span className="flex size-5 shrink-0 items-center justify-center">{item.icon}</span>
48
48
  <span
49
49
  className={cn(
50
- 'overflow-hidden text-sm font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out',
50
+ 'overflow-hidden typography-14 font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out',
51
51
  isOpen ? 'max-w-[180px] opacity-100' : 'max-w-0 opacity-0',
52
52
  )}
53
53
  >
package/src/web/layout/SidebarUserCard.tsx CHANGED
@@ -41,7 +41,7 @@ export function SidebarUserCard({
41
41
  )}
42
42
  >
43
43
  <div
44
- className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white"
44
+ className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white"
45
45
  aria-hidden
46
46
  >
47
47
  {initials}
@@ -49,8 +49,8 @@ export function SidebarUserCard({
49
49
  {isOpen ? (
50
50
  <>
51
51
  <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
52
- <p className="truncate text-sm font-bold text-white">{user.fullName}</p>
53
- <p className="truncate text-xs text-storm-gray-100">{user.email}</p>
52
+ <p className="truncate typography-14 font-bold text-white">{user.fullName}</p>
53
+ <p className="truncate typography-12 text-storm-gray-100">{user.email}</p>
54
54
  </div>
55
55
  <button
56
56
  type="button"
package/src/web/styles/typography.css ADDED
@@ -0,0 +1,99 @@
1
+ @layer components {
2
+ .typography-12 {
3
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
4
+ font-size: 12px;
5
+ line-height: 16px;
6
+ letter-spacing: 0;
7
+ }
8
+
9
+ .typography-14 {
10
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
11
+ font-size: 14px;
12
+ line-height: 19px;
13
+ letter-spacing: 0;
14
+ }
15
+
16
+ .typography-18 {
17
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
18
+ font-size: 18px;
19
+ line-height: 24px;
20
+ letter-spacing: 0;
21
+ }
22
+
23
+ .typography-20 {
24
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
25
+ font-size: 20px;
26
+ line-height: 27px;
27
+ letter-spacing: 0;
28
+ }
29
+
30
+ .typography-24 {
31
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
32
+ font-size: 24px;
33
+ line-height: 25px;
34
+ letter-spacing: 0;
35
+ }
36
+
37
+ .typography-32 {
38
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
39
+ font-size: 32px;
40
+ line-height: 34px;
41
+ letter-spacing: 0;
42
+ }
43
+
44
+ .typography-body {
45
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
46
+ font-size: 14px;
47
+ line-height: 19px;
48
+ letter-spacing: 0;
49
+ font-weight: 400;
50
+ }
51
+
52
+ .typography-body-medium {
53
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
54
+ font-size: 14px;
55
+ line-height: 19px;
56
+ letter-spacing: 0;
57
+ font-weight: 500;
58
+ }
59
+
60
+ .typography-caption {
61
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
62
+ font-size: 12px;
63
+ line-height: 16px;
64
+ letter-spacing: 0;
65
+ font-weight: 400;
66
+ }
67
+
68
+ .typography-title-sm {
69
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
70
+ font-size: 18px;
71
+ line-height: 24px;
72
+ letter-spacing: 0;
73
+ font-weight: 700;
74
+ }
75
+
76
+ .typography-title {
77
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
78
+ font-size: 20px;
79
+ line-height: 27px;
80
+ letter-spacing: 0;
81
+ font-weight: 700;
82
+ }
83
+
84
+ .typography-title-lg {
85
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
86
+ font-size: 24px;
87
+ line-height: 25px;
88
+ letter-spacing: 0;
89
+ font-weight: 700;
90
+ }
91
+
92
+ .typography-display {
93
+ font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
94
+ font-size: 32px;
95
+ line-height: 34px;
96
+ letter-spacing: 0;
97
+ font-weight: 700;
98
+ }
99
+ }