@helpdice/ui 1.0.1 → 1.0.2

package/esm/description/description.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "content", "className"];
+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 DescriptionComponent = function DescriptionComponent(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Title' : _ref$title,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? '' : _ref$content,
+    _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 classes = useClasses('description', className);
+  return /*#__PURE__*/React.createElement("dl", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2323318745", [SCALES.font(1), 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), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("dt", {
+    className: _JSXStyle.dynamic([["2323318745", [SCALES.font(1), 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), theme.palette.accents_5, theme.palette.foreground]]])
+  }, title), /*#__PURE__*/React.createElement("dd", {
+    className: _JSXStyle.dynamic([["2323318745", [SCALES.font(1), 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), theme.palette.accents_5, theme.palette.foreground]]])
+  }, content), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2323318745",
+    dynamic: [SCALES.font(1), 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), theme.palette.accents_5, theme.palette.foreground]
+  }, ".description.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";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), ";}dt.__jsx-style-dynamic-selector{font-size:0.75em;line-height:1em;margin-bottom:0.5em;text-transform:uppercase;white-space:nowrap;color:").concat(theme.palette.accents_5, ";font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}dd.__jsx-style-dynamic-selector{font-size:0.875em;margin:0;line-height:1.1em;color:").concat(theme.palette.foreground, ";font-weight:500;}dd.__jsx-style-dynamic-selector p,dt.__jsx-style-dynamic-selector p{margin:0;}")));
+};
+DescriptionComponent.displayName = 'Description';
+var Description = withScale(DescriptionComponent);
+export default Description;

package/esm/description/index.d.ts

@@ -0,0 +1,3 @@
+import Description from "./description";
+export type { DescriptionProps } from "./description";
+export default Description;

package/esm/description/index.js

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

package/esm/display/display.d.ts

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

package/esm/display/display.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "caption", "shadow", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var DisplayComponent = function DisplayComponent(_ref) {
+  var children = _ref.children,
+    _ref$caption = _ref.caption,
+    caption = _ref$caption === void 0 ? '' : _ref$caption,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+    _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 classes = useClasses('display', className);
+  var showShadow = useMemo(function () {
+    return shadow && theme.type !== 'dark';
+  }, [theme.type, shadow]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2213400331", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2213400331", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2213400331", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "caption"
+  }, caption), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2213400331",
+    dynamic: [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']
+  }, ".display.__jsx-style-dynamic-selector{display:block;max-width:100%;font-size:".concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";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(2.5), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(2.5), " ").concat(SCALES.ml(0, 'auto'), ";}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:").concat(SCALES.width(1, 'max-content'), ";box-shadow:").concat(showShadow ? theme.expressiveness.shadowLarge : 'none', ";max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.5em;color:").concat(theme.palette.accents_5, ";margin:").concat(shadow ? '2.5em' : '1.3em', " auto 0;text-align:center;max-width:85%;}")));
+};
+DisplayComponent.displayName = 'Display';
+var Display = withScale(DisplayComponent);
+export default Display;

package/esm/display/index.d.ts

@@ -0,0 +1,3 @@
+import Display from "./display";
+export type { DisplayProps } from "./display";
+export default Display;

package/esm/display/index.js

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

