@sikka/hawa
Version:
Modern UI Kit made with Tailwind
186 lines (182 loc) • 6.13 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/checkbox/index.ts
var checkbox_exports = {};
__export(checkbox_exports, {
Checkbox: () => Checkbox
});
module.exports = __toCommonJS(checkbox_exports);
// elements/checkbox/Checkbox.tsx
var React = __toESM(require("react"));
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
// 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/checkbox/Checkbox.tsx
var Checkbox = ({
id,
label,
sublabel,
helperText,
disabled,
size = "default",
radius = "inherit",
...props
}) => {
let labelLineHeightStyles = {
xs: sublabel || helperText ? 0.5 : 0.1,
sm: 0.6,
default: 1,
md: 0.8,
lg: 0.9,
xl: 1
};
return /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-flex hawa-gap-2",
size === "default" ? "hawa-items-top" : "hawa-items-center"
)
},
/* @__PURE__ */ React.createElement(
CheckboxElement,
{
...props,
size,
radius,
disabled,
id
}
),
(label || helperText) && /* @__PURE__ */ React.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React.createElement(
"label",
{
htmlFor: id,
className: cn(
"hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium",
disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
),
style: {
// lineHeight: labelLineHeightStyles[size]
lineHeight: 1
}
},
label
), sublabel && /* @__PURE__ */ React.createElement(
"label",
{
htmlFor: id,
className: cn(
"hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
)
},
sublabel
), helperText && !disabled && /* @__PURE__ */ React.createElement(
"label",
{
htmlFor: id,
className: cn(
"hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
disabled && "hawa-cursor-not-allowed hawa-opacity-70"
)
},
helperText
))
);
};
var CheckboxElement = React.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
let checkboxRadius = {
none: "hawa-rounded-none",
inherit: "hawa-rounded-sm",
full: "hawa-rounded-full"
};
let checkboxSizes = {
xs: "hawa-w-3 hawa-h-3",
sm: "hawa-w-6 hawa-h-6",
default: "hawa-icon",
md: "hawa-w-8 hawa-h-8",
lg: "hawa-w-10 hawa-h-10",
xl: "hawa-w-12 hawa-h-12"
};
let checkboxIndicatorSizes = {
xs: "0.5em",
default: "0.60em",
sm: "0.75em",
md: "0.875em",
lg: "1em",
xl: "1.25em"
};
return /* @__PURE__ */ React.createElement(
CheckboxPrimitive.Root,
{
ref,
className: cn(
"hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
checkboxSizes[size],
checkboxRadius[radius],
className
),
...props
},
/* @__PURE__ */ React.createElement(
CheckboxPrimitive.Indicator,
{
className: cn(
"hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
)
},
/* @__PURE__ */ React.createElement(
"svg",
{
"aria-label": "Check Mark",
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 512 512",
height: checkboxIndicatorSizes[size],
width: checkboxIndicatorSizes[size]
},
/* @__PURE__ */ React.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
),
" "
)
);
});
CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Checkbox
});
//# sourceMappingURL=index.js.map