@helpdice/ui 1.0.1 → 1.0.2

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+interface Props {
+    disabled?: boolean;
+    vertical?: boolean;
+    ghost?: boolean;
+    type?: ButtonTypes;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ButtonGroupProps = Props & NativeAttrs;
+declare const ButtonGroup: 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 ButtonGroup;

package/esm/button-group/button-group.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "type", "ghost", "vertical", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { ButtonGroupContext } from './button-group-context';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getGroupBorderColors = function getGroupBorderColors(palette, props) {
+  var _props$ghost = props.ghost,
+    ghost = _props$ghost === void 0 ? false : _props$ghost,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'default' : _props$type;
+  if (!ghost && type !== 'default') return palette.background;
+  var colors = {
+    "default": palette.border,
+    success: palette.success,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning
+  };
+  var withoutLightType = type.replace('-light', '');
+  return colors[withoutLightType] || colors["default"];
+};
+var ButtonGroupComponent = function ButtonGroupComponent(groupProps) {
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var disabled = groupProps.disabled,
+    type = groupProps.type,
+    ghost = groupProps.ghost,
+    vertical = groupProps.vertical,
+    children = groupProps.children,
+    className = groupProps.className,
+    props = _objectWithoutProperties(groupProps, _excluded);
+  var initialValue = useMemo(function () {
+    return {
+      disabled: disabled,
+      type: type,
+      ghost: ghost,
+      isButtonGroup: true
+    };
+  }, [disabled, type]);
+  var border = useMemo(function () {
+    return getGroupBorderColors(theme.palette, groupProps);
+  }, [theme, type, disabled, ghost]);
+  var classes = useClasses('btn-group', {
+    vertical: vertical,
+    horizontal: !vertical
+  }, className);
+  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3616385743", [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3616385743",
+    dynamic: [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]
+  }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
+};
+ButtonGroupComponent.displayName = 'ButtonGroup';
+var ButtonGroup = withScale(ButtonGroupComponent);
+export default ButtonGroup;

package/esm/button-group/index.d.ts

@@ -0,0 +1,4 @@
+import ButtonGroup from "./button-group";
+export type { ButtonGroupProps } from "./button-group";
+export type { ButtonTypes } from "../utils/prop-types";
+export default ButtonGroup;

package/esm/button-group/index.js

@@ -0,0 +1,4 @@
+"use client";
+
+import ButtonGroup from './button-group';
+export default ButtonGroup;

package/esm/capacity/capacity.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface Props {
+    value?: number;
+    limit?: number;
+    color?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CapacityProps = Props & NativeAttrs;
+declare const Capacity: 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 Capacity;

package/esm/capacity/capacity.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "limit", "color", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { useProportions } from '../utils/calculations';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getColor = function getColor(val, palette) {
+  if (val < 33) return palette.cyan;
+  if (val < 66) return palette.warning;
+  return palette.errorDark;
+};
+var CapacityComponent = function CapacityComponent(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? 100 : _ref$limit,
+    userColor = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var percentValue = useProportions(value, limit);
+  var classes = useClasses('capacity', className);
+  var color = useMemo(function () {
+    if (userColor && userColor !== '') return userColor;
+    return getColor(percentValue, theme.palette);
+  }, [userColor, percentValue, theme.palette]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    title: "".concat(percentValue, "%")
+  }, props, {
+    className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2706946339",
+    dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]
+  }, ".capacity.__jsx-style-dynamic-selector{width:".concat(SCALES.width(3.125), ";height:").concat(SCALES.height(0.625), ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;background-color:").concat(theme.palette.accents_2, ";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), ";}span.__jsx-style-dynamic-selector{width:").concat(percentValue, "%;background-color:").concat(color, ";height:100%;margin:0;padding:0;display:block;}")));
+};
+CapacityComponent.displayName = 'Capacity';
+var Capacity = withScale(CapacityComponent);
+export default Capacity;

package/esm/capacity/index.d.ts

@@ -0,0 +1,3 @@
+import Capacity from "./capacity";
+export type { CapacityProps } from "./capacity";
+export default Capacity;

package/esm/capacity/index.js

@@ -0,0 +1,4 @@
+"use client";
+
+import Capacity from './capacity';
+export default Capacity;

