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.
- package/dist/Components/AppSwitcher/AppMark.d.ts +19 -0
- package/dist/Components/AppSwitcher/AppMark.js +62 -0
- package/dist/Components/AppSwitcher/AppSwitcher.d.ts +4 -0
- package/dist/Components/AppSwitcher/AppSwitcher.js +315 -0
- package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts +64 -0
- package/dist/Components/AppSwitcher/AppSwitcherProps.js +86 -0
- package/dist/Components/AppSwitcher/useAppSwitcherShortcut.d.ts +3 -0
- package/dist/Components/AppSwitcher/useAppSwitcherShortcut.js +31 -0
- package/dist/Components/AppearanceSettings/AppearanceSettings.js +2 -1
- package/dist/Components/SelectV2/SelectV2.js +13 -5
- package/dist/Theme/tokens/builders/outlineRung.d.ts +8 -0
- package/dist/Theme/tokens/builders/outlineRung.js +21 -0
- package/dist/Theme/tokens/builders/rowStates.d.ts +13 -0
- package/dist/Theme/tokens/builders/rowStates.js +19 -0
- package/dist/esm/Components/AppSwitcher/AppMark.js +56 -0
- package/dist/esm/Components/AppSwitcher/AppSwitcher.js +280 -0
- package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js +78 -0
- package/dist/esm/Components/AppSwitcher/useAppSwitcherShortcut.js +27 -0
- package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js +2 -1
- package/dist/esm/Components/SelectV2/SelectV2.js +13 -5
- package/dist/esm/Theme/tokens/builders/outlineRung.js +20 -0
- package/dist/esm/Theme/tokens/builders/rowStates.js +15 -0
- package/dist/esm/index.js +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +18 -4
- 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 {
|
|
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,
|
|
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:
|
|
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
|
-
|
|
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,
|
|
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.
|
|
44
|
-
exports.
|
|
45
|
-
exports.
|
|
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.
|
|
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)",
|