@react-fabric/core 1.0.0-beta.0

package/dist/esm/typography/Mark.js

@@ -0,0 +1,86 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useCallback, Fragment } from 'react';
+import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { getBgClass, getColor } from '../utils/getColor.js';
+import classes from './Typography.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MarkText = function MarkText(_ref) {
+  var color = _ref.color,
+    children = _ref.children;
+  return /*#__PURE__*/jsx("mark", {
+    className: classNames(classes.mark, "whitespace-nowrap", color && getBgClass(color)),
+    style: color ? {
+      "--mark-color": getColor(color)
+    } : undefined,
+    children: children
+  });
+};
+/**
+ * Typography mark component to wrap text parts in `mark`
+ */
+var Mark = function Mark(_ref2) {
+  var children = _ref2.children,
+    mark = _ref2.mark,
+    renderer = _ref2.renderer;
+  /** ***************** abbr text renderer *******************/
+  var abbrRender = useCallback(function (text) {
+    var _renderer;
+    var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    return /*#__PURE__*/jsx(MarkText, {
+      color: color,
+      children: (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer([text, color])) !== null && _renderer !== void 0 ? _renderer : text
+    });
+  }, [renderer]);
+
+  /** ***************** tokenize text with abbr list *******************/
+  var inner = useMemoDebugger(function () {
+    if (isString(children)) {
+      if (!isEmpty(mark)) {
+        var tokens = tokenize(children, mark.map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 1),
+            keyword = _ref4[0];
+          return keyword;
+        }));
+        var titles = mark.reduce(function (t, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            a = _ref6[0],
+            _ref6$ = _ref6[1],
+            color = _ref6$ === void 0 ? "" : _ref6$;
+          return _objectSpread(_objectSpread({}, t), {}, _defineProperty({}, a.toLowerCase(), {
+            color: color
+          }));
+        }, {});
+        return /*#__PURE__*/jsx(Fragment, {
+          children: tokens.map(function (_ref7, i) {
+            var _titles$text$toLowerC;
+            var _ref8 = _slicedToArray(_ref7, 2),
+              start = _ref8[0],
+              text = _ref8[1];
+            var _ref9 = (_titles$text$toLowerC = titles[text.toLowerCase()]) !== null && _titles$text$toLowerC !== void 0 ? _titles$text$toLowerC : {},
+              _ref9$color = _ref9.color,
+              color = _ref9$color === void 0 ? "" : _ref9$color;
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [start, text ? abbrRender(text, color) : null]
+            }, i);
+          })
+        });
+      }
+    }
+    return children;
+  }, [children, mark, abbrRender], "TextMark inner");
+
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsx("span", {
+    children: inner
+  });
+};
+
+export { Mark };

package/dist/esm/typography/Text.js

@@ -0,0 +1,121 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isNumber } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useRef, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { usePropToggle } from '../hooks/usePropToggle.js';
+import { calculateTextHeight } from '../utils/calculateDimensions.js';
+import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import classes from './Typography.module.css';
+import { TextSizeMap } from './types.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Typography text component
+ */
+var Text = function Text(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    inline = _ref.inline,
+    bg = _ref.bg,
+    color = _ref.color,
+    family = _ref.family,
+    size = _ref.size,
+    clamp = _ref.clamp,
+    align = _ref.align,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation("core"),
+    t = _useTranslation.t;
+  var refContainer = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clipped = _useState2[0],
+    setClipped = _useState2[1];
+  var _usePropToggle = usePropToggle(false),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 3),
+    showMore = _usePropToggle2[0],
+    toggleShowMore = _usePropToggle2[1],
+    refShowMore = _usePropToggle2[2];
+
+  /** ***************** check text height if clip enabled *******************/
+  var checkHeight = useCallback(function () {
+    var el = refContainer.current;
+    if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+      setClipped(calculateTextHeight(el.firstElementChild, el) > el.offsetHeight);
+    }
+  }, [clamp]);
+
+  /** ***************** observe element resize to recalculate height *******************/
+  useLayoutEffectDebugger(function () {
+    if (refContainer.current) {
+      var ob = new ResizeObserver(checkHeight);
+      ob.observe(refContainer.current);
+      checkHeight();
+      return function () {
+        ob.disconnect();
+      };
+    }
+  }, [children, checkHeight], "Text check height");
+
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (align) {
+      s.textAlign = align;
+    }
+    if (size && !(size in TextSizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in TextSizeMap) {
+      s.fontSize = TextSizeMap[size];
+    }
+    return s;
+  }, [bg, color, size, align, family], "Text styles");
+  return inline ? /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
+    className: className,
+    style: styles
+  }, aria), {}, {
+    children: children
+  })) : /*#__PURE__*/jsxs("article", {
+    className: className,
+    children: [/*#__PURE__*/jsx("div", {
+      ref: refContainer,
+      style: {
+        "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
+      },
+      children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+        className: classNames(classes.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
+        style: styles
+      }, aria), {}, {
+        children: children
+      }))
+    }), clipped && /*#__PURE__*/jsx("div", {
+      className: classes.moreLink,
+      children: /*#__PURE__*/jsxs("span", {
+        role: "link",
+        tabIndex: 0,
+        "data-inner-clickable": true,
+        onClick: function onClick(e) {
+          return [e.stopPropagation(), toggleShowMore()];
+        },
+        children: ["...", t("action.".concat(showMore ? "less" : "more"))]
+      })
+    })]
+  });
+};
+
+export { Text };