package/esm/card/card-content.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardContentProps = Props & NativeAttrs;
+declare const CardContent: 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 CardContent;

package/esm/card/card-content.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var CardContentComponent = function CardContentComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["490544004", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('content', className) || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "490544004",
+    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1), " ").concat(SCALES.pl(1), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector>p:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>p:last-child{margin-bottom:0;}")));
+};
+CardContentComponent.displayName = 'CardContent';
+var CardContent = withScale(CardContentComponent);
+export default CardContent;

package/esm/card/card-footer.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface Props {
+    disableAutoMargin?: boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardFooterProps = Props & NativeAttrs;
+declare const CardFooter: 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 CardFooter;

package/esm/card/card-footer.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "disableAutoMargin"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var CardFooterComponent = function CardFooterComponent(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$disableAutoMargi = _ref.disableAutoMargin,
+    disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses({
+    'auto-margin': !disableAutoMargin
+  }, className);
+  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1602358380", [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1602358380",
+    dynamic: [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]
+  }, "footer.__jsx-style-dynamic-selector{padding:".concat(SCALES.py(0.66), " ").concat(SCALES.px(1.31), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;background-color:inherit;font-size:").concat(SCALES.font(0.875), ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";min-height:").concat(SCALES.height(3.3), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:").concat(theme.layout.gapQuarter, ";}")));
+};
+CardFooterComponent.displayName = 'CardFooter';
+var CardFooter = withScale(CardFooterComponent);
+export default CardFooter;

