@kopexa/sight
Version:
Kopexa Sight Design System — React component library for GRC applications
224 lines (218 loc) • 8.3 kB
JavaScript
"use client";
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/radio-card/index.ts
var radio_card_exports = {};
__export(radio_card_exports, {
RadioCardItem: () => RadioCardItem,
RadioCardItemBase: () => RadioCardItemBase,
RadioCardItemContent: () => RadioCardItemContent,
RadioCardItemControl: () => RadioCardItemControl,
RadioCardItemDescription: () => RadioCardItemDescription,
RadioCardItemHiddenInput: () => RadioCardItemHiddenInput,
RadioCardItemIndicator: () => RadioCardItemIndicator,
RadioCardItemText: () => RadioCardItemText,
RadioCardLabel: () => RadioCardLabel,
RadioCardRoot: () => RadioCardRoot,
Radiomark: () => Radiomark
});
module.exports = __toCommonJS(radio_card_exports);
// src/components/radio-card/radio-card.tsx
var import_factory2 = require("@ark-ui/react/factory");
var import_radio_group = require("@ark-ui/react/radio-group");
var import_react_utils = require("@kopexa/react-utils");
var import_shared_utils2 = require("@kopexa/shared-utils");
var import_theme2 = require("@kopexa/theme");
// src/components/radio-card/radiomark.tsx
var import_factory = require("@ark-ui/react/factory");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var import_jsx_runtime = require("react/jsx-runtime");
var Radiomark = (props) => {
const {
checked,
disabled,
size,
variant,
className,
unstyled,
...restProps
} = props;
const recipe = (0, import_theme.radiomark)({ size, variant });
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_factory.ark.span,
{
"data-checked": (0, import_shared_utils.dataAttr)(checked),
"data-disabled": (0, import_shared_utils.dataAttr)(disabled),
className: unstyled ? className : (0, import_shared_utils.cn)(recipe, className),
...restProps,
children: checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dot" }) : null
}
);
};
// src/components/radio-card/radio-card.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var [StylesProvider, useRadioCardStyles] = (0, import_react_utils.createContext)({
strict: false,
name: "RadioCardStylesContext"
});
var RadioCardRoot = (props) => {
const { className, size, variant, orientation, ...restProps } = props;
const ctx = { size, variant, orientation };
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StylesProvider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radio_group.RadioGroup.Root,
{
orientation,
className: (0, import_shared_utils2.cn)(recipe.root(), className),
...restProps
}
) });
};
var RadioCardLabel = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radio_group.RadioGroup.Label,
{
className: (0, import_shared_utils2.cn)(recipe.label(), className),
...restProps
}
);
};
var RadioCardItemBase = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radio_group.RadioGroup.Item,
{
className: (0, import_shared_utils2.cn)(recipe.item(), className),
...restProps
}
);
};
var RadioCardItemText = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radio_group.RadioGroup.ItemText,
{
className: (0, import_shared_utils2.cn)(recipe.itemText(), className),
...restProps
}
);
};
var RadioCardItemDescription = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_shared_utils2.cn)(recipe.itemDescription(), className), ...restProps });
};
var RadioCardItemControl = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radio_group.RadioGroup.ItemControl,
{
className: (0, import_shared_utils2.cn)(recipe.itemControl(), className),
...restProps
}
);
};
var RadioCardItemContent = (props) => {
const { className, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_shared_utils2.cn)(recipe.itemContent(), className), ...restProps });
};
var RadioCardItemIndicator = (props) => {
const { className, checked, ...restProps } = props;
const ctx = useRadioCardStyles();
const recipe = (0, import_theme2.radioCard)(ctx);
const itemContext = (0, import_radio_group.useRadioGroupItemContext)();
if (checked && itemContext.checked) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_factory2.ark.span,
{
asChild: true,
...restProps,
className: (0, import_shared_utils2.cn)(recipe.itemIndicator(), className),
children: checked
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Radiomark,
{
unstyled: true,
...props,
checked: itemContext.checked,
disabled: itemContext.disabled,
className: (0, import_shared_utils2.cn)(recipe.itemIndicator(), className)
}
);
};
var RadioCardItemHiddenInput = import_radio_group.RadioGroup.ItemHiddenInput;
// src/components/radio-card/radio-card-item.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var RadioCardItem = (props) => {
const {
inputProps,
label,
description,
icon,
indicator = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadioCardItemIndicator, {}),
indicatorPlacement = "start",
...restProps
} = props;
const hasContent = label || description || icon;
const ContentWrapper = indicator ? RadioCardItemContent : import_react.Fragment;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(RadioCardItemBase, { ...restProps, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadioCardItemHiddenInput, { ...inputProps }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(RadioCardItemControl, { children: [
indicatorPlacement === "start" && indicator,
hasContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ContentWrapper, { children: [
icon,
label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadioCardItemText, { children: label }) : null,
description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadioCardItemDescription, { children: description }) : null,
indicatorPlacement === "inside" && indicator
] }) : null,
indicatorPlacement === "end" && indicator
] })
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
RadioCardItem,
RadioCardItemBase,
RadioCardItemContent,
RadioCardItemControl,
RadioCardItemDescription,
RadioCardItemHiddenInput,
RadioCardItemIndicator,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
Radiomark
});