@helpdice/ui 1.0.1 → 1.0.2

package/esm/button/styles.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { addColorAlpha } from '../utils/color';
+export var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+  var colors = {
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground,
+      color: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error
+    }
+  };
+  return colors[type] || null;
+};
+export var getButtonColors = function getButtonColors(palette, props) {
+  var type = props.type,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5
+    },
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    }
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+
+  /**
+   * The '-light' type is the same color as the common type,
+   * only hover's color is different.
+   * e.g.
+   *   Color['success'] === Color['success-light']
+   *   Color['warning'] === Color['warning-light']
+   */
+  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+export var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+  var colors = {
+    secondary: {
+      bg: palette.foreground,
+      border: palette.background,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
+    }
+  };
+  var withoutLightType = type.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+export var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var type = props.type,
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'secondary-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'success-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'warning-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'error-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    })
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _extends({}, defaultColor, {
+    color: 'transparent'
+  });
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
+  return _extends({}, hoverColor, {
+    color: hoverColor.color || hoverColor.border
+  });
+};
+export var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
+};
+export var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type ? type.endsWith('light') : false;
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
+};

package/esm/button/utils.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { ButtonProps } from "./button";
+import { ButtonGroupConfig } from "../button-group/button-group-context";
+export declare const getButtonChildrenWithIcon: (auto: boolean, children: ReactNode, icons: {
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+}) => JSX.Element;
+export declare const filterPropsWithGroup: <T extends React.PropsWithChildren<ButtonProps>>(props: T, config: ButtonGroupConfig) => T;

package/esm/button/utils.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import ButtonIcon from './button-icon';
+import useClasses from '../use-classes';
+export var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
+  var icon = icons.icon,
+    iconRight = icons.iconRight;
+  var hasIcon = icon || iconRight;
+  var isRight = Boolean(iconRight);
+  var paddingForAutoMode = auto ? "calc(var(--geist-ui-button-height) / 2 + var(--geist-ui-button-icon-padding) * .5)" : 0;
+  var classes = useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, children);
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true
+    }, hasIcon);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
+    isRight: isRight
+  }, hasIcon), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3568181479",
+    dynamic: [paddingForAutoMode, paddingForAutoMode]
+  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
+};
+export var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
+  if (!config.isButtonGroup) return props;
+  return _extends({}, props, {
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  });
+};

package/esm/button-dropdown/button-dropdown-context.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export interface ButtonDropdownConfig {
+    type?: NormalTypes;
+    auto?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export declare const ButtonDropdownContext: React.Context<ButtonDropdownConfig>;
+export declare const useButtonDropdown: () => ButtonDropdownConfig;

package/esm/button-dropdown/button-dropdown-context.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var defaultContext = {
+  type: 'default',
+  auto: false,
+  disabled: false,
+  loading: false
+};
+export var ButtonDropdownContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useButtonDropdown = function useButtonDropdown() {
+  return React.useContext(ButtonDropdownContext);
+};

package/esm/button-dropdown/button-dropdown-item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type ButtonDropdownItemTypes = NormalTypes;
+interface Props {
+    main?: boolean;
+    type?: ButtonDropdownItemTypes;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    className?: string;
+}
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export type ButtonDropdownItemProps = Props & NativeAttrs;
+declare const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>>;
+export default ButtonDropdownItem;

package/esm/button-dropdown/button-dropdown-item.js

@@ -0,0 +1,47 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick", "className", "main", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { getColor } from './styles';
+import { useButtonDropdown } from './button-dropdown-context';
+import Loading from '../loading';
+var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
+  var children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$main = _ref.main,
+    main = _ref$main === void 0 ? false : _ref$main,
+    selfType = _ref.type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useButtonDropdown = useButtonDropdown(),
+    parentType = _useButtonDropdown.type,
+    disabled = _useButtonDropdown.disabled,
+    loading = _useButtonDropdown.loading;
+  var type = main ? parentType : selfType;
+  var colors = getColor(theme.palette, type, disabled);
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    onClick && onClick(event);
+  };
+  var cursor = useMemo(function () {
+    if (loading) return 'default';
+    return disabled ? 'not-allowed' : 'pointer';
+  }, [loading, disabled]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["772098729", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), loading ? /*#__PURE__*/React.createElement(Loading, null) : children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "772098729",
+    dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
+  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-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;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--geist-ui-dropdown-height);min-width:var(--geist-ui-dropdown-min-width);padding:var(--geist-ui-dropdown-padding);font-size:var(--geist-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
+};
+ButtonDropdownItem.displayName = 'ButtonDropdownItem';
+export default ButtonDropdownItem;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type ButtonDropdownTypes = NormalTypes;
+interface Props {
+    type?: ButtonDropdownTypes;
+    auto?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ButtonDropdownProps = Props & NativeAttrs;
+declare const ButtonDropdown: 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 ButtonDropdown;

package/esm/button-dropdown/button-dropdown.js

@@ -0,0 +1,105 @@
+"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 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useClickAway from '../utils/use-click-away';
+import { getColor } from './styles';
+import ButtonDropdownIcon from './icon';
+import ButtonDropdownItem from './button-dropdown-item';
+import { ButtonDropdownContext } from './button-dropdown-context';
+import { pickChild, pickChildByProps } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var stopPropagation = function stopPropagation(event) {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+var ButtonDropdownComponent = function ButtonDropdownComponent(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    icon = _ref.icon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var ref = useRef(null);
+  var theme = useTheme();
+  var colors = getColor(theme.palette, type);
+  var itemChildren = pickChild(children, ButtonDropdownItem)[1];
+  var _pickChildByProps = pickChildByProps(itemChildren, 'main', true),
+    _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
+    itemChildrenWithoutMain = _pickChildByProps2[0],
+    mainItemChildren = _pickChildByProps2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var clickHandler = useCallback(function (event) {
+    event.preventDefault();
+    stopPropagation(event);
+    if (disabled || loading) return;
+    setVisible(!visible);
+  }, [visible]);
+  var initialValue = {
+    type: type,
+    auto: auto,
+    disabled: disabled,
+    loading: loading
+  };
+  var bgColor = useMemo(function () {
+    if (disabled || loading) return theme.palette.accents_1;
+    return visible ? colors.hoverBgColor : colors.bgColor;
+  }, [visible, colors, theme.palette]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+  useClickAway(ref, function () {
+    return setVisible(false);
+  });
+  return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: stopPropagation
+  }, props, {
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses('btn-dropdown', className) || "")
+  }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
+    open: visible,
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("summary", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
+  }, icon ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: colors.color,
+      height: SCALES.height(2.5),
+      width: SCALES.height(2.5)
+    },
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
+  }, icon) : /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
+    color: colors.color,
+    height: SCALES.height(2.5)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1706659335", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
+  }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1706659335",
+    dynamic: [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
+  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";--geist-ui-dropdown-height:").concat(SCALES.height(2.5), ";--geist-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--geist-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--geist-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";border-left:1px solid ").concat(colors.borderLeftColor, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
+};
+ButtonDropdownComponent.displayName = 'ButtonDropdown';
+var ButtonDropdown = withScale(ButtonDropdownComponent);
+export default ButtonDropdown;

