oziko-ui-kit 0.0.71 → 0.0.73

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.
@@ -0,0 +1,4 @@
1
+ import { FC } from "react";
2
+ import { NotificationContainerProps } from "./types";
3
+ declare const NotificationContainer: FC<NotificationContainerProps>;
4
+ export default NotificationContainer;
@@ -0,0 +1,3 @@
1
+ import { NotificationItemProps } from "./types";
2
+ declare function NotificationItem({ notification, onClose, stackGap, rtl, duration: defaultDuration, style: externalStyle, animationDuration, }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
3
+ export default NotificationItem;
@@ -0,0 +1,5 @@
1
+ import { FC } from "react";
2
+ import { NotificationProviderProps, NotificationContextValue } from "./types";
3
+ export declare const useNotificationContext: () => NotificationContextValue;
4
+ declare const NotificationProvider: FC<NotificationProviderProps>;
5
+ export default NotificationProvider;
@@ -0,0 +1,3 @@
1
+ export { default as NotificationProvider } from "./NotificationProvider";
2
+ export { default as useNotification } from "./useNotification";
3
+ export type { NotificationPlacement, NotificationConfig, NotificationAPI, NotificationProviderProps, NotificationInstance, NotificationContextValue, NotificationItemProps, NotificationContainerProps, } from "./types";
@@ -0,0 +1,73 @@
1
+ import { ReactNode, CSSProperties } from "react";
2
+ export type NotificationPlacement = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
3
+ export interface NotificationConfig {
4
+ message: ReactNode;
5
+ description?: ReactNode;
6
+ icon?: ReactNode;
7
+ placement?: NotificationPlacement;
8
+ duration?: number | null;
9
+ closeIcon?: ReactNode;
10
+ closable?: boolean;
11
+ onClose?: () => void;
12
+ onClick?: () => void;
13
+ key?: string;
14
+ className?: string;
15
+ style?: CSSProperties;
16
+ btn?: ReactNode;
17
+ }
18
+ export interface NotificationAPI {
19
+ open: (config: NotificationConfig) => void;
20
+ info: (config: Omit<NotificationConfig, "icon">) => void;
21
+ success: (config: Omit<NotificationConfig, "icon">) => void;
22
+ error: (config: Omit<NotificationConfig, "icon">) => void;
23
+ warning: (config: Omit<NotificationConfig, "icon">) => void;
24
+ loading: (config: Omit<NotificationConfig, "icon">) => void;
25
+ destroy: (key?: string) => void;
26
+ }
27
+ export interface NotificationProviderProps {
28
+ children: ReactNode;
29
+ maxCount?: number;
30
+ top?: number;
31
+ bottom?: number;
32
+ rtl?: boolean;
33
+ zIndexBase?: number;
34
+ duration?: number;
35
+ stackGap?: number;
36
+ placementDefaults?: Partial<Record<NotificationPlacement, Partial<NotificationConfig>>>;
37
+ concurrent?: boolean;
38
+ animationDuration?: number;
39
+ }
40
+ export interface NotificationInstance {
41
+ id: string;
42
+ config: NotificationConfig;
43
+ placement: NotificationPlacement;
44
+ instanceId: string;
45
+ createdAt: number;
46
+ }
47
+ export interface NotificationContextValue {
48
+ addNotification: (config: NotificationConfig, instanceId: string) => void;
49
+ removeNotification: (key: string, instanceId: string) => void;
50
+ updateNotification: (key: string, config: NotificationConfig, instanceId: string) => void;
51
+ destroyNotifications: (key?: string, instanceId?: string) => void;
52
+ }
53
+ export interface NotificationItemProps {
54
+ notification: NotificationInstance;
55
+ onClose: (id: string) => void;
56
+ stackGap: number;
57
+ rtl: boolean;
58
+ duration: number;
59
+ style?: CSSProperties;
60
+ animationDuration?: number;
61
+ }
62
+ export interface NotificationContainerProps {
63
+ placement: NotificationPlacement;
64
+ notifications: NotificationInstance[];
65
+ onRemove: (id: string) => void;
66
+ stackGap: number;
67
+ rtl: boolean;
68
+ duration: number;
69
+ zIndex: number;
70
+ top?: number;
71
+ bottom?: number;
72
+ animationDuration?: number;
73
+ }
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { NotificationAPI } from "./types";
3
+ declare const useNotification: () => [NotificationAPI, React.ComponentType];
4
+ export default useNotification;
package/dist/index.css CHANGED
@@ -2501,6 +2501,278 @@ input:checked + .Switch-module_slider__sHGGR::before {
2501
2501
  .Table-module_focusedCell__-1YzJ {
2502
2502
  border: 1px solid var(--oziko-color-primary) !important;
2503
2503
  }
2504
+ .Notification-module_notificationContainer__AQGHi {
2505
+ pointer-events: none;
2506
+ box-sizing: border-box;
2507
+ z-index: 9999;
2508
+ }
2509
+ .Notification-module_notificationContainer__AQGHi * {
2510
+ box-sizing: border-box;
2511
+ }
2512
+
2513
+ .Notification-module_notificationItem__a97Y1 {
2514
+ position: relative;
2515
+ display: flex;
2516
+ align-items: flex-start;
2517
+ gap: var(--oziko-gap-md);
2518
+ min-width: 320px;
2519
+ max-width: 480px;
2520
+ padding: var(--oziko-padding-lg) var(--oziko-padding-xl);
2521
+ background: var(--notif-bg, var(--oziko-color-default));
2522
+ border: var(--oziko-border-default);
2523
+ border-radius: var(--notif-radius, var(--oziko-border-radius-lg));
2524
+ box-shadow: var(--notif-shadow, var(--box-shadow));
2525
+ color: var(--notif-fg, var(--oziko-color-font-primary));
2526
+ font-family: var(--notif-font-family, var(--oziko-font-family-base));
2527
+ font-size: var(--notif-font-size, var(--oziko-font-size-md));
2528
+ line-height: var(--notif-line-height, 1.5);
2529
+ cursor: pointer;
2530
+ pointer-events: auto;
2531
+ opacity: 0;
2532
+ transition: all var(--oziko-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
2533
+ will-change: transform, opacity;
2534
+ transform: translateX(100%) translateY(-20px);
2535
+ }
2536
+ .Notification-module_notificationItem__a97Y1[data-placement=topLeft] {
2537
+ transform: translateX(-100%) translateY(-20px);
2538
+ }
2539
+ .Notification-module_notificationItem__a97Y1[data-placement=topRight] {
2540
+ transform: translateX(100%) translateY(-20px);
2541
+ }
2542
+ .Notification-module_notificationItem__a97Y1[data-placement=bottomLeft] {
2543
+ transform: translateX(-100%) translateY(20px);
2544
+ }
2545
+ .Notification-module_notificationItem__a97Y1[data-placement=bottomRight] {
2546
+ transform: translateX(100%) translateY(20px);
2547
+ }
2548
+ .Notification-module_notificationItem__a97Y1[data-rtl=true] {
2549
+ direction: rtl;
2550
+ }
2551
+ .Notification-module_notificationItem__a97Y1[data-rtl=true][data-placement=topLeft] {
2552
+ transform: translateX(100%) translateY(-20px);
2553
+ }
2554
+ .Notification-module_notificationItem__a97Y1[data-rtl=true][data-placement=topRight] {
2555
+ transform: translateX(-100%) translateY(-20px);
2556
+ }
2557
+ .Notification-module_notificationItem__a97Y1[data-rtl=true][data-placement=bottomLeft] {
2558
+ transform: translateX(100%) translateY(20px);
2559
+ }
2560
+ .Notification-module_notificationItem__a97Y1[data-rtl=true][data-placement=bottomRight] {
2561
+ transform: translateX(-100%) translateY(20px);
2562
+ }
2563
+
2564
+ .Notification-module_notificationItem__a97Y1.Notification-module_enter__QJYI5 {
2565
+ opacity: 1 !important;
2566
+ transform: translateX(0) translateY(0) !important;
2567
+ }
2568
+
2569
+ .Notification-module_notificationItem__a97Y1.Notification-module_exit__7-eTw {
2570
+ opacity: 0;
2571
+ transform: scale(0.8) translateY(-10px);
2572
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
2573
+ pointer-events: none;
2574
+ }
2575
+
2576
+ .Notification-module_notificationContainer__AQGHi > * {
2577
+ transition: transform 0.2s ease-out, margin 0.2s ease-out;
2578
+ }
2579
+
2580
+ .Notification-module_notificationItem__a97Y1:hover {
2581
+ box-shadow: var(--notif-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.16));
2582
+ }
2583
+
2584
+ .Notification-module_notificationIcon__GfxMq {
2585
+ flex-shrink: 0;
2586
+ margin-top: var(--oziko-padding-xs);
2587
+ }
2588
+ .Notification-module_notificationIcon__GfxMq .notification-icon-info {
2589
+ color: var(--color-info, var(--oziko-color-primary));
2590
+ }
2591
+ .Notification-module_notificationIcon__GfxMq .notification-icon-success {
2592
+ color: var(--color-success, var(--oziko-color-success));
2593
+ }
2594
+ .Notification-module_notificationIcon__GfxMq .notification-icon-error {
2595
+ color: var(--color-error, var(--oziko-color-danger));
2596
+ }
2597
+ .Notification-module_notificationIcon__GfxMq .notification-icon-warning {
2598
+ color: var(--color-warning, #faad14);
2599
+ }
2600
+ .Notification-module_notificationIcon__GfxMq .notification-icon-loading {
2601
+ color: var(--color-primary, var(--oziko-color-primary));
2602
+ animation: Notification-module_spin__NnI0P 1s linear infinite;
2603
+ }
2604
+
2605
+ @keyframes Notification-module_spin__NnI0P {
2606
+ from {
2607
+ transform: rotate(0deg);
2608
+ }
2609
+ to {
2610
+ transform: rotate(360deg);
2611
+ }
2612
+ }
2613
+ .Notification-module_notificationContent__dL0yz {
2614
+ flex: 1;
2615
+ min-width: 0;
2616
+ }
2617
+
2618
+ .Notification-module_notificationMessage__9YbKE {
2619
+ font-weight: var(--notif-message-weight, 600);
2620
+ color: var(--notif-message-color, var(--oziko-color-font-primary));
2621
+ margin-bottom: var(--oziko-gap-xs);
2622
+ }
2623
+ .Notification-module_notificationMessage__9YbKE:last-child {
2624
+ margin-bottom: 0;
2625
+ }
2626
+
2627
+ .Notification-module_notificationDescription__1r9AU {
2628
+ color: var(--notif-description-color, var(--oziko-color-input-placeholder));
2629
+ font-size: var(--notif-description-size, var(--oziko-font-size-sm));
2630
+ line-height: var(--notif-description-line-height, 1.4);
2631
+ margin-bottom: var(--oziko-gap-md);
2632
+ }
2633
+ .Notification-module_notificationDescription__1r9AU:last-child {
2634
+ margin-bottom: 0;
2635
+ }
2636
+
2637
+ .Notification-module_notificationAction__SrLVH {
2638
+ margin-top: var(--oziko-gap-md);
2639
+ }
2640
+ .Notification-module_notificationAction__SrLVH button {
2641
+ background: var(--color-primary, var(--oziko-color-primary));
2642
+ color: var(--color-primary-text, var(--oziko-color-font-secondary));
2643
+ border: none;
2644
+ border-radius: var(--notif-button-radius, var(--oziko-border-radius-sm));
2645
+ padding: var(--oziko-padding-sm) var(--oziko-gap-md);
2646
+ font-size: var(--oziko-font-size-sm);
2647
+ font-weight: 500;
2648
+ cursor: pointer;
2649
+ transition: all 0.2s;
2650
+ }
2651
+ .Notification-module_notificationAction__SrLVH button:hover {
2652
+ background: var(--color-primary-hover, var(--oziko-color-primary-light));
2653
+ }
2654
+ .Notification-module_notificationAction__SrLVH button:active {
2655
+ background: var(--color-primary-active, var(--oziko-color-primary-dark));
2656
+ }
2657
+
2658
+ .Notification-module_notificationClose__1xqz9 {
2659
+ flex-shrink: 0;
2660
+ background: none;
2661
+ border: none;
2662
+ padding: var(--oziko-padding-xs);
2663
+ margin: calc(-1 * var(--oziko-padding-xs)) calc(-1 * var(--oziko-gap-md)) calc(-1 * var(--oziko-padding-xs)) var(--oziko-padding-xs);
2664
+ cursor: pointer;
2665
+ border-radius: var(--notif-close-radius, var(--oziko-border-radius-sm));
2666
+ color: var(--notif-close-color, var(--oziko-color-input-placeholder));
2667
+ transition: all 0.2s;
2668
+ }
2669
+ .Notification-module_notificationClose__1xqz9:hover {
2670
+ background: var(--notif-close-bg-hover, rgba(0, 0, 0, 0.06));
2671
+ color: var(--notif-close-color-hover, #666);
2672
+ }
2673
+ .Notification-module_notificationClose__1xqz9:focus {
2674
+ outline: 2px solid var(--color-primary, var(--oziko-color-primary));
2675
+ outline-offset: 1px;
2676
+ }
2677
+ .Notification-module_notificationClose__1xqz9:active {
2678
+ background: var(--notif-close-bg-active, rgba(0, 0, 0, 0.1));
2679
+ }
2680
+
2681
+ .Notification-module_notificationProgressContainer__FXOGc {
2682
+ position: absolute;
2683
+ bottom: 0;
2684
+ left: 0;
2685
+ right: 0;
2686
+ height: var(--oziko-padding-xs);
2687
+ background: rgba(var(--oziko-color-border-rgb), 0.3);
2688
+ border-radius: 0 0 var(--oziko-border-radius-lg) var(--oziko-border-radius-lg);
2689
+ overflow: hidden;
2690
+ }
2691
+
2692
+ .Notification-module_notificationProgress__lWMoZ {
2693
+ height: 100%;
2694
+ transition: width 0.016s linear, opacity 0.2s ease;
2695
+ border-radius: 0 0 var(--oziko-border-radius-lg) var(--oziko-border-radius-lg);
2696
+ background: linear-gradient(90deg, var(--oziko-color-primary), var(--oziko-color-primary-light));
2697
+ }
2698
+
2699
+ .Notification-module_notificationItem__a97Y1[data-type=success] .Notification-module_notificationProgress__lWMoZ {
2700
+ background: linear-gradient(90deg, var(--oziko-color-success), var(--oziko-color-success-light));
2701
+ }
2702
+ .Notification-module_notificationItem__a97Y1[data-type=error] .Notification-module_notificationProgress__lWMoZ {
2703
+ background: linear-gradient(90deg, var(--oziko-color-danger), var(--oziko-color-danger-light));
2704
+ }
2705
+ .Notification-module_notificationItem__a97Y1[data-type=warning] .Notification-module_notificationProgress__lWMoZ {
2706
+ background: linear-gradient(90deg, #faad14, #ffc53d);
2707
+ }
2708
+ .Notification-module_notificationItem__a97Y1[data-type=info] .Notification-module_notificationProgress__lWMoZ {
2709
+ background: linear-gradient(90deg, var(--oziko-color-primary), var(--oziko-color-primary-light));
2710
+ }
2711
+
2712
+ .Notification-module_notificationItem__a97Y1:focus {
2713
+ outline: 2px solid var(--color-primary, var(--oziko-color-primary));
2714
+ outline-offset: 2px;
2715
+ }
2716
+
2717
+ @media (max-width: 768px) {
2718
+ .Notification-module_notificationItem__a97Y1 {
2719
+ min-width: 280px;
2720
+ max-width: calc(100vw - 2 * var(--oziko-padding-xl));
2721
+ margin: 0 var(--oziko-padding-xl);
2722
+ }
2723
+ .Notification-module_notificationContainer__AQGHi {
2724
+ left: 0 !important;
2725
+ right: 0 !important;
2726
+ }
2727
+ .Notification-module_notificationContainer__AQGHi .Notification-module_notificationItem__a97Y1 {
2728
+ margin: 0 auto;
2729
+ }
2730
+ }
2731
+ @media (prefers-contrast: high) {
2732
+ .Notification-module_notificationItem__a97Y1 {
2733
+ border-width: 2px;
2734
+ box-shadow: none;
2735
+ }
2736
+ .Notification-module_notificationClose__1xqz9:focus {
2737
+ outline-width: 3px;
2738
+ }
2739
+ }
2740
+ @media (prefers-reduced-motion: reduce) {
2741
+ .Notification-module_notificationItem__a97Y1,
2742
+ .Notification-module_notificationItem__a97Y1.Notification-module_enter__QJYI5,
2743
+ .Notification-module_notificationItem__a97Y1.Notification-module_exit__7-eTw {
2744
+ transition: none;
2745
+ animation: none;
2746
+ }
2747
+ .Notification-module_notificationIcon__GfxMq .notification-icon-loading {
2748
+ animation: none;
2749
+ }
2750
+ .Notification-module_notificationProgress__lWMoZ {
2751
+ transition: opacity 0.2s ease;
2752
+ }
2753
+ }
2754
+ @media (prefers-color-scheme: dark) {
2755
+ .Notification-module_notificationItem__a97Y1 {
2756
+ --notif-bg: var(--oziko-color-background-secondary);
2757
+ --notif-border: var(--oziko-color-border);
2758
+ --notif-fg: var(--oziko-color-font-secondary);
2759
+ --notif-message-color: var(--oziko-color-font-secondary);
2760
+ --notif-description-color: var(--oziko-color-soft);
2761
+ --notif-close-color: var(--oziko-color-input-placeholder);
2762
+ --notif-close-color-hover: var(--oziko-color-font-secondary);
2763
+ --notif-close-bg-hover: rgba(255, 255, 255, 0.1);
2764
+ --notif-close-bg-active: rgba(255, 255, 255, 0.2);
2765
+ --notif-shadow: var(--box-shadow);
2766
+ --notif-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
2767
+ }
2768
+ .Notification-module_notificationProgressContainer__FXOGc {
2769
+ background: rgba(var(--oziko-color-soft-light-rgb), 0.2);
2770
+ }
2771
+ }
2772
+ .Notification-module_notificationPortal__hmII4 {
2773
+ width: unset !important;
2774
+ height: unset !important;
2775
+ }
2504
2776
  .Array-module_inputMinimized__N3CzD {
2505
2777
  background-color: var(--oziko-color-input-background);
2506
2778
  border-radius: var(--oziko-border-radius-md);
@@ -40,6 +40,7 @@ export { default as Dashboard } from "./components/organisms/dashboard/layout/Da
40
40
  export { default as MenuGroup } from "./components/organisms/menu-group/MenuGroup";
41
41
  export { default as Section } from "./components/organisms/section/Section";
42
42
  export { default as Table } from "./components/organisms/table/Table";
43
+ export { NotificationProvider, useNotification } from "./components/organisms/notification";
43
44
  export { default as ArrayMinimizedInput } from "./components/atoms/inputs/minimized/array/Array";
44
45
  export { default as BooleanMinimizedInput } from "./components/atoms/inputs/minimized/boolean/Boolean";
45
46
  export { default as ColorMinimizedInput } from "./components/atoms/inputs/minimized/color/ColorMinimized";
@@ -162,7 +163,6 @@ export { type TypeUnit } from "./components/molecules/timeline/Timeline";
162
163
  export { type TypeTimeline } from "./components/molecules/timeline/Timeline";
163
164
  export { type TypeDashboardItem } from "./components/organisms/dashboard/layout/DashboardLayout";
164
165
  export { type TypeDashboardLayout } from "./components/organisms/dashboard/layout/DashboardLayout";
165
- export { type TypeMenuGroup } from "./components/organisms/menu-group/MenuGroup";
166
166
  export { type TypeSection } from "./components/organisms/section/Section";
167
167
  export { type TypeSectionComponent } from "./components/organisms/section/Section";
168
168
  export { type TypeTable } from "./components/organisms/table/Table";
@@ -170,6 +170,7 @@ export { type TypeColumn } from "./components/organisms/table/Table";
170
170
  export { type TypeColumnComponent } from "./components/organisms/table/Table";
171
171
  export { type TypeHeaderCell } from "./components/organisms/table/Table";
172
172
  export { type TypeCell } from "./components/organisms/table/Table";
173
+ export { type NotificationPlacement, type NotificationConfig, type NotificationAPI, type NotificationProviderProps, } from "./components/organisms/notification";
173
174
  export { type IconName } from "./utils/iconList";
174
175
  export { type TypeInputType } from "./custom-hooks/useInputRepresenter";
175
176
  export { api as apiUtil } from "./utils/api";