@arc-ui/components 11.0.0 → 11.2.0

package/dist/Truncate/Truncate.cjs.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+declare const Truncate: FC<TruncateProps>;
+interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: number;
+}
+export { Truncate };

package/dist/Truncate/Truncate.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children;
+    return (React__default["default"].createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
+};
+
+exports.Truncate = Truncate;

package/dist/Truncate/Truncate.esm.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+declare const Truncate: FC<TruncateProps>;
+interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: number;
+}
+export { Truncate };

package/dist/Truncate/Truncate.esm.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+var Truncate = function (_a) {
+    var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children;
+    return (React__default.createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
+};
+
+export { Truncate };

package/dist/Truncate/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/truncate",
+  "types": "./Truncate.esm.d.ts",
+  "main": "./Truncate.cjs.js",
+  "module": "./Truncate.esm.js",
+  "private": true
+}

package/dist/UniversalHeader/UniversalHeader.esm.js

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import React, { useEffect } from 'react';
-import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import React__default, { useEffect } from 'react';
+import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
 import '../_shared/esm/index-2ae58626.js';
 
 /**
@@ -9,20 +9,20 @@ import '../_shared/esm/index-2ae58626.js';
 var UniversalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== UniversalHeaderItem) {
                 throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
             }
         });
     }, [children]);
-    return (React.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React.createElement(Surface, { background: "light" },
-            React.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light" },
+            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
 };
 var UniversalHeaderItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
-    return (React.createElement("li", __assign({}, filterDataAttrs(props)),
-        React.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+    return (React__default.createElement("li", __assign({}, filterDataAttrs(props)),
+        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
 };
 UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;

package/dist/VerticalSpace/VerticalSpace.cjs.d.ts

@@ -1,18 +1 @@
-import { FC } from "react";
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
-interface VerticalSpaceProps {
-    /**
-     * Should the VerticalSpace be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Size of the VerticalSpace.
-     */
-    size?: VerticalSpaceSize;
-}
-export { VerticalSpace };
+export { VerticalSpace } from "../_shared/cjs/VerticalSpace-65ad083c";

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -2,26 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
-var index$1 = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = index.__rest(_a, ["isDebugVisible", "size"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterDataAttrs(props))));
-};
-
-exports.VerticalSpace = VerticalSpace;
+exports.VerticalSpace = VerticalSpace.VerticalSpace;

package/dist/VerticalSpace/VerticalSpace.esm.d.ts

@@ -1,18 +1 @@
-import { FC } from "react";
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
-interface VerticalSpaceProps {
-    /**
-     * Should the VerticalSpace be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Size of the VerticalSpace.
-     */
-    size?: VerticalSpaceSize;
-}
-export { VerticalSpace };
+export { VerticalSpace } from "../_shared/esm/VerticalSpace-6b4f5e50";

package/dist/VerticalSpace/VerticalSpace.esm.js

@@ -1,19 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React from 'react';
-
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs(props))));
-};
-
-export { VerticalSpace };
+export { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';

package/dist/VisuallyHidden/VisuallyHidden.cjs.d.ts

@@ -1,12 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Provides text for screen readers that is visually hidden.
- */
-declare const VisuallyHidden: FC<VisuallyHiddenProps>;
-interface VisuallyHiddenProps {
-    /**
-     * Content to be Visually Hidden.
-     */
-    children?: ReactNode;
-}
-export { VisuallyHidden };
+export { VisuallyHidden } from "../_shared/cjs/VisuallyHidden-e2c8b291";

package/dist/VisuallyHidden/VisuallyHidden.cjs.js

@@ -2,18 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React__default["default"].createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
-
-exports.VisuallyHidden = VisuallyHidden;
+exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.esm.d.ts

@@ -1,12 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Provides text for screen readers that is visually hidden.
- */
-declare const VisuallyHidden: FC<VisuallyHiddenProps>;
-interface VisuallyHiddenProps {
-    /**
-     * Content to be Visually Hidden.
-     */
-    children?: ReactNode;
-}
-export { VisuallyHidden };
+export { VisuallyHidden } from "../_shared/esm/VisuallyHidden-b9eebf71";

package/dist/VisuallyHidden/VisuallyHidden.esm.js

@@ -1,11 +1,2 @@
-import React from 'react';
-
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React.createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
-
-export { VisuallyHidden };
+export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+import 'react';

package/dist/_shared/cjs/Base-e2b846fe.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+declare const ArcRootElementContext: React.Context<HTMLElement | null>;
+/**
+ * Use `Base` as the root component of the arc system.
+ */
+declare const Base: FC<BaseProps>;
+interface BaseProps {
+    /**
+     * Brand theme to apply to Base.
+     */
+    brand?: "bt" | null;
+    /**
+     * Content to display inside Base.
+     */
+    children: any;
+}
+export { ArcRootElementContext, Base, BaseProps };

package/dist/_shared/cjs/Base-e2b846fe.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ArcRootElementContext = React.createContext(null);
+/**
+ * Use `Base` as the root component of the arc system.
+ */
+var Base = function (_a) {
+    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, children = _a.children, props = index.__rest(_a, ["brand", "children"]);
+    var _c = React__default["default"].useState(null), arcRoot = _c[0], setArcRoot = _c[1];
+    return (React__default["default"].createElement("div", index.__assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, index.filterDataAttrs(props)),
+        React__default["default"].createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
+};
+
+exports.ArcRootElementContext = ArcRootElementContext;
+exports.Base = Base;