@bpfdev/oly-ui 1.0.1 → 1.0.3

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 (8) hide show
  1. package/README.md +4 -0
  2. package/dist/index.d.mts +69 -17
  3. package/dist/index.d.ts +69 -17
  4. package/dist/index.js +285 -2527
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +292 -2530
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +66 -59
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # @bpfdev/oly-ui
2
2
 
3
3
  > **npm:** [@bpfdev/oly-ui](https://www.npmjs.com/package/@bpfdev/oly-ui) · **private** (requires membership of the `@bpfdev/oly-ui` npm org)
4
+ >
5
+ > **Live docs:** [falcon-oly-storybook.web.app](https://falcon-oly-storybook.web.app/?path=/story/packages) — interactive component playground with controls, code snippets, and prop tables for every exported component.
4
6
 
5
7
  A production-ready React component library built on top of [MUI](https://mui.com/), designed for data-heavy dashboards and enterprise UIs. Ships with full TypeScript types, tree-shakeable ESM + CJS bundles, and an optional Tailwind CSS preset.
6
8
 
@@ -52,6 +54,8 @@ function App() {
52
54
 
53
55
  ## Components
54
56
 
57
+ > For live interactive examples, prop tables, and copy-paste code snippets for every component, visit the **[Storybook documentation →](https://falcon-oly-storybook.web.app/?path=/story/packages)**
58
+
55
59
  ### FalconButton
56
60
 
57
61
  A MUI `Button` wrapper with a built-in loading state.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ButtonProps, PaletteMode, Direction } from '@mui/material';
2
+ import { SxProps, Theme, ButtonProps } from '@mui/material';
3
3
  import { ReactNode, ReactElement } from 'react';
4
4
  import { GridColDef } from '@mui/x-data-grid';
5
5
 
@@ -17,7 +17,55 @@ interface FalconMultiSelectOption {
17
17
  id: number;
18
18
  name: string;
19
19
  }
20
- interface FalconMultiSelectProps {
20
+ interface FalconMultiSelectStyleProps {
21
+ /** Trigger button background color. Default: `#EFEFEF` */
22
+ triggerBg?: string;
23
+ /** Trigger button text and icon color. Default: inherits from theme */
24
+ triggerColor?: string;
25
+ /** Trigger button min-width. Default: `250` */
26
+ triggerMinWidth?: number | string;
27
+ /** Trigger button border radius. Default: `'6px'` */
28
+ triggerBorderRadius?: string | number;
29
+ /** Extra sx overrides for the trigger button */
30
+ triggerSx?: SxProps<Theme>;
31
+ /** Popper panel width. Default: `300` */
32
+ popperWidth?: number | string;
33
+ /** Popper panel border color (light mode). Default: `'#e1e4e8'` */
34
+ popperBorderColor?: string;
35
+ /** Popper panel border color (dark mode). Default: `'#30363d'` */
36
+ popperBorderColorDark?: string;
37
+ /** Popper panel background (light mode). Default: `'#fff'` */
38
+ popperBg?: string;
39
+ /** Popper panel background (dark mode). Default: `'#1c2128'` */
40
+ popperBgDark?: string;
41
+ /** Popper panel text color (light mode). Default: `'#24292e'` */
42
+ popperColor?: string;
43
+ /** Popper panel text color (dark mode). Default: `'#c9d1d9'` */
44
+ popperColorDark?: string;
45
+ /** Option row border color. Default: `'#D6D6D6'` */
46
+ optionBorderColor?: string;
47
+ /** Option row height. Default: `60` */
48
+ optionHeight?: number | string;
49
+ /** Checkbox unchecked color. Default: `'green'` */
50
+ checkboxColor?: string;
51
+ /** Checkbox checked color. Default: `'#6750A4'` */
52
+ checkboxCheckedColor?: string;
53
+ /** Search field label. Default: `'Search State'` */
54
+ searchLabel?: string;
55
+ /** Search icon fill color. Default: `'#49454F'` */
56
+ searchIconColor?: string;
57
+ /** Apply button background. Default: `'#333'` */
58
+ applyBg?: string;
59
+ /** Apply button text color. Default: `'white'` */
60
+ applyColor?: string;
61
+ /** Apply button label. Default: `'Apply'` */
62
+ applyLabel?: string;
63
+ /** Clear button text color. Default: `'black'` */
64
+ clearColor?: string;
65
+ /** Clear button label. Default: `'Clear'` */
66
+ clearLabel?: string;
67
+ }
68
+ interface FalconMultiSelectProps extends FalconMultiSelectStyleProps {
21
69
  label: string;
22
70
  /** Currently selected items (controlled) */
23
71
  data: FalconMultiSelectOption[];
@@ -27,7 +75,7 @@ interface FalconMultiSelectProps {
27
75
  list: FalconMultiSelectOption[];
28
76
  }
29
77
 
30
- declare const FalconMultiSelect: ({ label, data, setData, list }: FalconMultiSelectProps) => react_jsx_runtime.JSX.Element;
78
+ declare const FalconMultiSelect: ({ label, data, setData, list, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperWidth, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, optionBorderColor, optionHeight, checkboxColor, checkboxCheckedColor, searchLabel, searchIconColor, applyBg, applyColor, applyLabel, clearColor, clearLabel, }: FalconMultiSelectProps) => react_jsx_runtime.JSX.Element;
31
79
 
32
80
  interface AdvancedFiltersDialogProps {
33
81
  open: boolean;
@@ -176,20 +224,24 @@ interface ProgressBarNumberProps {
176
224
 
177
225
  declare const ProgressBarNumber: ({ number, progress, numColor, }: ProgressBarNumberProps) => react_jsx_runtime.JSX.Element;
178
226
 
179
- type Settings = {
180
- mode: PaletteMode;
181
- direction: Direction;
182
- navHidden?: boolean;
183
- appBarBlur: boolean;
184
- navCollapsed: boolean;
185
- layout?: 'vertical' | 'horizontal';
186
- lastLayout?: 'vertical' | 'horizontal';
187
- };
188
-
189
- interface Props {
190
- settings: Settings;
227
+ type FalconThemeMode = 'light' | 'dark';
228
+ type FalconThemeDirection = 'ltr' | 'rtl';
229
+ interface FalconThemeSettings {
230
+ mode?: FalconThemeMode;
231
+ direction?: FalconThemeDirection;
232
+ /** Ignored — kept for API compatibility with apps/docs settings shape */
233
+ appBarBlur?: boolean;
234
+ navCollapsed?: boolean;
235
+ [key: string]: unknown;
236
+ }
237
+ interface FalconThemeProviderProps {
191
238
  children: ReactNode;
239
+ /** Shorthand mode — overridden by `settings.mode` if both are provided */
240
+ mode?: FalconThemeMode;
241
+ /** Full settings object (apps/docs compatible shape) */
242
+ settings?: FalconThemeSettings;
192
243
  }
193
- declare const ThemeComponent: (props: Props) => react_jsx_runtime.JSX.Element;
194
244
 
195
- export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, ButtonWithIcon, type ButtonWithIconProps, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, ThemeComponent as FalconThemeProvider, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, ProgressBarNumber, type ProgressBarNumberProps };
245
+ declare const FalconThemeProvider: ({ children, mode: modeProp, settings, }: FalconThemeProviderProps) => react_jsx_runtime.JSX.Element;
246
+
247
+ export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, ButtonWithIcon, type ButtonWithIconProps, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, type FalconMultiSelectStyleProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, type FalconThemeDirection, type FalconThemeMode, FalconThemeProvider, type FalconThemeProviderProps, type FalconThemeSettings, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, ProgressBarNumber, type ProgressBarNumberProps };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ButtonProps, PaletteMode, Direction } from '@mui/material';
2
+ import { SxProps, Theme, ButtonProps } from '@mui/material';
3
3
  import { ReactNode, ReactElement } from 'react';
4
4
  import { GridColDef } from '@mui/x-data-grid';
5
5
 
@@ -17,7 +17,55 @@ interface FalconMultiSelectOption {
17
17
  id: number;
18
18
  name: string;
19
19
  }
20
- interface FalconMultiSelectProps {
20
+ interface FalconMultiSelectStyleProps {
21
+ /** Trigger button background color. Default: `#EFEFEF` */
22
+ triggerBg?: string;
23
+ /** Trigger button text and icon color. Default: inherits from theme */
24
+ triggerColor?: string;
25
+ /** Trigger button min-width. Default: `250` */
26
+ triggerMinWidth?: number | string;
27
+ /** Trigger button border radius. Default: `'6px'` */
28
+ triggerBorderRadius?: string | number;
29
+ /** Extra sx overrides for the trigger button */
30
+ triggerSx?: SxProps<Theme>;
31
+ /** Popper panel width. Default: `300` */
32
+ popperWidth?: number | string;
33
+ /** Popper panel border color (light mode). Default: `'#e1e4e8'` */
34
+ popperBorderColor?: string;
35
+ /** Popper panel border color (dark mode). Default: `'#30363d'` */
36
+ popperBorderColorDark?: string;
37
+ /** Popper panel background (light mode). Default: `'#fff'` */
38
+ popperBg?: string;
39
+ /** Popper panel background (dark mode). Default: `'#1c2128'` */
40
+ popperBgDark?: string;
41
+ /** Popper panel text color (light mode). Default: `'#24292e'` */
42
+ popperColor?: string;
43
+ /** Popper panel text color (dark mode). Default: `'#c9d1d9'` */
44
+ popperColorDark?: string;
45
+ /** Option row border color. Default: `'#D6D6D6'` */
46
+ optionBorderColor?: string;
47
+ /** Option row height. Default: `60` */
48
+ optionHeight?: number | string;
49
+ /** Checkbox unchecked color. Default: `'green'` */
50
+ checkboxColor?: string;
51
+ /** Checkbox checked color. Default: `'#6750A4'` */
52
+ checkboxCheckedColor?: string;
53
+ /** Search field label. Default: `'Search State'` */
54
+ searchLabel?: string;
55
+ /** Search icon fill color. Default: `'#49454F'` */
56
+ searchIconColor?: string;
57
+ /** Apply button background. Default: `'#333'` */
58
+ applyBg?: string;
59
+ /** Apply button text color. Default: `'white'` */
60
+ applyColor?: string;
61
+ /** Apply button label. Default: `'Apply'` */
62
+ applyLabel?: string;
63
+ /** Clear button text color. Default: `'black'` */
64
+ clearColor?: string;
65
+ /** Clear button label. Default: `'Clear'` */
66
+ clearLabel?: string;
67
+ }
68
+ interface FalconMultiSelectProps extends FalconMultiSelectStyleProps {
21
69
  label: string;
22
70
  /** Currently selected items (controlled) */
23
71
  data: FalconMultiSelectOption[];
@@ -27,7 +75,7 @@ interface FalconMultiSelectProps {
27
75
  list: FalconMultiSelectOption[];
28
76
  }
29
77
 
30
- declare const FalconMultiSelect: ({ label, data, setData, list }: FalconMultiSelectProps) => react_jsx_runtime.JSX.Element;
78
+ declare const FalconMultiSelect: ({ label, data, setData, list, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperWidth, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, optionBorderColor, optionHeight, checkboxColor, checkboxCheckedColor, searchLabel, searchIconColor, applyBg, applyColor, applyLabel, clearColor, clearLabel, }: FalconMultiSelectProps) => react_jsx_runtime.JSX.Element;
31
79
 
32
80
  interface AdvancedFiltersDialogProps {
33
81
  open: boolean;
@@ -176,20 +224,24 @@ interface ProgressBarNumberProps {
176
224
 
177
225
  declare const ProgressBarNumber: ({ number, progress, numColor, }: ProgressBarNumberProps) => react_jsx_runtime.JSX.Element;
178
226
 
179
- type Settings = {
180
- mode: PaletteMode;
181
- direction: Direction;
182
- navHidden?: boolean;
183
- appBarBlur: boolean;
184
- navCollapsed: boolean;
185
- layout?: 'vertical' | 'horizontal';
186
- lastLayout?: 'vertical' | 'horizontal';
187
- };
188
-
189
- interface Props {
190
- settings: Settings;
227
+ type FalconThemeMode = 'light' | 'dark';
228
+ type FalconThemeDirection = 'ltr' | 'rtl';
229
+ interface FalconThemeSettings {
230
+ mode?: FalconThemeMode;
231
+ direction?: FalconThemeDirection;
232
+ /** Ignored — kept for API compatibility with apps/docs settings shape */
233
+ appBarBlur?: boolean;
234
+ navCollapsed?: boolean;
235
+ [key: string]: unknown;
236
+ }
237
+ interface FalconThemeProviderProps {
191
238
  children: ReactNode;
239
+ /** Shorthand mode — overridden by `settings.mode` if both are provided */
240
+ mode?: FalconThemeMode;
241
+ /** Full settings object (apps/docs compatible shape) */
242
+ settings?: FalconThemeSettings;
192
243
  }
193
- declare const ThemeComponent: (props: Props) => react_jsx_runtime.JSX.Element;
194
244
 
195
- export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, ButtonWithIcon, type ButtonWithIconProps, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, ThemeComponent as FalconThemeProvider, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, ProgressBarNumber, type ProgressBarNumberProps };
245
+ declare const FalconThemeProvider: ({ children, mode: modeProp, settings, }: FalconThemeProviderProps) => react_jsx_runtime.JSX.Element;
246
+
247
+ export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, ButtonWithIcon, type ButtonWithIconProps, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, type FalconMultiSelectStyleProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, type FalconThemeDirection, type FalconThemeMode, FalconThemeProvider, type FalconThemeProviderProps, type FalconThemeSettings, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, ProgressBarNumber, type ProgressBarNumberProps };