@cerberus-design/react
Version:
The Cerberus Design React component library.
519 lines (494 loc) • 23 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
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);
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
// src/components/date-picker/index.ts
var date_picker_exports = {};
__export(date_picker_exports, {
CalendarDate: () => import_date.CalendarDate,
DateFormatter: () => import_date.DateFormatter,
DatePicker: () => DatePicker2,
DatePickerCalendar: () => DatePickerCalendar,
DatePickerClearTrigger: () => DatePickerClearTrigger,
DatePickerContent: () => DatePickerContent,
DatePickerContext: () => DatePickerContext,
DatePickerControl: () => DatePickerControl,
DatePickerInput: () => DatePickerInput,
DatePickerInputEl: () => DatePickerInputEl,
DatePickerLabel: () => DatePickerLabel,
DatePickerMonthSelect: () => DatePickerMonthSelect,
DatePickerNextTrigger: () => DatePickerNextTrigger,
DatePickerParts: () => DatePickerParts,
DatePickerPositioner: () => DatePickerPositioner,
DatePickerPrevTrigger: () => DatePickerPrevTrigger,
DatePickerRangeText: () => DatePickerRangeText,
DatePickerRoot: () => DatePickerRoot,
DatePickerTable: () => DatePickerTable,
DatePickerTableBody: () => DatePickerTableBody,
DatePickerTableCell: () => DatePickerTableCell,
DatePickerTableCellTrigger: () => DatePickerTableCellTrigger,
DatePickerTableHead: () => DatePickerTableHead,
DatePickerTableHeader: () => DatePickerTableHeader,
DatePickerTableRow: () => DatePickerTableRow,
DatePickerTrigger: () => DatePickerTrigger,
DatePickerView: () => DatePickerView,
DatePickerViewControl: () => DatePickerViewControl,
DatePickerViewTrigger: () => DatePickerViewTrigger,
DatePickerYearSelect: () => DatePickerYearSelect,
RangePickerInput: () => RangePickerInput,
getLocalTimeZone: () => import_date.getLocalTimeZone,
parseDate: () => import_date_picker2.parseDate,
today: () => import_date.today
});
module.exports = __toCommonJS(date_picker_exports);
// src/components/date-picker/primitives.tsx
var import_date_picker = require("@ark-ui/react/date-picker");
var import_recipes = require("styled-system/recipes");
// src/system/primitive-factory.tsx
var import_css = require("styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var CerberusPrimitive = class {
constructor(recipe) {
__publicField(this, "recipe");
/**
* Creates a Cerberus component with bare features and no recipe.
* @param Component - The React component to enhance with Cerberus features.
* Can be a string or a component reference.
* @returns A new React component that applies Cerberus features to the
* original component.
*
* @example
* ```ts
* const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
* const Button = withNoRecipe('button')
* ```
*/
__publicField(this, "withNoRecipe", (Component, options) => {
const { defaultProps } = options || {};
const El = Component;
const CerbComponent = (props) => {
const { css: customCss, className, ...nativeProps } = props;
const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
/**
* Creates a Cerberus component with the given recipe.
* @param Component - The React component to enhance with the recipe.
* @param options - Options for the recipe.
* @returns A new React component that applies the recipe to the original
* component.
*/
__publicField(this, "withRecipe", (Component, options) => {
const { defaultProps } = options || {};
const El = Component;
const recipe = this.recipe;
const CerbComponent = (internalProps) => {
const {
css: customCss,
className,
...restOfInternalProps
} = internalProps;
const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
const recipeStyles = recipe(variantOptions);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
...defaultProps,
...nativeProps,
className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
}
);
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
/**
* Creates a Cerberus component with a slot recipe applied.
* @param Component - The React component to enhance with Cerberus features.
* @param recipe - The slot recipe to apply to the component.
* @returns A new React component that applies Cerberus features and the
* specified slot recipe to the original component.
* @example
* ```typescript
* const { withSlotRecipe } = createCerberusPrimitive(field)
* const Field = withSlotRecipe(RawField, field)
* ```
*/
__publicField(this, "withSlotRecipe", (Component, slot, options) => {
const { defaultProps } = options || {};
const El = Component;
const recipe = this.recipe;
const CerbComponent = (internalProps) => {
const {
css: customCss,
className,
...restOfInternalProps
} = internalProps;
const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
const styles = recipe(variantOptions);
const slotStyles = styles[slot];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
...defaultProps,
...nativeProps,
className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
}
);
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
this.recipe = recipe ?? null;
}
hasStyles(styles) {
if (styles) {
return {
className: styles
};
}
return {};
}
validateComponent(Component) {
if (typeof Component !== "function" && typeof Component !== "object") {
return false;
}
return true;
}
};
// src/system/index.ts
function createCerberusPrimitive(recipe) {
return new CerberusPrimitive(recipe);
}
// src/components/date-picker/primitives.tsx
var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes.datePicker);
var DatePickerLabel = withSlotRecipe(import_date_picker.DatePicker.Label, "label");
var DatePickerControl = withSlotRecipe(import_date_picker.DatePicker.Control, "control");
var DatePickerInputEl = withSlotRecipe(import_date_picker.DatePicker.Input, "input");
var DatePickerTrigger = withSlotRecipe(import_date_picker.DatePicker.Trigger, "trigger");
var DatePickerContent = withSlotRecipe(import_date_picker.DatePicker.Content, "content");
var DatePickerViewControl = withSlotRecipe(
import_date_picker.DatePicker.Control,
"viewControl"
);
var DatePickerRangeText = withSlotRecipe(
import_date_picker.DatePicker.RangeText,
"rangeText"
);
var DatePickerTable = withSlotRecipe(import_date_picker.DatePicker.Table, "table");
var DatePickerTableHeader = withSlotRecipe(
import_date_picker.DatePicker.TableHeader,
"tableHeader"
);
var DatePickerTableCell = withSlotRecipe(
import_date_picker.DatePicker.TableCell,
"tableCell"
);
var DatePickerTableCellTrigger = withSlotRecipe(
import_date_picker.DatePicker.TableCellTrigger,
"tableCellTrigger"
);
var DatePickerRoot = withNoRecipe(import_date_picker.DatePicker.Root);
var DatePickerClearTrigger = withNoRecipe(import_date_picker.DatePicker.ClearTrigger);
var DatePickerPositioner = withNoRecipe(import_date_picker.DatePicker.Positioner);
var DatePickerYearSelect = withNoRecipe(import_date_picker.DatePicker.YearSelect);
var DatePickerMonthSelect = withNoRecipe(import_date_picker.DatePicker.MonthSelect);
var DatePickerView = withNoRecipe(import_date_picker.DatePicker.View);
var DatePickerContext = import_date_picker.DatePicker.Context;
var DatePickerPrevTrigger = withNoRecipe(import_date_picker.DatePicker.PrevTrigger);
var DatePickerNextTrigger = withNoRecipe(import_date_picker.DatePicker.NextTrigger);
var DatePickerViewTrigger = withNoRecipe(import_date_picker.DatePicker.ViewTrigger);
var DatePickerTableHead = withNoRecipe(import_date_picker.DatePicker.TableHead);
var DatePickerTableRow = withNoRecipe(import_date_picker.DatePicker.TableRow);
var DatePickerTableBody = withNoRecipe(import_date_picker.DatePicker.TableBody);
// src/components/date-picker/parts.ts
var DatePickerParts = {
Root: DatePickerRoot,
Label: DatePickerLabel,
Control: DatePickerControl,
Input: DatePickerInputEl,
Trigger: DatePickerTrigger,
ClearTrigger: DatePickerClearTrigger,
Positioner: DatePickerPositioner,
Content: DatePickerContent,
YearSelect: DatePickerYearSelect,
MonthSelect: DatePickerMonthSelect,
View: DatePickerView,
Context: DatePickerContext,
ViewControl: DatePickerViewControl,
PrevTrigger: DatePickerPrevTrigger,
NextTrigger: DatePickerNextTrigger,
ViewTrigger: DatePickerViewTrigger,
RangeText: DatePickerRangeText,
Table: DatePickerTable,
TableHead: DatePickerTableHead,
TableRow: DatePickerTableRow,
TableHeader: DatePickerTableHeader,
TableBody: DatePickerTableBody,
TableCell: DatePickerTableCell,
TableCellTrigger: DatePickerTableCellTrigger
};
// src/components/date-picker/date-picker.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function DatePicker2(props) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
DatePickerParts.Root,
{
...props,
positioning: {
placement: "bottom-start"
}
}
);
}
// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var CerberusContext = (0, import_react.createContext)(null);
function useCerberusContext() {
const context = (0, import_react.useContext)(CerberusContext);
if (!context) {
throw new Error("useCerberus must be used within a CerberusProvider");
}
return context;
}
// src/components/icon-button/primitives.ts
var import_factory = require("@ark-ui/react/factory");
var import_recipes2 = require("styled-system/recipes");
var { withRecipe } = createCerberusPrimitive(import_recipes2.iconButton);
var IconButtonRoot = withRecipe(import_factory.ark.button);
// src/components/icon-button/button.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function IconButton(props) {
const { ariaLabel, ...rootProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButtonRoot, { ...rootProps, "aria-label": ariaLabel ?? "Icon Button" });
}
// src/components/date-picker/trigger.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function DatePickerTrigger2(props) {
const { icons } = useCerberusContext();
const { calendar: CalendarIcon } = icons;
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DatePickerParts.Trigger, { ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { ariaLabel: "Open calendar", size: "sm", usage: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CalendarIcon, {}) }) });
}
// src/components/date-picker/input.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function DatePickerInput(props) {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerParts.Control, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTrigger2, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
DatePickerParts.Input,
{
...props,
maxLength: 11,
placeholder: props.placeholder ?? "DD MMM YYYY"
}
)
] });
}
// src/components/date-picker/range-input.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function RangePickerInput(props) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerParts.Control, { "data-range": true, children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger2, {}),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
DatePickerParts.Input,
{
...props,
"data-range-input": true,
placeholder: props.placeholder ?? "DD MMM YYYY",
maxLength: 11,
index: 0
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
DatePickerParts.Input,
{
...props,
"data-range-input": true,
"data-range-end-input": true,
placeholder: props.placeholder ?? "DD MMM YYYY",
maxLength: 11,
index: 1
}
)
] });
}
// src/components/portal/portal.tsx
var import_react2 = require("@ark-ui/react");
var Portal = import_react2.Portal;
// src/components/date-picker/content.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
function DatePickerContent2(props) {
const { withModal, container, ...contentProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Portal, { disabled: withModal ?? false, container, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DatePickerParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DatePickerParts.Content, { ...contentProps }) }) });
}
// src/components/date-picker/view-control-group.tsx
var import_css2 = require("styled-system/css");
// src/components/button/button.tsx
var import_react3 = require("react");
var import_jsx = require("styled-system/jsx");
// src/components/button/primitives.tsx
var import_factory2 = require("@ark-ui/react/factory");
var import_recipes3 = require("styled-system/recipes");
var { withRecipe: withRecipe2 } = createCerberusPrimitive(import_recipes3.button);
var ButtonRoot = withRecipe2(import_factory2.ark.button);
// src/components/button/button.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var ButtonContext = (0, import_react3.createContext)({
pending: false
});
function Button(props) {
const { pending = false, ...nativeProps } = props;
const value = (0, import_react3.useMemo)(() => ({ pending }), [pending]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
}
// src/components/date-picker/view-control-group.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
function DatePickerViewControlGroup(props) {
const { icons } = useCerberusContext();
const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DatePickerParts.ViewControl, { ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrevIcon, {}) }) }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Button,
{
className: (0, import_css2.css)({
h: "2rem",
paddingInline: "md"
}),
shape: "rounded",
size: "sm",
usage: "ghost",
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.RangeText, {})
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerParts.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NextIcon, {}) }) })
] });
}
// src/components/date-picker/day-view.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
function DatePickerDayView(props) {
function isToday(date) {
const today2 = /* @__PURE__ */ new Date();
const formatted = today2.toISOString().split("T")[0];
const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
return formatted === arkDate;
}
function isPastDay(date) {
const today2 = /* @__PURE__ */ new Date();
const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
return new Date(arkDate) < today2;
}
function getDayValue(date) {
if (isToday(date)) return "today";
if (isPastDay(date)) return "past";
return "future";
}
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.View, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.Context, { children: (datePickerData) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerViewControlGroup, {}),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DatePickerParts.Table, { children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableRow, { children: datePickerData.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableHeader, { children: weekDay.narrow }, id)) }) }),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableBody, { children: datePickerData.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DatePickerParts.TableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
DatePickerParts.TableCellTrigger,
{
"data-date": getDayValue(day),
children: day.day
}
) }, id2)) }, id)) })
] })
] }) }) });
}
// src/components/date-picker/month-view.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
function DatePickerMonthView(props) {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerViewControlGroup, {}),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableBody, { children: datePicker2.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerParts.TableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
] }) }) });
}
// src/components/date-picker/year-view.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
function DatePickerYearView(props) {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Context, { children: (datePicker2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableBody, { children: datePicker2.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerParts.TableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
] }) }) });
}
// src/components/date-picker/calendar.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
function DatePickerCalendar(props) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DatePickerContent2, { ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerDayView, {}),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerMonthView, { view: "month" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerYearView, { view: "year" })
] });
}
// src/components/date-picker/index.ts
var import_date_picker2 = require("@ark-ui/react/date-picker");
var import_date = require("@internationalized/date");
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CalendarDate,
DateFormatter,
DatePicker,
DatePickerCalendar,
DatePickerClearTrigger,
DatePickerContent,
DatePickerContext,
DatePickerControl,
DatePickerInput,
DatePickerInputEl,
DatePickerLabel,
DatePickerMonthSelect,
DatePickerNextTrigger,
DatePickerParts,
DatePickerPositioner,
DatePickerPrevTrigger,
DatePickerRangeText,
DatePickerRoot,
DatePickerTable,
DatePickerTableBody,
DatePickerTableCell,
DatePickerTableCellTrigger,
DatePickerTableHead,
DatePickerTableHeader,
DatePickerTableRow,
DatePickerTrigger,
DatePickerView,
DatePickerViewControl,
DatePickerViewTrigger,
DatePickerYearSelect,
RangePickerInput,
getLocalTimeZone,
parseDate,
today
});
//# sourceMappingURL=index.cjs.map