@sikka/hawa 0.43.0 → 0.43.1-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/appLayout/index.d.mts +1 -1
- package/dist/appLayout/index.d.ts +1 -1
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/blocks/auth/index.js +2 -2
- package/dist/blocks/auth/index.mjs +4 -4
- package/dist/blocks/feedback/index.js +2 -2
- package/dist/blocks/feedback/index.mjs +5 -5
- package/dist/blocks/index.js +2 -2
- package/dist/blocks/index.mjs +2 -2
- package/dist/blocks/misc/index.js +2 -2
- package/dist/blocks/misc/index.mjs +5 -5
- package/dist/blocks/pricing/index.js +2 -2
- package/dist/blocks/pricing/index.mjs +4 -4
- package/dist/card/index.js +2 -2
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +2 -2
- package/dist/card/index.mjs.map +1 -1
- package/dist/{chunk-RE6OFIBP.mjs → chunk-3I6DTCGJ.mjs} +1 -1
- package/dist/{chunk-UP7VUUVQ.mjs → chunk-4SEU2OBJ.mjs} +1 -1
- package/dist/{chunk-2NFENSLV.mjs → chunk-5X6V6BFC.mjs} +1 -1
- package/dist/{chunk-BTIMHZXM.mjs → chunk-A7JXCQLS.mjs} +1 -1
- package/dist/{chunk-YHVUX2MP.mjs → chunk-EP42BEIJ.mjs} +1 -1
- package/dist/{chunk-GGWTBYZF.mjs → chunk-KFJSUYMZ.mjs} +2 -2
- package/dist/{chunk-DDWOF6SP.mjs → chunk-PZ6LGLUF.mjs} +1 -1
- package/dist/{chunk-FIBEENJA.mjs → chunk-REZBAB65.mjs} +1 -1
- package/dist/{chunk-O356IC37.mjs → chunk-S3F3NZSV.mjs} +1 -1
- package/dist/{chunk-5MN7WB7B.mjs → chunk-SLEEOH6M.mjs} +2 -2
- package/dist/destroyableCard/index.js +2 -2
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs +2 -2
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/elements/index.js +2 -2
- package/dist/elements/index.mjs +3 -3
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/dist/layout/index.d.mts +1 -1
- package/dist/layout/index.d.ts +1 -1
- package/dist/layout/index.js +2 -2
- package/dist/layout/index.mjs +2 -2
- package/dist/stats/index.js +2 -2
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs +2 -2
- package/dist/stats/index.mjs.map +1 -1
- package/package.json +1 -1
@@ -1278,7 +1278,7 @@ var Card = React9.forwardRef(
|
|
1278
1278
|
}, ref) => {
|
1279
1279
|
let variantStyles = {
|
1280
1280
|
default: cn(
|
1281
|
-
"hawa-rounded
|
1281
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
1282
1282
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
1283
1283
|
),
|
1284
1284
|
neoBrutalism: cn(
|
@@ -1291,7 +1291,7 @@ var Card = React9.forwardRef(
|
|
1291
1291
|
"div",
|
1292
1292
|
{
|
1293
1293
|
ref,
|
1294
|
-
className: cn(
|
1294
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
1295
1295
|
...props
|
1296
1296
|
}
|
1297
1297
|
);
|
@@ -1,17 +1,17 @@
|
|
1
1
|
"use client";
|
2
2
|
import {
|
3
3
|
Input
|
4
|
-
} from "../../chunk-
|
4
|
+
} from "../../chunk-A7JXCQLS.mjs";
|
5
5
|
import {
|
6
6
|
StopPropagationWrapper
|
7
7
|
} from "../../chunk-47APBDKK.mjs";
|
8
8
|
import {
|
9
9
|
Select
|
10
|
-
} from "../../chunk-
|
10
|
+
} from "../../chunk-5X6V6BFC.mjs";
|
11
11
|
import {
|
12
12
|
EyeIcon,
|
13
13
|
HiddenEyeIcon
|
14
|
-
} from "../../chunk-
|
14
|
+
} from "../../chunk-PZ6LGLUF.mjs";
|
15
15
|
import {
|
16
16
|
Button,
|
17
17
|
Card,
|
@@ -24,7 +24,7 @@ import {
|
|
24
24
|
Label,
|
25
25
|
Loading,
|
26
26
|
cn
|
27
|
-
} from "../../chunk-
|
27
|
+
} from "../../chunk-SLEEOH6M.mjs";
|
28
28
|
|
29
29
|
// blocks/auth/AuthButtons.tsx
|
30
30
|
import React2 from "react";
|
@@ -511,7 +511,7 @@ var Card = React6.forwardRef(
|
|
511
511
|
}, ref) => {
|
512
512
|
let variantStyles = {
|
513
513
|
default: cn(
|
514
|
-
"hawa-rounded
|
514
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
515
515
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
516
516
|
),
|
517
517
|
neoBrutalism: cn(
|
@@ -524,7 +524,7 @@ var Card = React6.forwardRef(
|
|
524
524
|
"div",
|
525
525
|
{
|
526
526
|
ref,
|
527
|
-
className: cn(
|
527
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
528
528
|
...props
|
529
529
|
}
|
530
530
|
);
|
@@ -1,26 +1,26 @@
|
|
1
1
|
"use client";
|
2
2
|
import {
|
3
3
|
Textarea
|
4
|
-
} from "../../chunk-
|
4
|
+
} from "../../chunk-S3F3NZSV.mjs";
|
5
5
|
import {
|
6
6
|
Select
|
7
|
-
} from "../../chunk-
|
7
|
+
} from "../../chunk-5X6V6BFC.mjs";
|
8
8
|
import {
|
9
9
|
Popover,
|
10
10
|
Radio
|
11
|
-
} from "../../chunk-
|
11
|
+
} from "../../chunk-4SEU2OBJ.mjs";
|
12
12
|
import {
|
13
13
|
BadEmoji,
|
14
14
|
GoodEmoji,
|
15
15
|
VeryBadEmoji,
|
16
16
|
VeryGoodEmoji
|
17
|
-
} from "../../chunk-
|
17
|
+
} from "../../chunk-PZ6LGLUF.mjs";
|
18
18
|
import {
|
19
19
|
Button,
|
20
20
|
Card,
|
21
21
|
CardContent,
|
22
22
|
cn
|
23
|
-
} from "../../chunk-
|
23
|
+
} from "../../chunk-SLEEOH6M.mjs";
|
24
24
|
|
25
25
|
// blocks/feedback/UserReferralSource.tsx
|
26
26
|
import React, { useRef, useState } from "react";
|
package/dist/blocks/index.js
CHANGED
@@ -1299,7 +1299,7 @@ var Card = React9.forwardRef(
|
|
1299
1299
|
}, ref) => {
|
1300
1300
|
let variantStyles = {
|
1301
1301
|
default: cn(
|
1302
|
-
"hawa-rounded
|
1302
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
1303
1303
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
1304
1304
|
),
|
1305
1305
|
neoBrutalism: cn(
|
@@ -1312,7 +1312,7 @@ var Card = React9.forwardRef(
|
|
1312
1312
|
"div",
|
1313
1313
|
{
|
1314
1314
|
ref,
|
1315
|
-
className: cn(
|
1315
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
1316
1316
|
...props
|
1317
1317
|
}
|
1318
1318
|
);
|
package/dist/blocks/index.mjs
CHANGED
@@ -17,7 +17,7 @@ import {
|
|
17
17
|
TabsList,
|
18
18
|
TabsTrigger,
|
19
19
|
Textarea
|
20
|
-
} from "../chunk-
|
20
|
+
} from "../chunk-3I6DTCGJ.mjs";
|
21
21
|
import "../chunk-WL7C2A5D.mjs";
|
22
22
|
import {
|
23
23
|
BadEmoji,
|
@@ -42,7 +42,7 @@ import {
|
|
42
42
|
VeryBadEmoji,
|
43
43
|
VeryGoodEmoji,
|
44
44
|
cn
|
45
|
-
} from "../chunk-
|
45
|
+
} from "../chunk-KFJSUYMZ.mjs";
|
46
46
|
import "../chunk-2LUXOXAL.mjs";
|
47
47
|
|
48
48
|
// blocks/auth/AuthButtons.tsx
|
@@ -1006,7 +1006,7 @@ var Card = React18.forwardRef(
|
|
1006
1006
|
}, ref) => {
|
1007
1007
|
let variantStyles = {
|
1008
1008
|
default: cn(
|
1009
|
-
"hawa-rounded
|
1009
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
1010
1010
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
1011
1011
|
),
|
1012
1012
|
neoBrutalism: cn(
|
@@ -1019,7 +1019,7 @@ var Card = React18.forwardRef(
|
|
1019
1019
|
"div",
|
1020
1020
|
{
|
1021
1021
|
ref,
|
1022
|
-
className: cn(
|
1022
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
1023
1023
|
...props
|
1024
1024
|
}
|
1025
1025
|
);
|
@@ -1,17 +1,17 @@
|
|
1
1
|
"use client";
|
2
2
|
import {
|
3
3
|
Input
|
4
|
-
} from "../../chunk-
|
4
|
+
} from "../../chunk-A7JXCQLS.mjs";
|
5
5
|
import {
|
6
6
|
Chip,
|
7
7
|
ScrollArea
|
8
|
-
} from "../../chunk-
|
8
|
+
} from "../../chunk-REZBAB65.mjs";
|
9
9
|
import {
|
10
10
|
Textarea
|
11
|
-
} from "../../chunk-
|
11
|
+
} from "../../chunk-S3F3NZSV.mjs";
|
12
12
|
import {
|
13
13
|
Select
|
14
|
-
} from "../../chunk-
|
14
|
+
} from "../../chunk-5X6V6BFC.mjs";
|
15
15
|
import {
|
16
16
|
Button,
|
17
17
|
Card,
|
@@ -21,7 +21,7 @@ import {
|
|
21
21
|
CardHeader,
|
22
22
|
CardTitle,
|
23
23
|
cn
|
24
|
-
} from "../../chunk-
|
24
|
+
} from "../../chunk-SLEEOH6M.mjs";
|
25
25
|
|
26
26
|
// blocks/misc/LegalTexts.tsx
|
27
27
|
import React10 from "react";
|
@@ -514,7 +514,7 @@ var Card = React8.forwardRef(
|
|
514
514
|
}, ref) => {
|
515
515
|
let variantStyles = {
|
516
516
|
default: cn(
|
517
|
-
"hawa-rounded
|
517
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
518
518
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
519
519
|
),
|
520
520
|
neoBrutalism: cn(
|
@@ -527,7 +527,7 @@ var Card = React8.forwardRef(
|
|
527
527
|
"div",
|
528
528
|
{
|
529
529
|
ref,
|
530
|
-
className: cn(
|
530
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
531
531
|
...props
|
532
532
|
}
|
533
533
|
);
|
@@ -2,22 +2,22 @@
|
|
2
2
|
import {
|
3
3
|
Chip,
|
4
4
|
ScrollArea
|
5
|
-
} from "../../chunk-
|
5
|
+
} from "../../chunk-REZBAB65.mjs";
|
6
6
|
import "../../chunk-47APBDKK.mjs";
|
7
7
|
import {
|
8
8
|
Radio
|
9
|
-
} from "../../chunk-
|
9
|
+
} from "../../chunk-4SEU2OBJ.mjs";
|
10
10
|
import {
|
11
11
|
CheckMark,
|
12
12
|
UncheckMark
|
13
|
-
} from "../../chunk-
|
13
|
+
} from "../../chunk-PZ6LGLUF.mjs";
|
14
14
|
import {
|
15
15
|
Button,
|
16
16
|
Card,
|
17
17
|
Skeleton,
|
18
18
|
Tooltip,
|
19
19
|
cn
|
20
|
-
} from "../../chunk-
|
20
|
+
} from "../../chunk-SLEEOH6M.mjs";
|
21
21
|
|
22
22
|
// blocks/pricing/PricingPlans.tsx
|
23
23
|
import React8 from "react";
|
package/dist/card/index.js
CHANGED
@@ -61,7 +61,7 @@ var Card = React.forwardRef(
|
|
61
61
|
}, ref) => {
|
62
62
|
let variantStyles = {
|
63
63
|
default: cn(
|
64
|
-
"hawa-rounded
|
64
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
65
65
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
66
66
|
),
|
67
67
|
neoBrutalism: cn(
|
@@ -74,7 +74,7 @@ var Card = React.forwardRef(
|
|
74
74
|
"div",
|
75
75
|
{
|
76
76
|
ref,
|
77
|
-
className: cn(
|
77
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
78
78
|
...props
|
79
79
|
}
|
80
80
|
);
|
package/dist/card/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/card/index.ts","../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Card\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n clickable &&\n \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n ),\n neoBrutalism: cn(\n \"neo-brutalism\",\n // \"hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n clickable &&\n \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n ),\n };\n return (\n <div\n ref={ref}\n className={cn(className, !asContainer && variantStyles[variant])}\n {...props}\n />\n );\n },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n <div\n ref={ref}\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n className,\n )}\n {...props}\n />\n {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n </div>\n ),\n);\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n {...props}\n />\n));\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ headless, noPadding, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n className,\n )}\n {...props}\n />\n ),\n);\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n \"hawa-flex hawa-items-center hawa-pt-0\",\n className,\n )}\n {...props}\n />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n CardDescription,\n CardContent,\n CardHeader,\n CardFooter,\n CardTitle,\n Card,\n};\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;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,OAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBAAgB;AAAA,MAClB,SAAS;AAAA,QACP;AAAA,QACA,aACE;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,QACZ;AAAA;AAAA,QAEA,aACE;AAAA,MACJ;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,CAAC,eAAe,cAAc,OAAO,CAAC;AAAA,QAC9D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,SAAI,WAAU,kDACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,MAAM,WAAW,oCAAC,SAAI,WAAU,cAAY,MAAM,OAAQ,CAC7D;AAEJ;AACA,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,IAC1D,GAAG;AAAA;AACN,CACD;AACD,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,MAAM,GAAG,QAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,YAAY,aAAa;AAAA,QACzB,WAAW,cAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QACrC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT,YAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAC9B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,WAAW,cAAc;AACzB,UAAU,cAAc;AACxB,KAAK,cAAc;","names":[]}
|
1
|
+
{"version":3,"sources":["../../elements/card/index.ts","../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Card\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n clickable &&\n \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n ),\n neoBrutalism: cn(\n \"neo-brutalism\",\n // \"hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n clickable &&\n \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n ),\n };\n return (\n <div\n ref={ref}\n className={cn(!asContainer && variantStyles[variant], className)}\n {...props}\n />\n );\n },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n <div\n ref={ref}\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n className,\n )}\n {...props}\n />\n {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n </div>\n ),\n);\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n {...props}\n />\n));\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ headless, noPadding, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n className,\n )}\n {...props}\n />\n ),\n);\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n \"hawa-flex hawa-items-center hawa-pt-0\",\n className,\n )}\n {...props}\n />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n CardDescription,\n CardContent,\n CardHeader,\n CardFooter,\n CardTitle,\n Card,\n};\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;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,OAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBAAgB;AAAA,MAClB,SAAS;AAAA,QACP;AAAA,QACA,aACE;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,QACZ;AAAA;AAAA,QAEA,aACE;AAAA,MACJ;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,CAAC,eAAe,cAAc,OAAO,GAAG,SAAS;AAAA,QAC9D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,SAAI,WAAU,kDACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,MAAM,WAAW,oCAAC,SAAI,WAAU,cAAY,MAAM,OAAQ,CAC7D;AAEJ;AACA,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,IAC1D,GAAG;AAAA;AACN,CACD;AACD,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,MAAM,GAAG,QAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,YAAY,aAAa;AAAA,QACzB,WAAW,cAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QACrC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT,YAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAC9B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,WAAW,cAAc;AACzB,UAAU,cAAc;AACxB,KAAK,cAAc;","names":[]}
|
package/dist/card/index.mjs
CHANGED
@@ -21,7 +21,7 @@ var Card = React.forwardRef(
|
|
21
21
|
}, ref) => {
|
22
22
|
let variantStyles = {
|
23
23
|
default: cn(
|
24
|
-
"hawa-rounded
|
24
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
25
25
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
26
26
|
),
|
27
27
|
neoBrutalism: cn(
|
@@ -34,7 +34,7 @@ var Card = React.forwardRef(
|
|
34
34
|
"div",
|
35
35
|
{
|
36
36
|
ref,
|
37
|
-
className: cn(
|
37
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
38
38
|
...props
|
39
39
|
}
|
40
40
|
);
|
package/dist/card/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded
|
1
|
+
{"version":3,"sources":["../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n clickable &&\n \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n ),\n neoBrutalism: cn(\n \"neo-brutalism\",\n // \"hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n clickable &&\n \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n ),\n };\n return (\n <div\n ref={ref}\n className={cn(!asContainer && variantStyles[variant], className)}\n {...props}\n />\n );\n },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n <div\n ref={ref}\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n className,\n )}\n {...props}\n />\n {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n </div>\n ),\n);\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n {...props}\n />\n));\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ headless, noPadding, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n className,\n )}\n {...props}\n />\n ),\n);\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n \"hawa-flex hawa-items-center hawa-pt-0\",\n className,\n )}\n {...props}\n />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n CardDescription,\n CardContent,\n CardHeader,\n CardFooter,\n CardTitle,\n Card,\n};\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,OAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBAAgB;AAAA,MAClB,SAAS;AAAA,QACP;AAAA,QACA,aACE;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,QACZ;AAAA;AAAA,QAEA,aACE;AAAA,MACJ;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,CAAC,eAAe,cAAc,OAAO,GAAG,SAAS;AAAA,QAC9D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,SAAI,WAAU,kDACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,MAAM,WAAW,oCAAC,SAAI,WAAU,cAAY,MAAM,OAAQ,CAC7D;AAEJ;AACA,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,IAC1D,GAAG;AAAA;AACN,CACD;AACD,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,MAAM,GAAG,QAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,YAAY,aAAa;AAAA,QACzB,WAAW,cAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QACrC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT,YAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAC9B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,WAAW,cAAc;AACzB,UAAU,cAAc;AACxB,KAAK,cAAc;","names":[]}
|
@@ -1002,7 +1002,7 @@ var Card = React7.forwardRef(
|
|
1002
1002
|
}, ref) => {
|
1003
1003
|
let variantStyles = {
|
1004
1004
|
default: cn(
|
1005
|
-
"hawa-rounded
|
1005
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
1006
1006
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
1007
1007
|
),
|
1008
1008
|
neoBrutalism: cn(
|
@@ -1015,7 +1015,7 @@ var Card = React7.forwardRef(
|
|
1015
1015
|
"div",
|
1016
1016
|
{
|
1017
1017
|
ref,
|
1018
|
-
className: cn(
|
1018
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
1019
1019
|
...props
|
1020
1020
|
}
|
1021
1021
|
);
|
@@ -463,7 +463,7 @@ var Card = React6.forwardRef(
|
|
463
463
|
}, ref) => {
|
464
464
|
let variantStyles = {
|
465
465
|
default: cn(
|
466
|
-
"hawa-rounded
|
466
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
467
467
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
468
468
|
),
|
469
469
|
neoBrutalism: cn(
|
@@ -476,7 +476,7 @@ var Card = React6.forwardRef(
|
|
476
476
|
"div",
|
477
477
|
{
|
478
478
|
ref,
|
479
|
-
className: cn(
|
479
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
480
480
|
...props
|
481
481
|
}
|
482
482
|
);
|
@@ -57,7 +57,7 @@ var Card = React.forwardRef(
|
|
57
57
|
}, ref) => {
|
58
58
|
let variantStyles = {
|
59
59
|
default: cn(
|
60
|
-
"hawa-rounded
|
60
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
61
61
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
62
62
|
),
|
63
63
|
neoBrutalism: cn(
|
@@ -70,7 +70,7 @@ var Card = React.forwardRef(
|
|
70
70
|
"div",
|
71
71
|
{
|
72
72
|
ref,
|
73
|
-
className: cn(
|
73
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
74
74
|
...props
|
75
75
|
}
|
76
76
|
);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/destroyableCard/index.ts","../../elements/destroyableCard/DestroyableCard.tsx","../../util/index.ts","../../elements/card/Card.tsx"],"sourcesContent":["export * from \"./DestroyableCard\";\n","import React, { FC, useRef, useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { Card, CardContent } from \"../card\";\n\ntype DestroyableCard = {\n position?: \"bottom-right\" | \"bottom-left\";\n direction?: DirectionType;\n fixed?: boolean;\n children?: any;\n};\nexport const DestroyableCard: FC<DestroyableCard> = ({\n position = \"bottom-right\",\n fixed,\n direction,\n ...props\n}) => {\n const [closed, setClosed] = useState(false);\n const popUpRef = useRef<HTMLDivElement>(null);\n\n const boxPosition = {\n \"bottom-right\": \"hawa-right-4 hawa-bottom-4\",\n \"bottom-left\": \"hawa-left-4 hawa-bottom-4\",\n };\n\n return (\n <div\n className={cn(\n \"hawa-transition-all\",\n closed ? \"hawa-opacity-0\" : \"hawa-opacity-100\",\n )}\n ref={popUpRef}\n >\n <Card\n className={cn(\n fixed ? \"hawa-fixed\" : \"hawa-relative\",\n fixed && position && boxPosition[position],\n )}\n dir={direction}\n >\n <button\n type=\"button\"\n className={cn(\n direction === \"rtl\" ? \"hawa-left-2\" : \"hawa-right-2\",\n \"hawa-absolute hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white\",\n )}\n data-dismiss-target=\"#destroyable-card\"\n aria-label=\"Close\"\n onClick={() => {\n setClosed(true);\n setTimeout(() => {\n if (popUpRef?.current) {\n popUpRef?.current.removeChild(popUpRef?.current.children[0]);\n }\n }, 200);\n }}\n >\n <svg\n aria-hidden=\"true\"\n className=\"hawa-h-5 hawa-w-5\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n ></path>\n </svg>\n </button>\n <CardContent headless>{props.children}</CardContent>\n </Card>\n </div>\n );\n};\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","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n clickable &&\n \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n ),\n neoBrutalism: cn(\n \"neo-brutalism\",\n // \"hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n clickable &&\n \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n ),\n };\n return (\n <div\n ref={ref}\n className={cn(className, !asContainer && variantStyles[variant])}\n {...props}\n />\n );\n },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n <div\n ref={ref}\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n className,\n )}\n {...props}\n />\n {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n </div>\n ),\n);\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n {...props}\n />\n));\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ headless, noPadding, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n className,\n )}\n {...props}\n />\n ),\n);\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n \"hawa-flex hawa-items-center hawa-pt-0\",\n className,\n )}\n {...props}\n />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n CardDescription,\n CardContent,\n CardHeader,\n CardFooter,\n CardTitle,\n Card,\n};\n"],"mappings":"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","names":["React"]}
|
1
|
+
{"version":3,"sources":["../../elements/destroyableCard/index.ts","../../elements/destroyableCard/DestroyableCard.tsx","../../util/index.ts","../../elements/card/Card.tsx"],"sourcesContent":["export * from \"./DestroyableCard\";\n","import React, { FC, useRef, useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { Card, CardContent } from \"../card\";\n\ntype DestroyableCard = {\n position?: \"bottom-right\" | \"bottom-left\";\n direction?: DirectionType;\n fixed?: boolean;\n children?: any;\n};\nexport const DestroyableCard: FC<DestroyableCard> = ({\n position = \"bottom-right\",\n fixed,\n direction,\n ...props\n}) => {\n const [closed, setClosed] = useState(false);\n const popUpRef = useRef<HTMLDivElement>(null);\n\n const boxPosition = {\n \"bottom-right\": \"hawa-right-4 hawa-bottom-4\",\n \"bottom-left\": \"hawa-left-4 hawa-bottom-4\",\n };\n\n return (\n <div\n className={cn(\n \"hawa-transition-all\",\n closed ? \"hawa-opacity-0\" : \"hawa-opacity-100\",\n )}\n ref={popUpRef}\n >\n <Card\n className={cn(\n fixed ? \"hawa-fixed\" : \"hawa-relative\",\n fixed && position && boxPosition[position],\n )}\n dir={direction}\n >\n <button\n type=\"button\"\n className={cn(\n direction === \"rtl\" ? \"hawa-left-2\" : \"hawa-right-2\",\n \"hawa-absolute hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white\",\n )}\n data-dismiss-target=\"#destroyable-card\"\n aria-label=\"Close\"\n onClick={() => {\n setClosed(true);\n setTimeout(() => {\n if (popUpRef?.current) {\n popUpRef?.current.removeChild(popUpRef?.current.children[0]);\n }\n }, 200);\n }}\n >\n <svg\n aria-hidden=\"true\"\n className=\"hawa-h-5 hawa-w-5\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n ></path>\n </svg>\n </button>\n <CardContent headless>{props.children}</CardContent>\n </Card>\n </div>\n );\n};\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","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n clickable?: boolean;\n variant?: \"default\" | \"neoBrutalism\";\n asContainer?: boolean;\n}\n\ntype CardContentProps = {\n headless?: boolean;\n noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n variant = \"default\",\n clickable = false,\n asContainer = false,\n ...props\n },\n ref,\n ) => {\n let variantStyles = {\n default: cn(\n \"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n clickable &&\n \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n ),\n neoBrutalism: cn(\n \"neo-brutalism\",\n // \"hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n clickable &&\n \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n ),\n };\n return (\n <div\n ref={ref}\n className={cn(!asContainer && variantStyles[variant], className)}\n {...props}\n />\n );\n },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n <div\n ref={ref}\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n className,\n )}\n {...props}\n />\n {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n </div>\n ),\n);\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n {...props}\n />\n));\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ headless, noPadding, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n className,\n )}\n {...props}\n />\n ),\n);\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n \"hawa-flex hawa-items-center hawa-pt-0\",\n className,\n )}\n {...props}\n />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n CardDescription,\n CardContent,\n CardHeader,\n CardFooter,\n CardTitle,\n Card,\n};\n"],"mappings":"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","names":["React"]}
|
@@ -22,7 +22,7 @@ var Card = React.forwardRef(
|
|
22
22
|
}, ref) => {
|
23
23
|
let variantStyles = {
|
24
24
|
default: cn(
|
25
|
-
"hawa-rounded
|
25
|
+
"hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
|
26
26
|
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
|
27
27
|
),
|
28
28
|
neoBrutalism: cn(
|
@@ -35,7 +35,7 @@ var Card = React.forwardRef(
|
|
35
35
|
"div",
|
36
36
|
{
|
37
37
|
ref,
|
38
|
-
className: cn(
|
38
|
+
className: cn(!asContainer && variantStyles[variant], className),
|
39
39
|
...props
|
40
40
|
}
|
41
41
|
);
|