@team-frieeren/components 1.0.1 → 1.0.2

package/dist/client.d.ts

@@ -3,3 +3,5 @@ export { safeLocalStorage, safeSessionStorage } from "./shared/storage";
 export { RouterProvider, useRouter } from "./hooks/useRouter";
 export { WindowRouter } from "./router/windowRouter";
 export { useToast, ToastProvider } from "./components/Toast";
+export { Popup } from "./components/Popup";
+export { BottomSheet } from "./components/BottomSheet";

package/dist/client.js

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { Children, isValidElement, useEffect, createContext, useContext, useMemo, useCallback, useState, Fragment as Fragment$1 } from 'react';
 import cx from 'classnames';
 import { createPortal } from 'react-dom';
+import { Dialog } from 'radix-ui';
+import { Drawer } from 'vaul';
 
 var _assign = function __assign() {
   _assign = Object.assign || function __assign(t) {
@@ -630,4 +632,222 @@ var useToast = function useToast() {
   return context;
 };
 
-export { RouterProvider, ToastProvider, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };
+var Popup = function Popup(props) {
+  var _a;
+  var className = props.className,
+    children = props.children,
+    buttonLayoutType = props.buttonLayoutType,
+    container = props.container,
+    title = props.title,
+    description = props.description,
+    onClose = props.onClose,
+    rest = __rest(props, ["className", "children", "buttonLayoutType", "container", "title", "description", "onClose"]);
+  return jsx(Dialog.Root, _assign({}, rest, {
+    defaultOpen: true,
+    children: jsxs(Dialog.Portal, {
+      container: container || document.body,
+      children: [jsx(Dialog.Overlay, {
+        className: "popup--overlay",
+        onClick: onClose
+      }), jsxs(Dialog.Content, {
+        "data-frieeren-component": "Popup",
+        className: cx("popup", (_a = {}, _a["popup--layout-".concat(buttonLayoutType)] = buttonLayoutType, _a), className),
+        children: [jsx(Dialog.Title, {
+          className: "visually-hidden",
+          children: title || "Popup"
+        }), jsx(Dialog.Description, {
+          className: "visually-hidden",
+          children: description || "Popup"
+        }), jsx("div", {
+          className: "popup--body",
+          children: children
+        }), buttonLayoutType === "typeA" && "button" in props && props.button && jsx("div", {
+          className: "popup--actions",
+          children: props.button
+        }), buttonLayoutType === "typeB" && "leftButton" in props && "rightButton" in props && jsxs("div", {
+          className: "popup--actions popup--actions-typeB",
+          children: [jsx("div", {
+            className: "popup--actions-left",
+            children: props.leftButton
+          }), jsx("div", {
+            className: "popup--actions-right",
+            children: props.rightButton
+          })]
+        })]
+      })]
+    })
+  }));
+};
+
+var SpacingMap = {
+  m: ["margin"],
+  mx: ["marginLeft", "marginRight"],
+  my: ["marginTop", "marginBottom"],
+  mt: ["marginTop"],
+  mb: ["marginBottom"],
+  ml: ["marginLeft"],
+  mr: ["marginRight"],
+  p: ["padding"],
+  px: ["paddingLeft", "paddingRight"],
+  py: ["paddingTop", "paddingBottom"],
+  pt: ["paddingTop"],
+  pb: ["paddingBottom"],
+  pl: ["paddingLeft"],
+  pr: ["paddingRight"]
+};
+var getSpacingStyle = function getSpacingStyle(props) {
+  var style = {};
+  Object.entries(props).forEach(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    if (value === undefined) return;
+    var properties = SpacingMap[key];
+    properties.forEach(function (property) {
+      style[property] = value;
+    });
+  });
+  return style;
+};
+
+function Box(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    className = _a.className,
+    style = _a.style,
+    width = _a.width,
+    height = _a.height,
+    _c = _a.display,
+    display = _c === void 0 ? "inline-block" : _c,
+    children = _a.children,
+    rest = __rest(_a, ["as", "className", "style", "width", "height", "display", "children"]);
+  var m = rest.m,
+    mt = rest.mt,
+    mb = rest.mb,
+    ml = rest.ml,
+    mr = rest.mr,
+    mx = rest.mx,
+    my = rest.my,
+    p = rest.p,
+    pt = rest.pt,
+    pb = rest.pb,
+    pl = rest.pl,
+    pr = rest.pr,
+    px = rest.px,
+    py = rest.py,
+    props = __rest(rest, ["m", "mt", "mb", "ml", "mr", "mx", "my", "p", "pt", "pb", "pl", "pr", "px", "py"]);
+  var spacingStyle = getSpacingStyle({
+    m: m,
+    mt: mt,
+    mb: mb,
+    ml: ml,
+    mr: mr,
+    mx: mx,
+    my: my,
+    p: p,
+    pt: pt,
+    pb: pb,
+    pl: pl,
+    pr: pr,
+    px: px,
+    py: py
+  });
+  return jsx(Component, _assign({
+    "data-frieeren-component": "Box",
+    className: cx("box", className),
+    style: _assign(_assign({
+      width: width,
+      height: height,
+      display: display
+    }, spacingStyle), style)
+  }, props, {
+    children: children
+  }));
+}
+
+function Flex(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    align = _a.align,
+    justify = _a.justify,
+    flex = _a.flex,
+    direction = _a.direction,
+    wrap = _a.wrap,
+    gap = _a.gap,
+    className = _a.className,
+    style = _a.style,
+    rest = __rest(_a, ["as", "align", "justify", "flex", "direction", "wrap", "gap", "className", "style"]);
+  return jsx(Box, _assign({
+    "data-frieeren-component": "Flex",
+    as: Component,
+    className: cx("flex", className),
+    style: _assign({
+      display: "flex",
+      alignItems: align,
+      justifyContent: justify,
+      flex: flex,
+      flexDirection: direction,
+      flexWrap: wrap,
+      gap: gap
+    }, style)
+  }, rest));
+}
+
+var BottomSheet = function BottomSheet(_a) {
+  var _b;
+  var open = _a.open,
+    onClose = _a.onClose,
+    _c = _a.locked,
+    locked = _c === void 0 ? true : _c,
+    _d = _a.showHandle,
+    showHandle = _d === void 0 ? true : _d,
+    _e = _a.handleOnly,
+    handleOnly = _e === void 0 ? false : _e,
+    radius = _a.radius,
+    _f = _a.theme,
+    theme = _f === void 0 ? "light" : _f,
+    _g = _a.zIndex,
+    zIndex = _g === void 0 ? 1 : _g,
+    className = _a.className,
+    children = _a.children;
+  return jsx(Drawer.Root, {
+    open: open,
+    onClose: onClose,
+    modal: locked,
+    handleOnly: handleOnly,
+    children: jsxs(Drawer.Portal, {
+      children: [jsx(Drawer.Overlay, {
+        className: "overlay",
+        "data-frieeren-component": "BottomSheetOverlay",
+        style: {
+          zIndex: zIndex
+        }
+      }), jsxs(Drawer.Content, {
+        className: cx("drawer-content", (_b = {}, _b["bottomsheet-container--radius-".concat(radius)] = radius, _b["bottomsheet-container--theme-".concat(theme)] = theme, _b), className),
+        "data-frieeren-component": "BottomSheet",
+        style: {
+          zIndex: zIndex
+        },
+        children: [jsx(SwitchCase, {
+          value: String(showHandle),
+          caseBy: {
+            "true": jsx(Flex, {
+              className: "drawer-handle",
+              align: "center",
+              justify: "center",
+              children: jsx(Drawer.Handle, {
+                style: {
+                  width: 36
+                }
+              })
+            })
+          }
+        }), jsx("div", {
+          className: "drawer-content-inner",
+          children: children
+        })]
+      })]
+    })
+  });
+};
+
+export { BottomSheet, Popup, RouterProvider, ToastProvider, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };

package/dist/index.css

@@ -1669,75 +1669,6 @@ button {
 .toggle-thumb[data-state=checked] {
   transform: translateX(26px);
 }
-.popup {
-  background-color: var(--seed-ui-color-background-white);
-  border-radius: 16px;
-  box-shadow: 0px 4px 16px 0px rgba(109, 109, 109, 0.07);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  max-width: 450px;
-  max-height: 85vh;
-  padding: 24px 16px;
-  animation: popup-content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  overflow-y: auto;
-}
-.popup:focus {
-  outline: none;
-}
-.popup--actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 24px;
-}
-.popup--actions > * {
-  flex: 1;
-}
-.popup--actions-typeB {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-}
-.popup--actions-left {
-  min-width: 76px;
-  flex: 0 0 auto;
-}
-.popup--actions-right {
-  flex: 1 1 auto;
-}
-@keyframes popup-overlay-show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes popup-content-show {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
 @charset "UTF-8";
 :root {
   --input-transition: 0.2s ease-in-out;

package/dist/index.d.ts

@@ -9,7 +9,5 @@ export { RadioGroup } from "./components/RadioGroup";
 export { Checkbox } from "./components/Checkbox";
 export { Toggle } from "./components/Toggle";
 export { Select } from "./components/Select";
-export { Popup } from "./components/Popup";
-export { BottomSheet } from "./components/BottomSheet";
 export { Input } from "./components/Input";
 export { Tabs } from "./components/Tabs";

package/dist/index.js

@@ -4,9 +4,8 @@ import * as React from 'react';
 import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
 import * as RadioGroupBase from '@radix-ui/react-radio-group';
 import * as CheckboxBase from '@radix-ui/react-checkbox';
-import { Switch, Dialog } from 'radix-ui';
+import { Switch } from 'radix-ui';
 import * as SelectBase from '@radix-ui/react-select';
-import { Drawer } from 'vaul';
 import * as TabsBase from '@radix-ui/react-tabs';
 
 var _assign = function __assign() {
@@ -434,123 +433,6 @@ var Select = {
   Value: Value
 };
 
-var Popup = function Popup(props) {
-  var _a;
-  var className = props.className,
-    children = props.children,
-    buttonLayoutType = props.buttonLayoutType,
-    container = props.container,
-    title = props.title,
-    description = props.description,
-    onClose = props.onClose,
-    rest = __rest(props, ["className", "children", "buttonLayoutType", "container", "title", "description", "onClose"]);
-  return jsx(Dialog.Root, _assign({}, rest, {
-    defaultOpen: true,
-    children: jsxs(Dialog.Portal, {
-      container: container || document.body,
-      children: [jsx(Dialog.Overlay, {
-        className: "popup--overlay",
-        onClick: onClose
-      }), jsxs(Dialog.Content, {
-        "data-frieeren-component": "Popup",
-        className: cx("popup", (_a = {}, _a["popup--layout-".concat(buttonLayoutType)] = buttonLayoutType, _a), className),
-        children: [jsx(Dialog.Title, {
-          className: "visually-hidden",
-          children: title || "Popup"
-        }), jsx(Dialog.Description, {
-          className: "visually-hidden",
-          children: description || "Popup"
-        }), jsx("div", {
-          className: "popup--body",
-          children: children
-        }), buttonLayoutType === "typeA" && "button" in props && props.button && jsx("div", {
-          className: "popup--actions",
-          children: props.button
-        }), buttonLayoutType === "typeB" && "leftButton" in props && "rightButton" in props && jsxs("div", {
-          className: "popup--actions popup--actions-typeB",
-          children: [jsx("div", {
-            className: "popup--actions-left",
-            children: props.leftButton
-          }), jsx("div", {
-            className: "popup--actions-right",
-            children: props.rightButton
-          })]
-        })]
-      })]
-    })
-  }));
-};
-
-function SwitchCase(_a) {
-  var _b;
-  var value = _a.value,
-    caseBy = _a.caseBy,
-    _c = _a.defaultComponent,
-    defaultComponent = _c === void 0 ? null : _c;
-  if (value == null) {
-    return defaultComponent;
-  }
-  return (_b = caseBy[value]) !== null && _b !== void 0 ? _b : defaultComponent;
-}
-
-var BottomSheet = function BottomSheet(_a) {
-  var _b;
-  var open = _a.open,
-    onClose = _a.onClose,
-    _c = _a.locked,
-    locked = _c === void 0 ? true : _c,
-    _d = _a.showHandle,
-    showHandle = _d === void 0 ? true : _d,
-    _e = _a.handleOnly,
-    handleOnly = _e === void 0 ? false : _e,
-    radius = _a.radius,
-    _f = _a.theme,
-    theme = _f === void 0 ? "light" : _f,
-    _g = _a.zIndex,
-    zIndex = _g === void 0 ? 1 : _g,
-    className = _a.className,
-    children = _a.children;
-  return jsx(Drawer.Root, {
-    open: open,
-    onClose: onClose,
-    modal: locked,
-    handleOnly: handleOnly,
-    children: jsxs(Drawer.Portal, {
-      children: [jsx(Drawer.Overlay, {
-        className: "overlay",
-        "data-frieeren-component": "BottomSheetOverlay",
-        style: {
-          zIndex: zIndex
-        }
-      }), jsxs(Drawer.Content, {
-        className: cx("drawer-content", (_b = {}, _b["bottomsheet-container--radius-".concat(radius)] = radius, _b["bottomsheet-container--theme-".concat(theme)] = theme, _b), className),
-        "data-frieeren-component": "BottomSheet",
-        style: {
-          zIndex: zIndex
-        },
-        children: [jsx(SwitchCase, {
-          value: String(showHandle),
-          caseBy: {
-            "true": jsx(Flex, {
-              className: "drawer-handle",
-              align: "center",
-              justify: "center",
-              children: jsx(Drawer.Handle, {
-                style: {
-                  width: 36
-                }
-              })
-            })
-          }
-        }), jsx("div", {
-          className: "drawer-content-inner",
-          children: children
-        })]
-      })]
-    })
-  });
-};
-
 var _rect, _path$1;
 function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgClose = function SvgClose(props) {
@@ -783,4 +665,4 @@ var Tabs = function Tabs(props) {
   }));
 };
 
-export { BottomSheet, Box, Button, Checkbox, Container, Flex, Grid, Input, Popup, RadioGroup, Select, Tabs, Text, Toggle };
+export { Box, Button, Checkbox, Container, Flex, Grid, Input, RadioGroup, Select, Tabs, Text, Toggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-frieeren/components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",