@cerberus-design/react/build/legacy/components/date-picker/view-control-group.cjs

The Cerberus Design React component library.

"use strict";
"use client";
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/view-control-group.tsx
var view_control_group_exports = {};
__export(view_control_group_exports, {
  DatePickerViewControlGroup: () => DatePickerViewControlGroup
});
module.exports = __toCommonJS(view_control_group_exports);
var import_css2 = require("styled-system/css");

// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime = 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/button/button.tsx
var import_react2 = require("react");
var import_jsx = require("styled-system/jsx");

// src/components/button/primitives.tsx
var import_factory = require("@ark-ui/react/factory");
var import_recipes = require("styled-system/recipes");

// src/system/primitive-factory.tsx
var import_css = require("styled-system/css");
var import_jsx_runtime2 = 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_runtime2.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_runtime2.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_runtime2.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/button/primitives.tsx
var { withRecipe } = createCerberusPrimitive(import_recipes.button);
var ButtonRoot = withRecipe(import_factory.ark.button);

// src/components/button/button.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var ButtonContext = (0, import_react2.createContext)({
  pending: false
});
function Button(props) {
  const { pending = false, ...nativeProps } = props;
  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
}

// src/components/icon-button/primitives.ts
var import_factory2 = require("@ark-ui/react/factory");
var import_recipes2 = require("styled-system/recipes");
var { withRecipe: withRecipe2 } = createCerberusPrimitive(import_recipes2.iconButton);
var IconButtonRoot = withRecipe2(import_factory2.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/primitives.tsx
var import_date_picker = require("@ark-ui/react/date-picker");
var import_recipes3 = require("styled-system/recipes");
var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes3.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/view-control-group.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function DatePickerViewControlGroup(props) {
  const { icons } = useCerberusContext();
  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DatePickerParts.ViewControl, { ...props, children: [
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DatePickerParts.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PrevIcon, {}) }) }),
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DatePickerParts.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      Button,
      {
        className: (0, import_css2.css)({
          h: "2rem",
          paddingInline: "md"
        }),
        shape: "rounded",
        size: "sm",
        usage: "ghost",
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DatePickerParts.RangeText, {})
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DatePickerParts.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NextIcon, {}) }) })
  ] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  DatePickerViewControlGroup
});
//# sourceMappingURL=view-control-group.cjs.map