package/esm/card/card.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { CardTypes } from "../utils/prop-types";
+interface Props {
+    hoverable?: boolean;
+    shadow?: boolean;
+    className?: string;
+    type?: CardTypes;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardProps = Props & NativeAttrs;
+declare const Card: 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 Card;

package/esm/card/card.js

@@ -0,0 +1,57 @@
+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 = ["children", "hoverable", "className", "shadow", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { getStyles } from './styles';
+import CardFooter from './card-footer';
+import CardContent from './card-content';
+import Image from '../image';
+import { hasChild, pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var CardComponent = function CardComponent(_ref) {
+  var children = _ref.children,
+    _ref$hoverable = _ref.hoverable,
+    hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var hoverShadow = useMemo(function () {
+    if (shadow) return theme.expressiveness.shadowMedium;
+    return hoverable ? theme.expressiveness.shadowSmall : 'none';
+  }, [hoverable, shadow, theme.expressiveness]);
+  var _useMemo = useMemo(function () {
+      return getStyles(type, theme.palette, shadow);
+    }, [type, theme.palette, shadow]),
+    color = _useMemo.color,
+    bgColor = _useMemo.bgColor,
+    borderColor = _useMemo.borderColor;
+  var _pickChild = pickChild(children, CardFooter),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutFooterChildren = _pickChild2[0],
+    footerChildren = _pickChild2[1];
+  var _pickChild3 = pickChild(withoutFooterChildren, Image),
+    _pickChild4 = _slicedToArray(_pickChild3, 2),
+    withoutImageChildren = _pickChild4[0],
+    imageChildren = _pickChild4[1];
+  var hasContent = hasChild(withoutImageChildren, CardContent);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4234389955", [theme.palette.background, theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, 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), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4234389955",
+    dynamic: [theme.palette.background, theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, 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), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:1px solid ").concat(borderColor, ";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), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+};
+CardComponent.displayName = 'Card';
+var Card = withScale(CardComponent);
+export default Card;

package/esm/card/index.d.ts

@@ -0,0 +1,15 @@
+import Card from "./card";
+import CardFooter from "./card-footer";
+import CardContent from "./card-content";
+export type CardComponentType = typeof Card & {
+    Footer: typeof CardFooter;
+    Actions: typeof CardFooter;
+    Content: typeof CardContent;
+    Body: typeof CardContent;
+};
+export type { CardProps } from "./card";
+export type { CardContentProps } from "./card-content";
+export type { CardFooterProps } from "./card-footer";
+export type { CardTypes } from "../utils/prop-types";
+declare const _default: CardComponentType;
+export default _default;

package/esm/card/index.js

@@ -0,0 +1,10 @@
+"use client";
+
+import Card from './card';
+import CardFooter from './card-footer';
+import CardContent from './card-content';
+Card.Footer = CardFooter;
+Card.Actions = CardFooter;
+Card.Content = CardContent;
+Card.Body = CardContent;
+export default Card;

package/esm/card/styles.d.ts

@@ -0,0 +1,8 @@
+import { CardTypes } from "../utils/prop-types";
+import { HUIThemesPalette } from "../themes/presets";
+export type CardStyles = {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+};
+export declare const getStyles: (type: CardTypes, palette: HUIThemesPalette, isShadow?: boolean) => CardStyles;

package/esm/card/styles.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getStyles = function getStyles(type, palette, isShadow) {
+  var colors = {
+    "default": {
+      color: palette.foreground,
+      bgColor: palette.background
+    },
+    dark: {
+      color: palette.background,
+      bgColor: palette.foreground
+    },
+    secondary: {
+      color: palette.background,
+      bgColor: palette.secondary
+    },
+    success: {
+      color: palette.background,
+      bgColor: palette.success
+    },
+    warning: {
+      color: palette.background,
+      bgColor: palette.warning
+    },
+    error: {
+      color: palette.background,
+      bgColor: palette.error
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.background
+    },
+    alert: {
+      color: 'white',
+      bgColor: palette.alert
+    },
+    purple: {
+      color: 'white',
+      bgColor: palette.purple
+    },
+    violet: {
+      color: 'white',
+      bgColor: palette.violet
+    },
+    cyan: {
+      color: 'black',
+      bgColor: palette.cyan
+    }
+  };
+  var showBorder = type === 'default' && !isShadow;
+  return _extends({}, colors[type], {
+    borderColor: showBorder ? palette.border : 'transparent'
+  });
+};

package/esm/cart/index.d.ts

@@ -0,0 +1,72 @@
+import * as React from "react";
+export interface Item {
+    id: string;
+    price: number;
+    quantity?: number;
+    itemTotal?: number;
+    [key: string]: any;
+}
+export interface InitialState {
+    id: string;
+    items: Item[];
+    isEmpty: boolean;
+    totalItems: number;
+    totalUniqueItems: number;
+    cartTotal: number;
+    metadata?: Metadata;
+}
+export interface Metadata {
+    [key: string]: any;
+}
+export interface CartProviderState extends InitialState {
+    addItem: (item: Item, quantity?: number) => void;
+    removeItem: (id: Item["id"]) => void;
+    updateItem: (id: Item["id"], payload: object) => void;
+    setItems: (items: Item[]) => void;
+    updateItemQuantity: (id: Item["id"], quantity: number) => void;
+    emptyCart: () => void;
+    getItem: (id: Item["id"]) => any | undefined;
+    inCart: (id: Item["id"]) => boolean;
+    clearCartMetadata: () => void;
+    setCartMetadata: (metadata: Metadata) => void;
+    updateCartMetadata: (metadata: Metadata) => void;
+}
+export type Actions = {
+    type: "SET_ITEMS";
+    payload: Item[];
+} | {
+    type: "ADD_ITEM";
+    payload: Item;
+} | {
+    type: "REMOVE_ITEM";
+    id: Item["id"];
+} | {
+    type: "UPDATE_ITEM";
+    id: Item["id"];
+    payload: object;
+} | {
+    type: "EMPTY_CART";
+} | {
+    type: "CLEAR_CART_META";
+} | {
+    type: "SET_CART_META";
+    payload: Metadata;
+} | {
+    type: "UPDATE_CART_META";
+    payload: Metadata;
+};
+export declare const initialState: any;
+export declare const createCartIdentifier: (len?: number) => string;
+export declare const useCart: () => CartProviderState;
+export declare const CartProvider: React.FC<{
+    children?: React.ReactNode;
+    id?: string;
+    defaultItems?: Item[];
+    onSetItems?: (items: Item[]) => void;
+    onItemAdd?: (payload: Item) => void;
+    onItemUpdate?: (payload: object) => void;
+    onItemRemove?: (id: Item["id"]) => void;
+    onEmptyCart?: () => void;
+    storage?: (key: string, initialValue: string) => [string, (value: Function | string) => void];
+    metadata?: Metadata;
+}>;