oziko-ui-kit 0.0.90 → 0.0.91
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/atoms/color-picker/ColorPicker.d.ts +4 -0
- package/dist/components/atoms/color-picker/ColorPicker.types.d.ts +48 -0
- package/dist/components/atoms/color-picker/colorMath.d.ts +97 -0
- package/dist/components/atoms/color-picker/index.d.ts +2 -0
- package/dist/components/atoms/color-picker/useDrag.d.ts +14 -0
- package/dist/index.css +287 -57
- package/dist/index.export.d.ts +2 -0
- package/dist/index.mjs +16 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Placement } from "../../../custom-hooks/useAdaptivePosition";
|
|
2
|
+
export type ColorFormat = "hex" | "rgb" | "hsl";
|
|
3
|
+
export interface ColorValue {
|
|
4
|
+
hex: string;
|
|
5
|
+
rgb: {
|
|
6
|
+
r: number;
|
|
7
|
+
g: number;
|
|
8
|
+
b: number;
|
|
9
|
+
a: number;
|
|
10
|
+
};
|
|
11
|
+
hsl: {
|
|
12
|
+
h: number;
|
|
13
|
+
s: number;
|
|
14
|
+
l: number;
|
|
15
|
+
a: number;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export type ColorPickerTriggerDisplay = "only-color" | "only-code" | "complete";
|
|
19
|
+
export interface ColorPickerProps {
|
|
20
|
+
value?: string;
|
|
21
|
+
defaultValue?: string;
|
|
22
|
+
onChange?: (color: ColorValue) => void;
|
|
23
|
+
format?: ColorFormat;
|
|
24
|
+
placement?: Placement;
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
id?: string;
|
|
27
|
+
className?: string;
|
|
28
|
+
triggerDisplay?: ColorPickerTriggerDisplay;
|
|
29
|
+
}
|
|
30
|
+
export interface DragState {
|
|
31
|
+
isDragging: boolean;
|
|
32
|
+
startX: number;
|
|
33
|
+
startY: number;
|
|
34
|
+
currentX: number;
|
|
35
|
+
currentY: number;
|
|
36
|
+
}
|
|
37
|
+
export interface Bounds {
|
|
38
|
+
left: number;
|
|
39
|
+
top: number;
|
|
40
|
+
width: number;
|
|
41
|
+
height: number;
|
|
42
|
+
}
|
|
43
|
+
export interface HSVColor {
|
|
44
|
+
h: number;
|
|
45
|
+
s: number;
|
|
46
|
+
v: number;
|
|
47
|
+
a: number;
|
|
48
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { ColorValue, HSVColor } from "./ColorPicker.types";
|
|
2
|
+
/**
|
|
3
|
+
* Clamp a number between min and max values
|
|
4
|
+
*/
|
|
5
|
+
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
6
|
+
/**
|
|
7
|
+
* Round a number to specified precision
|
|
8
|
+
*/
|
|
9
|
+
export declare const round: (value: number, precision?: number) => number;
|
|
10
|
+
/**
|
|
11
|
+
* Convert RGB to HSL
|
|
12
|
+
*/
|
|
13
|
+
export declare const rgbToHsl: (r: number, g: number, b: number) => {
|
|
14
|
+
h: number;
|
|
15
|
+
s: number;
|
|
16
|
+
l: number;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Convert HSL to RGB
|
|
20
|
+
*/
|
|
21
|
+
export declare const hslToRgb: (h: number, s: number, l: number) => {
|
|
22
|
+
r: number;
|
|
23
|
+
g: number;
|
|
24
|
+
b: number;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Convert RGB to HSV
|
|
28
|
+
*/
|
|
29
|
+
export declare const rgbToHsv: (r: number, g: number, b: number) => {
|
|
30
|
+
h: number;
|
|
31
|
+
s: number;
|
|
32
|
+
v: number;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Convert HSV to RGB
|
|
36
|
+
*/
|
|
37
|
+
export declare const hsvToRgb: (h: number, s: number, v: number) => {
|
|
38
|
+
r: number;
|
|
39
|
+
g: number;
|
|
40
|
+
b: number;
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Convert RGB to hex string
|
|
44
|
+
*/
|
|
45
|
+
export declare const toHex: ({ r, g, b, a }: {
|
|
46
|
+
r: number;
|
|
47
|
+
g: number;
|
|
48
|
+
b: number;
|
|
49
|
+
a: number;
|
|
50
|
+
}) => string;
|
|
51
|
+
/**
|
|
52
|
+
* Parse hex string to RGB
|
|
53
|
+
*/
|
|
54
|
+
export declare const hexToRgb: (hex: string) => {
|
|
55
|
+
r: number;
|
|
56
|
+
g: number;
|
|
57
|
+
b: number;
|
|
58
|
+
a: number;
|
|
59
|
+
} | null;
|
|
60
|
+
/**
|
|
61
|
+
* Convert RGB to string format
|
|
62
|
+
*/
|
|
63
|
+
export declare const rgbaToString: (r: number, g: number, b: number, a: number) => string;
|
|
64
|
+
/**
|
|
65
|
+
* Convert HSL to string format
|
|
66
|
+
*/
|
|
67
|
+
export declare const hslaToString: (h: number, s: number, l: number, a: number) => string;
|
|
68
|
+
/**
|
|
69
|
+
* Parse RGB/RGBA string
|
|
70
|
+
*/
|
|
71
|
+
export declare const parseRgb: (rgb: string) => {
|
|
72
|
+
r: number;
|
|
73
|
+
g: number;
|
|
74
|
+
b: number;
|
|
75
|
+
a: number;
|
|
76
|
+
} | null;
|
|
77
|
+
/**
|
|
78
|
+
* Parse HSL/HSLA string
|
|
79
|
+
*/
|
|
80
|
+
export declare const parseHsl: (hsl: string) => {
|
|
81
|
+
h: number;
|
|
82
|
+
s: number;
|
|
83
|
+
l: number;
|
|
84
|
+
a: number;
|
|
85
|
+
} | null;
|
|
86
|
+
/**
|
|
87
|
+
* Parse any color string to ColorValue
|
|
88
|
+
*/
|
|
89
|
+
export declare const parseColor: (input: string) => ColorValue;
|
|
90
|
+
/**
|
|
91
|
+
* Convert ColorValue to HSV for SV panel calculations
|
|
92
|
+
*/
|
|
93
|
+
export declare const colorToHsv: (color: ColorValue) => HSVColor;
|
|
94
|
+
/**
|
|
95
|
+
* Convert HSV to ColorValue
|
|
96
|
+
*/
|
|
97
|
+
export declare const hsvToColor: (hsv: HSVColor) => ColorValue;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DragState, Bounds } from "./ColorPicker.types";
|
|
2
|
+
interface UseDragOptions {
|
|
3
|
+
onDragStart?: (event: MouseEvent | TouchEvent) => void;
|
|
4
|
+
onDrag?: (x: number, y: number, bounds: Bounds) => void;
|
|
5
|
+
onDragEnd?: () => void;
|
|
6
|
+
onKeyDown?: (event: KeyboardEvent) => void;
|
|
7
|
+
preventSelection?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const useDrag: (options?: UseDragOptions) => {
|
|
10
|
+
elementRef: import("react").RefObject<HTMLElement | null>;
|
|
11
|
+
dragState: DragState;
|
|
12
|
+
updateBounds: () => void;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -1043,6 +1043,293 @@ code {
|
|
|
1043
1043
|
border-radius: var(--oziko-border-radius-circle);
|
|
1044
1044
|
padding: 0;
|
|
1045
1045
|
}
|
|
1046
|
+
/* Color Picker Component Styles */
|
|
1047
|
+
.ColorPicker-module_colorPicker__sEZf2 {
|
|
1048
|
+
position: relative;
|
|
1049
|
+
display: inline-block;
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.ColorPicker-module_trigger__5Ukgm {
|
|
1053
|
+
min-width: 32px;
|
|
1054
|
+
height: 32px;
|
|
1055
|
+
border-radius: 8px;
|
|
1056
|
+
border: var(--oziko-border-default);
|
|
1057
|
+
background: var(--oziko-background-default);
|
|
1058
|
+
cursor: pointer;
|
|
1059
|
+
display: flex;
|
|
1060
|
+
align-items: center;
|
|
1061
|
+
justify-content: center;
|
|
1062
|
+
transition: all 0.2s ease;
|
|
1063
|
+
outline: none;
|
|
1064
|
+
position: relative;
|
|
1065
|
+
gap: 8px;
|
|
1066
|
+
padding: 4px;
|
|
1067
|
+
white-space: nowrap;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.ColorPicker-module_trigger__5Ukgm[data-display=only-color] {
|
|
1071
|
+
width: 32px;
|
|
1072
|
+
padding: 0;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.ColorPicker-module_triggerLabel__1qiCq {
|
|
1076
|
+
font-size: 12px;
|
|
1077
|
+
font-weight: 600;
|
|
1078
|
+
color: #111827;
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
.ColorPicker-module_trigger__5Ukgm[data-display=only-code] {
|
|
1082
|
+
justify-content: center;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.ColorPicker-module_trigger__5Ukgm:disabled {
|
|
1086
|
+
cursor: not-allowed;
|
|
1087
|
+
opacity: 0.5;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.ColorPicker-module_swatch__t-pF4 {
|
|
1091
|
+
width: 24px;
|
|
1092
|
+
height: 24px;
|
|
1093
|
+
border-radius: 6px;
|
|
1094
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
1095
|
+
position: relative;
|
|
1096
|
+
overflow: hidden;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
.ColorPicker-module_swatch__t-pF4::before {
|
|
1100
|
+
content: "";
|
|
1101
|
+
position: absolute;
|
|
1102
|
+
inset: 0;
|
|
1103
|
+
background-image: linear-gradient(45deg, #ededed 25%, transparent 25%), linear-gradient(-45deg, #ededed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededed 75%), linear-gradient(-45deg, transparent 75%, #ededed 75%);
|
|
1104
|
+
background-size: 8px 8px;
|
|
1105
|
+
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
.ColorPicker-module_swatchColor__A-5J8 {
|
|
1109
|
+
position: absolute;
|
|
1110
|
+
inset: 0;
|
|
1111
|
+
width: 100%;
|
|
1112
|
+
height: 100%;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.ColorPicker-module_svPanel__Cr8Xb {
|
|
1116
|
+
width: 100%;
|
|
1117
|
+
height: 160px;
|
|
1118
|
+
border-radius: 8px;
|
|
1119
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
1120
|
+
position: relative;
|
|
1121
|
+
cursor: crosshair;
|
|
1122
|
+
outline: none;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.ColorPicker-module_svPanel__Cr8Xb:focus {
|
|
1126
|
+
box-shadow: 0 0 0 2px #4c9ffe;
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
.ColorPicker-module_svBackground__VgABR {
|
|
1130
|
+
position: absolute;
|
|
1131
|
+
inset: 0;
|
|
1132
|
+
border-radius: inherit;
|
|
1133
|
+
background: linear-gradient(to right, white, transparent), linear-gradient(to top, black, transparent);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.ColorPicker-module_svHandle__gPxoY {
|
|
1137
|
+
position: absolute;
|
|
1138
|
+
width: 12px;
|
|
1139
|
+
height: 12px;
|
|
1140
|
+
border: 2px solid #fff;
|
|
1141
|
+
border-radius: 50%;
|
|
1142
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
1143
|
+
transform: translate(-50%, -50%);
|
|
1144
|
+
pointer-events: none;
|
|
1145
|
+
z-index: 2;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
/* Sliders */
|
|
1149
|
+
.ColorPicker-module_slidersContainer__etZz6 {
|
|
1150
|
+
width: 100%;
|
|
1151
|
+
display: flex;
|
|
1152
|
+
gap: 8px;
|
|
1153
|
+
}
|
|
1154
|
+
.ColorPicker-module_slidersContainer__etZz6 .ColorPicker-module_sliders__Xpo3f {
|
|
1155
|
+
flex: 1;
|
|
1156
|
+
display: flex;
|
|
1157
|
+
flex-direction: column;
|
|
1158
|
+
gap: 8px;
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
.ColorPicker-module_slider__HmNSH {
|
|
1162
|
+
height: 12px;
|
|
1163
|
+
border-radius: 6px;
|
|
1164
|
+
border: 1px solid #e6e6e6;
|
|
1165
|
+
position: relative;
|
|
1166
|
+
cursor: pointer;
|
|
1167
|
+
outline: none;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.ColorPicker-module_slider__HmNSH:focus {
|
|
1171
|
+
box-shadow: 0 0 0 2px #4c9ffe;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
.ColorPicker-module_hueSlider__smchE {
|
|
1175
|
+
background: linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
.ColorPicker-module_alphaSlider__7bImL {
|
|
1179
|
+
position: relative;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.ColorPicker-module_alphaSlider__7bImL::before {
|
|
1183
|
+
content: "";
|
|
1184
|
+
position: absolute;
|
|
1185
|
+
inset: 0;
|
|
1186
|
+
border-radius: inherit;
|
|
1187
|
+
background-image: linear-gradient(45deg, #ededed 25%, transparent 25%), linear-gradient(-45deg, #ededed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededed 75%), linear-gradient(-45deg, transparent 75%, #ededed 75%);
|
|
1188
|
+
background-size: 8px 8px;
|
|
1189
|
+
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.ColorPicker-module_alphaGradient__pIdQ6 {
|
|
1193
|
+
position: absolute;
|
|
1194
|
+
inset: 0;
|
|
1195
|
+
border-radius: inherit;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.ColorPicker-module_sliderHandle__S-ghs {
|
|
1199
|
+
position: absolute;
|
|
1200
|
+
top: 50%;
|
|
1201
|
+
width: 10px;
|
|
1202
|
+
height: 10px;
|
|
1203
|
+
border: 2px solid var(--oziko-color-default);
|
|
1204
|
+
border-radius: 50%;
|
|
1205
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
1206
|
+
transform: translate(-50%, -50%);
|
|
1207
|
+
pointer-events: none;
|
|
1208
|
+
z-index: 2;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
/* Controls Row */
|
|
1212
|
+
.ColorPicker-module_controls__yQfEz {
|
|
1213
|
+
width: 100% !important;
|
|
1214
|
+
}
|
|
1215
|
+
.ColorPicker-module_controls__yQfEz .ColorPicker-module_formatSelect__5tLPh {
|
|
1216
|
+
height: 32px;
|
|
1217
|
+
border: var(--oziko-border-default) !important;
|
|
1218
|
+
border-radius: var(--oziko-border-radius-md) !important;
|
|
1219
|
+
background: var();
|
|
1220
|
+
font-weight: 500;
|
|
1221
|
+
outline: none;
|
|
1222
|
+
cursor: pointer;
|
|
1223
|
+
padding: 0 8px !important;
|
|
1224
|
+
}
|
|
1225
|
+
.ColorPicker-module_controls__yQfEz .ColorPicker-module_formatSelect__5tLPh span {
|
|
1226
|
+
font-size: var(--oziko-font-size-xs) !important;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
.ColorPicker-module_colorInput__6ajlG {
|
|
1230
|
+
border: var(--oziko-border-default) !important;
|
|
1231
|
+
font-size: var(--oziko-font-size-sm) !important;
|
|
1232
|
+
padding: 0 var(--oziko-padding-sm) !important;
|
|
1233
|
+
border-radius: var(--oziko-border-radius-md);
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.ColorPicker-module_colorInput__6ajlG.ColorPicker-module_error__tj3WS {
|
|
1237
|
+
border-color: #ef4444;
|
|
1238
|
+
background-color: #fef2f2;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1241
|
+
.ColorPicker-module_alphaInputContainer__-RszK {
|
|
1242
|
+
border: var(--oziko-border-default) !important;
|
|
1243
|
+
border-radius: var(--oziko-border-radius-md) !important;
|
|
1244
|
+
font-size: var(--oziko-font-size-sm) !important;
|
|
1245
|
+
display: flex;
|
|
1246
|
+
align-items: center;
|
|
1247
|
+
padding-right: var(--oziko-padding-sm) !important;
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
.ColorPicker-module_alphaInput__IcWZ- {
|
|
1251
|
+
text-align: center;
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
/* Preview */
|
|
1255
|
+
.ColorPicker-module_preview__2wBPl {
|
|
1256
|
+
width: 30px;
|
|
1257
|
+
border-radius: 6px;
|
|
1258
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
1259
|
+
position: relative;
|
|
1260
|
+
overflow: hidden;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.ColorPicker-module_preview__2wBPl::before {
|
|
1264
|
+
content: "";
|
|
1265
|
+
position: absolute;
|
|
1266
|
+
inset: 0;
|
|
1267
|
+
background-image: linear-gradient(45deg, #ededed 25%, transparent 25%), linear-gradient(-45deg, #ededed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededed 75%), linear-gradient(-45deg, transparent 75%, #ededed 75%);
|
|
1268
|
+
background-size: 8px 8px;
|
|
1269
|
+
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.ColorPicker-module_previewColor__7da0X {
|
|
1273
|
+
position: absolute;
|
|
1274
|
+
inset: 0;
|
|
1275
|
+
}
|
|
1276
|
+
.Select-module_container__txDHr {
|
|
1277
|
+
background: var(--oziko-color-zebra);
|
|
1278
|
+
padding: var(--oziko-padding-md) var(--oziko-padding-lg);
|
|
1279
|
+
border-radius: var(--oziko-border-radius-md);
|
|
1280
|
+
cursor: pointer;
|
|
1281
|
+
}
|
|
1282
|
+
.Select-module_container__txDHr.Select-module_disabled__RJ71M {
|
|
1283
|
+
cursor: default;
|
|
1284
|
+
opacity: var(--oziko-disabled-opacity);
|
|
1285
|
+
}
|
|
1286
|
+
.Select-module_container__txDHr .Select-module_displayer__gzmxI {
|
|
1287
|
+
display: -webkit-box;
|
|
1288
|
+
-webkit-box-orient: vertical;
|
|
1289
|
+
overflow: hidden;
|
|
1290
|
+
text-overflow: ellipsis;
|
|
1291
|
+
width: unset;
|
|
1292
|
+
-webkit-line-clamp: 1;
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
.Select-module_selectDropdown__HBmga {
|
|
1296
|
+
position: fixed;
|
|
1297
|
+
border-radius: var(--oziko-border-radius-md);
|
|
1298
|
+
z-index: 1000;
|
|
1299
|
+
height: 100%;
|
|
1300
|
+
max-height: 200px;
|
|
1301
|
+
overflow-y: auto;
|
|
1302
|
+
box-shadow: var(--box-shadow);
|
|
1303
|
+
background: var(--oziko-color-menu-background);
|
|
1304
|
+
}
|
|
1305
|
+
.Portal-module_container__QcS9f {
|
|
1306
|
+
position: absolute;
|
|
1307
|
+
width: 100vw;
|
|
1308
|
+
height: 100vh;
|
|
1309
|
+
top: 0;
|
|
1310
|
+
}
|
|
1311
|
+
.SelectOption-module_option__wQb8V {
|
|
1312
|
+
cursor: pointer;
|
|
1313
|
+
padding: var(--oziko-padding-md) var(--oziko-padding-lg);
|
|
1314
|
+
}
|
|
1315
|
+
.SelectOption-module_option__wQb8V:not(.SelectOption-module_disabled__m5fGS):hover {
|
|
1316
|
+
background: var(--oziko-color-zebra);
|
|
1317
|
+
}
|
|
1318
|
+
.SelectOption-module_option__wQb8V.SelectOption-module_selected__A6Rky {
|
|
1319
|
+
background: var(--oziko-color-zebra);
|
|
1320
|
+
}
|
|
1321
|
+
.SelectOption-module_option__wQb8V.SelectOption-module_disabled__m5fGS {
|
|
1322
|
+
cursor: default;
|
|
1323
|
+
opacity: var(--oziko-disabled-opacity);
|
|
1324
|
+
}
|
|
1325
|
+
.SelectOption-module_option__wQb8V .SelectOption-module_displayer__lEn8X {
|
|
1326
|
+
display: -webkit-box;
|
|
1327
|
+
-webkit-box-orient: vertical;
|
|
1328
|
+
overflow: hidden;
|
|
1329
|
+
text-overflow: ellipsis;
|
|
1330
|
+
width: unset;
|
|
1331
|
+
-webkit-line-clamp: 1;
|
|
1332
|
+
}
|
|
1046
1333
|
.DashboardItem-module_container__Cu2fp .DashboardItem-module_settingButton__EVb24 {
|
|
1047
1334
|
width: 35px;
|
|
1048
1335
|
height: 35px;
|
|
@@ -1205,12 +1492,6 @@ code {
|
|
|
1205
1492
|
.Popover-module_arrow__ODp-E.Popover-module_leftEnd__lr3aT {
|
|
1206
1493
|
bottom: 14%;
|
|
1207
1494
|
}
|
|
1208
|
-
.Portal-module_container__QcS9f {
|
|
1209
|
-
position: absolute;
|
|
1210
|
-
width: 100vw;
|
|
1211
|
-
height: 100vh;
|
|
1212
|
-
top: 0;
|
|
1213
|
-
}
|
|
1214
1495
|
.Backdrop-module_container__IkwCT {
|
|
1215
1496
|
position: absolute;
|
|
1216
1497
|
top: 0;
|
|
@@ -2043,28 +2324,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
2043
2324
|
font-size: var(--oziko-font-size-lg);
|
|
2044
2325
|
padding: var(--oziko-padding-md);
|
|
2045
2326
|
}
|
|
2046
|
-
.SelectOption-module_option__wQb8V {
|
|
2047
|
-
cursor: pointer;
|
|
2048
|
-
padding: var(--oziko-padding-md) var(--oziko-padding-lg);
|
|
2049
|
-
}
|
|
2050
|
-
.SelectOption-module_option__wQb8V:not(.SelectOption-module_disabled__m5fGS):hover {
|
|
2051
|
-
background: var(--oziko-color-zebra);
|
|
2052
|
-
}
|
|
2053
|
-
.SelectOption-module_option__wQb8V.SelectOption-module_selected__A6Rky {
|
|
2054
|
-
background: var(--oziko-color-zebra);
|
|
2055
|
-
}
|
|
2056
|
-
.SelectOption-module_option__wQb8V.SelectOption-module_disabled__m5fGS {
|
|
2057
|
-
cursor: default;
|
|
2058
|
-
opacity: var(--oziko-disabled-opacity);
|
|
2059
|
-
}
|
|
2060
|
-
.SelectOption-module_option__wQb8V .SelectOption-module_displayer__lEn8X {
|
|
2061
|
-
display: -webkit-box;
|
|
2062
|
-
-webkit-box-orient: vertical;
|
|
2063
|
-
overflow: hidden;
|
|
2064
|
-
text-overflow: ellipsis;
|
|
2065
|
-
width: unset;
|
|
2066
|
-
-webkit-line-clamp: 1;
|
|
2067
|
-
}
|
|
2068
2327
|
.StorageFileCard-module_container__Qj11y {
|
|
2069
2328
|
border-radius: var(--oziko-border-radius-md);
|
|
2070
2329
|
justify-content: space-between !important;
|
|
@@ -2289,35 +2548,6 @@ input:checked + .Switch-module_slider__sHGGR::before {
|
|
|
2289
2548
|
.NavigatorItem-module_navigatorItem__wZkYp:hover .NavigatorItem-module_suffixButton__4TRQD {
|
|
2290
2549
|
opacity: 1;
|
|
2291
2550
|
}
|
|
2292
|
-
.Select-module_container__txDHr {
|
|
2293
|
-
background: var(--oziko-color-zebra);
|
|
2294
|
-
padding: var(--oziko-padding-md) var(--oziko-padding-lg);
|
|
2295
|
-
border-radius: var(--oziko-border-radius-md);
|
|
2296
|
-
cursor: pointer;
|
|
2297
|
-
}
|
|
2298
|
-
.Select-module_container__txDHr.Select-module_disabled__RJ71M {
|
|
2299
|
-
cursor: default;
|
|
2300
|
-
opacity: var(--oziko-disabled-opacity);
|
|
2301
|
-
}
|
|
2302
|
-
.Select-module_container__txDHr .Select-module_displayer__gzmxI {
|
|
2303
|
-
display: -webkit-box;
|
|
2304
|
-
-webkit-box-orient: vertical;
|
|
2305
|
-
overflow: hidden;
|
|
2306
|
-
text-overflow: ellipsis;
|
|
2307
|
-
width: unset;
|
|
2308
|
-
-webkit-line-clamp: 1;
|
|
2309
|
-
}
|
|
2310
|
-
|
|
2311
|
-
.Select-module_selectDropdown__HBmga {
|
|
2312
|
-
position: fixed;
|
|
2313
|
-
border-radius: var(--oziko-border-radius-md);
|
|
2314
|
-
z-index: 1000;
|
|
2315
|
-
height: 100%;
|
|
2316
|
-
max-height: 200px;
|
|
2317
|
-
overflow-y: auto;
|
|
2318
|
-
box-shadow: var(--box-shadow);
|
|
2319
|
-
background: var(--oziko-color-menu-background);
|
|
2320
|
-
}
|
|
2321
2551
|
.SSOButton-module_ssoButton__UJTqm {
|
|
2322
2552
|
border-radius: var(--oziko-border-radius-lg);
|
|
2323
2553
|
padding: var(--oziko-padding-xl);
|
package/dist/index.export.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { default as Chart } from "./components/atoms/chart/Chart";
|
|
|
8
8
|
export { default as Checkbox } from "./components/atoms/checkbox/Checkbox";
|
|
9
9
|
export { default as Chip } from "./components/atoms/chip/Chip";
|
|
10
10
|
export { default as Color } from "./components/atoms/color/Color";
|
|
11
|
+
export { default as ColorPicker } from "./components/atoms/color-picker/ColorPicker";
|
|
11
12
|
export { default as DashboardItem } from "./components/atoms/dashboard-item/DashboardItem";
|
|
12
13
|
export { default as DatePicker } from "./components/atoms/date-picker/DatePicker";
|
|
13
14
|
export { default as Directory } from "./components/atoms/directory/Directory";
|
|
@@ -174,6 +175,7 @@ export { type TypeCell } from "./components/organisms/table/Table";
|
|
|
174
175
|
export { type NotificationPlacement, type NotificationConfig, type NotificationAPI, type NotificationProviderProps, } from "./components/organisms/notification";
|
|
175
176
|
export { type IconName } from "./utils/iconList";
|
|
176
177
|
export { type TypeInputType } from "./custom-hooks/useInputRepresenter";
|
|
178
|
+
export { type ColorPickerProps, type ColorValue, type ColorFormat, } from "./components/atoms/color-picker";
|
|
177
179
|
export { type TypeProperties } from "./custom-hooks/useInputRepresenter";
|
|
178
180
|
export { api as apiUtil } from "./utils/api";
|
|
179
181
|
export { color as colorUtil } from "./utils/color";
|