@stisocial/ui 0.2.0 → 0.2.1

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 (42) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/TimeSlotPicker/TimeSlotPicker.d.ts +1 -11
  3. package/dist/components/TimeSlotPicker/TimeSlotPicker.js +2 -24
  4. package/dist/components/TimeSlotPicker/index.d.ts +3 -2
  5. package/dist/components/TimeSlotPicker/timeSlots.d.ts +12 -0
  6. package/dist/components/TimeSlotPicker/timeSlots.js +25 -0
  7. package/dist/id/AccountMenu/AccountMenu.css +128 -44
  8. package/dist/id/AccountMenu/AccountMenu.d.ts +37 -9
  9. package/dist/id/AccountMenu/AccountMenu.js +138 -65
  10. package/dist/id/AccountMenu/AccountMenu.module.js +16 -9
  11. package/dist/id/AccountMenu/index.d.ts +2 -2
  12. package/dist/id/AppSwitcher/AppSwitcher.css +153 -31
  13. package/dist/id/AppSwitcher/AppSwitcher.d.ts +31 -6
  14. package/dist/id/AppSwitcher/AppSwitcher.js +90 -37
  15. package/dist/id/AppSwitcher/AppSwitcher.module.js +12 -6
  16. package/dist/id/AppSwitcher/index.d.ts +2 -2
  17. package/dist/id/OrgSwitcher/OrgSwitcher.css +129 -17
  18. package/dist/id/OrgSwitcher/OrgSwitcher.d.ts +30 -5
  19. package/dist/id/OrgSwitcher/OrgSwitcher.js +110 -74
  20. package/dist/id/OrgSwitcher/OrgSwitcher.module.js +11 -7
  21. package/dist/id/OrgSwitcher/index.d.ts +2 -2
  22. package/dist/id/PermissionGate/PermissionGate.css +25 -14
  23. package/dist/id/PermissionGate/PermissionGate.d.ts +3 -1
  24. package/dist/id/PermissionGate/PermissionGate.js +15 -8
  25. package/dist/id/PermissionGate/PermissionGate.module.js +6 -5
  26. package/dist/id/SignInButton/SignInButton.css +179 -0
  27. package/dist/id/SignInButton/SignInButton.d.ts +12 -3
  28. package/dist/id/SignInButton/SignInButton.js +37 -18
  29. package/dist/id/SignInButton/SignInButton.module.js +10 -0
  30. package/dist/id/_internal/StiMark/StiMark.css +28 -0
  31. package/dist/id/_internal/StiMark/StiMark.js +37 -0
  32. package/dist/id/_internal/StiMark/StiMark.module.js +8 -0
  33. package/dist/id/index.d.ts +4 -4
  34. package/dist/id/index.js +4 -4
  35. package/dist/index.d.ts +3 -2
  36. package/dist/index.js +2 -1
  37. package/dist/messages/messages.d.ts +7 -0
  38. package/dist/messages/messages.js +14 -0
  39. package/dist/styles.css +644 -106
  40. package/dist/text/text.d.ts +5 -1
  41. package/dist/text/text.js +8 -2
  42. package/package.json +1 -1
@@ -1,14 +1,21 @@
1
1
  import './AccountMenu.css';
2
2
  // src/id/AccountMenu/AccountMenu.module.css
3
3
  var AccountMenu_module_default = {
4
- "trigger": "sti-AccountMenu-trigger-cc23b",
5
- "card": "sti-AccountMenu-card-db0a8",
6
- "body": "sti-AccountMenu-body-cd3ae",
7
- "identity": "sti-AccountMenu-identity-5173a",
8
- "names": "sti-AccountMenu-names-17aee",
9
- "name": "sti-AccountMenu-name-28b79",
10
- "email": "sti-AccountMenu-email-aafda",
11
- "items": "sti-AccountMenu-items-efec6",
12
- "item": "sti-AccountMenu-item-b7ab2"
4
+ "trigger": "sti-AccountMenu-trigger-b7836",
5
+ "card": "sti-AccountMenu-card-5ba55",
6
+ "panel": "sti-AccountMenu-panel-697e1",
7
+ "identity": "sti-AccountMenu-identity-42ef2",
8
+ "greeting": "sti-AccountMenu-greeting-ced99",
9
+ "fullName": "sti-AccountMenu-fullName-7a91b",
10
+ "email": "sti-AccountMenu-email-c7b78",
11
+ "manage": "sti-AccountMenu-manage-2a04e",
12
+ "group": "sti-AccountMenu-group-8f65f",
13
+ "list": "sti-AccountMenu-list-0d7e5",
14
+ "groupTitle": "sti-AccountMenu-groupTitle-3bc6e",
15
+ "accountRow": "sti-AccountMenu-accountRow-2470c",
16
+ "legal": "sti-AccountMenu-legal-3b18a",
17
+ "legalItem": "sti-AccountMenu-legalItem-5deef",
18
+ "dot": "sti-AccountMenu-dot-af8da",
19
+ "legalLink": "sti-AccountMenu-legalLink-e2e81"
13
20
  };