package/dist/esm/typography/Title.js

@@ -0,0 +1,58 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import '@react-fabric/utilities';
+import { TitleSizeMap } from './types.js';
+import classes from './Typography.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Typography title component
+ */
+var Title = function Title(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    as = _ref.as,
+    bg = _ref.bg,
+    color = _ref.color,
+    size = _ref.size,
+    align = _ref.align,
+    family = _ref.family,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (align) {
+      s.textAlign = align;
+    }
+    if (size && !(size in TitleSizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in TitleSizeMap) {
+      s.fontSize = TitleSizeMap[size];
+    }
+    return s;
+  }, [bg, color, size, align], "Title styles");
+  var E = as !== null && as !== void 0 ? as : "p";
+  return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
+    className: classNames(classes.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
+    style: styles
+  }, aria), {}, {
+    children: children
+  }));
+};
+
+export { Title };

package/dist/esm/typography/Typography.module.css

@@ -0,0 +1 @@
+@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--accent);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}

package/dist/esm/typography/types.js

@@ -0,0 +1,41 @@
+'use client';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var TitleSizeMap = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "2rem"
+};
+var TextSizeMap = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "1.75rem"
+};
+
+export { TextSizeMap, TitleSizeMap };

package/dist/esm/utils/calculateDimensions.js

@@ -0,0 +1,50 @@
+'use client';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+/** ***************** get css style property value *******************/
+var getCssStyle = function getCssStyle(element, property) {
+  return getComputedStyle(element).getPropertyValue(property);
+};
+
+/** ***************** calculate full height for given element *******************/
+var calculateTextHeight = function calculateTextHeight(element, styleRoot) {
+  var clone = element.cloneNode(true);
+  clone.style.font = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "font");
+  clone.style.width = "".concat(element.offsetWidth, "px");
+  clone.style.padding = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "padding");
+  clone.style.lineHeight = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "line-height");
+  clone.style.letterSpacing = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "letter-spacing");
+  clone.style.webkitLineClamp = "unset";
+  clone.style.position = "absolute";
+  clone.style.left = "-10000%";
+  document.body.appendChild(clone);
+  var height = clone.offsetHeight;
+  clone.remove();
+  return height;
+};
+
+export { calculateTextHeight, getCssStyle };

package/dist/esm/utils/getColor.js

@@ -0,0 +1,49 @@
+'use client';
+
+import { isColor } from '@react-fabric/utilities';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var getColor = function getColor(color) {
+  if (color && isColor(color)) {
+    return color;
+  }
+};
+var getBgClass = function getBgClass(bg) {
+  if (bg && !isColor(bg)) {
+    return "bg-".concat(bg);
+  }
+};
+var getColorClass = function getColorClass(color) {
+  if (color && !isColor(color)) {
+    return "text-".concat(color);
+  }
+};
+var getBorderClass = function getBorderClass(color) {
+  if (color && !isColor(color)) {
+    return "border-".concat(color);
+  }
+};
+
+export { getBgClass, getBorderClass, getColor, getColorClass };

package/dist/esm/utils/nodeCheck.js

@@ -0,0 +1,35 @@
+'use client';
+
+import { isObject } from '@react-fabric/utilities';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var nodeCheck = function nodeCheck(node) {
+  for (var _len = arguments.length, types = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    types[_key - 1] = arguments[_key];
+  }
+  return isObject(node) && "type" in node && types.includes(node.type);
+};
+
+export { nodeCheck };