package/esm/divider/divider.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DividerAlign, SnippetTypes } from "../utils/prop-types";
+export type DividerTypes = SnippetTypes;
+interface Props {
+    type?: DividerTypes;
+    align?: DividerAlign;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type DividerProps = Props & NativeAttrs;
+declare const Divider: 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 Divider;

package/esm/divider/divider.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "align", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getColor = function getColor(type, palette) {
+  var colors = {
+    "default": palette.border,
+    lite: palette.accents_1,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    secondary: palette.secondary,
+    dark: palette.foreground
+  };
+  return colors[type];
+};
+var DividerComponent = function DividerComponent(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    children = _ref.children,
+    _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 classes = useClasses('divider', className);
+  var color = useMemo(function () {
+    return getColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var alignClassName = useMemo(function () {
+    if (!align || align === 'center') return '';
+    if (align === 'left' || align === 'start') return 'start';
+    return 'end';
+  }, [align]);
+  var alignClasses = useClasses('text', alignClassName);
+  var textColor = type === 'default' ? theme.palette.foreground : color;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "separator"
+  }, props, {
+    className: _JSXStyle.dynamic([["3410666717", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3410666717", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3410666717",
+    dynamic: [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]
+  }, ".divider.__jsx-style-dynamic-selector{max-width:100%;background-color:".concat(color, ";position:relative;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(0.0625), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;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;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:").concat(theme.palette.background, ";color:").concat(textColor, ";z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}")));
+};
+DividerComponent.displayName = 'Divider';
+var Divider = withScale(DividerComponent);
+export default Divider;

package/esm/divider/index.d.ts

@@ -0,0 +1,4 @@
+import Divider from "./divider";
+export type { DividerProps, DividerTypes } from "./divider";
+export type { DividerAlign } from "../utils/prop-types";
+export default Divider;

package/esm/divider/index.js

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

package/esm/dot/dot.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type DotTypes = NormalTypes;
+interface Props {
+    type?: DotTypes;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type DotProps = Props & NativeAttrs;
+declare const Dot: 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 Dot;

package/esm/dot/dot.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getColor = function getColor(type, theme) {
+  var colors = {
+    "default": theme.palette.accents_2,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error
+  };
+  return colors[type] || colors["default"];
+};
+var DotComponent = function DotComponent(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    children = _ref.children,
+    _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 color = useMemo(function () {
+    return getColor(type, theme);
+  }, [type, theme]);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4077256937", [SCALES.font(1), 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), color]]]) + " " + (props && props.className != null && props.className || useClasses('dot', className) || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4077256937", [SCALES.font(1), 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), color]]]) + " " + "icon"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4077256937", [SCALES.font(1), 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), color]]]) + " " + "label"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4077256937",
+    dynamic: [SCALES.font(1), 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), color]
+  }, ".dot.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:".concat(SCALES.font(1), ";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), ";}.icon.__jsx-style-dynamic-selector{width:0.625em;height:0.625em;min-width:calc(0.625 * 12px);min-height:calc(0.625 * 12px);line-height:0.625em;border-radius:50%;background-color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.label.__jsx-style-dynamic-selector{margin-left:0.5em;font-size:1em;line-height:1em;text-transform:capitalize;}")));
+};
+DotComponent.displayName = 'HDot';
+var Dot = withScale(DotComponent);
+export default Dot;

package/esm/dot/index.d.ts

@@ -0,0 +1,3 @@
+import Dot from "./dot";
+export type { DotProps, DotTypes } from "./dot";
+export default Dot;

package/esm/dot/index.js

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

package/esm/drawer/drawer-wrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    className?: string;
+    visible?: boolean;
+    placement: DrawerPlacement;
+}
+export type DrawerWrapperProps = Props;
+declare const DrawerWrapper: React.FC<React.PropsWithChildren<DrawerWrapperProps>>;
+export default DrawerWrapper;

package/esm/drawer/drawer-wrapper.js

