pixelize-design-library 2.4.2-beta.29 → 2.4.2-beta.30

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 (26) hide show
  1. package/dist/Components/AppSwitcher/AppMark.d.ts +19 -0
  2. package/dist/Components/AppSwitcher/AppMark.js +62 -0
  3. package/dist/Components/AppSwitcher/AppSwitcher.d.ts +4 -0
  4. package/dist/Components/AppSwitcher/AppSwitcher.js +315 -0
  5. package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts +64 -0
  6. package/dist/Components/AppSwitcher/AppSwitcherProps.js +86 -0
  7. package/dist/Components/AppSwitcher/useAppSwitcherShortcut.d.ts +3 -0
  8. package/dist/Components/AppSwitcher/useAppSwitcherShortcut.js +31 -0
  9. package/dist/Components/AppearanceSettings/AppearanceSettings.js +2 -1
  10. package/dist/Components/SelectV2/SelectV2.js +13 -5
  11. package/dist/Theme/tokens/builders/outlineRung.d.ts +8 -0
  12. package/dist/Theme/tokens/builders/outlineRung.js +21 -0
  13. package/dist/Theme/tokens/builders/rowStates.d.ts +13 -0
  14. package/dist/Theme/tokens/builders/rowStates.js +19 -0
  15. package/dist/esm/Components/AppSwitcher/AppMark.js +56 -0
  16. package/dist/esm/Components/AppSwitcher/AppSwitcher.js +280 -0
  17. package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js +78 -0
  18. package/dist/esm/Components/AppSwitcher/useAppSwitcherShortcut.js +27 -0
  19. package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js +2 -1
  20. package/dist/esm/Components/SelectV2/SelectV2.js +13 -5
  21. package/dist/esm/Theme/tokens/builders/outlineRung.js +20 -0
  22. package/dist/esm/Theme/tokens/builders/rowStates.js +15 -0
  23. package/dist/esm/index.js +7 -1
  24. package/dist/index.d.ts +7 -1
  25. package/dist/index.js +18 -4
  26. package/package.json +6 -2
@@ -4,7 +4,7 @@ import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverConte
4
4
  import { ChevronDown } from "lucide-react";
5
5
  import { useCustomTheme } from "../../Theme/useCustomTheme.js";
6
6
  import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
7
- import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
7
+ import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
8
8
  import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
9
9
  import { getFieldStateStyles } from "../Common/fieldStyles.js";
10
10
  import { TextLabel } from "../Common/FormLabel.js";
@@ -19,10 +19,16 @@ const SIZE_MAP = {
19
19
  const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
20
20
  // Derived from the option's own id (not its index) so it stays stable across filtering/reordering.
21
21
  const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
22
- const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, activeBg, renderOption, onSelect, onActivate, }) {
22
+ const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, renderOption, onSelect, onActivate, }) {
23
23
  return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !isMulti ? 600 : 500, color: isSelected && !isMulti
24
24
  ? theme.colors.accentText
25
- : theme.colors.text[700], bg: isActive ? activeBg : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? (_jsx(Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
25
+ : theme.colors.text[700], bg: isSelected && !isMulti
26
+ ? isActive
27
+ ? backgrounds.selectedActive
28
+ : backgrounds.selected
29
+ : isActive
30
+ ? backgrounds.active
31
+ : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? (_jsx(Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
26
32
  });
27
33
  export default function SelectV2(props) {
28
34
  var _a, _b;
@@ -196,7 +202,9 @@ export default function SelectV2(props) {
196
202
  const activeOption = filteredOptions[activeIndex];
197
203
  const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
198
204
  const listScrollStyles = useMemo(() => scrollbarStyles(theme.colors, "overlay"), [theme]);
199
- const activeOptionBg = useMemo(() => resolveHoverTint(theme.colors.primary[500], theme.colors.backgroundColor.light), [theme]);
205
+ // primary[500] is the filled-button rung, so resolveHoverTint short-circuited and every hovered
206
+ // row became a solid brand fill under unresolved ink.
207
+ const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme]);
200
208
  const defaultTriggerContent = () => {
201
209
  var _a;
202
210
  if (props.isMulti) {
@@ -216,6 +224,6 @@ export default function SelectV2(props) {
216
224
  setActiveIndex(0);
217
225
  }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && (_jsx(Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {
218
226
  var _a;
219
- return (_jsx(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, activeBg: activeOptionBg, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
227
+ return (_jsx(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
220
228
  })] })] }) })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
221
229
  }
@@ -135,3 +135,23 @@ export function settleAcross(hex, surfaces, target) {
135
135
  }
136
136
  return settled;
137
137
  }