package/esm/button-dropdown/icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    color?: string;
+    height?: string;
+}
+declare const ButtonDropdownIcon: React.FC<Props>;
+export default ButtonDropdownIcon;

package/esm/button-dropdown/icon.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var ButtonDropdownIcon = function ButtonDropdownIcon(_ref) {
+  var color = _ref.color,
+    height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    stroke: color,
+    style: {
+      color: color
+    },
+    viewBox: "0 0 24 24",
+    width: height,
+    height: height,
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: "jsx-3359574434"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 9l6 6 6-6",
+    className: "jsx-3359574434"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3359574434"
+  }, "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"));
+};
+ButtonDropdownIcon.displayName = 'GeistButtonDropdownIcon';
+export default ButtonDropdownIcon;

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

@@ -0,0 +1,9 @@
+import ButtonDropdown from "./button-dropdown";
+import ButtonDropdownItem from "./button-dropdown-item";
+type ButtonDropdownType = typeof ButtonDropdown & {
+    Item: typeof ButtonDropdownItem;
+};
+export type { ButtonDropdownProps, ButtonDropdownTypes } from "./button-dropdown";
+export type { ButtonDropdownItemProps, ButtonDropdownItemTypes, } from "./button-dropdown-item";
+declare const _default: ButtonDropdownType;
+export default _default;

package/esm/button-dropdown/index.js

@@ -0,0 +1,6 @@
+"use client";
+
+import ButtonDropdown from './button-dropdown';
+import ButtonDropdownItem from './button-dropdown-item';
+ButtonDropdown.Item = ButtonDropdownItem;
+export default ButtonDropdown;

package/esm/button-dropdown/styles.d.ts

@@ -0,0 +1,11 @@
+import { HUIThemesPalette } from "../themes/presets";
+import { NormalTypes } from "../utils/prop-types";
+type ButtonDropdownColors = {
+    color: string;
+    bgColor: string;
+    hoverBgColor: string;
+    hoverBorder: string;
+    borderLeftColor: string;
+};
+export declare const getColor: (palette: HUIThemesPalette, type: NormalTypes | undefined, disabled?: boolean) => ButtonDropdownColors;
+export {};

package/esm/button-dropdown/styles.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getColor = function getColor(palette, type) {
+  var disabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var colors = {
+    "default": {
+      color: palette.accents_5,
+      bgColor: palette.background,
+      borderLeftColor: palette.accents_2,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.accents_2
+    },
+    secondary: {
+      color: palette.background,
+      bgColor: palette.foreground,
+      borderLeftColor: palette.accents_7,
+      hoverBgColor: palette.accents_7,
+      hoverBorder: palette.accents_7
+    },
+    success: {
+      color: palette.background,
+      bgColor: palette.success,
+      borderLeftColor: palette.successDark,
+      hoverBgColor: palette.successDark,
+      hoverBorder: palette.successDark
+    },
+    warning: {
+      color: palette.background,
+      bgColor: palette.warning,
+      borderLeftColor: palette.warningDark,
+      hoverBgColor: palette.warningDark,
+      hoverBorder: palette.warningDark
+    },
+    error: {
+      color: palette.background,
+      bgColor: palette.error,
+      borderLeftColor: palette.errorDark,
+      hoverBgColor: palette.errorDark,
+      hoverBorder: palette.errorDark
+    }
+  };
+  if (disabled) return _extends({}, colors["default"], {
+    bgColor: palette.accents_1,
+    color: palette.accents_4
+  });
+  return type ? colors[type] : colors["default"];
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+export interface ButtonGroupConfig {
+    type?: ButtonTypes;
+    ghost?: boolean;
+    disabled?: boolean;
+    isButtonGroup: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupConfig>;
+export declare const useButtonGroupContext: () => ButtonGroupConfig;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  isButtonGroup: false,
+  disabled: false
+};
+export var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+};