@@ -0,0 +1,80 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "visible", "placement"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import useScale from '../use-scale';
+import useTheme from '../use-theme';
+import CssTransition from '../shared/css-transition';
+import { isChildElement } from '../utils/collections';
+import { getDrawerTransform } from './helper';
+import useClasses from '../use-classes';
+var DrawerWrapper = function DrawerWrapper(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    placement = _ref.placement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var modalContent = useRef(null);
+  var tabStart = useRef(null);
+  var tabEnd = useRef(null);
+  var transform = useMemo(function () {
+    return getDrawerTransform(placement);
+  }, [placement]);
+  var classes = useClasses('wrapper', placement, className);
+  useEffect(function () {
+    if (!visible) return;
+    var activeElement = document.activeElement;
+    var isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    tabStart.current && tabStart.current.focus();
+  }, [visible]);
+  var onKeyDown = function onKeyDown(event) {
+    var isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    var activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        tabEnd.current && tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        tabStart.current && tabStart.current.focus();
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    role: "dialog",
+    tabIndex: -1,
+    onKeyDown: onKeyDown,
+    ref: modalContent
+  }, props, {
+    className: _JSXStyle.dynamic([["3022633861", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabStart,
+    className: _JSXStyle.dynamic([["3022633861", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab start"
+  }), children, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabEnd,
+    className: _JSXStyle.dynamic([["3022633861", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab end"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3022633861",
+    dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]
+  }, ".wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;vertical-align:middle;overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:calc(3 * ").concat(theme.layout.radius, ");box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;outline:none;-webkit-transform:").concat(transform.initial, ";-ms-transform:").concat(transform.initial, ";transform:").concat(transform.initial, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.6,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);font-size:").concat(SCALES.font(1), ";--modal-wrapper-padding-left:").concat(SCALES.pl(1.3125), ";--modal-wrapper-padding-right:").concat(SCALES.pr(1.3125), ";padding:").concat(SCALES.pt(1.3125), " var(--modal-wrapper-padding-right) ").concat(SCALES.pb(1.3125), " var(--modal-wrapper-padding-left);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.top.__jsx-style-dynamic-selector,.bottom.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";}.left.__jsx-style-dynamic-selector,.right.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, '100%'), ";}.top.__jsx-style-dynamic-selector{bottom:auto;border-top-left-radius:0;border-top-right-radius:0;}.left.__jsx-style-dynamic-selector{right:auto;border-top-left-radius:0;border-bottom-left-radius:0;}.bottom.__jsx-style-dynamic-selector{top:auto;border-bottom-left-radius:0;border-bottom-right-radius:0;}.right.__jsx-style-dynamic-selector{left:auto;border-top-right-radius:0;border-bottom-right-radius:0;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.2,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0.4;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}"))));
+};
+DrawerWrapper.displayName = 'DrawerWrapper';
+export default DrawerWrapper;

package/esm/drawer/drawer.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEvent } from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    visible?: boolean;
+    keyboard?: boolean;
+    disableBackdropClick?: boolean;
+    onClose?: () => void;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+    wrapClassName?: string;
+    placement?: DrawerPlacement;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type DrawerProps = Props & NativeAttrs;
+declare const DrawerComponent: React.FC<DrawerProps>;
+export default DrawerComponent;

package/esm/drawer/drawer.js

@@ -0,0 +1,73 @@
+"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 = ["visible", "keyboard", "disableBackdropClick", "onClose", "onContentClick", "wrapClassName", "children", "placement"];
+import React, { useEffect, useState } from 'react';
+// import { withScale } from '../use-scale'
+import usePortal from '../utils/use-portal';
+import useBodyScroll from '../utils/use-body-scroll';
+import useKeyboard, { KeyCode } from '../use-keyboard';
+import { createPortal } from 'react-dom';
+import Backdrop from '../shared/backdrop';
+import DrawerWrapper from './drawer-wrapper';
+var DrawerComponent = function DrawerComponent(_ref) {
+  var customVisible = _ref.visible,
+    _ref$keyboard = _ref.keyboard,
+    keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
+    _ref$disableBackdropC = _ref.disableBackdropClick,
+    disableBackdropClick = _ref$disableBackdropC === void 0 ? false : _ref$disableBackdropC,
+    onClose = _ref.onClose,
+    onContentClick = _ref.onContentClick,
+    _ref$wrapClassName = _ref.wrapClassName,
+    wrapClassName = _ref$wrapClassName === void 0 ? '' : _ref$wrapClassName,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var portal = usePortal('drawer');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useBodyScroll = useBodyScroll(null, {
+      delayReset: 300
+    }),
+    _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
+    setBodyHidden = _useBodyScroll2[1];
+  var closeDrawer = function closeDrawer() {
+    onClose && onClose();
+    setVisible(false);
+    setBodyHidden(false);
+  };
+  useEffect(function () {
+    if (typeof customVisible === 'undefined') return;
+    setVisible(customVisible);
+    setBodyHidden(customVisible);
+  }, [customVisible]);
+  var _useKeyboard = useKeyboard(function () {
+      keyboard && closeDrawer();
+    }, KeyCode.Escape, {
+      disableGlobalEvent: true
+    }),
+    bindings = _useKeyboard.bindings;
+  var closeFromBackdrop = function closeFromBackdrop() {
+    if (disableBackdropClick) return;
+    closeDrawer();
+  };
+  if (!portal) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Backdrop, _extends({
+    onClick: closeFromBackdrop,
+    onContentClick: onContentClick,
+    visible: visible,
+    width: "100%"
+  }, bindings), /*#__PURE__*/React.createElement(DrawerWrapper, _extends({
+    placement: placement,
+    visible: visible,
+    className: wrapClassName
+  }, props), children)), portal);
+};
+DrawerComponent.displayName = 'Drawer';
+// const Drawer = withScale(DrawerComponent)
+export default DrawerComponent;

package/esm/drawer/helper.d.ts

@@ -0,0 +1,9 @@
+declare const drawerPlacement: ["top", "right", "bottom", "left"];
+export type DrawerPlacement = typeof drawerPlacement[number];
+export type DrawerTranslateItem = {
+    initial: string;
+    hidden: string;
+    visible: string;
+};
+export declare const getDrawerTransform: (placement: DrawerPlacement) => DrawerTranslateItem;
+export {};

package/esm/drawer/helper.js

@@ -0,0 +1,27 @@
+import { tuple } from '../utils/prop-types';
+var drawerPlacement = tuple('top', 'right', 'bottom', 'left');
+export var getDrawerTransform = function getDrawerTransform(placement) {
+  var translates = {
+    top: {
+      initial: 'translate3d(0, -100%, 0)',
+      hidden: 'translate3d(0, -100%, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    left: {
+      initial: 'translate3d(-100%, 0, 0)',
+      hidden: 'translate3d(-100%, 0, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    bottom: {
+      initial: 'translate3d(0, 100%, 0)',
+      hidden: 'translate3d(0, 100%, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    right: {
+      initial: 'translate3d(100%, 0, 0)',
+      hidden: 'translate3d(100%, 0, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    }
+  };
+  return translates[placement];
+};

package/esm/drawer/index.d.ts

@@ -0,0 +1,13 @@
+import Drawer from "./drawer";
+import ModalTitle from "../modal/modal-title";
+import ModalSubtitle from "../modal/modal-subtitle";
+import ModalContent from "../modal/modal-content";
+export type DrawerComponentType = typeof Drawer & {
+    Title: typeof ModalTitle;
+    Subtitle: typeof ModalSubtitle;
+    Content: typeof ModalContent;
+};
+export type { DrawerProps } from "./drawer";
+export type { ModalTitleProps as DrawerTitleProps, ModalSubtitleProps as DrawerSubtitleProps, ModalContentProps as DrawerContentProps, } from "../modal";
+declare const _default: DrawerComponentType;
+export default _default;

package/esm/drawer/index.js

@@ -0,0 +1,10 @@
+"use client";
+
+import Drawer from './drawer';
+import ModalTitle from '../modal/modal-title';
+import ModalSubtitle from '../modal/modal-subtitle';
+import ModalContent from '../modal/modal-content';
+Drawer.Title = ModalTitle;
+Drawer.Subtitle = ModalSubtitle;
+Drawer.Content = ModalContent;
+export default Drawer;