138
+ /**
139
+ * A pure-grey surface sitting `target` contrast away from `backdrop`. Binary search, not a walk:
140
+ * `liftToContrast` cannot move a seed already at lightness 0 or 100, and a pure-white panel seeded
141
+ * itself straight to black. Neutral on purpose — the light palettes are hand-authored and tinted,
142
+ * so lifting one of their surface rungs turns a selected row into a saturated brand block, while
143
+ * the derived dark palettes land on grey and look right.
144
+ */
145
+ export function neutralStep(backdrop, target) {
146
+ const grey = (l) => withLightness("#808080", l, 0);
147
+ let lo = hexToHsl(backdrop).l;
148
+ let hi = relativeLuminance(backdrop) < 0.5 ? 100 : 0;
149
+ for (let i = 0; i < 20; i += 1) {
150
+ const mid = (lo + hi) / 2;
151
+ if (contrastRatio(grey(mid), backdrop) < target)
152
+ lo = mid;
153
+ else
154
+ hi = mid;
155
+ }
156
+ return grey(hi);
157
+ }
@@ -0,0 +1,15 @@
1
+ import { resolveHoverTint } from "./outlineRung.js";
2
+ /**
3
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
4
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
5
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
6
+ * solid brand fill under unreadable text.
7
+ */
8
+ export const listRowBackgrounds = (colors) => {
9
+ const selected = colors.backgroundColor.tertiary;
10
+ return {
11
+ active: resolveHoverTint(colors.gray[50], colors.backgroundColor.light),
12
+ selected,
13
+ selectedActive: resolveHoverTint(selected, selected),
14
+ };
15
+ };
package/dist/esm/index.js CHANGED
@@ -86,6 +86,7 @@ import FilePreview, { FilePreviewTrigger, } from "./Components/FilePreview/FileP
86
86
  import StageProgress from "./Components/StageProgress/StageProgress.js";
87
87
  import StageItem from "./Components/StageProgress/StageItem.js";
88
88
  import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher.js";
89
+ import AppSwitcher from "./Components/AppSwitcher/AppSwitcher.js";
89
90
  import UpgradeButton from "./Components/UpgradeButton/UpgradeButton.js";
90
91
  import PlanPill from "./Components/PlanPill/PlanPill.js";
91
92
  import PlanBadge from "./Components/PlanBadge/PlanBadge.js";
@@ -99,7 +100,7 @@ import SignInActivityTable from "./Components/SignInActivityTable/SignInActivity
99
100
  import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails.js";
100
101
  export {
101
102
  // components
102
- Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp,
103
+ Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, AppSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp,
103
104
  // hooks
104
105
  useSidebarPrefs, useIsTruncated,
105
106
  // themes
@@ -126,6 +127,9 @@ export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette.js";
126
127
  // status chips and generated avatars. Consumers pass a scale/seed and get tokens that already
127
128
  // clear the bar, instead of pinning hexes that go stale when a palette moves.
128
129
  export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung.js";
130
+ // The three backgrounds a selectable row rests on, for a consumer's own list. Neutral by
131
+ // construction, so the canvas ink stays readable on every one of them.
132
+ export { listRowBackgrounds } from "./Theme/tokens/builders/rowStates.js";
129
133
  // The two-tone `:focus-visible` indicator, derived per brand per mode. `buildFocusRing` resolves
130
134
  // the pair from a palette; `focusVisibleStyles` is the ready-made Chakra pseudo-selector block a
131
135
  // consumer's own control can spread to get the same ring Button draws. Both exist because Chakra's
@@ -148,6 +152,8 @@ export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexTo
148
152
  // or a summary line, from the SAME keys, tokens and phrasing the calendar itself paints and
149
153
  // announces — a hand-copied legend is how a legend goes stale.
150
154
  export { DAY_STATE_KEYS, DAY_CLASS as CALENDAR_DAY_CLASS, isDayStateKey, resolveDayStateVisual, describeDayStates, } from "./Components/DatePicker/dayStates.js";
155
+ export { appInitials, filterApps, matchesShortcut, formatShortcut, buildSuiteApps, } from "./Components/AppSwitcher/AppSwitcherProps.js";
156
+ export { useAppSwitcherShortcut } from "./Components/AppSwitcher/useAppSwitcherShortcut.js";
151
157
  export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
152
158
  export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
153
159
  export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
package/dist/index.d.ts CHANGED
@@ -83,6 +83,7 @@ import FilePreview, { FilePreviewTrigger } from "./Components/FilePreview/FilePr
83
83
  import StageProgress from "./Components/StageProgress/StageProgress";
84
84
  import StageItem from "./Components/StageProgress/StageItem";
85
85
  import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
86
+ import AppSwitcher from "./Components/AppSwitcher/AppSwitcher";
86
87
  import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
87
88
  import PlanPill from "./Components/PlanPill/PlanPill";
88
89
  import PlanBadge from "./Components/PlanBadge/PlanBadge";
@@ -94,7 +95,7 @@ import RolesPermission from "./Components/RolesPermission/RolesPermission";
94
95
  import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
95
96
  import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
96
97
  import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
97
- export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
98
+ export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, AppSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
98
99
  export default withTheme;
99
100
  export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
100
101
  export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
@@ -112,6 +113,8 @@ export { brandThemes } from "./Theme";
112
113
  export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";
113
114
  export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette";
114
115
  export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung";
116
+ export { listRowBackgrounds } from "./Theme/tokens/builders/rowStates";
117
+ export type { RowStateBackgrounds } from "./Theme/tokens/builders/rowStates";
115
118
  export { buildFocusRing, settleBetween, withFocusRing } from "./Theme/tokens/builders/focusRing";
116
119
  export type { FocusRingSource } from "./Theme/tokens/builders/focusRing";
117
120
  export { focusRingShadow, focusVisibleRing, focusVisibleStyles, FOCUS_VISIBLE_OVER_STATE, FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH, } from "./Theme/chakra/focusRing.styles";
@@ -166,6 +169,9 @@ export type { FileUploaderProps, MimeExtension } from "./Components/FileUpload/F
166
169
  export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, } from "./Components/SideBar/SideBarProps";
167
170
  export type { NavbarProps, MenuProps as NavbarMenuProps } from "./Components/NavigationBar/NavigationBarProps";
168
171
  export type { HeaderProps } from "./Components/Header/HeaderProps";
172
+ export { appInitials, filterApps, matchesShortcut, formatShortcut, buildSuiteApps, } from "./Components/AppSwitcher/AppSwitcherProps";
173
+ export { useAppSwitcherShortcut } from "./Components/AppSwitcher/useAppSwitcherShortcut";
174
+ export type { AppOption, AppIcon, AppSwitcherProps, SuiteAppSource, SuiteUrlOptions, } from "./Components/AppSwitcher/AppSwitcherProps";
169
175
  export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar";
170
176
  export type { ScrollbarVariant, ScrollbarStyle, } from "./Theme/tokens/builders/scrollbar";
171
177
  export type { ScrollbarBoxProps } from "./Components/ScrollbarBox/ScrollbarBox";
package/dist/index.js CHANGED
@@ -40,10 +40,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
40
40
  return (mod && mod.__esModule) ? mod : { "default": mod };
41
41
  };
42
42
  Object.defineProperty(exports, "__esModule", { value: true });
43
- exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
44
- exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
45
- exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = void 0;
46
- exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = void 0;
43
+ exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.AppSwitcher = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
44
+ exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = void 0;
45
+ exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.listRowBackgrounds = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
46
+ exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = void 0;
47
47
  const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
48
48
  exports.Accordian = Accordion_1.default;
