@persona/design-system 0.1.7 → 0.1.9

package/dist/components/Breadcrumbs/index.d.mts

@@ -1,2 +1,2 @@
-import { Breadcrumbs, BreadcrumbsItemProps, BreadcrumbsProps } from "../../Breadcrumbs.mjs";
-export { Breadcrumbs, Breadcrumbs as default, type BreadcrumbsItemProps, type BreadcrumbsProps };
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-DJ5qqqRD.mjs";
+export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Breadcrumbs/index.mjs

@@ -1,268 +1,2 @@
-import { focusOutline } from "../../mixins/focus.mjs";
-import "../../variables/transitions.mjs";
-import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as Paragraph } from "../../Text-hEoPeOc9.mjs";
-import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
-import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { t as intersperse } from "../../intersperse-yd3oMrQl.mjs";
-import Input_default from "../Input/index.mjs";
-import { Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CopyIcon, EditIcon } from "@persona/icons";
-import { Link } from "react-router-dom";
-//#region components/Breadcrumbs/Breadcrumb.tsx
-const COPY_TOOLTIP_LABEL = "Copy ID";
-const DEFAULT_EDIT_MAX_LENGTH = 100;
-const LABEL_ACTION_GAP = Spacing[2];
-const ACTION_BUTTON_GAP = Spacing[1];
-const CrumbRow = styled(HStack)`
-  align-items: center;
-  min-width: 0;
-`;
-const crumbLayoutStyles = (size) => css`
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  min-height: ${({ theme }) => theme.element.height.xs};
-  ${size === "lg" ? css`
-        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};
-        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};
-      ` : css``};
-`;
-const editInputTextStyles = (size, current) => {
-	if (current) return size === "lg" ? paragraphMixins.lgBold : paragraphMixins.mdBold;
-	return size === "lg" ? paragraphMixins.lg : paragraphMixins.md;
-};
-const AncestorNavLink = styled(Link)`
-  ${paragraphMixins.md};
-  color: ${({ theme }) => theme.color.text.secondary};
-  text-decoration: none;
-  transition: color ${"100ms"} ease-out;
-  ${focusOutline}
-  ${({ $size }) => crumbLayoutStyles($size)}
-
-  &:hover {
-    color: ${({ theme }) => theme.color.text.primary};
-  }
-`;
-const InlineEditInput = styled(Input_default)`
-  margin: 0;
-  padding: 2px 10px;
-  width: auto;
-  max-width: 100%;
-  min-width: ${({ $editMinWidth }) => $editMinWidth != null ? `${$editMinWidth}px` : "0"};
-  field-sizing: content;
-  display: inline-block;
-  ${({ $size, $current }) => editInputTextStyles($size, $current)};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  color: ${({ theme }) => theme.color.text.primary};
-
-  &:not(:focus) {
-    border-color: transparent;
-  }
-
-  &:hover:not(:disabled) {
-    border-style: solid;
-  }
-`;
-const CurrentLabel = styled(Paragraph)`
-  margin: 0;
-  ${({ $size }) => crumbLayoutStyles($size)}
-`;
-const copyToClipboard = async (value) => {
-	try {
-		if (navigator.clipboard?.writeText == null) return false;
-		await navigator.clipboard.writeText(value);
-		return true;
-	} catch {
-		return false;
-	}
-};
-const BreadcrumbCopyButton = ({ copyValue, copyTooltipLabel = COPY_TOOLTIP_LABEL, onCopy }) => {
-	const [tooltipOpen, setTooltipOpen] = useState(false);
-	const [copied, setCopied] = useState(false);
-	const handleCopy = async () => {
-		if (!await copyToClipboard(copyValue)) return;
-		setCopied(true);
-		setTooltipOpen(true);
-		onCopy?.();
-		window.setTimeout(() => {
-			setTooltipOpen(false);
-			window.setTimeout(() => setCopied(false), 200);
-		}, 1e3);
-	};
-	const handleMouseEnter = () => {
-		if (!copied) setTooltipOpen(true);
-	};
-	const handleMouseLeave = () => {
-		if (!copied) setTooltipOpen(false);
-	};
-	return /* @__PURE__ */ jsx(Tooltip, {
-		trigger: /* @__PURE__ */ jsx("span", {
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			children: /* @__PURE__ */ jsx(IconButton, {
-				type: "button",
-				size: "sm",
-				"aria-label": `Copy ${copyValue}`,
-				onClick: (event) => {
-					event.preventDefault();
-					event.stopPropagation();
-					handleCopy();
-				},
-				children: /* @__PURE__ */ jsx(CopyIcon, {})
-			})
-		}),
-		open: tooltipOpen,
-		side: "top",
-		sideOffset: 4,
-		size: "sm",
-		contentAlignment: "center",
-		interactive: false,
-		hideArrow: true,
-		portal: false,
-		children: copied ? "Copied!" : copyTooltipLabel
-	});
-};
-const Breadcrumb = ({ label, size = "md", current = false, showCopyAction = false, copyValue, copyTooltipLabel, href, onEdit, editMaxLength = DEFAULT_EDIT_MAX_LENGTH, onCopy }) => {
-	const [isEditing, setIsEditing] = useState(false);
-	const [editValue, setEditValue] = useState(label);
-	const [editMinWidth, setEditMinWidth] = useState();
-	const editInputRef = useRef(null);
-	useEffect(() => {
-		if (!isEditing) setEditValue(label);
-	}, [isEditing, label]);
-	useEffect(() => {
-		if (!isEditing) {
-			setEditMinWidth(void 0);
-			return;
-		}
-		const input = editInputRef.current;
-		if (input == null) return;
-		setEditMinWidth(input.offsetWidth);
-		input.focus();
-		input.select();
-	}, [isEditing]);
-	const commitEdit = () => {
-		if (!isEditing) return;
-		setIsEditing(false);
-		if (editValue !== label) onEdit?.(editValue);
-	};
-	const inlineActions = !isEditing && (showCopyAction || onEdit) && /* @__PURE__ */ jsxs(HStack, {
-		spacing: ACTION_BUTTON_GAP,
-		align: "center",
-		children: [onEdit && /* @__PURE__ */ jsx(IconButton, {
-			type: "button",
-			size: "sm",
-			"aria-label": `Edit ${label}`,
-			onClick: (event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				setIsEditing(true);
-			},
-			children: /* @__PURE__ */ jsx(EditIcon, {})
-		}), showCopyAction && copyValue != null && /* @__PURE__ */ jsx(BreadcrumbCopyButton, {
-			copyValue,
-			copyTooltipLabel,
-			onCopy
-		})]
-	});
-	if (isEditing) return /* @__PURE__ */ jsx(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: /* @__PURE__ */ jsx(InlineEditInput, {
-			ref: editInputRef,
-			$size: size,
-			$current: current,
-			$editMinWidth: editMinWidth,
-			size: "md",
-			"aria-label": `Edit ${label}`,
-			maxLength: editMaxLength,
-			value: editValue,
-			onChange: (event) => setEditValue(event.target.value),
-			onBlur: commitEdit,
-			onKeyDown: (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					commitEdit();
-				}
-				if (event.key === "Escape") {
-					setEditValue(label);
-					setIsEditing(false);
-				}
-			}
-		})
-	});
-	if (current) return /* @__PURE__ */ jsxs(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: [/* @__PURE__ */ jsx(CurrentLabel, {
-			$size: size,
-			size: size === "lg" ? "lg" : "md",
-			weight: "bold",
-			color: "primary",
-			as: "h1",
-			children: label
-		}), inlineActions]
-	});
-	return /* @__PURE__ */ jsxs(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: [/* @__PURE__ */ jsx(AncestorNavLink, {
-			to: href ?? "",
-			$size: size,
-			children: label
-		}), inlineActions]
-	});
-};
-//#endregion
-//#region components/Breadcrumbs/Breadcrumbs.tsx
-const BreadcrumbList = styled.ol`
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-`;
-const BreadcrumbListItem = styled.li`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-`;
-const Separator = styled.span`
-  padding: 0 ${Spacing[2]};
-  color: ${({ theme }) => theme.color.text.tertiary};
-  user-select: none;
-  ${({ $size }) => $size === "lg" ? paragraphMixins.lg : paragraphMixins.md};
-`;
-const Breadcrumbs = ({ items, size = "md", "aria-label": ariaLabel = "Breadcrumbs", className }) => {
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": ariaLabel,
-		className,
-		children: /* @__PURE__ */ jsx(BreadcrumbList, { children: intersperse(items.map((item, index) => {
-			const isCurrent = index === items.length - 1;
-			return /* @__PURE__ */ jsx(BreadcrumbListItem, {
-				"aria-current": isCurrent ? "page" : void 0,
-				children: /* @__PURE__ */ jsx(Breadcrumb, {
-					...item,
-					size,
-					current: isCurrent
-				})
-			}, `${item.label}-${index}`);
-		}), (separatorIndex) => /* @__PURE__ */ jsx(BreadcrumbListItem, {
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(Separator, {
-				$size: size,
-				children: "/"
-			})
-		}, `separator-${separatorIndex}`)) })
-	});
-};
-//#endregion
+import { t as Breadcrumbs } from "../../Breadcrumbs-W8hIhdHD.mjs";
 export { Breadcrumbs, Breadcrumbs as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/Button/index.d.mts

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-DXsYU5qU.mjs";
-import { t as IconButton } from "../../IconButton-Dnnlf9uO.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-Vd5O4DUp.mjs";
+import { t as IconButton } from "../../IconButton-BHCmHIx5.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
 export { Button, Button as default, ButtonChildren, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.mjs

@@ -1,9 +1,9 @@
-import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { n as useFormField } from "../../useFormField-eftOPiXj.mjs";
+import { t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
+import { n as useFormField } from "../../useFormField-DhYd6bNn.mjs";
 import { BorderRadius } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region components/ButtonGroup/ButtonGroup.tsx
 const OptionItem = styled(IconButton)`

package/dist/components/Card/index.d.mts

@@ -1,3 +1,3 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-B-Us54dR.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-IOBCsfke.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-CDTYK1XJ.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CqnG--CU.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.mjs

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-CLTkZLKr.mjs";
+import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-BMCB9eFC.mjs";
 export { ActionsContainer, Header, HeaderContainer, Root, Title, TitleContainer, Card_default as default };

package/dist/components/CardV2/index.d.mts

@@ -1,3 +1,3 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-DkNqzc2X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-CVtzREhU.mjs";
 import _default from "../../Card2.mjs";
 export { _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };