@crisp-ui-kit/crisp 0.10.0 → 0.10.1

package/dist/cjs/components/middletruncate/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./middletruncate"), exports);

package/dist/cjs/components/middletruncate/middletruncate.js

@@ -0,0 +1,23 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddleTruncate = MiddleTruncate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_middle_truncate_1 = require("@seed-design/react-middle-truncate");
+/**
+ * Truncates in the MIDDLE rather than the end, so the part that identifies a
+ * string survives: `annual-report-fi…-v7-final.pdf` keeps its extension, and a
+ * record title keeps its suffix. An end-truncating `text-overflow: ellipsis`
+ * throws exactly that away.
+ *
+ * Measurement is seed-design's — it re-measures on resize with a
+ * `ResizeObserver` and only touches the DOM inside an effect, so it renders the
+ * full string on the server and narrows it on hydration.
+ *
+ * It owns no pixels, in crisp or in seed: there is no recipe here because
+ * seed-design ships no stylesheet for it either. It inherits the type around it
+ * by design, which is what makes it usable inside a table cell.
+ */
+function MiddleTruncate({ children, title, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_middle_truncate_1.MiddleTruncate, { ...props, title: title ?? children, children: children }));
+}

package/dist/cjs/index.js

@@ -45,6 +45,7 @@ __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);
 __exportStar(require("./components/menu"), exports);
+__exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
 __exportStar(require("./components/popover"), exports);
 __exportStar(require("./components/progress"), exports);

package/dist/esm/components/middletruncate/index.js

@@ -0,0 +1 @@
+export * from "./middletruncate.js";

package/dist/esm/components/middletruncate/middletruncate.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MiddleTruncate as SeedMiddleTruncate, } from "@seed-design/react-middle-truncate";
+/**
+ * Truncates in the MIDDLE rather than the end, so the part that identifies a
+ * string survives: `annual-report-fi…-v7-final.pdf` keeps its extension, and a
+ * record title keeps its suffix. An end-truncating `text-overflow: ellipsis`
+ * throws exactly that away.
+ *
+ * Measurement is seed-design's — it re-measures on resize with a
+ * `ResizeObserver` and only touches the DOM inside an effect, so it renders the
+ * full string on the server and narrows it on hydration.
+ *
+ * It owns no pixels, in crisp or in seed: there is no recipe here because
+ * seed-design ships no stylesheet for it either. It inherits the type around it
+ * by design, which is what makes it usable inside a table cell.
+ */
+export function MiddleTruncate({ children, title, ...props }) {
+    return (_jsx(SeedMiddleTruncate, { ...props, title: title ?? children, children: children }));
+}

package/dist/esm/index.js

@@ -29,6 +29,7 @@ export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";
 export * from "./components/menu/index.js";
+export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";

package/dist/types/components/middletruncate/index.d.ts

@@ -0,0 +1 @@
+export * from "./middletruncate";

package/dist/types/components/middletruncate/middletruncate.d.ts

@@ -0,0 +1,20 @@
+import { type MiddleTruncateProps as SeedProps } from "@seed-design/react-middle-truncate";
+export type MiddleTruncateProps = Omit<SeedProps, "asChild"> & {
+    /** The full string. Kept whole in the DOM's accessible name via `title`. */
+    children: string;
+};
+/**
+ * Truncates in the MIDDLE rather than the end, so the part that identifies a
+ * string survives: `annual-report-fi…-v7-final.pdf` keeps its extension, and a
+ * record title keeps its suffix. An end-truncating `text-overflow: ellipsis`
+ * throws exactly that away.
+ *
+ * Measurement is seed-design's — it re-measures on resize with a
+ * `ResizeObserver` and only touches the DOM inside an effect, so it renders the
+ * full string on the server and narrows it on hydration.
+ *
+ * It owns no pixels, in crisp or in seed: there is no recipe here because
+ * seed-design ships no stylesheet for it either. It inherits the type around it
+ * by design, which is what makes it usable inside a table cell.
+ */
+export declare function MiddleTruncate({ children, title, ...props }: MiddleTruncateProps): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/linechart";
 export * from "./components/menu";
+export * from "./components/middletruncate";
 export * from "./components/multiselect";
 export * from "./components/popover";
 export * from "./components/progress";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -167,6 +167,11 @@
       "import": "./dist/esm/components/menu/index.js",
       "require": "./dist/cjs/components/menu/index.js"
     },
+    "./middletruncate": {
+      "types": "./dist/types/components/middletruncate/index.d.ts",
+      "import": "./dist/esm/components/middletruncate/index.js",
+      "require": "./dist/cjs/components/middletruncate/index.js"
+    },
     "./multiselect": {
       "types": "./dist/types/components/multiselect/index.d.ts",
       "import": "./dist/esm/components/multiselect/index.js",
@@ -423,6 +428,7 @@
     "@seed-design/dom-utils": "^2.1.0",
     "@seed-design/react-date-picker": "1.2.0",
     "@seed-design/react-file-upload": "1.0.1",
+    "@seed-design/react-middle-truncate": "1.0.1",
     "@seed-design/react-slider": "2.0.1",
     "@seed-design/react-time-picker": "1.0.0",
     "@zag-js/combobox": "^1.43.3",