49
49
  const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -230,6 +230,8 @@ const StageItem_1 = __importDefault(require("./Components/StageProgress/StageIte
230
230
  exports.StageItem = StageItem_1.default;
231
231
  const OrgSwitcher_1 = __importDefault(require("./Components/OrgSwitcher/OrgSwitcher"));
232
232
  exports.OrgSwitcher = OrgSwitcher_1.default;
233
+ const AppSwitcher_1 = __importDefault(require("./Components/AppSwitcher/AppSwitcher"));
234
+ exports.AppSwitcher = AppSwitcher_1.default;
233
235
  const UpgradeButton_1 = __importDefault(require("./Components/UpgradeButton/UpgradeButton"));
234
236
  exports.UpgradeButton = UpgradeButton_1.default;
235
237
  const PlanPill_1 = __importDefault(require("./Components/PlanPill/PlanPill"));
@@ -291,6 +293,10 @@ var outlineRung_1 = require("./Theme/tokens/builders/outlineRung");
291
293
  Object.defineProperty(exports, "AA_NON_TEXT", { enumerable: true, get: function () { return outlineRung_1.AA_NON_TEXT; } });
292
294
  Object.defineProperty(exports, "liftToContrast", { enumerable: true, get: function () { return outlineRung_1.liftToContrast; } });
293
295
  Object.defineProperty(exports, "withOutlineRung", { enumerable: true, get: function () { return outlineRung_1.withOutlineRung; } });
296
+ // The three backgrounds a selectable row rests on, for a consumer's own list. Neutral by
297
+ // construction, so the canvas ink stays readable on every one of them.
298
+ var rowStates_1 = require("./Theme/tokens/builders/rowStates");
299
+ Object.defineProperty(exports, "listRowBackgrounds", { enumerable: true, get: function () { return rowStates_1.listRowBackgrounds; } });
294
300
  // The two-tone `:focus-visible` indicator, derived per brand per mode. `buildFocusRing` resolves
295
301
  // the pair from a palette; `focusVisibleStyles` is the ready-made Chakra pseudo-selector block a
296
302
  // consumer's own control can spread to get the same ring Button draws. Both exist because Chakra's
@@ -357,6 +363,14 @@ Object.defineProperty(exports, "CALENDAR_DAY_CLASS", { enumerable: true, get: fu
357
363
  Object.defineProperty(exports, "isDayStateKey", { enumerable: true, get: function () { return dayStates_1.isDayStateKey; } });
358
364
  Object.defineProperty(exports, "resolveDayStateVisual", { enumerable: true, get: function () { return dayStates_1.resolveDayStateVisual; } });
359
365
  Object.defineProperty(exports, "describeDayStates", { enumerable: true, get: function () { return dayStates_1.describeDayStates; } });
366
+ var AppSwitcherProps_1 = require("./Components/AppSwitcher/AppSwitcherProps");
367
+ Object.defineProperty(exports, "appInitials", { enumerable: true, get: function () { return AppSwitcherProps_1.appInitials; } });
368
+ Object.defineProperty(exports, "filterApps", { enumerable: true, get: function () { return AppSwitcherProps_1.filterApps; } });
369
+ Object.defineProperty(exports, "matchesShortcut", { enumerable: true, get: function () { return AppSwitcherProps_1.matchesShortcut; } });
370
+ Object.defineProperty(exports, "formatShortcut", { enumerable: true, get: function () { return AppSwitcherProps_1.formatShortcut; } });
371
+ Object.defineProperty(exports, "buildSuiteApps", { enumerable: true, get: function () { return AppSwitcherProps_1.buildSuiteApps; } });
372
+ var useAppSwitcherShortcut_1 = require("./Components/AppSwitcher/useAppSwitcherShortcut");
373
+ Object.defineProperty(exports, "useAppSwitcherShortcut", { enumerable: true, get: function () { return useAppSwitcherShortcut_1.useAppSwitcherShortcut; } });
360
374
  var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
361
375
  Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
362
376
  Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.4.2-beta.29",
3
+ "version": "2.4.2-beta.30",
4
4
  "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
5
5
  "keywords": [
6
6
  "react",
@@ -90,10 +90,14 @@
90
90
  "moduleNameMapper": {
91
91
  "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
92
92
  },
93
+ "modulePathIgnorePatterns": [
94
+ "<rootDir>/.worktrees/"
95
+ ],
93
96
  "testPathIgnorePatterns": [
94
97
  "/node_modules/",
95
98
  "<rootDir>/dist/",
96
- "<rootDir>/.claude/"
99
+ "<rootDir>/.claude/",
100
+ "<rootDir>/.worktrees/"
97
101
  ],
98
102
  "testMatch": [
99
103
  "**/__tests__/**/*.[jt]s?(x)",