@sikka/hawa 0.27.23-next → 0.28.0-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.
Files changed (47) hide show
  1. package/dist/blocks/auth/index.d.mts +29 -3
  2. package/dist/blocks/auth/index.d.ts +29 -3
  3. package/dist/blocks/auth/index.js +385 -382
  4. package/dist/blocks/auth/index.mjs +314 -308
  5. package/dist/blocks/feedback/index.d.mts +1 -1
  6. package/dist/blocks/feedback/index.d.ts +1 -1
  7. package/dist/blocks/feedback/index.mjs +5 -5
  8. package/dist/blocks/index.d.mts +28 -2
  9. package/dist/blocks/index.d.ts +28 -2
  10. package/dist/blocks/index.js +1244 -1174
  11. package/dist/blocks/index.mjs +19 -15
  12. package/dist/blocks/misc/index.d.mts +1 -1
  13. package/dist/blocks/misc/index.d.ts +1 -1
  14. package/dist/blocks/misc/index.js +87 -20
  15. package/dist/blocks/misc/index.mjs +92 -25
  16. package/dist/blocks/pricing/index.d.mts +1 -1
  17. package/dist/blocks/pricing/index.d.ts +1 -1
  18. package/dist/blocks/pricing/index.mjs +4 -4
  19. package/dist/{chunk-W5I4VB5Z.mjs → chunk-4F7LNY2V.mjs} +1 -1
  20. package/dist/{chunk-MMOEFJSP.mjs → chunk-6HOSGMTV.mjs} +1 -1
  21. package/dist/{chunk-M6XGGAPQ.mjs → chunk-KZCOE6V3.mjs} +1 -1
  22. package/dist/{chunk-EFWL3FFK.mjs → chunk-N5J4XNGU.mjs} +1 -1
  23. package/dist/{chunk-DUL6C2S2.mjs → chunk-NK7TELIV.mjs} +1 -1
  24. package/dist/{chunk-ZOWDRDAM.mjs → chunk-R2NAPFAZ.mjs} +221 -221
  25. package/dist/{chunk-7QEBDFLT.mjs → chunk-SYZ5JMYJ.mjs} +2 -4
  26. package/dist/{chunk-7CYXEZDV.mjs → chunk-TIQERSM3.mjs} +1 -1
  27. package/dist/{chunk-5UYZN5SQ.mjs → chunk-Y3HUZNCH.mjs} +88 -21
  28. package/dist/{chunk-DQHPOUHR.mjs → chunk-ZV3KYZ5G.mjs} +1 -1
  29. package/dist/elements/index.d.mts +5 -4
  30. package/dist/elements/index.d.ts +5 -4
  31. package/dist/elements/index.js +87 -20
  32. package/dist/elements/index.mjs +3 -3
  33. package/dist/index.css +29 -0
  34. package/dist/index.d.mts +54 -27
  35. package/dist/index.d.ts +54 -27
  36. package/dist/index.js +105 -33
  37. package/dist/index.mjs +104 -33
  38. package/dist/layout/index.mjs +2 -2
  39. package/dist/tabs/index.d.mts +2 -1
  40. package/dist/tabs/index.d.ts +2 -1
  41. package/dist/tabs/index.js +89 -20
  42. package/dist/tabs/index.js.map +1 -1
  43. package/dist/tabs/index.mjs +89 -20
  44. package/dist/tabs/index.mjs.map +1 -1
  45. package/dist/{textTypes-u4OSE-rn.d.ts → textTypes-ah2JJr8v.d.mts} +1 -1
  46. package/dist/{textTypes-u4OSE-rn.d.mts → textTypes-ah2JJr8v.d.ts} +1 -1
  47. package/package.json +2 -1
@@ -49,6 +49,9 @@ function cn(...inputs) {
49
49
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
50
50
  }
51
51
 
52
+ // elements/tabs/Tabs.tsx
53
+ var import_tailwind_variants = require("tailwind-variants");
54
+
52
55
  // elements/chip/Chip.tsx
53
56
  var import_react = __toESM(require("react"));
