@helpdice/ui 1.0.1 → 1.0.2

package/esm/cart/index.js

@@ -0,0 +1,266 @@
+/* eslint-disable @typescript-eslint/ban-types */
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from "react";
+import useLocalStorage from "./useLocalStorage";
+export var initialState = {
+  items: [],
+  isEmpty: true,
+  totalItems: 0,
+  totalUniqueItems: 0,
+  cartTotal: 0,
+  metadata: {}
+};
+var CartContext = /*#__PURE__*/React.createContext(initialState);
+export var createCartIdentifier = function createCartIdentifier() {
+  var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12;
+  return _toConsumableArray(Array(len)).map(function () {
+    return (~~(Math.random() * 36)).toString(36);
+  }).join("");
+};
+export var useCart = function useCart() {
+  var context = React.useContext(CartContext);
+  if (!context) throw new Error("Expected to be wrapped in a CartProvider");
+  return context;
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_ITEMS":
+      return generateCartState(state, action.payload);
+    case "ADD_ITEM":
+      {
+        var items = [].concat(_toConsumableArray(state.items), [action.payload]);
+        return generateCartState(state, items);
+      }
+    case "UPDATE_ITEM":
+      {
+        var _items = state.items.map(function (item) {
+          if (item.id !== action.id) return item;
+          return _extends({}, item, action.payload);
+        });
+        return generateCartState(state, _items);
+      }
+    case "REMOVE_ITEM":
+      {
+        var _items2 = state.items.filter(function (i) {
+          return i.id !== action.id;
+        });
+        return generateCartState(state, _items2);
+      }
+    case "EMPTY_CART":
+      return initialState;
+    case "CLEAR_CART_META":
+      return _extends({}, state, {
+        metadata: {}
+      });
+    case "SET_CART_META":
+      return _extends({}, state, {
+        metadata: _extends({}, action.payload)
+      });
+    case "UPDATE_CART_META":
+      return _extends({}, state, {
+        metadata: _extends({}, state.metadata, action.payload)
+      });
+    default:
+      throw new Error("No action specified");
+  }
+}
+var generateCartState = function generateCartState() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var items = arguments.length > 1 ? arguments[1] : undefined;
+  var totalUniqueItems = calculateUniqueItems(items);
+  var isEmpty = totalUniqueItems === 0;
+  return _extends({}, initialState, state, {
+    items: calculateItemTotals(items),
+    totalItems: calculateTotalItems(items),
+    totalUniqueItems: totalUniqueItems,
+    cartTotal: calculateTotal(items),
+    isEmpty: isEmpty
+  });
+};
+var calculateItemTotals = function calculateItemTotals(items) {
+  return items.map(function (item) {
+    return _extends({}, item, {
+      itemTotal: item.price * item.quantity
+    });
+  });
+};
+var calculateTotal = function calculateTotal(items) {
+  return items.reduce(function (total, item) {
+    return total + item.quantity * item.price;
+  }, 0);
+};
+var calculateTotalItems = function calculateTotalItems(items) {
+  return items.reduce(function (sum, item) {
+    return sum + item.quantity;
+  }, 0);
+};
+var calculateUniqueItems = function calculateUniqueItems(items) {
+  return items.length;
+};
+export var CartProvider = function CartProvider(_ref) {
+  var children = _ref.children,
+    cartId = _ref.id,
+    _ref$defaultItems = _ref.defaultItems,
+    defaultItems = _ref$defaultItems === void 0 ? [] : _ref$defaultItems,
+    onSetItems = _ref.onSetItems,
+    onItemAdd = _ref.onItemAdd,
+    onItemUpdate = _ref.onItemUpdate,
+    onItemRemove = _ref.onItemRemove,
+    onEmptyCart = _ref.onEmptyCart,
+    _ref$storage = _ref.storage,
+    storage = _ref$storage === void 0 ? useLocalStorage : _ref$storage,
+    metadata = _ref.metadata;
+  var id = cartId ? cartId : createCartIdentifier();
+  var _storage = storage(cartId ? "react-use-cart-".concat(id) : "react-use-cart", JSON.stringify(_extends({
+      id: id
+    }, initialState, {
+      items: defaultItems,
+      metadata: metadata
+    }))),
+    _storage2 = _slicedToArray(_storage, 2),
+    savedCart = _storage2[0],
+    saveCart = _storage2[1];
+  var _React$useReducer = React.useReducer(reducer, JSON.parse(savedCart)),
+    _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+    state = _React$useReducer2[0],
+    dispatch = _React$useReducer2[1];
+  React.useEffect(function () {
+    saveCart(JSON.stringify(state));
+  }, [state, saveCart]);
+  var setItems = function setItems(items) {
+    dispatch({
+      type: "SET_ITEMS",
+      payload: items.map(function (item) {
+        return _extends({}, item, {
+          quantity: item.quantity || 1
+        });
+      })
+    });
+    onSetItems && onSetItems(items);
+  };
+  var addItem = function addItem(item) {
+    var quantity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    if (!item.id) throw new Error("You must provide an `id` for items");
+    if (quantity <= 0) return;
+    var currentItem = state.items.find(function (i) {
+      return i.id === item.id;
+    });
+    if (!currentItem && !item.hasOwnProperty("price")) throw new Error("You must pass a `price` for new items");
+    if (!currentItem) {
+      var _payload = _extends({}, item, {
+        quantity: quantity
+      });
+      dispatch({
+        type: "ADD_ITEM",
+        payload: _payload
+      });
+      onItemAdd && onItemAdd(_payload);
+      return;
+    }
+    var payload = _extends({}, item, {
+      quantity: currentItem.quantity + quantity
+    });
+    dispatch({
+      type: "UPDATE_ITEM",
+      id: item.id,
+      payload: payload
+    });
+    onItemUpdate && onItemUpdate(payload);
+  };
+  var updateItem = function updateItem(id, payload) {
+    if (!id || !payload) {
+      return;
+    }
+    dispatch({
+      type: "UPDATE_ITEM",
+      id: id,
+      payload: payload
+    });
+    onItemUpdate && onItemUpdate(payload);
+  };
+  var updateItemQuantity = function updateItemQuantity(id, quantity) {
+    if (quantity <= 0) {
+      onItemRemove && onItemRemove(id);
+      dispatch({
+        type: "REMOVE_ITEM",
+        id: id
+      });
+      return;
+    }
+    var currentItem = state.items.find(function (item) {
+      return item.id === id;
+    });
+    if (!currentItem) throw new Error("No such item to update");
+    var payload = _extends({}, currentItem, {
+      quantity: quantity
+    });
+    dispatch({
+      type: "UPDATE_ITEM",
+      id: id,
+      payload: payload
+    });
+    onItemUpdate && onItemUpdate(payload);
+  };
+  var removeItem = function removeItem(id) {
+    if (!id) return;
+    dispatch({
+      type: "REMOVE_ITEM",
+      id: id
+    });
+    onItemRemove && onItemRemove(id);
+  };
+  var emptyCart = function emptyCart() {
+    dispatch({
+      type: "EMPTY_CART"
+    });
+    onEmptyCart && onEmptyCart();
+  };
+  var getItem = function getItem(id) {
+    return state.items.find(function (i) {
+      return i.id === id;
+    });
+  };
+  var inCart = function inCart(id) {
+    return state.items.some(function (i) {
+      return i.id === id;
+    });
+  };
+  var clearCartMetadata = function clearCartMetadata() {
+    dispatch({
+      type: "CLEAR_CART_META"
+    });
+  };
+  var setCartMetadata = function setCartMetadata(metadata) {
+    if (!metadata) return;
+    dispatch({
+      type: "SET_CART_META",
+      payload: metadata
+    });
+  };
+  var updateCartMetadata = function updateCartMetadata(metadata) {
+    if (!metadata) return;
+    dispatch({
+      type: "UPDATE_CART_META",
+      payload: metadata
+    });
+  };
+  return /*#__PURE__*/React.createElement(CartContext.Provider, {
+    value: _extends({}, state, {
+      getItem: getItem,
+      inCart: inCart,
+      setItems: setItems,
+      addItem: addItem,
+      updateItem: updateItem,
+      updateItemQuantity: updateItemQuantity,
+      removeItem: removeItem,
+      emptyCart: emptyCart,
+      clearCartMetadata: clearCartMetadata,
+      setCartMetadata: setCartMetadata,
+      updateCartMetadata: updateCartMetadata
+    })
+  }, children);
+};

