@sikka/hawa
Version:
Modern UI Kit made with Tailwind
276 lines (267 loc) • 10.2 kB
JavaScript
"use client";
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// elements/accordion/index.ts
var accordion_exports = {};
__export(accordion_exports, {
Accordion: () => Accordion,
AccordionContent: () => AccordionContent,
AccordionItem: () => AccordionItem,
AccordionRoot: () => AccordionRoot,
AccordionTrigger: () => AccordionTrigger
});
module.exports = __toCommonJS(accordion_exports);
// elements/accordion/Accordion.tsx
var React4 = __toESM(require("react"));
var AccordionPrimitive3 = __toESM(require("@radix-ui/react-accordion"));
// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// elements/chip/Chip.tsx
var import_react = __toESM(require("react"));
var Chip = import_react.default.forwardRef(
({
label,
size = "normal",
icon,
color,
radius = "inherit",
dot,
dotStatus = "none",
...rest
}, ref) => {
let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold ";
let radiusStyles = {
inherit: " hawa-rounded",
full: "hawa-rounded-full",
none: "hawa-rounded-none"
};
let sizeStyles = {
small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
normal: "hawa-h-fit hawa-text-xs",
large: "hawa-text-base"
};
let dotStyles = {
small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
};
let dotStatusStyles = {
none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
available: "hawa-bg-green-500",
unavailable: "hawa-bg-red-500"
};
let colorStyles = {
green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
};
if (label) {
return /* @__PURE__ */ import_react.default.createElement(
"span",
{
...rest,
ref,
className: cn(
defaultStyles,
sizeStyles[size],
radiusStyles[radius],
color ? colorStyles[color] : "hawa-border hawa-bg-none",
rest.className
)
},
dot && /* @__PURE__ */ import_react.default.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ import_react.default.createElement(
"span",
{
...rest,
ref,
className: cn(
"hawa-h-2 hawa-w-2 hawa-rounded-full",
color ? colorStyles[color] : "hawa-border hawa-bg-none"
)
}
);
}
}
);
// elements/accordion/AccordionContent.tsx
var React2 = __toESM(require("react"));
var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(
AccordionPrimitive.Content,
{
ref,
className: !props.unstyled ? cn(
"hawa-overflow-hidden hawa-text-sm hawa-transition-all data-[state=closed]:hawa-animate-accordion-up data-[state=open]:hawa-animate-accordion-down",
className
) : className,
...props
},
/* @__PURE__ */ React2.createElement("div", { className: "hawa-bg-background hawa-p-4" }, children)
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
// elements/accordion/AccordionTrigger.tsx
var React3 = __toESM(require("react"));
var AccordionPrimitive2 = __toESM(require("@radix-ui/react-accordion"));
var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React3.createElement(AccordionPrimitive2.Header, { className: "hawa-flex" }, /* @__PURE__ */ React3.createElement(
AccordionPrimitive2.Trigger,
{
ref,
className: !props.unstyled ? cn(
"hawa-flex hawa-flex-1 hawa-items-center hawa-justify-between hawa-bg-muted/50 hawa-p-4 hawa-font-medium hawa-transition-all [&[data-state=open]>svg]:hawa-rotate-180",
props.disabled ? "hawa-bg-muted/30 hawa-text-muted-foreground/50" : "hover:hawa-bg-muted",
className
) : className,
...props
},
children,
!props.hideArrow && /* @__PURE__ */ React3.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "hawa-icon hawa-shrink-0 hawa-transition-transform hawa-duration-200"
},
/* @__PURE__ */ React3.createElement("path", { d: "m6 9 6 6 6-6" })
)
)));
AccordionTrigger.displayName = AccordionPrimitive2.Trigger.displayName;
// elements/accordion/Accordion.tsx
var Accordion = React4.forwardRef(
({
items,
design = "default",
itemClassNames,
triggerclassNames,
contentclassNames,
className,
...props
}, ref) => /* @__PURE__ */ React4.createElement(AccordionPrimitive3.Root, { type: props.type, collapsible: true }, /* @__PURE__ */ React4.createElement(
"div",
{
className: cn("hawa-flex hawa-flex-col", {
"hawa-gap-4": design === "separated",
"hawa-gap-0": design === "default"
})
},
items.map((item, index) => /* @__PURE__ */ React4.createElement(
AccordionPrimitive3.Item,
{
disabled: item.disabled || false,
className: cn(itemClassNames, "hawa-rounded"),
key: index,
value: `item-${index}`
},
/* @__PURE__ */ React4.createElement(
AccordionTrigger,
{
disabled: item.disabled || false,
className: cn(
"hawa-transition-all hawa-text-start",
design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-b-none" : {
"hawa-rounded-t": index === 0,
"data-[state=closed]:hawa-rounded-b": index === items.length - 1
},
triggerclassNames
)
},
/* @__PURE__ */ React4.createElement(
"span",
{
className: cn(
"hawa-flex hawa-flex-row",
item.chip && "hawa-gap-2"
)
},
item.trigger,
" ",
item.chip && /* @__PURE__ */ React4.createElement(Chip, { ...item.chip })
)
),
/* @__PURE__ */ React4.createElement(
AccordionContent,
{
"aria-disabled": item.disabled || false,
className: cn(
"hawa-border hawa-transition-all",
design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-t-none" : {
"data-[state=open]:hawa-rounded-b": index === items.length - 1
},
contentclassNames
)
},
item.content
)
))
))
);
Accordion.displayName = "Accordion";
// elements/accordion/AccordionItem.tsx
var React5 = __toESM(require("react"));
var AccordionPrimitive4 = __toESM(require("@radix-ui/react-accordion"));
var AccordionItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(AccordionPrimitive4.Item, { ref, className: cn(className), ...props }));
AccordionItem.displayName = "AccordionItem";
// elements/accordion/AccordionRoot.tsx
var AccordionPrimitive5 = __toESM(require("@radix-ui/react-accordion"));
var AccordionRoot = AccordionPrimitive5.Root;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Accordion,
AccordionContent,
AccordionItem,
AccordionRoot,
AccordionTrigger
});
//# sourceMappingURL=index.js.map