@helpdice/ui 2.6.0-beta.4 → 2.6.0-beta.6

package/esm/expandable/expand.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ExpandableProps {
+    children: React.ReactNode;
+    collapsedHeight: number;
+}
+declare const Expandable: React.FC<ExpandableProps>;
+export default Expandable;

package/esm/expandable/expand.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import Button from "../button";
+import React, { useEffect, useRef, useState } from "react";
+var Expandable = function Expandable(_ref) {
+  var children = _ref.children,
+    collapsedHeight = _ref.collapsedHeight;
+  var contentRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullHeight = _useState4[0],
+    setFullHeight = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOverflowing = _useState6[0],
+    setIsOverflowing = _useState6[1];
+  useEffect(function () {
+    var el = contentRef.current;
+    if (!el) return;
+    var updateHeight = function updateHeight() {
+      var scrollHeight = el.scrollHeight;
+      setFullHeight(scrollHeight);
+      setIsOverflowing(scrollHeight > collapsedHeight);
+    };
+    updateHeight();
+    var observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children, collapsedHeight]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: expanded ? fullHeight : collapsedHeight,
+      overflow: "hidden",
+      transition: "height 0.3s ease",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children), !expanded && isOverflowing && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 40,
+      background: "linear-gradient(to bottom, rgba(255,255,255,0), white)"
+    }
+  })), isOverflowing && /*#__PURE__*/React.createElement(Button, {
+    margin: 0,
+    padding: 0,
+    onClick: function onClick() {
+      return setExpanded(function (prev) {
+        return !prev;
+      });
+    },
+    effect: false,
+    color: "abort",
+    scale: 2 / 3,
+    auto: true
+  }, /*#__PURE__*/React.createElement("b", null, expanded ? 'Show less' : 'Show more')));
+};
+export default Expandable;

package/esm/expandable/index.d.ts

@@ -0,0 +1,2 @@
+import Expandable from "./expand";
+export default Expandable;

package/esm/expandable/index.js

@@ -0,0 +1,2 @@
+import Expandable from "./expand";
+export default Expandable;

package/esm/index.d.ts

@@ -129,3 +129,4 @@ export type { CarouselProps } from './carousal';
 export { default as useToasts } from './use-toasts';
 export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
 export { default as Clipboard } from './copy-to-clipboard';
+export { default as Expandable } from './expandable';

package/esm/index.js

@@ -88,4 +88,5 @@ export { default as Carousel } from './carousal';
 // export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './input/input-currency';
 
 export { default as useToasts } from './use-toasts';
-export { default as Clipboard } from './copy-to-clipboard';
+export { default as Clipboard } from './copy-to-clipboard';
+export { default as Expandable } from './expandable';

package/esm/radio/radio.js

@@ -82,26 +82,26 @@ var RadioComponent = function RadioComponent(_ref) {
     setSelfChecked(Boolean(checked));
   }, [checked]);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
+    className: _JSXStyle.dynamic([["3265978383", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
   }, /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
+    className: _JSXStyle.dynamic([["3265978383", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]]])
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "radio",
     value: radioValue,
     checked: selfChecked,
     onChange: changeHandler
   }, props, {
-    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["3265978383", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
+    className: _JSXStyle.dynamic([["3265978383", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
+    className: _JSXStyle.dynamic([["3265978383", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
       active: selfChecked
     }) || "")
   }), withoutDescChildren), DescChildren && DescChildren), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2664604043",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
-  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
+    id: "3265978383",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, SCALES.font(0.92), SCALES.font(0.92), isDisabled ? theme.palette.accents_4 : bg]
+  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:").concat(SCALES.font(0.92), ";height:").concat(SCALES.font(0.92), ";border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";margin:1px;}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
 };
 RadioComponent.displayName = 'Radio';
 var Radio = withScale(RadioComponent);

package/esm/table/table-body.js

@@ -127,7 +127,7 @@ var TableBody = function TableBody(_ref) {
   //       <tr>
   //         <td colSpan={columns?.length}>
   //           <div>
-  // <Placeholder empty textOnly={textPlaceholder} msg="No Entries Found" />
+  //              <Placeholder empty textOnly={textPlaceholder} msg="No Entries Found" />
   //           </div>
   //         </td>
   //       </tr>

package/esm/text/text.d.ts

@@ -15,7 +15,6 @@ interface Props {
     span?: boolean;
     del?: boolean;
     em?: boolean;
-    collapse?: number;
     blockquote?: boolean;
     noWrap?: boolean;
     className?: string;

package/esm/text/text.js

@@ -1,12 +1,10 @@
 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 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
 /* "use client" */;
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import TextChild from './child';
 import { withScale } from '../use-scale';
-import Button from '../button';
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -45,8 +43,6 @@ var TextComponent = function TextComponent(_ref) {
     blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
     _ref$noWrap = _ref.noWrap,
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
-    _ref$collapse = _ref.collapse,
-    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -90,10 +86,6 @@ var TextComponent = function TextComponent(_ref) {
    *
    */
 
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var tag = useMemo(function () {
     if (names[0]) return names[0];
     if (inlineNames[0]) return inlineNames[0];
@@ -115,21 +107,7 @@ var TextComponent = function TextComponent(_ref) {
     },
     className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
     tag: tag
-  }, props), typeof children === 'string' && collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
-    margin: 0,
-    onClick: function onClick() {
-      return setExpand(!expand);
-    },
-    style: {
-      textTransform: 'lowercase'
-    },
-    effect: false,
-    color: "abort",
-    scale: 2 / 3,
-    px: 0.2,
-    py: 0,
-    auto: true
-  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : modifers);
+  }, props), modifers);
 };
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.0-beta.4",
+  "version": "2.6.0-beta.6",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -141,7 +141,9 @@
   },
   "peerDependencies": {
     "@helpdice/theme": "^1.1.0",
+    "dashjs": "^5.1.1",
     "react": "^19.2.3",
+    "hls.js": "^1.6.15",
     "react-dom": "^19.2.3",
     "react-router-dom": "^7.8.2"
   },
@@ -273,6 +275,11 @@
       "require": "./dist/drawer/index.js",
       "types": "./dist/drawer/index.d.ts"
     },
+    "./Expandable": {
+      "import": "./esm/expandable/index.js",
+      "require": "./dist/expandable/index.js",
+      "types": "./dist/expandable/index.d.ts"
+    },
     "./Fieldset": {
       "import": "./esm/fieldset/index.js",
       "require": "./dist/fieldset/index.js",
@@ -587,6 +594,9 @@
       "Drawer": [
         "dist/drawer/index.d.ts"
       ],
+      "Expandable": [
+        "dist/expandable/index.d.ts"
+      ],
       "Fieldset": [
         "dist/fieldset/index.d.ts"
       ],