package/dist/types/components/actionLabel/ActionLabel.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from "react";
+import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+    /**
+     * action buttons aligment
+     */
+    align?: "start" | "end";
+    /**
+     * disable actions
+     */
+    disabled?: boolean;
+    /**
+     * buttons
+     */
+    actions: ReactElement[];
+}
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
+ * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
+export declare const ActionLabel: ({ children, className, align, actions, disabled, ...rest }: ActionLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/animations/Animations.d.ts

@@ -0,0 +1,23 @@
+import { type AriaProps, type ColorType, type CssProp, type PaletteType } from "../../types";
+export interface AnimationProps extends CssProp, AriaProps {
+    type?: "info" | "check" | "cross" | "question" | "exclaim";
+    /**
+     * icon color
+     */
+    color?: ColorType | PaletteType;
+    /**
+     * icon mark color
+     */
+    strokeColor?: ColorType | PaletteType;
+}
+export declare const AnimationIndicator: ({ className, color, strokeColor, type, ...aria }: AnimationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimationBars: ({ color, size, }: {
+    color?: ColorType | string;
+    size?: number | string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimationSpinner: ({ color, size, }: {
+    color?: ColorType | string;
+    size?: number | string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar/Avatar.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
+    /**
+     * avatar name for generated fallback
+     */
+    name: string;
+    /**
+     * svg path
+     */
+    fallbackIcon?: string;
+    /**
+     * avatar image url
+     */
+    avatar?: string;
+    /**
+     * avatar variant
+     */
+    variant?: "text" | "beam" | "pixel" | "bauhaus";
+    /**
+     * background color (CSS color / tailwind color)
+     */
+    bg?: ColorType | string;
+    /**
+     * icon color (CSS color / tailwind color)
+     */
+    color?: ColorType | string;
+    /**
+     * icon size
+     */
+    size?: SizeType | number | string;
+    /**
+     * viewbox for svg path (default 24)
+     */
+    viewBox?: string;
+    /**
+     * rounded icon
+     */
+    rounded?: boolean;
+    /**
+     * click handler
+     */
+    onClick?: React.MouseEventHandler;
+}
+/**
+ * An avatar is a graphical representation of a user's identity.
+ */
+export declare const Avatar: ({ ref, name, avatar, fallbackIcon, bg, color, size, rounded, variant, className, viewBox, onClick, ...aria }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement } from "react";
+import { type AriaProps, type CssProp, type RefProp, type SizeType } from "../../types";
+import { type AvatarProps } from "./Avatar";
+type AvatarChild = ReactElement<Omit<AvatarProps, "size" | "rounded">> | false | undefined;
+export interface AvatarGroupProps extends CssProp, RefProp, AriaProps {
+    children: AvatarChild | AvatarChild[];
+    /**
+     * rounded icon
+     */
+    rounded?: boolean;
+    /**
+     * icon size
+     */
+    size?: SizeType | number | string;
+    /**
+     * max count
+     */
+    totalCount?: number;
+}
+/**
+ * Group multiple avatars together
+ */
+export declare const AvatarGroup: ({ ref, children, className, totalCount, rounded, size, ...aria }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import { type BadgeType, type ChildProp, type CssProp, type IconProps, type RefProp } from "../../types";
+export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildProp> {
+    /**
+     * make wrapper a block element
+     */
+    block?: boolean;
+    /**
+     * badge value
+     */
+    value?: number | string;
+    /**
+     * max value for number display
+     */
+    max?: number;
+    /**
+     * ping animation
+     */
+    ping?: boolean;
+    /**
+     * badge placement
+     */
+    placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "start" | "end";
+}
+export declare const getBadgeProps: (badge?: string | number | BadgeType) => AnyObject;
+export declare const Badge: ({ ref, className, value, max, ping, block, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
+import { Link } from "../../typography/Link";
+export interface BreadcrumbProps extends CssProp, AriaProps, ChildrenProp<typeof Link> {
+    /**
+     * breadcrumb styling
+     */
+    variant?: "classic" | "modern";
+    /**
+     * classic breadcrumb spearator
+     */
+    separator?: string;
+    /**
+     * breadcrumb color
+     */
+    color?: "primary" | "accent";
+}
+export declare const Breadcrumbs: ({ variant, className, separator, children, color, ...aria }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;