package/esm/cart/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export default function useLocalStorage(key: string, initialValue: string): [string, (value: Function | string) => void];

package/esm/cart/useLocalStorage.js

@@ -0,0 +1,28 @@
+'use client';
+
+/* eslint-disable @typescript-eslint/ban-types */
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from "react";
+export default function useLocalStorage(key, initialValue) {
+  var _React$useState = React.useState(function () {
+      try {
+        var item = typeof window !== "undefined" && window.localStorage.getItem(key);
+        return item ? item : initialValue;
+      } catch (error) {
+        return initialValue;
+      }
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    storedValue = _React$useState2[0],
+    setStoredValue = _React$useState2[1];
+  var setValue = function setValue(value) {
+    try {
+      var valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, valueToStore);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

package/esm/checkbox/checkbox-context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CheckboxConfig {
+    updateState?: (value: string, checked: boolean) => void;
+    disabledAll: boolean;
+    values: string[];
+    inGroup: boolean;
+}
+export declare const CheckboxContext: React.Context<CheckboxConfig>;
+export declare const useCheckbox: () => CheckboxConfig;

package/esm/checkbox/checkbox-context.js

@@ -0,0 +1,10 @@
+import React from 'react';
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false,
+  values: []
+};
+export var CheckboxContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useCheckbox = function useCheckbox() {
+  return React.useContext(CheckboxContext);
+};

package/esm/checkbox/checkbox-group.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+interface Props {
+    value: string[];
+    disabled?: boolean;
+    onChange?: (values: string[]) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CheckboxGroupProps = Props & NativeAttrs;
+declare const CheckboxGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default CheckboxGroup;

package/esm/checkbox/checkbox-group.js

@@ -0,0 +1,64 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "onChange", "value", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { CheckboxContext } from './checkbox-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
+  var classes = useClasses('group', className);
+  if (!value) {
+    value = [];
+    useWarning('Props "value" is required.', 'Checkbox Group');
+  }
+  var updateState = function updateState(val, checked) {
+    var removed = selfVal.filter(function (v) {
+      return v !== val;
+    });
+    var next = checked ? [].concat(_toConsumableArray(removed), [val]) : removed;
+    setSelfVal(next);
+    onChange && onChange(next);
+  };
+  var providerValue = useMemo(function () {
+    return {
+      updateState: updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      values: selfVal
+    };
+  }, [disabled, selfVal]);
+  useEffect(function () {
+    setSelfVal(value);
+  }, [value.join(',')]);
+  return /*#__PURE__*/React.createElement(CheckboxContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1727163828", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1727163828",
+    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]
+  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.group.__jsx-style-dynamic-selector label{margin-right:calc(").concat(SCALES.font(1), " * 2);--checkbox-size:").concat(SCALES.font(1), ";}.group.__jsx-style-dynamic-selector label:last-of-type{margin-right:0;}"))));
+};
+CheckboxGroupComponent.displayName = 'CheckboxGroup';
+var CheckboxGroup = withScale(CheckboxGroupComponent);
+export default CheckboxGroup;

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type CheckboxTypes = NormalTypes;
+export interface CheckboxEventTarget {
+    checked: boolean;
+}
+export interface CheckboxEvent {
+    target: CheckboxEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    type?: CheckboxTypes;
+    initialChecked?: boolean;
+    onChange?: (e: CheckboxEvent) => void;
+    className?: string;
+    value?: string;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type CheckboxProps = Props & NativeAttrs;
+declare const Checkbox: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Checkbox;

package/esm/checkbox/checkbox.icon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    disabled?: boolean;
+    checked?: boolean;
+    fill?: string;
+    bg?: string;
+}
+declare const CheckboxIcon: React.NamedExoticComponent<Props>;
+export default CheckboxIcon;

package/esm/checkbox/checkbox.icon.js

@@ -0,0 +1,46 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var CheckboxIconComponent = function CheckboxIconComponent(_ref) {
+  var fill = _ref.fill,
+    bg = _ref.bg,
+    disabled = _ref.disabled,
+    checked = _ref.checked;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      return {
+        propsFill: fill,
+        propsBg: bg
+      };
+    }, [theme.palette]),
+    propsFill = _useMemo.propsFill,
+    propsBg = _useMemo.propsBg;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, checked ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 17 16",
+    fill: "none",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z",
+    fill: propsFill,
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 3L7.72491 11L5 8",
+    stroke: propsBg,
+    strokeWidth: "1.5",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
+    stroke: theme.palette.accents_5,
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "996181129",
+    dynamic: [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']
+  }, "svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:".concat(disabled ? 0.4 : 1, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";}")));
+};
+CheckboxIconComponent.displayName = 'GeistCheckboxIcon';
+var CheckboxIcon = /*#__PURE__*/React.memo(CheckboxIconComponent);
+export default CheckboxIcon;

