@mieweb/ui 0.7.3-dev.3 → 0.7.3-dev.30

package/dist/chunk-L6MDULYB.js

@@ -0,0 +1,87 @@
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LINE_CLAMP = {
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6",
+  7: "line-clamp-7",
+  8: "line-clamp-8"
+};
+var ClampedText = React.forwardRef(
+  function ClampedText2({
+    text,
+    lines = 6,
+    threshold = 280,
+    showMoreLabel = "Show more",
+    showLessLabel = "Show less",
+    fadeClassName = "from-card",
+    className,
+    ...props
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    if (text.length <= threshold) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn("break-words whitespace-pre-wrap", className),
+          ...props,
+          children: text
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative break-words whitespace-pre-wrap",
+                !open && (LINE_CLAMP[lines] ?? "line-clamp-6")
+              ),
+              children: [
+                text,
+                !open && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t to-transparent",
+                      fadeClassName
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open,
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen((v) => !v);
+              },
+              className: "text-primary-800 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 mt-1 text-[11px] font-medium hover:underline",
+              children: open ? showLessLabel : showMoreLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { ClampedText };
+//# sourceMappingURL=chunk-L6MDULYB.js.map
+//# sourceMappingURL=chunk-L6MDULYB.js.map

package/dist/chunk-L6MDULYB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ClampedText/ClampedText.tsx"],"names":["ClampedText"],"mappings":";;;;AA0BA,IAAM,UAAA,GAAqC;AAAA,EACzC,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAcO,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EAC/B,SAASA,YAAAA,CACP;AAAA,IACE,IAAA;AAAA,IACA,KAAA,GAAQ,CAAA;AAAA,IACR,SAAA,GAAY,GAAA;AAAA,IACZ,aAAA,GAAgB,WAAA;AAAA,IAChB,aAAA,GAAgB,WAAA;AAAA,IAChB,aAAA,GAAgB,WAAA;AAAA,IAChB,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAS,KAAK,CAAA;AAE5C,IAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,MAAA,uBACE,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA;AAAA,UACzD,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,0CAAA;AAAA,gBACA,CAAC,IAAA,KAAS,UAAA,CAAW,KAAK,CAAA,IAAK,cAAA;AAAA,eACjC;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,IAAA;AAAA,gBACA,CAAC,IAAA,oBACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,MAAA;AAAA,oBACZ,SAAA,EAAW,EAAA;AAAA,sBACT,qFAAA;AAAA,sBACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,WAEJ;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,eAAA,EAAe,IAAA;AAAA,cACf,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,cACnB,CAAA;AAAA,cACA,SAAA,EAAU,wIAAA;AAAA,cAET,iBAAO,aAAA,GAAgB;AAAA;AAAA;AAC1B;AAAA;AAAA,KACF;AAAA,EAEJ;AACF","file":"chunk-L6MDULYB.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ClampedTextProps extends React.HTMLAttributes<HTMLElement> {\n  /** The long text to clamp. */\n  text: string;\n  /** Lines visible while collapsed (2–8, default 6). */\n  lines?: 2 | 3 | 4 | 5 | 6 | 7 | 8;\n  /** Skip the clamp entirely below this character count (default 280). */\n  threshold?: number;\n  /** Toggle labels, overridable for i18n. */\n  showMoreLabel?: string;\n  showLessLabel?: string;\n  /**\n   * Gradient start for the fade at the clamp edge — match it to the\n   * surface behind the text (default `from-card`).\n   */\n  fadeClassName?: string;\n}\n\n// Static map so Tailwind sees every clamp utility it must generate.\n// 7/8 are beyond Tailwind 3's core 1–6 scale — the preset extends\n// theme.lineClamp so TW3 consumers generate them too (TW4 accepts any\n// integer as a bare value).\nconst LINE_CLAMP: Record<number, string> = {\n  2: 'line-clamp-2',\n  3: 'line-clamp-3',\n  4: 'line-clamp-4',\n  5: 'line-clamp-5',\n  6: 'line-clamp-6',\n  7: 'line-clamp-7',\n  8: 'line-clamp-8',\n};\n\n/**\n * Clamps long text to N lines with a fade-out gradient and a\n * Show more / Show less toggle. Short text renders inline with no\n * toggle, so brief values stay flat. Pure presentation — ideal for\n * free-text fields (messages, notes, descriptions) inside detail\n * panels and modals.\n *\n * @example\n * ```tsx\n * <ClampedText text={note.body} lines={4} />\n * ```\n */\nexport const ClampedText = React.forwardRef<HTMLElement, ClampedTextProps>(\n  function ClampedText(\n    {\n      text,\n      lines = 6,\n      threshold = 280,\n      showMoreLabel = 'Show more',\n      showLessLabel = 'Show less',\n      fadeClassName = 'from-card',\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const [open, setOpen] = React.useState(false);\n\n    if (text.length <= threshold) {\n      return (\n        <span\n          ref={ref as React.ForwardedRef<HTMLSpanElement>}\n          className={cn('break-words whitespace-pre-wrap', className)}\n          {...props}\n        >\n          {text}\n        </span>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.ForwardedRef<HTMLDivElement>}\n        className={className}\n        {...props}\n      >\n        <div\n          className={cn(\n            'relative break-words whitespace-pre-wrap',\n            !open && (LINE_CLAMP[lines] ?? 'line-clamp-6')\n          )}\n        >\n          {text}\n          {!open && (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                'pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t to-transparent',\n                fadeClassName\n              )}\n            />\n          )}\n        </div>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          onClick={(e) => {\n            e.stopPropagation();\n            setOpen((v) => !v);\n          }}\n          className=\"text-primary-800 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 mt-1 text-[11px] font-medium hover:underline\"\n        >\n          {open ? showLessLabel : showMoreLabel}\n        </button>\n      </div>\n    );\n  }\n);\n"]}

package/dist/{chunk-SYIFEJSF.cjs → chunk-LQHI44OZ.cjs}

@@ -2,10 +2,10 @@
 
 var chunkYMHOF6WA_cjs = require('./chunk-YMHOF6WA.cjs');
 var chunkJP5SGIXA_cjs = require('./chunk-JP5SGIXA.cjs');
-var chunkS3MKIDYG_cjs = require('./chunk-S3MKIDYG.cjs');
-var chunkZBI52NP2_cjs = require('./chunk-ZBI52NP2.cjs');
+var chunk7AECNMYV_cjs = require('./chunk-7AECNMYV.cjs');
+var chunk56QJHQ5C_cjs = require('./chunk-56QJHQ5C.cjs');
 var chunkP2VTQ5AR_cjs = require('./chunk-P2VTQ5AR.cjs');
-var chunk6ECKH4DJ_cjs = require('./chunk-6ECKH4DJ.cjs');
+var chunkZ5S5JEJD_cjs = require('./chunk-Z5S5JEJD.cjs');
 var chunkRDGRKYQ5_cjs = require('./chunk-RDGRKYQ5.cjs');
 var chunkNPKPCYAT_cjs = require('./chunk-NPKPCYAT.cjs');
 var chunkNUFUV43P_cjs = require('./chunk-NUFUV43P.cjs');
@@ -129,7 +129,7 @@ var FillerWordsModal = ({
         className: "hover:bg-muted flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-sm transition-colors",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkS3MKIDYG_cjs.Checkbox,
+            chunk7AECNMYV_cjs.Checkbox,
             {
               size: "sm",
               checked: selectedFillers.has(word),
@@ -180,7 +180,7 @@ var FillerWordsModal = ({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(chunkP2VTQ5AR_cjs.ModalBody, { className: "flex flex-col gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunk6ECKH4DJ_cjs.Input,
+            chunkZ5S5JEJD_cjs.Input,
             {
               size: "sm",
               type: "text",
@@ -196,7 +196,7 @@ var FillerWordsModal = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border bg-muted/40 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkS3MKIDYG_cjs.Checkbox,
+              chunk7AECNMYV_cjs.Checkbox,
               {
                 size: "sm",
                 label: "Remove silences greater than",
@@ -205,7 +205,7 @@ var FillerWordsModal = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24", children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunkZBI52NP2_cjs.Select,
+              chunk56QJHQ5C_cjs.Select,
               {
                 size: "sm",
                 options: SILENCE_THRESHOLD_OPTIONS.map((t) => ({
@@ -230,7 +230,7 @@ var FillerWordsModal = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk6ECKH4DJ_cjs.Input,
+              chunkZ5S5JEJD_cjs.Input,
               {
                 size: "sm",
                 type: "text",
@@ -395,7 +395,7 @@ var WordEditorModal = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground m-0 text-xs", children: 'Enter space-separated durations to split (e.g., "1 1 4 1")' }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunk6ECKH4DJ_cjs.Input,
+            chunkZ5S5JEJD_cjs.Input,
             {
               ref: inputRef,
               type: "text",
@@ -419,7 +419,7 @@ var WordEditorModal = ({
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground m-0 text-sm", children: "Edit the word text:" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunk6ECKH4DJ_cjs.Input,
+            chunkZ5S5JEJD_cjs.Input,
             {
               ref: inputRef,
               type: "text",
@@ -1755,7 +1755,7 @@ var MediaEditor = React6__namespace.forwardRef(
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20", children: /* @__PURE__ */ jsxRuntime.jsx(
-                            chunkZBI52NP2_cjs.Select,
+                            chunk56QJHQ5C_cjs.Select,
                             {
                               id: "media-editor-default-speed",
                               size: "sm",
@@ -2025,5 +2025,5 @@ exports.MediaEditor = MediaEditor;
 exports.SilenceSettingsModal = SilenceSettingsModal;
 exports.SpeedMarkerMenu = SpeedMarkerMenu;
 exports.WordEditorModal = WordEditorModal;
-//# sourceMappingURL=chunk-SYIFEJSF.cjs.map
-//# sourceMappingURL=chunk-SYIFEJSF.cjs.map
+//# sourceMappingURL=chunk-LQHI44OZ.cjs.map
+//# sourceMappingURL=chunk-LQHI44OZ.cjs.map