54
57
  var Chip = import_react.default.forwardRef(
@@ -131,31 +134,99 @@ var Chip = import_react.default.forwardRef(
131
134
  );
132
135
 
133
136
  // elements/tabs/Tabs.tsx
134
- var TabsContext = React2.createContext({ orientation: "vertical" });
135
- var Tabs = React2.forwardRef(
136
- ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React2.createElement(
137
- TabsPrimitive.Root,
137
+ var tabsListVariant = (0, import_tailwind_variants.tv)({
138
+ base: "",
139
+ variants: {
140
+ variant: {
141
+ default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
142
+ underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
143
+ underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
144
+ },
145
+ orientation: {
146
+ horizontal: "",
147
+ vertical: ""
148
+ }
149
+ },
150
+ compoundVariants: [
138
151
  {
139
- ref,
140
- className: cn(
141
- "hawa-flex hawa-gap-2",
142
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
143
- className
144
- ),
145
- ...props
152
+ variant: "underlined_tabs",
153
+ orientation: "vertical",
154
+ class: "hawa-border-e-2 hawa-border-e-primary"
146
155
  },
147
- /* @__PURE__ */ React2.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
148
- )
149
- );
156
+ {
157
+ variant: "underlined_tabs",
158
+ orientation: "horizontal",
159
+ class: "hawa-border-b-2 hawa-border-b-primary"
160
+ }
161
+ ],
162
+ defaultVariants: {
163
+ variant: "default",
164
+ orientation: "horizontal"
165
+ }
166
+ });
167
+ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
168
+ base: "",
169
+ variants: {
170
+ variant: {
171
+ default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
172
+ underlined: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
173
+ underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10"
174
+ },
175
+ orientation: {
176
+ horizontal: "",
177
+ vertical: ""
178
+ }
179
+ },
180
+ compoundVariants: [
181
+ {
182
+ variant: "underlined",
183
+ orientation: "horizontal",
184
+ class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
185
+ },
186
+ {
187
+ variant: "underlined",
188
+ orientation: "vertical",
189
+ class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
190
+ },
191
+ {
192
+ variant: "underlined_tabs",
193
+ orientation: "horizontal",
194
+ class: "hawa-rounded-b-none"
195
+ },
196
+ {
197
+ variant: "underlined_tabs",
198
+ orientation: "vertical",
199
+ class: "hawa-rounded-e-none"
200
+ }
201
+ ],
202
+ defaultVariants: {
203
+ variant: "default",
204
+ orientation: "horizontal"
205
+ }
206
+ });
207
+ var TabsContext = React2.createContext({ orientation: "horizontal", variant: "default" });
208
+ var Tabs = React2.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React2.createElement(
209
+ TabsPrimitive.Root,
210
+ {
211
+ ref,
212
+ className: cn(
213
+ "hawa-flex hawa-gap-2",
214
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
215
+ className
216
+ ),
217
+ ...props
218
+ },
219
+ /* @__PURE__ */ React2.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
220
+ ));
150
221
  Tabs.displayName = TabsPrimitive.Root.displayName;