14
21
  export { AccountMenu_module_default as default };
@@ -1,2 +1,2 @@
1
- import { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps } from "./AccountMenu.js";
2
- export { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps };
1
+ import { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuOtherAccount, AccountMenuPanel, AccountMenuPanelProps, AccountMenuProps } from "./AccountMenu.js";
2
+ export { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuOtherAccount, AccountMenuPanel, AccountMenuPanelProps, AccountMenuProps };
@@ -1,31 +1,58 @@
1
1
  @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
2
2
  @layer sti.components {
3
- .sti-AppSwitcher-grid-1bb9f {
4
- gap: var(--sti-space-1);
3
+ .sti-AppSwitcher-trigger-4e70a {
4
+ flex: none;
5
+ align-self: center;
6
+ }
7
+
8
+ .sti-AppSwitcher-card-225e3 {
9
+ --sti-floating-w: 21rem;
10
+ }
11
+
12
+ .sti-AppSwitcher-panel-a6602 {
13
+ gap: var(--sti-space-3);
14
+ min-inline-size: 0;
15
+ color: var(--sti-fg);
5
16
  font-family: var(--sti-font-text);
17
+ display: grid;
18
+ }
19
+
20
+ .sti-AppSwitcher-title-6d2e0 {
21
+ padding-inline: var(--sti-space-1);
22
+ color: var(--sti-fg);
23
+ font-size: var(--sti-font-size-sm);
24
+ font-weight: var(--sti-font-weight-semibold);
25
+ line-height: var(--sti-line-height-sm);
26
+ margin: 0;
27
+ }
28
+
29
+ .sti-AppSwitcher-grid-337c1 {
30
+ gap: var(--sti-space-1);
31
+ padding: var(--sti-space-1);
32
+ border-radius: var(--sti-radius-lg);
33
+ background: var(--sti-bg-subtle);
6
34
  grid-template-columns: repeat(3, minmax(0, 1fr));
7
35
  margin: 0;
8
- padding: 0;
9
36
  list-style: none;
10
37
  display: grid;
11
38
  }
12
39
 
13
40
  @media (width <= 22.5rem) {
14
- .sti-AppSwitcher-grid-1bb9f {
41
+ .sti-AppSwitcher-grid-337c1 {
15
42
  grid-template-columns: repeat(2, minmax(0, 1fr));
16
43
  }
17
44
  }
18
45
 
19
- .sti-AppSwitcher-cell-419c9 {
46
+ .sti-AppSwitcher-cell-8b890 {
20
47
  min-inline-size: 0;
21
48
  }
22
49
 
23
- .sti-AppSwitcher-app-2a6b7 {
50
+ .sti-AppSwitcher-app-4fff1 {
24
51
  align-items: center;
25
52
  gap: var(--sti-space-2);
26
53
  box-sizing: border-box;
27
- min-block-size: 5.5rem;
28
- padding: var(--sti-space-3) var(--sti-space-2);
54
+ min-block-size: 6rem;
55
+ padding: var(--sti-space-3) var(--sti-space-1) var(--sti-space-2);
29
56
  border: var(--sti-border-width) solid transparent;
30
57
  border-radius: var(--sti-radius-md);
31
58
  color: var(--sti-fg);
@@ -36,73 +63,168 @@
36
63
  flex-direction: column;
37
64
  text-decoration: none;
38
65
  display: flex;
66
+ position: relative;
39
67
  }
40
68
 
41
69
  @media (hover: hover) {
42
- .sti-AppSwitcher-app-2a6b7[data-hovered] {
70
+ .sti-AppSwitcher-app-4fff1[data-hovered] {
43
71
  background: var(--sti-bg-surface-hover);
44
72
  }
45
73
  }
46
74
 
47
- .sti-AppSwitcher-app-2a6b7[data-pressed] {
75
+ .sti-AppSwitcher-app-4fff1[data-pressed] {
48
76
  background: var(--sti-bg-surface-active);
49
77
  }
50
78
 
51
- .sti-AppSwitcher-app-2a6b7[data-current] {
79
+ .sti-AppSwitcher-app-4fff1[data-current] {
52
80
  border-color: var(--sti-border-selected);
53
81
  background: var(--sti-bg-accent-subtle);
54
82
  }
55
83
 
56
- .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
84
+ .sti-AppSwitcher-app-4fff1[data-focus-visible] {
57
85
  outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
58
- outline-offset: var(--sti-focus-ring-offset);
86
+ outline-offset: calc(var(--sti-focus-ring-width) * -1);
59
87
  }
60
88
 
61
- .sti-AppSwitcher-tile-ba8b2 {
62
- inline-size: var(--sti-control-h-lg);
63
- block-size: var(--sti-control-h-lg);
64
- border-radius: var(--sti-radius-md);
65
- background: var(--sti-bg-surface-active);
66
- color: var(--sti-fg);
67
- font-size: var(--sti-icon-lg);
89
+ .sti-AppSwitcher-tile-3c344 {
90
+ --sti-app-tile-bg: var(--sti-bg-surface);
91
+ --sti-app-tile-fg: var(--sti-fg);
92
+ box-sizing: border-box;
93
+ border-radius: var(--sti-radius-lg);
94
+ background: var(--sti-app-tile-bg);
95
+ block-size: 3rem;
96
+ inline-size: 3rem;
97
+ color: var(--sti-app-tile-fg);
98
+ font-family: var(--sti-font-display);
99
+ font-size: var(--sti-font-size-lg);
68
100
  font-weight: var(--sti-font-weight-semibold);
101
+ letter-spacing: var(--sti-tracking-lg);
102
+ box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-border-subtle);
69
103
  flex: none;
70
104
  place-items: center;
105
+ line-height: 1;
71
106
  display: inline-grid;
72
107
  }
73
108
 
74
- .sti-AppSwitcher-app-2a6b7[data-current] .sti-AppSwitcher-tile-ba8b2 {
75
- background: var(--sti-fill-accent);
76
- color: var(--sti-fg-on-accent);
109
+ .sti-AppSwitcher-tile-3c344[data-icon] {
110
+ font-size: var(--sti-icon-lg);
77
111
  }
78
112
 
79
- .sti-AppSwitcher-name-c7544 {
80
- min-inline-size: 0;
81
- font-size: var(--sti-font-size-sm);
113
+ .sti-AppSwitcher-tile-3c344[data-icon] > svg {
114
+ block-size: 1.5rem;
115
+ inline-size: 1.5rem;
116
+ }
117
+
118
+ .sti-AppSwitcher-tile-3c344[data-color="neutral"] {
119
+ --sti-app-tile-bg: var(--sti-bg-surface-active);
120
+ --sti-app-tile-fg: var(--sti-fg);
121
+ }
122
+
123
+ .sti-AppSwitcher-tile-3c344[data-color="neutral-strong"] {
124
+ --sti-app-tile-bg: var(--sti-fill-neutral);
125
+ --sti-app-tile-fg: var(--sti-fg-on-neutral);
126
+ }
127
+
128
+ .sti-AppSwitcher-tile-3c344[data-color="success"] {
129
+ --sti-app-tile-bg: var(--sti-bg-success-subtle);
130
+ --sti-app-tile-fg: var(--sti-fg-success-strong);
131
+ }
132
+
133
+ .sti-AppSwitcher-tile-3c344[data-color="success-strong"] {
134
+ --sti-app-tile-bg: var(--sti-fill-success);
135
+ --sti-app-tile-fg: var(--sti-fg-on-success);
136
+ }
137
+
138
+ .sti-AppSwitcher-tile-3c344[data-color="warning"] {
139
+ --sti-app-tile-bg: var(--sti-bg-warning-subtle);
140
+ --sti-app-tile-fg: var(--sti-fg-warning-strong);
141
+ }
142
+
143
+ .sti-AppSwitcher-tile-3c344[data-color="warning-strong"] {
144
+ --sti-app-tile-bg: var(--sti-fill-warning);
145
+ --sti-app-tile-fg: var(--sti-fg-on-warning);
146
+ }
147
+
148
+ .sti-AppSwitcher-name-d8837 {
149
+ max-inline-size: 100%;
150
+ font-size: var(--sti-font-size-xs);
82
151
  font-weight: var(--sti-font-weight-medium);
83
- line-height: var(--sti-line-height-sm);
152
+ line-height: var(--sti-line-height-xs);
84
153
  overflow-wrap: anywhere;
154
+ -webkit-line-clamp: 2;
155
+ -webkit-box-orient: vertical;
156
+ display: -webkit-box;
157
+ overflow: hidden;
85
158
  }
86
159
 
87
- .sti-AppSwitcher-empty-1bdf0 {
160
+ .sti-AppSwitcher-empty-21386 {
161
+ padding: var(--sti-space-4) var(--sti-space-3);
162
+ border-radius: var(--sti-radius-lg);
163
+ background: var(--sti-bg-subtle);
88
164
  color: var(--sti-fg-muted);
89
165
  font-size: var(--sti-font-size-sm);
90
166
  line-height: var(--sti-line-height-sm);
167
+ text-align: center;
91
168
  margin: 0;
92
169
  }
93
170
 
171
+ .sti-AppSwitcher-more-0361c {
172
+ justify-content: center;
173
+ align-items: center;
174
+ gap: var(--sti-space-1);
175
+ min-block-size: var(--sti-control-h-sm);
176
+ border-radius: var(--sti-radius-pill);
177
+ color: var(--sti-fg-link);
178
+ font-size: var(--sti-font-size-sm);
179
+ font-weight: var(--sti-font-weight-medium);
180
+ line-height: var(--sti-line-height-sm);
181
+ cursor: pointer;
182
+ text-decoration: none;
183
+ display: inline-flex;
184
+ }
185
+
186
+ .sti-AppSwitcher-moreIcon-8c7d2 {
187
+ block-size: 1em;
188
+ inline-size: 1em;
189
+ transition: translate var(--sti-duration-fast) var(--sti-ease-snap);
190
+ }
191
+
192
+ @media (hover: hover) {
193
+ .sti-AppSwitcher-more-0361c[data-hovered] {
194
+ text-underline-offset: .2em;
195
+ text-decoration: underline;
196
+ }
197
+
198
+ .sti-AppSwitcher-more-0361c[data-hovered] .sti-AppSwitcher-moreIcon-8c7d2 {
199
+ translate: .125rem;
200
+ }
201
+ }
202
+
203
+ .sti-AppSwitcher-more-0361c[data-focus-visible] {
204
+ outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
205
+ outline-offset: var(--sti-focus-ring-offset);
206
+ }
207
+
208
+ .sti-AppSwitcher-moreIcon-8c7d2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
209
+ scale: -1 1;
210
+ }
211
+
94
212
  @media (forced-colors: active) {
95
- .sti-AppSwitcher-app-2a6b7[data-current] {
213
+ .sti-AppSwitcher-app-4fff1[data-current] {
96
214
  border-color: highlight;
97
215
  }
98
216
 
99
- .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
217
+ .sti-AppSwitcher-app-4fff1[data-focus-visible], .sti-AppSwitcher-more-0361c[data-focus-visible] {
100
218
  outline-color: highlight;
101
219
  }
220
+
221
+ .sti-AppSwitcher-tile-3c344, .sti-AppSwitcher-grid-337c1 {
222
+ border: var(--sti-border-width) solid CanvasText;
223
+ }
102
224
  }
103
225
 
104
226
  @media (prefers-reduced-motion: reduce) {
105
- .sti-AppSwitcher-app-2a6b7 {
227
+ .sti-AppSwitcher-app-4fff1, .sti-AppSwitcher-moreIcon-8c7d2 {
106
228
  transition: none;
107
229
  }
108
230
  }
@@ -1,3 +1,4 @@
1
+ import { AvatarColor } from "../../components/Avatar/Avatar.js";
1
2
  import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
2
3
  import "../../components/Popover/Popover.js";
3
4
  import { ReactNode } from "react";
@@ -7,13 +8,25 @@ export interface AppSwitcherApp {
7
8
  name: string;
8
9
  /** Uygulamanın adresi. */
9
10
  href: string;
10
- /** Karodaki ikon (süs); yoksa adın baş harfi çizilir. */
11
+ /** Karodaki ikon (süs); yoksa kısaltma yazılır ("STI Office" → "O", "STI ID" → "ID"). */
11
12
  icon?: ReactNode;
13
+ /** Karonun rengi (ikonlu ve kısaltmalı karoda); verilmezse anahtardan kalıcı olarak seçilir (Avatar paleti). */
14
+ color?: AvatarColor;
12
15
  /** Geçerli uygulama: işaretlenir ve ekran okuyucuya bildirilir. */
13
16
  isCurrent?: boolean;
14
17
  }
15
- export interface AppSwitcherProps {
18
+ export interface AppSwitcherPanelProps {
16
19
  apps: readonly AppSwitcherApp[];
20
+ /** Panelin başlığı; varsayılan "STI uygulamaları". */
21
+ title?: string;
22
+ /** Verilirse altta "Tüm uygulamalar" bağlantısı çıkar. */
23
+ moreHref?: string;
24
+ /** Bir bağlantı seçildiğinde çağrılır; açılır kutuda paneli kapatır. */
25
+ onAction?: () => void;
26
+ className?: string;
27
+ id?: string;
28
+ }
29
+ export interface AppSwitcherProps extends Omit<AppSwitcherPanelProps, "onAction" | "id"> {
17
30
  /** Tetikleyicinin adı; varsayılan "STI uygulamaları". */
18
31
  label?: string;
19
32
  size?: "sm" | "md" | "lg";
@@ -21,11 +34,23 @@ export interface AppSwitcherProps {
21
34
  isOpen?: boolean;
22
35
  defaultOpen?: boolean;
23
36
  onOpenChange?: (open: boolean) => void;
24
- className?: string;
37
+ /** Tetikleyici düğmenin kimliği. */
25
38
  id?: string;
26
39
  }
27
40
  /**
28
- * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
29
- * Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
41
+ * Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
42
+ * ilk harf ("Office" → "O").
43
+ */
44
+ export declare function appMonogram(name: string): string;
45
+ /**
46
+ * Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
47
+ * uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
48
+ * ekran çekmecesinde doğrudan kullanabilir.
49
+ */
50
+ export declare function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }: AppSwitcherPanelProps): import("react").JSX.Element;
51
+ /**
52
+ * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
53
+ * (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
54
+ * gezilir.
30
55
  */
31
- export declare function AppSwitcher({ apps, label, size, placement, isOpen, defaultOpen, onOpenChange, className, id }: AppSwitcherProps): import("react").JSX.Element;
56
+ export declare function AppSwitcher({ label, size, placement, isOpen, defaultOpen, onOpenChange, className, id, ...panel }: AppSwitcherProps): import("react").JSX.Element;
@@ -2,6 +2,8 @@
2
2
  import { useMessages } from "../../provider/UIProvider.js";
3
3
  import { IconButton } from "../../components/IconButton/IconButton.js";
4
4
  import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
5
+ import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
6
+ import { avatarColorOf } from "../../components/Avatar/Avatar.js";
5
7
  import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
6
8
  import { AppsIcon } from "../../icons/generated/AppsIcon.js";
7
9
  import AppSwitcher_module_default from "./AppSwitcher.module.js";
@@ -24,16 +26,94 @@ function onGridKeyDown(event) {
24
26
  else if (event.key === "End") next = links.length - 1;
25
27
  else if (ARROWS[event.key]) {
26
28
  const cols = Math.max(1, getComputedStyle(event.currentTarget).gridTemplateColumns.split(" ").length);
27
- next = Math.min(links.length - 1, Math.max(0, index + (ARROWS[event.key]?.(cols) ?? 0)));
29
+ const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
30
+ const step = ARROWS[event.key]?.(cols) ?? 0;
31
+ const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
32
+ next = Math.min(links.length - 1, Math.max(0, index + (rtl && horizontal ? -step : step)));
28
33
  } else return;
29
34
  event.preventDefault();
30
35
  links[next]?.focus();
31
36
  }
32
37
  /**
33
- * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
34
- * Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
38
+ * Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
39
+ * ilk harf ("Office" → "O").
35
40
  */
36
- function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id }) {
41
+ function appMonogram(name) {
42
+ const rest = name.trim().replace(/^sti\s+/i, "").trim() || name.trim();
43
+ const letters = Array.from(rest);
44
+ if (letters.length <= 3 && !/\s/.test(rest)) return rest.toLocaleUpperCase("tr-TR");
45
+ return (letters[0] ?? "").toLocaleUpperCase("tr-TR");
46
+ }
47
+ /**
48
+ * Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
49
+ * uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
50
+ * ekran çekmecesinde doğrudan kullanabilir.
51
+ */
52
+ function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }) {
53
+ const t = useMessages();
54
+ const heading = title ?? t.idAppSwitcher;
55
+ return /* @__PURE__ */ jsxs("div", {
56
+ id,
57
+ className: [AppSwitcher_module_default.panel, className].filter(Boolean).join(" "),
58
+ children: [
59
+ /* @__PURE__ */ jsx("p", {
60
+ className: AppSwitcher_module_default.title,
61
+ children: heading
62
+ }),
63
+ apps.length === 0 ? /* @__PURE__ */ jsx("p", {
64
+ className: AppSwitcher_module_default.empty,
65
+ children: t.idAppSwitcherEmpty
66
+ }) : /* @__PURE__ */ jsx("ul", {
67
+ className: AppSwitcher_module_default.grid,
68
+ "aria-label": heading,
69
+ onKeyDown: onGridKeyDown,
70
+ children: apps.map((app) => /* @__PURE__ */ jsx("li", {
71
+ className: AppSwitcher_module_default.cell,
72
+ children: /* @__PURE__ */ jsxs(Link, {
73
+ className: AppSwitcher_module_default.app,
74
+ href: app.href,
75
+ "data-current": app.isCurrent ? "" : void 0,
76
+ "aria-current": app.isCurrent ? "true" : void 0,
77
+ onPress: onAction,
78
+ children: [
79
+ /* @__PURE__ */ jsx("span", {
80
+ className: AppSwitcher_module_default.tile,
81
+ "data-color": app.color ?? avatarColorOf(app.id),
82
+ "data-icon": app.icon ? "" : void 0,
83
+ "aria-hidden": "true",
84
+ children: app.icon ?? appMonogram(app.name)
85
+ }),
86
+ /* @__PURE__ */ jsx("span", {
87
+ className: AppSwitcher_module_default.name,
88
+ children: app.name
89
+ }),
90
+ app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
91
+ " (",
92
+ t.idAppSwitcherCurrent,
93
+ ")"
94
+ ] }) : null
95
+ ]
96
+ })
97
+ }, app.id))
98
+ }),
99
+ moreHref ? /* @__PURE__ */ jsxs(Link, {
100
+ href: moreHref,
101
+ className: AppSwitcher_module_default.more,
102
+ onPress: onAction,
103
+ children: [t.idAppSwitcherMore, /* @__PURE__ */ jsx(ArrowRightIcon, {
104
+ className: AppSwitcher_module_default.moreIcon,
105
+ "aria-hidden": "true"
106
+ })]
107
+ }) : null
108
+ ]
109
+ });
110
+ }
111
+ /**
112
+ * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
113
+ * (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
114
+ * gezilir.
115
+ */
116
+ function AppSwitcher({ label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id, ...panel }) {
37
117
  const t = useMessages();
38
118
  const name = label ?? t.idAppSwitcher;
39
119
  return /* @__PURE__ */ jsx(Popover$1, {
@@ -43,46 +123,19 @@ function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpe
43
123
  placement,
44
124
  "aria-label": name,
45
125
  size: "md",
126
+ className: AppSwitcher_module_default.card,
46
127
  trigger: /* @__PURE__ */ jsx(IconButton, {
47
128
  id,
48
- className,
129
+ className: [AppSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
49
130
  label: name,
50
131
  icon: /* @__PURE__ */ jsx(AppsIcon, {}),
51
132
  variant: "ghost",
52
133
  size
53
134
  }),
54
- children: apps.length === 0 ? /* @__PURE__ */ jsx("p", {
55
- className: AppSwitcher_module_default.empty,
56
- children: t.idAppSwitcherEmpty
57
- }) : /* @__PURE__ */ jsx("ul", {
58
- className: AppSwitcher_module_default.grid,
59
- onKeyDown: onGridKeyDown,
60
- children: apps.map((app) => /* @__PURE__ */ jsx("li", {
61
- className: AppSwitcher_module_default.cell,
62
- children: /* @__PURE__ */ jsxs(Link, {
63
- className: AppSwitcher_module_default.app,
64
- href: app.href,
65
- "data-current": app.isCurrent ? "" : void 0,
66
- "aria-current": app.isCurrent ? "true" : void 0,
67
- children: [
68
- /* @__PURE__ */ jsx("span", {
69
- className: AppSwitcher_module_default.tile,
70
- "aria-hidden": "true",
71
- children: app.icon ?? Array.from(app.name.trim())[0]?.toLocaleUpperCase("tr-TR")
72
- }),
73
- /* @__PURE__ */ jsx("span", {
74
- className: AppSwitcher_module_default.name,
75
- children: app.name
76
- }),
77
- app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
78
- " (",
79
- t.idAppSwitcherCurrent,
80
- ")"
81
- ] }) : null
82
- ]
83
- })
84
- }, app.id))
135
+ children: (close) => /* @__PURE__ */ jsx(AppSwitcherPanel, {
136
+ ...panel,
137
+ onAction: close
85
138
  })
86
139
  });
87
140
  }
88
- export { AppSwitcher };
141
+ export { AppSwitcher, AppSwitcherPanel, appMonogram };
@@ -1,11 +1,17 @@
1
1
  import './AppSwitcher.css';
2
2
  // src/id/AppSwitcher/AppSwitcher.module.css
3
3
  var AppSwitcher_module_default = {
4
- "grid": "sti-AppSwitcher-grid-1bb9f",
5
- "cell": "sti-AppSwitcher-cell-419c9",
6
- "app": "sti-AppSwitcher-app-2a6b7",
7
- "tile": "sti-AppSwitcher-tile-ba8b2",
8
- "name": "sti-AppSwitcher-name-c7544",
9
- "empty": "sti-AppSwitcher-empty-1bdf0"
4
+ "trigger": "sti-AppSwitcher-trigger-4e70a",
5
+ "card": "sti-AppSwitcher-card-225e3",
6
+ "panel": "sti-AppSwitcher-panel-a6602",
7
+ "title": "sti-AppSwitcher-title-6d2e0",
8
+ "grid": "sti-AppSwitcher-grid-337c1",
9
+ "cell": "sti-AppSwitcher-cell-8b890",
10
+ "app": "sti-AppSwitcher-app-4fff1",
11
+ "tile": "sti-AppSwitcher-tile-3c344",
12
+ "name": "sti-AppSwitcher-name-d8837",
13
+ "empty": "sti-AppSwitcher-empty-21386",
14
+ "more": "sti-AppSwitcher-more-0361c",
15
+ "moreIcon": "sti-AppSwitcher-moreIcon-8c7d2"
10
16
  };
11
17
  export { AppSwitcher_module_default as default };
@@ -1,2 +1,2 @@
1
- import { AppSwitcher, AppSwitcherApp, AppSwitcherProps } from "./AppSwitcher.js";
2
- export { AppSwitcher, AppSwitcherApp, AppSwitcherProps };
1
+ import { AppSwitcher, AppSwitcherApp, AppSwitcherPanel, AppSwitcherPanelProps, AppSwitcherProps, appMonogram } from "./AppSwitcher.js";
2
+ export { AppSwitcher, AppSwitcherApp, AppSwitcherPanel, AppSwitcherPanelProps, AppSwitcherProps, appMonogram };