@sikka/hawa 0.30.27-next → 0.30.29-next
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/blocks/auth/index.js +1 -3
- package/dist/blocks/auth/index.mjs +1 -3
- package/dist/blocks/feedback/index.js +1 -1
- package/dist/blocks/feedback/index.mjs +1 -1
- package/dist/blocks/index.js +13 -6
- package/dist/blocks/index.mjs +3 -5
- package/dist/blocks/misc/index.js +11 -2
- package/dist/blocks/misc/index.mjs +11 -2
- package/dist/{chunk-SW7UK35T.mjs → chunk-XTGWVGTN.mjs} +11 -2
- package/dist/elements/index.js +13 -4
- package/dist/elements/index.mjs +3 -3
- package/dist/floatBox/index.d.mts +1 -0
- package/dist/floatBox/index.d.ts +1 -0
- package/dist/floatBox/index.js +10 -2
- package/dist/floatBox/index.js.map +1 -1
- package/dist/floatBox/index.mjs +10 -2
- package/dist/floatBox/index.mjs.map +1 -1
- package/dist/index.css +68 -0
- package/dist/index.js +15 -8
- package/dist/index.mjs +15 -8
- package/dist/interfaceSettings/index.js +2 -2
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +2 -2
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/tabs/index.js +11 -2
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +11 -2
- package/dist/tabs/index.mjs.map +1 -1
- package/package.json +1 -1
@@ -4038,9 +4038,7 @@ var RegisterForm = ({
|
|
4038
4038
|
isSearchable: false,
|
4039
4039
|
isClearable: false,
|
4040
4040
|
options: props.userReferenceOptions || [],
|
4041
|
-
onChange: (e) =>
|
4042
|
-
field.onChange(e.value);
|
4043
|
-
}
|
4041
|
+
onChange: (e) => field.onChange(e)
|
4044
4042
|
}
|
4045
4043
|
);
|
4046
4044
|
}
|
@@ -3132,9 +3132,7 @@ var RegisterForm = ({
|
|
3132
3132
|
isSearchable: false,
|
3133
3133
|
isClearable: false,
|
3134
3134
|
options: props.userReferenceOptions || [],
|
3135
|
-
onChange: (e) =>
|
3136
|
-
field.onChange(e.value);
|
3137
|
-
}
|
3135
|
+
onChange: (e) => field.onChange(e)
|
3138
3136
|
}
|
3139
3137
|
);
|
3140
3138
|
}
|
@@ -970,7 +970,7 @@ var UserReferralSource = ({
|
|
970
970
|
orientation: "vertical",
|
971
971
|
options: optionsWithOther,
|
972
972
|
defaultValue: field.value,
|
973
|
-
onChange: (e) => field.onChange(e
|
973
|
+
onChange: (e) => field.onChange(e),
|
974
974
|
helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
|
975
975
|
}
|
976
976
|
);
|
@@ -145,7 +145,7 @@ var UserReferralSource = ({
|
|
145
145
|
orientation: "vertical",
|
146
146
|
options: optionsWithOther,
|
147
147
|
defaultValue: field.value,
|
148
|
-
onChange: (e) => field.onChange(e
|
148
|
+
onChange: (e) => field.onChange(e),
|
149
149
|
helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
|
150
150
|
}
|
151
151
|
);
|
package/dist/blocks/index.js
CHANGED
@@ -4195,9 +4195,7 @@ var RegisterForm = ({
|
|
4195
4195
|
isSearchable: false,
|
4196
4196
|
isClearable: false,
|
4197
4197
|
options: props.userReferenceOptions || [],
|
4198
|
-
onChange: (e) =>
|
4199
|
-
field.onChange(e.value);
|
4200
|
-
}
|
4198
|
+
onChange: (e) => field.onChange(e)
|
4201
4199
|
}
|
4202
4200
|
);
|
4203
4201
|
}
|
@@ -5081,7 +5079,7 @@ var UserReferralSource = ({
|
|
5081
5079
|
orientation: "vertical",
|
5082
5080
|
options: optionsWithOther,
|
5083
5081
|
defaultValue: field.value,
|
5084
|
-
onChange: (e) => field.onChange(e
|
5082
|
+
onChange: (e) => field.onChange(e),
|
5085
5083
|
helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
|
5086
5084
|
}
|
5087
5085
|
);
|
@@ -5722,6 +5720,7 @@ var FloatBox = ({
|
|
5722
5720
|
side = "bottom",
|
5723
5721
|
sideOffset = 40,
|
5724
5722
|
align = "center",
|
5723
|
+
withArrow = false,
|
5725
5724
|
...props
|
5726
5725
|
}) => {
|
5727
5726
|
let stylesMap = {
|
@@ -5746,18 +5745,25 @@ var FloatBox = ({
|
|
5746
5745
|
end: { right: sideOffset, bottom: 0 }
|
5747
5746
|
}
|
5748
5747
|
};
|
5748
|
+
const arrowDirection = {
|
5749
|
+
top: "hawa-arrow-default-bottom",
|
5750
|
+
bottom: "hawa-arrow-default-top",
|
5751
|
+
right: "hawa-arrow-default-left",
|
5752
|
+
left: "hawa-arrow-default-right"
|
5753
|
+
};
|
5749
5754
|
return /* @__PURE__ */ React43.createElement(
|
5750
5755
|
"div",
|
5751
5756
|
{
|
5752
5757
|
className: cn(
|
5753
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
5758
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
5754
5759
|
className
|
5755
5760
|
),
|
5756
5761
|
style: { ...stylesMap[side][align] },
|
5757
5762
|
"data-side": side,
|
5758
5763
|
"data-floatbox-state": open ? "open" : "closed"
|
5759
5764
|
},
|
5760
|
-
|
5765
|
+
withArrow && /* @__PURE__ */ React43.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
5766
|
+
/* @__PURE__ */ React43.createElement("span", null, props.children)
|
5761
5767
|
);
|
5762
5768
|
};
|
5763
5769
|
|
@@ -5869,6 +5875,7 @@ var TabsTrigger = React44.forwardRef(({ className, chipProps, ...props }, ref) =
|
|
5869
5875
|
/* @__PURE__ */ React44.createElement(
|
5870
5876
|
FloatBox,
|
5871
5877
|
{
|
5878
|
+
withArrow: true,
|
5872
5879
|
align: orientation === "vertical" ? "start" : "start",
|
5873
5880
|
side: orientation === "vertical" ? "right" : "bottom",
|
5874
5881
|
sideOffset: orientation === "vertical" ? width + 30 : 45,
|
package/dist/blocks/index.mjs
CHANGED
@@ -26,7 +26,7 @@ import {
|
|
26
26
|
UncheckMark,
|
27
27
|
VeryBadEmoji,
|
28
28
|
VeryGoodEmoji
|
29
|
-
} from "../chunk-
|
29
|
+
} from "../chunk-XTGWVGTN.mjs";
|
30
30
|
import "../chunk-R2SKHHDK.mjs";
|
31
31
|
import {
|
32
32
|
Button,
|
@@ -754,9 +754,7 @@ var RegisterForm = ({
|
|
754
754
|
isSearchable: false,
|
755
755
|
isClearable: false,
|
756
756
|
options: props.userReferenceOptions || [],
|
757
|
-
onChange: (e) =>
|
758
|
-
field.onChange(e.value);
|
759
|
-
}
|
757
|
+
onChange: (e) => field.onChange(e)
|
760
758
|
}
|
761
759
|
);
|
762
760
|
}
|
@@ -1289,7 +1287,7 @@ var UserReferralSource = ({
|
|
1289
1287
|
orientation: "vertical",
|
1290
1288
|
options: optionsWithOther,
|
1291
1289
|
defaultValue: field.value,
|
1292
|
-
onChange: (e) => field.onChange(e
|
1290
|
+
onChange: (e) => field.onChange(e),
|
1293
1291
|
helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
|
1294
1292
|
}
|
1295
1293
|
);
|
@@ -271,6 +271,7 @@ var FloatBox = ({
|
|
271
271
|
side = "bottom",
|
272
272
|
sideOffset = 40,
|
273
273
|
align = "center",
|
274
|
+
withArrow = false,
|
274
275
|
...props
|
275
276
|
}) => {
|
276
277
|
let stylesMap = {
|
@@ -295,18 +296,25 @@ var FloatBox = ({
|
|
295
296
|
end: { right: sideOffset, bottom: 0 }
|
296
297
|
}
|
297
298
|
};
|
299
|
+
const arrowDirection = {
|
300
|
+
top: "hawa-arrow-default-bottom",
|
301
|
+
bottom: "hawa-arrow-default-top",
|
302
|
+
right: "hawa-arrow-default-left",
|
303
|
+
left: "hawa-arrow-default-right"
|
304
|
+
};
|
298
305
|
return /* @__PURE__ */ React11.createElement(
|
299
306
|
"div",
|
300
307
|
{
|
301
308
|
className: cn(
|
302
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
309
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
303
310
|
className
|
304
311
|
),
|
305
312
|
style: { ...stylesMap[side][align] },
|
306
313
|
"data-side": side,
|
307
314
|
"data-floatbox-state": open ? "open" : "closed"
|
308
315
|
},
|
309
|
-
|
316
|
+
withArrow && /* @__PURE__ */ React11.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
317
|
+
/* @__PURE__ */ React11.createElement("span", null, props.children)
|
310
318
|
);
|
311
319
|
};
|
312
320
|
|
@@ -418,6 +426,7 @@ var TabsTrigger = React12.forwardRef(({ className, chipProps, ...props }, ref) =
|
|
418
426
|
/* @__PURE__ */ React12.createElement(
|
419
427
|
FloatBox,
|
420
428
|
{
|
429
|
+
withArrow: true,
|
421
430
|
align: orientation === "vertical" ? "start" : "start",
|
422
431
|
side: orientation === "vertical" ? "right" : "bottom",
|
423
432
|
sideOffset: orientation === "vertical" ? width + 30 : 45,
|
@@ -122,6 +122,7 @@ var FloatBox = ({
|
|
122
122
|
side = "bottom",
|
123
123
|
sideOffset = 40,
|
124
124
|
align = "center",
|
125
|
+
withArrow = false,
|
125
126
|
...props
|
126
127
|
}) => {
|
127
128
|
let stylesMap = {
|
@@ -146,18 +147,25 @@ var FloatBox = ({
|
|
146
147
|
end: { right: sideOffset, bottom: 0 }
|
147
148
|
}
|
148
149
|
};
|
150
|
+
const arrowDirection = {
|
151
|
+
top: "hawa-arrow-default-bottom",
|
152
|
+
bottom: "hawa-arrow-default-top",
|
153
|
+
right: "hawa-arrow-default-left",
|
154
|
+
left: "hawa-arrow-default-right"
|
155
|
+
};
|
149
156
|
return /* @__PURE__ */ React9.createElement(
|
150
157
|
"div",
|
151
158
|
{
|
152
159
|
className: cn(
|
153
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
160
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
154
161
|
className
|
155
162
|
),
|
156
163
|
style: { ...stylesMap[side][align] },
|
157
164
|
"data-side": side,
|
158
165
|
"data-floatbox-state": open ? "open" : "closed"
|
159
166
|
},
|
160
|
-
|
167
|
+
withArrow && /* @__PURE__ */ React9.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
168
|
+
/* @__PURE__ */ React9.createElement("span", null, props.children)
|
161
169
|
);
|
162
170
|
};
|
163
171
|
|
@@ -269,6 +277,7 @@ var TabsTrigger = React10.forwardRef(({ className, chipProps, ...props }, ref) =
|
|
269
277
|
/* @__PURE__ */ React10.createElement(
|
270
278
|
FloatBox,
|
271
279
|
{
|
280
|
+
withArrow: true,
|
272
281
|
align: orientation === "vertical" ? "start" : "start",
|
273
282
|
side: orientation === "vertical" ? "right" : "bottom",
|
274
283
|
sideOffset: orientation === "vertical" ? width + 30 : 45,
|
@@ -2870,6 +2870,7 @@ var FloatBox = ({
|
|
2870
2870
|
side = "bottom",
|
2871
2871
|
sideOffset = 40,
|
2872
2872
|
align = "center",
|
2873
|
+
withArrow = false,
|
2873
2874
|
...props
|
2874
2875
|
}) => {
|
2875
2876
|
let stylesMap = {
|
@@ -2894,18 +2895,25 @@ var FloatBox = ({
|
|
2894
2895
|
end: { right: sideOffset, bottom: 0 }
|
2895
2896
|
}
|
2896
2897
|
};
|
2898
|
+
const arrowDirection = {
|
2899
|
+
top: "hawa-arrow-default-bottom",
|
2900
|
+
bottom: "hawa-arrow-default-top",
|
2901
|
+
right: "hawa-arrow-default-left",
|
2902
|
+
left: "hawa-arrow-default-right"
|
2903
|
+
};
|
2897
2904
|
return /* @__PURE__ */ React13.createElement(
|
2898
2905
|
"div",
|
2899
2906
|
{
|
2900
2907
|
className: cn(
|
2901
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
2908
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
2902
2909
|
className
|
2903
2910
|
),
|
2904
2911
|
style: { ...stylesMap[side][align] },
|
2905
2912
|
"data-side": side,
|
2906
2913
|
"data-floatbox-state": open ? "open" : "closed"
|
2907
2914
|
},
|
2908
|
-
|
2915
|
+
withArrow && /* @__PURE__ */ React13.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
2916
|
+
/* @__PURE__ */ React13.createElement("span", null, props.children)
|
2909
2917
|
);
|
2910
2918
|
};
|
2911
2919
|
|
@@ -3017,6 +3025,7 @@ var TabsTrigger = React14.forwardRef(({ className, chipProps, ...props }, ref) =
|
|
3017
3025
|
/* @__PURE__ */ React14.createElement(
|
3018
3026
|
FloatBox,
|
3019
3027
|
{
|
3028
|
+
withArrow: true,
|
3020
3029
|
align: orientation === "vertical" ? "start" : "start",
|
3021
3030
|
side: orientation === "vertical" ? "right" : "bottom",
|
3022
3031
|
sideOffset: orientation === "vertical" ? width + 30 : 45,
|
package/dist/elements/index.js
CHANGED
@@ -4226,6 +4226,7 @@ var FloatBox = ({
|
|
4226
4226
|
side = "bottom",
|
4227
4227
|
sideOffset = 40,
|
4228
4228
|
align = "center",
|
4229
|
+
withArrow = false,
|
4229
4230
|
...props
|
4230
4231
|
}) => {
|
4231
4232
|
let stylesMap = {
|
@@ -4250,18 +4251,25 @@ var FloatBox = ({
|
|
4250
4251
|
end: { right: sideOffset, bottom: 0 }
|
4251
4252
|
}
|
4252
4253
|
};
|
4254
|
+
const arrowDirection = {
|
4255
|
+
top: "hawa-arrow-default-bottom",
|
4256
|
+
bottom: "hawa-arrow-default-top",
|
4257
|
+
right: "hawa-arrow-default-left",
|
4258
|
+
left: "hawa-arrow-default-right"
|
4259
|
+
};
|
4253
4260
|
return /* @__PURE__ */ React39.createElement(
|
4254
4261
|
"div",
|
4255
4262
|
{
|
4256
4263
|
className: cn(
|
4257
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
4264
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
4258
4265
|
className
|
4259
4266
|
),
|
4260
4267
|
style: { ...stylesMap[side][align] },
|
4261
4268
|
"data-side": side,
|
4262
4269
|
"data-floatbox-state": open ? "open" : "closed"
|
4263
4270
|
},
|
4264
|
-
|
4271
|
+
withArrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
4272
|
+
/* @__PURE__ */ React39.createElement("span", null, props.children)
|
4265
4273
|
);
|
4266
4274
|
};
|
4267
4275
|
|
@@ -4373,6 +4381,7 @@ var TabsTrigger = React40.forwardRef(({ className, chipProps, ...props }, ref) =
|
|
4373
4381
|
/* @__PURE__ */ React40.createElement(
|
4374
4382
|
FloatBox,
|
4375
4383
|
{
|
4384
|
+
withArrow: true,
|
4376
4385
|
align: orientation === "vertical" ? "start" : "start",
|
4377
4386
|
side: orientation === "vertical" ? "right" : "bottom",
|
4378
4387
|
sideOffset: orientation === "vertical" ? width + 30 : 45,
|
@@ -8087,7 +8096,7 @@ var InterfaceSettings = ({
|
|
8087
8096
|
defaultValue: language,
|
8088
8097
|
onChange: (e) => {
|
8089
8098
|
if (handleLanguage) {
|
8090
|
-
handleLanguage(e
|
8099
|
+
handleLanguage(e);
|
8091
8100
|
}
|
8092
8101
|
setLanguage(e);
|
8093
8102
|
},
|
@@ -8105,7 +8114,7 @@ var InterfaceSettings = ({
|
|
8105
8114
|
defaultValue: color,
|
8106
8115
|
onChange: (e) => {
|
8107
8116
|
if (handleColorMode) {
|
8108
|
-
handleColorMode(e
|
8117
|
+
handleColorMode(e);
|
8109
8118
|
}
|
8110
8119
|
setColor(e);
|
8111
8120
|
},
|
package/dist/elements/index.mjs
CHANGED
@@ -27,7 +27,7 @@ import {
|
|
27
27
|
TabsTrigger,
|
28
28
|
Textarea,
|
29
29
|
UncheckMark
|
30
|
-
} from "../chunk-
|
30
|
+
} from "../chunk-XTGWVGTN.mjs";
|
31
31
|
import {
|
32
32
|
useClipboard
|
33
33
|
} from "../chunk-R2SKHHDK.mjs";
|
@@ -3276,7 +3276,7 @@ var InterfaceSettings = ({
|
|
3276
3276
|
defaultValue: language,
|
3277
3277
|
onChange: (e) => {
|
3278
3278
|
if (handleLanguage) {
|
3279
|
-
handleLanguage(e
|
3279
|
+
handleLanguage(e);
|
3280
3280
|
}
|
3281
3281
|
setLanguage(e);
|
3282
3282
|
},
|
@@ -3294,7 +3294,7 @@ var InterfaceSettings = ({
|
|
3294
3294
|
defaultValue: color,
|
3295
3295
|
onChange: (e) => {
|
3296
3296
|
if (handleColorMode) {
|
3297
|
-
handleColorMode(e
|
3297
|
+
handleColorMode(e);
|
3298
3298
|
}
|
3299
3299
|
setColor(e);
|
3300
3300
|
},
|
package/dist/floatBox/index.d.ts
CHANGED
package/dist/floatBox/index.js
CHANGED
@@ -52,6 +52,7 @@ var FloatBox = ({
|
|
52
52
|
side = "bottom",
|
53
53
|
sideOffset = 40,
|
54
54
|
align = "center",
|
55
|
+
withArrow = false,
|
55
56
|
...props
|
56
57
|
}) => {
|
57
58
|
let stylesMap = {
|
@@ -76,18 +77,25 @@ var FloatBox = ({
|
|
76
77
|
end: { right: sideOffset, bottom: 0 }
|
77
78
|
}
|
78
79
|
};
|
80
|
+
const arrowDirection = {
|
81
|
+
top: "hawa-arrow-default-bottom",
|
82
|
+
bottom: "hawa-arrow-default-top",
|
83
|
+
right: "hawa-arrow-default-left",
|
84
|
+
left: "hawa-arrow-default-right"
|
85
|
+
};
|
79
86
|
return /* @__PURE__ */ React.createElement(
|
80
87
|
"div",
|
81
88
|
{
|
82
89
|
className: cn(
|
83
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
90
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
84
91
|
className
|
85
92
|
),
|
86
93
|
style: { ...stylesMap[side][align] },
|
87
94
|
"data-side": side,
|
88
95
|
"data-floatbox-state": open ? "open" : "closed"
|
89
96
|
},
|
90
|
-
|
97
|
+
withArrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
98
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
91
99
|
);
|
92
100
|
};
|
93
101
|
// Annotate the CommonJS export names for ESM import in node:
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
1
|
+
{"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n withArrow = false,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {withArrow && (\n <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />\n )}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,aACC,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IAE/D,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
|
package/dist/floatBox/index.mjs
CHANGED
@@ -17,6 +17,7 @@ var FloatBox = ({
|
|
17
17
|
side = "bottom",
|
18
18
|
sideOffset = 40,
|
19
19
|
align = "center",
|
20
|
+
withArrow = false,
|
20
21
|
...props
|
21
22
|
}) => {
|
22
23
|
let stylesMap = {
|
@@ -41,18 +42,25 @@ var FloatBox = ({
|
|
41
42
|
end: { right: sideOffset, bottom: 0 }
|
42
43
|
}
|
43
44
|
};
|
45
|
+
const arrowDirection = {
|
46
|
+
top: "hawa-arrow-default-bottom",
|
47
|
+
bottom: "hawa-arrow-default-top",
|
48
|
+
right: "hawa-arrow-default-left",
|
49
|
+
left: "hawa-arrow-default-right"
|
50
|
+
};
|
44
51
|
return /* @__PURE__ */ React.createElement(
|
45
52
|
"div",
|
46
53
|
{
|
47
54
|
className: cn(
|
48
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
55
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
49
56
|
className
|
50
57
|
),
|
51
58
|
style: { ...stylesMap[side][align] },
|
52
59
|
"data-side": side,
|
53
60
|
"data-floatbox-state": open ? "open" : "closed"
|
54
61
|
},
|
55
|
-
|
62
|
+
withArrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
63
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
56
64
|
);
|
57
65
|
};
|
58
66
|
export {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
1
|
+
{"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n withArrow = false,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {withArrow && (\n <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />\n )}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,aACC,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IAE/D,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
|
package/dist/index.css
CHANGED
@@ -3158,6 +3158,74 @@ input[type="number"]::-webkit-inner-spin-button,
|
|
3158
3158
|
.hawa-repeat-infinite {
|
3159
3159
|
animation-iteration-count: infinite;
|
3160
3160
|
}
|
3161
|
+
.hawa-arrow-default-top {
|
3162
|
+
position: relative;
|
3163
|
+
}
|
3164
|
+
.hawa-arrow-default-top:before, .hawa-arrow-default-top:after {
|
3165
|
+
content: "";
|
3166
|
+
position: absolute;
|
3167
|
+
border-top: 10px solid transparent;
|
3168
|
+
border-right: 10px solid transparent;
|
3169
|
+
border-bottom: 10px solid hsl(var(--border));
|
3170
|
+
border-left: 10px solid transparent;
|
3171
|
+
left: 10px;
|
3172
|
+
top: -20px;
|
3173
|
+
}
|
3174
|
+
.hawa-arrow-default-top:after {
|
3175
|
+
border-bottom: 10px solid hsl(var(--popover));
|
3176
|
+
top: -19px;
|
3177
|
+
}
|
3178
|
+
.hawa-arrow-default-right {
|
3179
|
+
position: relative;
|
3180
|
+
}
|
3181
|
+
.hawa-arrow-default-right:before, .hawa-arrow-default-right:after {
|
3182
|
+
content: "";
|
3183
|
+
position: absolute;
|
3184
|
+
border-top: 10px solid transparent;
|
3185
|
+
border-right: 10px solid transparent;
|
3186
|
+
border-bottom: 10px solid transparent;
|
3187
|
+
border-left: 10px solid hsl(var(--border));
|
3188
|
+
top: 10px;
|
3189
|
+
right: -20px;
|
3190
|
+
}
|
3191
|
+
.hawa-arrow-default-right:after {
|
3192
|
+
border-left: 10px solid hsl(var(--popover));
|
3193
|
+
right: -19px;
|
3194
|
+
}
|
3195
|
+
.hawa-arrow-default-bottom {
|
3196
|
+
position: relative;
|
3197
|
+
}
|
3198
|
+
.hawa-arrow-default-bottom:before, .hawa-arrow-default-bottom:after {
|
3199
|
+
content: "";
|
3200
|
+
position: absolute;
|
3201
|
+
border-top: 10px solid hsl(var(--border));
|
3202
|
+
border-right: 10px solid transparent;
|
3203
|
+
border-bottom: 10px solid transparent;
|
3204
|
+
border-left: 10px solid transparent;
|
3205
|
+
left: 10px;
|
3206
|
+
bottom: -20px;
|
3207
|
+
}
|
3208
|
+
.hawa-arrow-default-bottom:after {
|
3209
|
+
border-top: 10px solid hsl(var(--popover));
|
3210
|
+
bottom: -19px;
|
3211
|
+
}
|
3212
|
+
.hawa-arrow-default-left {
|
3213
|
+
position: relative;
|
3214
|
+
}
|
3215
|
+
.hawa-arrow-default-left:before, .hawa-arrow-default-left:after {
|
3216
|
+
content: "";
|
3217
|
+
position: absolute;
|
3218
|
+
border-top: 10px solid transparent;
|
3219
|
+
border-right: 10px solid hsl(var(--border));
|
3220
|
+
border-bottom: 10px solid transparent;
|
3221
|
+
border-left: 10px solid transparent;
|
3222
|
+
top: 10px;
|
3223
|
+
left: -20px;
|
3224
|
+
}
|
3225
|
+
.hawa-arrow-default-left:after {
|
3226
|
+
border-right: 10px solid hsl(var(--popover));
|
3227
|
+
left: -19px;
|
3228
|
+
}
|
3161
3229
|
.shadow-color-primary {
|
3162
3230
|
--tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
|
3163
3231
|
box-shadow: var(--tw-shadow);
|