package/esm/checkbox/checkbox.js

@@ -0,0 +1,103 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCheckbox } from './checkbox-context';
+import CheckboxIcon from './checkbox.icon';
+import useWarning from '../utils/use-warning';
+import { getColors } from './styles';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var CheckboxComponent = function CheckboxComponent(_ref) {
+  var checked = _ref.checked,
+    _ref$initialChecked = _ref.initialChecked,
+    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(initialChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
+  var _useCheckbox = useCheckbox(),
+    updateState = _useCheckbox.updateState,
+    inGroup = _useCheckbox.inGroup,
+    disabledAll = _useCheckbox.disabledAll,
+    values = _useCheckbox.values;
+  var isDisabled = inGroup ? disabledAll || disabled : disabled;
+  var classes = useClasses('checkbox', className);
+  if (inGroup && checked) {
+    useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox');
+  }
+  if (inGroup) {
+    useEffect(function () {
+      var next = values.includes(value);
+      if (next === selfChecked) return;
+      setSelfChecked(next);
+    }, [values.join(',')]);
+  }
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    fill = _useMemo.fill,
+    bg = _useMemo.bg;
+  var changeHandle = useCallback(function (ev) {
+    if (isDisabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    if (inGroup && updateState) {
+      updateState && updateState(value, !selfChecked);
+    }
+    setSelfChecked(!selfChecked);
+    onChange && onChange(selfEvent);
+  }, [updateState, onChange, isDisabled, selfChecked]);
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
+    fill: fill,
+    bg: bg,
+    disabled: isDisabled,
+    checked: selfChecked
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    disabled: isDisabled,
+    checked: selfChecked,
+    onChange: changeHandle
+  }, props, {
+    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4126727675",
+    dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+};
+CheckboxComponent.displayName = 'Checkbox';
+var Checkbox = withScale(CheckboxComponent);
+export default Checkbox;

package/esm/checkbox/index.d.ts

@@ -0,0 +1,9 @@
+import Checkbox from "./checkbox";
+import CheckboxGroup from "./checkbox-group";
+export type CheckboxComponentType = typeof Checkbox & {
+    Group: typeof CheckboxGroup;
+};
+export type { CheckboxProps, CheckboxEvent, CheckboxEventTarget, CheckboxTypes, } from "./checkbox";
+export type { CheckboxGroupProps } from "./checkbox-group";
+declare const _default: CheckboxComponentType;
+export default _default;

package/esm/checkbox/index.js

@@ -0,0 +1,6 @@
+"use client";
+
+import Checkbox from './checkbox';
+import CheckboxGroup from './checkbox-group';
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;

package/esm/checkbox/styles.d.ts

@@ -0,0 +1,7 @@
+import { HUIThemesPalette } from "../themes/presets";
+import { NormalTypes } from "../utils/prop-types";
+export type CheckboxColor = {
+    fill: string;
+    bg: string;
+};
+export declare const getColors: (palette: HUIThemesPalette, status?: NormalTypes) => CheckboxColor;