package.dist.cjs.components.checkbox.checkbox.cjs Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of react Show documentation
Responsive and accessible React UI components built with React and Emotion
The newest version!
"use strict";
"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var checkbox = require('@ark-ui/react/checkbox');
var React = require('react');
var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
var factory = require('../../styled-system/factory.cjs');
var checkmark = require('../checkmark/checkmark.cjs');

const {
  withProvider,
  withContext,
  useStyles: useCheckboxStyles,
  PropsProvider
} = createSlotRecipeContext.createSlotRecipeContext({ key: "checkbox" });
const CheckboxRootProvider = withProvider(checkbox.Checkbox.RootProvider, "root", { forwardAsChild: true });
const CheckboxRoot = withProvider(
  checkbox.Checkbox.Root,
  "root",
  { forwardAsChild: true }
);
const CheckboxPropsProvider = PropsProvider;
const CheckboxLabel = withContext(
  checkbox.Checkbox.Label,
  "label",
  { forwardAsChild: true }
);
const CheckboxControl = withContext(
  checkbox.Checkbox.Control,
  "control",
  { forwardAsChild: true }
);
const CheckboxIndicator = React.forwardRef(function CheckboxIndicator2(props, ref) {
  const { checked, indeterminate, ...rest } = props;
  const api = checkbox.useCheckboxContext();
  const styles = useCheckboxStyles();
  if (checked && api.checked) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      factory.chakra.svg,
      {
        ref,
        asChild: true,
        ...rest,
        css: [styles.indicator, props.css],
        children: checked
      }
    );
  }
  if (indeterminate && api.indeterminate) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      factory.chakra.svg,
      {
        ref,
        asChild: true,
        ...rest,
        css: [styles.indicator, props.css],
        children: indeterminate
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    checkmark.Checkmark,
    {
      ref,
      checked: api.checked,
      indeterminate: api.indeterminate,
      disabled: api.disabled,
      unstyled: true,
      ...rest,
      css: [styles.indicator, props.css]
    }
  );
});
const CheckboxGroup = factory.chakra(
  checkbox.Checkbox.Group,
  {
    base: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    }
  },
  { forwardAsChild: true }
);
const CheckboxContext = checkbox.Checkbox.Context;
const CheckboxHiddenInput = checkbox.Checkbox.HiddenInput;

exports.CheckboxContext = CheckboxContext;
exports.CheckboxControl = CheckboxControl;
exports.CheckboxGroup = CheckboxGroup;
exports.CheckboxHiddenInput = CheckboxHiddenInput;
exports.CheckboxIndicator = CheckboxIndicator;
exports.CheckboxLabel = CheckboxLabel;
exports.CheckboxPropsProvider = CheckboxPropsProvider;
exports.CheckboxRoot = CheckboxRoot;
exports.CheckboxRootProvider = CheckboxRootProvider;
exports.useCheckboxStyles = useCheckboxStyles;