@shohojdhara/atomix 0.4.1 → 0.4.2
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/atomix.css +9341 -9249
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +4 -4
- package/dist/atomix.min.css.map +1 -1
- package/dist/charts.d.ts +12 -19
- package/dist/charts.js +555 -358
- package/dist/charts.js.map +1 -1
- package/dist/core.d.ts +16 -23
- package/dist/core.js +418 -262
- package/dist/core.js.map +1 -1
- package/dist/forms.d.ts +11 -18
- package/dist/forms.js +411 -257
- package/dist/forms.js.map +1 -1
- package/dist/heavy.d.ts +14 -21
- package/dist/heavy.js +408 -254
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +33 -40
- package/dist/index.esm.js +663 -453
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +667 -460
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/scripts/atomix-cli.js +34 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +82 -54
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +17 -18
- package/src/components/AtomixGlass/README.md +5 -5
- package/src/components/AtomixGlass/stories/Customization.stories.tsx +2 -2
- package/src/components/AtomixGlass/stories/Examples.stories.tsx +42 -42
- package/src/components/AtomixGlass/stories/Modes.stories.tsx +5 -5
- package/src/components/AtomixGlass/stories/Overview.stories.tsx +3 -3
- package/src/components/AtomixGlass/stories/Performance.stories.tsx +2 -2
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +45 -45
- package/src/components/AtomixGlass/stories/Shaders.stories.tsx +3 -3
- package/src/components/Badge/Badge.stories.tsx +1 -1
- package/src/components/Badge/Badge.tsx +1 -1
- package/src/components/Breadcrumb/Breadcrumb.tsx +90 -76
- package/src/components/Breadcrumb/index.ts +2 -2
- package/src/components/Button/Button.stories.tsx +1 -1
- package/src/components/Button/README.md +2 -2
- package/src/components/Callout/Callout.test.tsx +3 -3
- package/src/components/Callout/Callout.tsx +2 -2
- package/src/components/Callout/README.md +2 -2
- package/src/components/Chart/Chart.stories.tsx +1 -1
- package/src/components/Chart/Chart.tsx +5 -5
- package/src/components/Chart/TreemapChart.tsx +37 -29
- package/src/components/DatePicker/readme.md +3 -3
- package/src/components/Dropdown/Dropdown.stories.tsx +1 -1
- package/src/components/EdgePanel/EdgePanel.stories.tsx +7 -7
- package/src/components/Form/Checkbox.stories.tsx +1 -1
- package/src/components/Form/Checkbox.tsx +1 -1
- package/src/components/Form/Input.stories.tsx +1 -1
- package/src/components/Form/Input.tsx +1 -1
- package/src/components/Form/Radio.stories.tsx +1 -1
- package/src/components/Form/Radio.tsx +1 -1
- package/src/components/Form/Select.stories.tsx +1 -1
- package/src/components/Form/Select.tsx +1 -1
- package/src/components/Form/Textarea.stories.tsx +1 -1
- package/src/components/Form/Textarea.tsx +1 -1
- package/src/components/Hero/Hero.stories.tsx +2 -2
- package/src/components/Hero/Hero.tsx +2 -2
- package/src/components/Messages/Messages.stories.tsx +1 -1
- package/src/components/Messages/Messages.tsx +2 -2
- package/src/components/Modal/Modal.stories.tsx +1 -1
- package/src/components/Navigation/Nav/Nav.stories.tsx +2 -2
- package/src/components/Navigation/Nav/Nav.tsx +1 -1
- package/src/components/Navigation/Navbar/Navbar.stories.tsx +3 -3
- package/src/components/Navigation/Navbar/Navbar.tsx +1 -1
- package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +2 -2
- package/src/components/Navigation/SideMenu/SideMenu.tsx +1 -1
- package/src/components/Pagination/Pagination.stories.tsx +1 -1
- package/src/components/Pagination/Pagination.tsx +1 -1
- package/src/components/Popover/Popover.stories.tsx +1 -1
- package/src/components/Popover/Popover.tsx +1 -1
- package/src/components/Progress/Progress.tsx +1 -1
- package/src/components/Rating/Rating.stories.tsx +1 -1
- package/src/components/Rating/Rating.test.tsx +73 -0
- package/src/components/Rating/Rating.tsx +25 -37
- package/src/components/Spinner/Spinner.tsx +1 -1
- package/src/components/Steps/Steps.stories.tsx +1 -1
- package/src/components/Steps/Steps.tsx +2 -2
- package/src/components/Tabs/Tabs.stories.tsx +1 -1
- package/src/components/Tabs/Tabs.tsx +1 -1
- package/src/components/Todo/Todo.tsx +0 -1
- package/src/components/Toggle/Toggle.stories.tsx +1 -1
- package/src/components/Toggle/Toggle.tsx +1 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +1 -1
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +2 -2
- package/src/lib/composables/__tests__/useAtomixGlassPerf.test.tsx +88 -0
- package/src/lib/composables/__tests__/useChart.test.ts +50 -0
- package/src/lib/composables/__tests__/useChart.test.tsx +139 -0
- package/src/lib/composables/__tests__/useHeroBackgroundSlider.test.tsx +59 -0
- package/src/lib/composables/__tests__/useSliderAutoplay.test.tsx +68 -0
- package/src/lib/composables/atomix-glass/useGlassBackgroundDetection.ts +329 -0
- package/src/lib/composables/atomix-glass/useGlassCornerRadius.ts +82 -0
- package/src/lib/composables/atomix-glass/useGlassMouseTracking.ts +153 -0
- package/src/lib/composables/atomix-glass/useGlassOverLight.ts +198 -0
- package/src/lib/composables/atomix-glass/useGlassSize.ts +117 -0
- package/src/lib/composables/atomix-glass/useGlassState.ts +112 -0
- package/src/lib/composables/atomix-glass/useGlassTransforms.ts +160 -0
- package/src/lib/composables/glass-styles.ts +302 -0
- package/src/lib/composables/index.ts +0 -4
- package/src/lib/composables/useAtomixGlass.ts +331 -522
- package/src/lib/composables/useAtomixGlassStyles.ts +307 -0
- package/src/lib/composables/useBarChart.ts +1 -1
- package/src/lib/composables/useBreadcrumb.ts +6 -6
- package/src/lib/composables/useChart.ts +104 -21
- package/src/lib/composables/useHeroBackgroundSlider.ts +16 -7
- package/src/lib/composables/useSlider.ts +66 -34
- package/src/lib/theme/devtools/CLI.ts +1 -1
- package/src/lib/theme/utils/__tests__/themeUtils.test.ts +213 -0
- package/src/lib/types/components.ts +13 -21
- package/src/lib/utils/__tests__/dom.test.ts +100 -0
- package/src/lib/utils/__tests__/fontPreloader.test.ts +102 -0
- package/src/styles/02-tools/_tools.breakpoints.scss +1 -1
- package/src/styles/02-tools/_tools.utility-api.scss +6 -6
- package/src/styles/06-components/_components.accordion.scss +0 -2
- package/src/styles/06-components/_components.chart.scss +0 -1
- package/src/styles/06-components/_components.dropdown.scss +0 -1
- package/src/styles/06-components/_components.edge-panel.scss +0 -2
- package/src/styles/06-components/_components.photoviewer.scss +0 -1
- package/src/styles/06-components/_components.river.scss +0 -1
- package/src/styles/06-components/_components.slider.scss +0 -3
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +0 -1
- package/src/styles/99-utilities/_utilities.text.scss +1 -0
package/dist/index.d.ts
CHANGED
|
@@ -1329,20 +1329,20 @@ interface OverLightObjectConfig {
|
|
|
1329
1329
|
/**
|
|
1330
1330
|
* AtomixGlass component props interface
|
|
1331
1331
|
*/
|
|
1332
|
-
interface AtomixGlassProps {
|
|
1332
|
+
interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1333
1333
|
children?: React.ReactNode;
|
|
1334
1334
|
displacementScale?: number;
|
|
1335
1335
|
blurAmount?: number;
|
|
1336
1336
|
saturation?: number;
|
|
1337
1337
|
aberrationIntensity?: number;
|
|
1338
1338
|
elasticity?: number;
|
|
1339
|
-
|
|
1339
|
+
borderRadius?: number;
|
|
1340
1340
|
globalMousePosition?: MousePosition;
|
|
1341
1341
|
mouseOffset?: MousePosition;
|
|
1342
1342
|
mouseContainer?: React.RefObject<HTMLElement | null> | null;
|
|
1343
|
-
className?: string;
|
|
1344
1343
|
padding?: string;
|
|
1345
|
-
|
|
1344
|
+
height?: string | number;
|
|
1345
|
+
width?: string | number;
|
|
1346
1346
|
overLight?: OverLightConfig;
|
|
1347
1347
|
mode?: DisplacementMode;
|
|
1348
1348
|
onClick?: () => void;
|
|
@@ -1350,30 +1350,23 @@ interface AtomixGlassProps {
|
|
|
1350
1350
|
* Shader variant for shader mode
|
|
1351
1351
|
*/
|
|
1352
1352
|
shaderVariant?: 'liquidGlass' | 'premiumGlass' | 'appleFluid' | 'liquidMetal' | 'plasma' | 'waves' | 'noise';
|
|
1353
|
-
/**
|
|
1354
|
-
* Accessibility props
|
|
1355
|
-
*/
|
|
1356
|
-
'aria-label'?: string;
|
|
1357
|
-
'aria-describedby'?: string;
|
|
1358
|
-
role?: string;
|
|
1359
|
-
tabIndex?: number;
|
|
1360
1353
|
/**
|
|
1361
1354
|
* Performance and accessibility options
|
|
1362
1355
|
*/
|
|
1363
1356
|
reducedMotion?: boolean;
|
|
1364
1357
|
highContrast?: boolean;
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1358
|
+
withoutEffects?: boolean;
|
|
1359
|
+
withLiquidBlur?: boolean;
|
|
1360
|
+
withBorder?: boolean;
|
|
1361
|
+
withOverLightLayers?: boolean;
|
|
1369
1362
|
/**
|
|
1370
1363
|
* Performance monitoring
|
|
1371
1364
|
*/
|
|
1372
|
-
|
|
1365
|
+
debugPerformance?: boolean;
|
|
1373
1366
|
/**
|
|
1374
|
-
* Debug mode for
|
|
1367
|
+
* Debug mode for borderRadius extraction
|
|
1375
1368
|
*/
|
|
1376
|
-
|
|
1369
|
+
debugBorderRadius?: boolean;
|
|
1377
1370
|
/**
|
|
1378
1371
|
* Debug mode for overLight detection and configuration
|
|
1379
1372
|
*
|
|
@@ -4301,7 +4294,7 @@ interface VideoPlayerProps extends BaseComponentProps {
|
|
|
4301
4294
|
saturation?: number;
|
|
4302
4295
|
aberrationIntensity?: number;
|
|
4303
4296
|
elasticity?: number;
|
|
4304
|
-
|
|
4297
|
+
borderRadius?: number;
|
|
4305
4298
|
mode?: 'standard' | 'polar' | 'prominent' | 'shader';
|
|
4306
4299
|
overLight?: boolean;
|
|
4307
4300
|
};
|
|
@@ -6592,7 +6585,7 @@ interface GlassContainerProps extends BaseComponentProps {
|
|
|
6592
6585
|
* Border radius of the glass container
|
|
6593
6586
|
* @default 999
|
|
6594
6587
|
*/
|
|
6595
|
-
|
|
6588
|
+
borderRadius?: number;
|
|
6596
6589
|
/**
|
|
6597
6590
|
* Padding inside the glass container
|
|
6598
6591
|
* @default '24px 32px'
|
|
@@ -6741,7 +6734,7 @@ interface StepItemData {
|
|
|
6741
6734
|
content?: React__default.ReactNode;
|
|
6742
6735
|
}
|
|
6743
6736
|
|
|
6744
|
-
interface StepsItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
6737
|
+
interface StepsItemProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
6745
6738
|
/**
|
|
6746
6739
|
* The number or icon for the step
|
|
6747
6740
|
*/
|
|
@@ -7594,7 +7587,7 @@ interface BarChartOptions {
|
|
|
7594
7587
|
/**
|
|
7595
7588
|
* Corner radius for bars
|
|
7596
7589
|
*/
|
|
7597
|
-
|
|
7590
|
+
borderRadius?: number;
|
|
7598
7591
|
/**
|
|
7599
7592
|
* Padding between bar groups
|
|
7600
7593
|
*/
|
|
@@ -8771,7 +8764,7 @@ interface BreadcrumbItemData {
|
|
|
8771
8764
|
*/
|
|
8772
8765
|
className?: string;
|
|
8773
8766
|
}
|
|
8774
|
-
|
|
8767
|
+
type BreadcrumbItemType = BreadcrumbItemData;
|
|
8775
8768
|
interface BreadcrumbItemProps extends React__default.HTMLAttributes<HTMLLIElement> {
|
|
8776
8769
|
/**
|
|
8777
8770
|
* URL for the breadcrumb item
|
|
@@ -8788,11 +8781,11 @@ interface BreadcrumbItemProps extends React__default.HTMLAttributes<HTMLLIElemen
|
|
|
8788
8781
|
/**
|
|
8789
8782
|
* Optional click handler for the link
|
|
8790
8783
|
*/
|
|
8791
|
-
onClick?: (event: React__default.MouseEvent<
|
|
8784
|
+
onClick?: (event: React__default.MouseEvent<any>) => void;
|
|
8792
8785
|
/**
|
|
8793
8786
|
* Optional custom link component
|
|
8794
8787
|
*/
|
|
8795
|
-
linkAs?: React__default.ElementType
|
|
8788
|
+
linkAs?: React__default.ElementType<any>;
|
|
8796
8789
|
/**
|
|
8797
8790
|
* Link props to pass to the underlying anchor or LinkComponent
|
|
8798
8791
|
*/
|
|
@@ -8829,10 +8822,11 @@ interface BreadcrumbProps {
|
|
|
8829
8822
|
*/
|
|
8830
8823
|
children?: ReactNode;
|
|
8831
8824
|
}
|
|
8832
|
-
|
|
8825
|
+
declare const BreadcrumbComponent: React__default.FC<BreadcrumbProps>;
|
|
8826
|
+
type BreadcrumbType = typeof BreadcrumbComponent & {
|
|
8833
8827
|
Item: typeof BreadcrumbItem;
|
|
8834
8828
|
};
|
|
8835
|
-
declare const Breadcrumb:
|
|
8829
|
+
declare const Breadcrumb: BreadcrumbType;
|
|
8836
8830
|
|
|
8837
8831
|
type AccordionProps = AccordionProps$1;
|
|
8838
8832
|
interface AccordionHeaderProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
|
|
@@ -11420,17 +11414,18 @@ declare function useGlassContainer(props: GlassContainerProps): {
|
|
|
11420
11414
|
interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
|
|
11421
11415
|
glassRef: React__default.RefObject<HTMLDivElement>;
|
|
11422
11416
|
contentRef: React__default.RefObject<HTMLDivElement>;
|
|
11417
|
+
wrapperRef?: React__default.RefObject<HTMLDivElement>;
|
|
11423
11418
|
children?: React__default.ReactNode;
|
|
11424
11419
|
}
|
|
11425
11420
|
interface UseAtomixGlassReturn {
|
|
11426
11421
|
isHovered: boolean;
|
|
11427
11422
|
isActive: boolean;
|
|
11428
11423
|
glassSize: GlassSize;
|
|
11429
|
-
|
|
11430
|
-
|
|
11424
|
+
dynamicBorderRadius: number;
|
|
11425
|
+
effectiveBorderRadius: number;
|
|
11431
11426
|
effectiveReducedMotion: boolean;
|
|
11432
11427
|
effectiveHighContrast: boolean;
|
|
11433
|
-
|
|
11428
|
+
effectiveWithoutEffects: boolean;
|
|
11434
11429
|
detectedOverLight: boolean;
|
|
11435
11430
|
globalMousePosition: MousePosition;
|
|
11436
11431
|
mouseOffset: MousePosition;
|
|
@@ -11461,7 +11456,7 @@ interface UseAtomixGlassReturn {
|
|
|
11461
11456
|
* Composable hook for AtomixGlass component logic
|
|
11462
11457
|
* Manages all state, calculations, and event handlers
|
|
11463
11458
|
*/
|
|
11464
|
-
declare function useAtomixGlass({ glassRef, contentRef,
|
|
11459
|
+
declare function useAtomixGlass({ glassRef, contentRef, wrapperRef, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, overLight, reducedMotion, highContrast, withoutEffects, elasticity, onClick, debugBorderRadius, debugOverLight, debugPerformance, children, blurAmount, saturation, padding, withLiquidBlur, }: UseAtomixGlassOptions): UseAtomixGlassReturn;
|
|
11465
11460
|
|
|
11466
11461
|
/**
|
|
11467
11462
|
* Input state and functionality
|
|
@@ -11516,7 +11511,7 @@ declare function useTextarea(initialProps?: Partial<TextareaProps>): {
|
|
|
11516
11511
|
};
|
|
11517
11512
|
|
|
11518
11513
|
interface BreadcrumbOptions {
|
|
11519
|
-
items:
|
|
11514
|
+
items: BreadcrumbItemType[];
|
|
11520
11515
|
divider?: React.ReactNode;
|
|
11521
11516
|
className?: string;
|
|
11522
11517
|
'aria-label'?: string;
|
|
@@ -11529,9 +11524,9 @@ interface BreadcrumbOptions {
|
|
|
11529
11524
|
declare function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>): {
|
|
11530
11525
|
defaultOptions: BreadcrumbOptions;
|
|
11531
11526
|
generateBreadcrumbClass: (options: Partial<BreadcrumbOptions>) => string;
|
|
11532
|
-
generateItemClass: (item:
|
|
11533
|
-
isItemLink: (item:
|
|
11534
|
-
parseItemsFromJson: (jsonString: string) =>
|
|
11527
|
+
generateItemClass: (item: BreadcrumbItemType, isLast: boolean) => string;
|
|
11528
|
+
isItemLink: (item: BreadcrumbItemType, isLast: boolean) => boolean;
|
|
11529
|
+
parseItemsFromJson: (jsonString: string) => BreadcrumbItemType[];
|
|
11535
11530
|
};
|
|
11536
11531
|
|
|
11537
11532
|
/**
|
|
@@ -11908,7 +11903,7 @@ declare const AtomixLogo: React__default.FC<AtomixLogoProps>;
|
|
|
11908
11903
|
*
|
|
11909
11904
|
* @example
|
|
11910
11905
|
* // Manual border-radius override
|
|
11911
|
-
* <AtomixGlass
|
|
11906
|
+
* <AtomixGlass borderRadius={20}>
|
|
11912
11907
|
* <div>Content with 20px glass radius</div>
|
|
11913
11908
|
* </AtomixGlass>
|
|
11914
11909
|
*
|
|
@@ -11950,7 +11945,7 @@ declare const AtomixLogo: React__default.FC<AtomixLogoProps>;
|
|
|
11950
11945
|
* <div>Content with debug logging enabled</div>
|
|
11951
11946
|
* </AtomixGlass>
|
|
11952
11947
|
*/
|
|
11953
|
-
declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity,
|
|
11948
|
+
declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, shaderVariant, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, withoutEffects, withLiquidBlur, withBorder, withOverLightLayers, debugPerformance, debugBorderRadius, debugOverLight, height, width, ...rest }: AtomixGlassProps): react_jsx_runtime.JSX.Element;
|
|
11954
11949
|
|
|
11955
11950
|
declare const Avatar: React__default.FC<AvatarProps>;
|
|
11956
11951
|
|
|
@@ -15331,9 +15326,7 @@ declare const atomix: {
|
|
|
15331
15326
|
AvatarGroup: React$1.FC<AvatarGroupProps>;
|
|
15332
15327
|
Badge: React$1.FC<BadgeProps>;
|
|
15333
15328
|
Block: React$1.ForwardRefExoticComponent<BlockProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
15334
|
-
Breadcrumb:
|
|
15335
|
-
Item: typeof BreadcrumbItemData;
|
|
15336
|
-
};
|
|
15329
|
+
Breadcrumb: BreadcrumbType;
|
|
15337
15330
|
Button: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
|
|
15338
15331
|
ButtonGroup: React$1.FC<ButtonGroupProps>;
|
|
15339
15332
|
Callout: React$1.FC<CalloutProps> & {
|