151
222
  var TabsList = React2.forwardRef(({ className, ...props }, ref) => {
152
- const { orientation } = React2.useContext(TabsContext);
223
+ const { orientation, variant } = React2.useContext(TabsContext);
153
224
  return /* @__PURE__ */ React2.createElement(
154
225
  TabsPrimitive.List,
155
226
  {
156
227
  ref,
157
228
  className: cn(
158
- "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
229
+ tabsListVariant({ variant, orientation }),
159
230
  orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
160
231
  className
161
232
  ),
@@ -165,14 +236,12 @@ var TabsList = React2.forwardRef(({ className, ...props }, ref) => {
165
236
  });
166
237
  TabsList.displayName = TabsPrimitive.List.displayName;
167
238
  var TabsTrigger = React2.forwardRef(({ className, chipProps, ...props }, ref) => {
239
+ const { orientation, variant } = React2.useContext(TabsContext);
168
240
  return /* @__PURE__ */ React2.createElement(
169
241
  TabsPrimitive.Trigger,
170
242
  {
171
243
  ref,
172
- className: cn(
173
- "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
174
- className
175
- ),
244
+ className: cn(tabsTriggerVariant({ variant, orientation }), className),
176
245
  ...props
177
246
  },
178
247
  props.children,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../util/index.ts","../../elements/chip/Chip.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\n\nimport { cn } from \"@util/index\";\nimport { Chip, ChipTypes } from \"../chip/Chip\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n}>({ orientation: \"vertical\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { orientation?: \"vertical\" | \"horizontal\" };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(\n (\n { className, orientation = \"vertical\" as OrientationType, ...props },\n ref\n ) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n )\n);\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className\n )}\n {...props}\n />\n );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n className\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n );\n});\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className\n )}\n {...props}\n />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\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 React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n"],"mappings":"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","names":["React","React"]}
1
+ {"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../util/index.ts","../../elements/chip/Chip.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { VariantProps, cva } from \"class-variance-authority\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip/Chip\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\"\n },\n orientation: {\n horizontal: \"\",\n vertical: \"\"\n }\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\"\n }\n ],\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\"\n }\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\"\n },\n orientation: {\n horizontal: \"\",\n vertical: \"\"\n }\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\"\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\"\n }\n ],\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\"\n }\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & {\n variant?: TabsVariants;\n};\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className\n )}\n {...props}\n />\n );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(tabsTriggerVariant({ variant, orientation }), className)}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n );\n});\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className\n )}\n {...props}\n />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\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 React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n"],"mappings":"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","names":["React","React"]}
@@ -11,6 +11,9 @@ function cn(...inputs) {
11
11
  return twMerge(clsx(inputs));
12
12
  }
13
13
 
14
+ // elements/tabs/Tabs.tsx
15
+ import { tv } from "tailwind-variants";
16
+
14
17
  // elements/chip/Chip.tsx
15
18
  import React from "react";
16
19
  var Chip = React.forwardRef(
@@ -93,31 +96,99 @@ var Chip = React.forwardRef(
93
96
  );
94
97
 
95
98
  // elements/tabs/Tabs.tsx
96
- var TabsContext = React2.createContext({ orientation: "vertical" });
97
- var Tabs = React2.forwardRef(
98
- ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React2.createElement(
99
- TabsPrimitive.Root,
99
+ var tabsListVariant = tv({
100
+ base: "",
101
+ variants: {
102
+ variant: {
103
+ default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
104
+ underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
105
+ underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
106
+ },
107
+ orientation: {
108
+ horizontal: "",
109
+ vertical: ""
110
+ }
111
+ },
112
+ compoundVariants: [
100
113
  {
101
- ref,
102
- className: cn(
103
- "hawa-flex hawa-gap-2",
104
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
105
- className
106
- ),
107
- ...props
114
+ variant: "underlined_tabs",
115
+ orientation: "vertical",
116
+ class: "hawa-border-e-2 hawa-border-e-primary"
108
117
  },
109
- /* @__PURE__ */ React2.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
110
- )
111
- );
118
+ {
119
+ variant: "underlined_tabs",
120
+ orientation: "horizontal",
121
+ class: "hawa-border-b-2 hawa-border-b-primary"
122
+ }
123
+ ],
124
+ defaultVariants: {
125
+ variant: "default",
126
+ orientation: "horizontal"
127
+ }
128
+ });
129
+ var tabsTriggerVariant = tv({
130
+ base: "",
131
+ variants: {
132
+ variant: {
133
+ default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
134
+ underlined: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
135
+ underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10"
136
+ },
137
+ orientation: {
138
+ horizontal: "",
139
+ vertical: ""
140
+ }
141
+ },
142
+ compoundVariants: [
143
+ {
144
+ variant: "underlined",
145
+ orientation: "horizontal",
146
+ class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
147
+ },
148
+ {
149
+ variant: "underlined",
150
+ orientation: "vertical",
151
+ class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
152
+ },
153
+ {
154
+ variant: "underlined_tabs",
155
+ orientation: "horizontal",
156
+ class: "hawa-rounded-b-none"
157
+ },
158
+ {
159
+ variant: "underlined_tabs",
160
+ orientation: "vertical",
161
+ class: "hawa-rounded-e-none"
162
+ }
163
+ ],
164
+ defaultVariants: {
165
+ variant: "default",
166
+ orientation: "horizontal"
167
+ }
168
+ });
169
+ var TabsContext = React2.createContext({ orientation: "horizontal", variant: "default" });
170
+ var Tabs = React2.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React2.createElement(
171
+ TabsPrimitive.Root,
172
+ {
173
+ ref,
174
+ className: cn(
175
+ "hawa-flex hawa-gap-2",
176
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
177
+ className
178
+ ),
179
+ ...props
180
+ },
181
+ /* @__PURE__ */ React2.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
182
+ ));
112
183
  Tabs.displayName = TabsPrimitive.Root.displayName;
113
184
  var TabsList = React2.forwardRef(({ className, ...props }, ref) => {
114
- const { orientation } = React2.useContext(TabsContext);
185
+ const { orientation, variant } = React2.useContext(TabsContext);
115
186
  return /* @__PURE__ */ React2.createElement(
116
187
  TabsPrimitive.List,
117
188
  {
118
189
  ref,
119
190
  className: cn(
120
- "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
191
+ tabsListVariant({ variant, orientation }),
121
192
  orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
122
193
  className
123
194
  ),
@@ -127,14 +198,12 @@ var TabsList = React2.forwardRef(({ className, ...props }, ref) => {
127
198
  });
128
199
  TabsList.displayName = TabsPrimitive.List.displayName;
129
200
  var TabsTrigger = React2.forwardRef(({ className, chipProps, ...props }, ref) => {
201
+ const { orientation, variant } = React2.useContext(TabsContext);
130
202
  return /* @__PURE__ */ React2.createElement(
131
203
  TabsPrimitive.Trigger,
132
204
  {
133
205
  ref,
134
- className: cn(
135
- "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
136
- className
137
- ),
206
+ className: cn(tabsTriggerVariant({ variant, orientation }), className),
138
207
  ...props
139
208
  },
140
209
  props.children,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../elements/tabs/Tabs.tsx","../../util/index.ts","../../elements/chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\n\nimport { cn } from \"@util/index\";\nimport { Chip, ChipTypes } from \"../chip/Chip\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n}>({ orientation: \"vertical\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { orientation?: \"vertical\" | \"horizontal\" };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(\n (\n { className, orientation = \"vertical\" as OrientationType, ...props },\n ref\n ) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n )\n);\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className\n )}\n {...props}\n />\n );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n className\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n );\n});\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className\n )}\n {...props}\n />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\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 React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n"],"mappings":"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","names":["React"]}
1
+ {"version":3,"sources":["../../elements/tabs/Tabs.tsx","../../util/index.ts","../../elements/chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { VariantProps, cva } from \"class-variance-authority\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip/Chip\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\"\n },\n orientation: {\n horizontal: \"\",\n vertical: \"\"\n }\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\"\n }\n ],\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\"\n }\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\"\n },\n orientation: {\n horizontal: \"\",\n vertical: \"\"\n }\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\"\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\"\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\"\n }\n ],\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\"\n }\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & {\n variant?: TabsVariants;\n};\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className\n )}\n {...props}\n />\n );\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(tabsTriggerVariant({ variant, orientation }), className)}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n );\n});\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className\n )}\n {...props}\n />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\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 React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n"],"mappings":"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","names":["React"]}
@@ -92,4 +92,4 @@ type NewPasswordTextsTypes = {
92
92
  registerText?: string;
93
93
  };
94
94
 
95
- export type { BaseInputType as B, DirectionType as D, LoginFormTextsTypes as L, NewPasswordTextsTypes as N, PositionType as P, RadioOptionType as R, TextInputType as T, RegisterFormTextsTypes as a, ThirdPartyAuthTextsTypes as b, ResetPasswordTextsTypes as c, PricingPlanTexts as d };
95
+ export type { BaseInputType as B, DirectionType as D, LoginFormTextsTypes as L, NewPasswordTextsTypes as N, PositionType as P, RadioOptionType as R, TextInputType as T, ThirdPartyAuthTextsTypes as a, RegisterFormTextsTypes as b, ResetPasswordTextsTypes as c, PricingPlanTexts as d };
@@ -92,4 +92,4 @@ type NewPasswordTextsTypes = {
92
92
  registerText?: string;
93
93
  };
94
94
 
95
- export type { BaseInputType as B, DirectionType as D, LoginFormTextsTypes as L, NewPasswordTextsTypes as N, PositionType as P, RadioOptionType as R, TextInputType as T, RegisterFormTextsTypes as a, ThirdPartyAuthTextsTypes as b, ResetPasswordTextsTypes as c, PricingPlanTexts as d };
95
+ export type { BaseInputType as B, DirectionType as D, LoginFormTextsTypes as L, NewPasswordTextsTypes as N, PositionType as P, RadioOptionType as R, TextInputType as T, ThirdPartyAuthTextsTypes as a, RegisterFormTextsTypes as b, ResetPasswordTextsTypes as c, PricingPlanTexts as d };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.27.23-next",
3
+ "version": "0.28.0-next",
4
4
  "description": "Modern UI Kit made with Tailwind",
5
5
  "author": {
6
6
  "name": "Sikka Software",
@@ -81,6 +81,7 @@
81
81
  "react-select": "^5.8.0",
82
82
  "signature_pad": "^4.1.7",
83
83
  "tailwind-merge": "^2.2.1",
84
+ "tailwind-variants": "^0.1.20",
84
85
  "trim-canvas": "^0.1.2",
85
86
  "zod": "^3.22.4"
86
87
  },