@react-fabric/core 1.0.0-beta.9 → 1.0.1

package/dist/esm/hooks/useStorage.js

@@ -1,43 +1,56 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState } from 'react';
+import { useState, useEffectEvent } from 'react';
 import { useClientService } from './useClientService.js';
 import { useEffectDebugger } from './useEffectDebugger.js';
 
-var useLocalStorage = function useLocalStorage(key, defaultValue) {
-  var _JSON$parse, _service$getItem;
+/**
+ * Hook to manage a value in localStorage with a default fallback. Returns [value, setValue].
+ */
+function useLocalStorage(key, defaultValue) {
   var service = useClientService(localStorage);
-  var _useState = useState((_JSON$parse = JSON.parse((_service$getItem = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem !== void 0 ? _service$getItem : "null")) !== null && _JSON$parse !== void 0 ? _JSON$parse : defaultValue),
+  var _useState = useState(function () {
+      var _ref, _service$getItem;
+      return (_ref = JSON.parse((_service$getItem = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem !== void 0 ? _service$getItem : "null")) !== null && _ref !== void 0 ? _ref : defaultValue;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  useEffectDebugger(function () {
-    var _JSON$parse2, _service$getItem2;
-    setValue((_JSON$parse2 = JSON.parse((_service$getItem2 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem2 !== void 0 ? _service$getItem2 : "null")) !== null && _JSON$parse2 !== void 0 ? _JSON$parse2 : defaultValue);
-  }, [], "useStorage initial value");
+  var init = useEffectEvent(function () {
+    var _ref2, _service$getItem2;
+    setValue((_ref2 = JSON.parse((_service$getItem2 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem2 !== void 0 ? _service$getItem2 : "null")) !== null && _ref2 !== void 0 ? _ref2 : defaultValue);
+  });
+  useEffectDebugger(init, [], "useStorage initial value");
   var changeValue = function changeValue(value) {
     service === null || service === void 0 || service.setItem(key, JSON.stringify(value));
     setValue(value);
   };
   return [value, changeValue];
-};
-var useSessionStorage = function useSessionStorage(key, defaultValue) {
-  var _JSON$parse3, _service$getItem3;
+}
+
+/**
+ * Hook to manage a value in sessionStorage with a default fallback. Returns [value, setValue].
+ */
+function useSessionStorage(key, defaultValue) {
   var service = useClientService(sessionStorage);
-  var _useState3 = useState((_JSON$parse3 = JSON.parse((_service$getItem3 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem3 !== void 0 ? _service$getItem3 : "null")) !== null && _JSON$parse3 !== void 0 ? _JSON$parse3 : defaultValue),
+  var _useState3 = useState(function () {
+      var _ref3, _service$getItem3;
+      return (_ref3 = JSON.parse((_service$getItem3 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem3 !== void 0 ? _service$getItem3 : "null")) !== null && _ref3 !== void 0 ? _ref3 : defaultValue;
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     value = _useState4[0],
     setValue = _useState4[1];
-  useEffectDebugger(function () {
-    var _JSON$parse4, _service$getItem4;
-    setValue((_JSON$parse4 = JSON.parse((_service$getItem4 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem4 !== void 0 ? _service$getItem4 : "null")) !== null && _JSON$parse4 !== void 0 ? _JSON$parse4 : defaultValue);
-  }, [], "useStorage initial value");
+  var init = useEffectEvent(function () {
+    var _ref4, _service$getItem4;
+    setValue((_ref4 = JSON.parse((_service$getItem4 = service === null || service === void 0 ? void 0 : service.getItem(key)) !== null && _service$getItem4 !== void 0 ? _service$getItem4 : "null")) !== null && _ref4 !== void 0 ? _ref4 : defaultValue);
+  });
+  useEffectDebugger(init, [], "useStorage initial value");
   var changeValue = function changeValue(value) {
     service === null || service === void 0 || service.setItem(key, JSON.stringify(value));
     setValue(value);
   };
   return [value, changeValue];
-};
+}
 
 export { useLocalStorage, useSessionStorage };

package/dist/esm/i18n/index.js

@@ -1,38 +1,40 @@
 'use client';
 
 import i18next from 'i18next';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/core.json.js';
+import en from './en/core.json.js';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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:
+ * 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 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.
+ * 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 */
 
 
 /**
  * add language bundles using bundle keys as namespaces
- * @param key
- * @param languageBundles: {en: {}, ar: {}}
+ * @param {string} key
+ * @param {Record<string, Record<string, string>>} languageBundles: {en: {}, ar: {}}
  */
 var addTranslationBundle = function addTranslationBundle(key, languageBundles) {
   var callback = function callback() {

package/dist/esm/index.js

@@ -1,11 +1,55 @@
 'use client';
 
+export { useApplicationContext } from './context/context.js';
+export { ApplicationProvider } from './context/Global.js';
+export { addTranslationBundle } from './i18n/index.js';
+export { cloneChildren } from './utils/cloneElement.js';
+export { getBadgeProps } from './utils/getBadgeProps.js';
+export { getColor } from './utils/getColor.js';
+export { getIconProps } from './utils/getIconProps.js';
+import '@react-fabric/utilities';
+import 'react';
+export { useClientService } from './hooks/useClientService.js';
+export { useContextMenu } from './hooks/useContextMenu.js';
+export { useControlledValue } from './hooks/useControlledValue.js';
+export { useDebounce } from './hooks/useDebounce.js';
+export { useEffectDebugger, useLayoutEffectDebugger, useMemoDebugger } from './hooks/useEffectDebugger.js';
+export { useIsDark } from './hooks/useIsDark.js';
+export { useIsRtl } from './hooks/useIsRtl.js';
+export { useNavigator } from './hooks/useNavigator.js';
+export { useNotificationService } from './hooks/useNotificationService.js';
+export { useOverlayService } from './hooks/useOverlayService.js';
+export { usePropState, usePropWatcher } from './hooks/usePropState.js';
+export { usePropToggle } from './hooks/usePropToggle.js';
+export { useResize } from './hooks/useResize.js';
+export { useResizeObserver } from './hooks/useResizeObserver.js';
+export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
+export { AreaToggle } from './core/areaToggle/AreaToggle.js';
+export { Aside } from './core/aside/Aside.js';
+export { ErrorBoundary } from './core/boundary/ErrorBoundary.js';
+export { Content } from './core/content/Content.js';
+export { Footer, Header } from './core/headfoot/HeadFoot.js';
+export { Layout } from './core/layout/Layout.js';
+export { Col, Container, Row } from './core/responsive/Responsive.js';
+export { ThemeProvider } from './core/theme/ThemeProvider.js';
+export { Viewport } from './core/viewport/Viewport.js';
+export { Abbr } from './typography/Abbr.js';
+export { Anchor } from './typography/Anchor.js';
+export { Copy } from './typography/Copy.js';
+export { Kbd } from './typography/Kbd.js';
+export { Mark } from './typography/Mark.js';
+export { Text } from './typography/Text.js';
+export { Title } from './typography/Title.js';
 export { ActionLabel } from './components/actionLabel/ActionLabel.js';
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton } from './components/animations/Animations.js';
+export { AnimationIndicator } from './components/animations/Indicator.js';
+export { AnimationLoader } from './components/animations/Loader.js';
+export { LoadingBars } from './components/animations/LoadingBars.js';
+export { LoadingLine } from './components/animations/LoadingLine.js';
+export { LoadingSpinner } from './components/animations/LoadingSpinner.js';
+export { Skeleton } from './components/animations/Skeleton.js';
 export { Avatar } from './components/avatar/Avatar.js';
 export { AvatarGroup } from './components/avatar/AvatarGroup.js';
-export { Badge, getBadgeProps } from './components/badge/Badge.js';
-export { Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.js';
+export { Badge } from './components/badge/Badge.js';
 export { Button } from './components/button/Button.js';
 export { ButtonGroup } from './components/button/ButtonGroup.js';
 export { ConfirmButton } from './components/button/ConfirmButton.js';
@@ -13,64 +57,63 @@ export { ToggleButtonGroup } from './components/button/ToggleButtonGroup.js';
 export { Callout } from './components/callout/Callout.js';
 export { Card } from './components/card/Card.js';
 export { CardCover } from './components/card/CardCover.js';
+export { FlipContent } from './components/card/FlipContent.js';
 export { Chip } from './components/chip/Chip.js';
 export { Collapsable } from './components/collapsable/Collapsable.js';
 export { Divider } from './components/divider/Divider.js';
 export { Dropdown, DropdownDismiss } from './components/dropdown/Dropdown.js';
 export { DropdownTool } from './components/dropdown/DropdownTool.js';
+export { StyleEffect } from './components/effect/StyleEffect.js';
 export { EmptyContent } from './components/empty/EmptyContent.js';
+export { Flyout } from './components/flyout/Flyout.js';
+export { HotKey } from './components/hotkey/HotKey.js';
 export { Icon } from './components/icon/Icon.js';
 export { Image, Video } from './components/media/Media.js';
 export { ContextMenu } from './components/menu/ContextMenu.js';
 export { Menu } from './components/menu/Menu.js';
 export { MenuItem } from './components/menu/MenuItem.js';
 export { Meter } from './components/meter/Meter.js';
+export { Modal } from './components/modal/Modal.js';
 export { Navigator } from './components/navigator/Navigator.js';
 export { Panel } from './components/panel/Panel.js';
 export { PanelGroup } from './components/panel/PanelGroup.js';
 export { PanelStack } from './components/panel/PanelStack.js';
+export { Pillbox } from './components/pillbox/Pillbox.js';
 export { ProgressBar } from './components/progress/ProgressBar.js';
 export { ProgressCircle } from './components/progress/ProgressCircle.js';
 export { Tab } from './components/tabpanel/Tab.js';
 export { TabPanel } from './components/tabpanel/TabPanel.js';
-export { Aside } from './core/aside/Aside.js';
-export { ErrorBoundary } from './core/boundary/ErrorBoundary.js';
-export { Content } from './core/content/Content.js';
-export { Footer, Header } from './core/headfoot/HeadFoot.js';
-export { Page } from './core/page/Page.js';
-export { Col, Container, Row } from './core/responsive/Responsive.js';
-export { Section } from './core/section/Section.js';
-export { ThemeProvider } from './core/theme/ThemeProvider.js';
-export { Viewport } from './core/viewport/Viewport.js';
-export { addTranslationBundle } from './i18n/index.js';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/slicedToArray';
-import '@floating-ui/react';
-import 'classnames';
-import 'react';
-import 'react-i18next';
-export { CoreIcons } from './types/icons.js';
-export { Title } from './typography/Title.js';
-import '@react-fabric/utilities';
-import 'react/jsx-runtime';
-export { Flyout } from './overlays/flyout/Flyout.js';
-export { Modal } from './overlays/modal/Modal.js';
-export { Tooltip } from './overlays/tooltip/Tooltip.js';
-export { Abbr } from './typography/Abbr.js';
-export { Copy } from './typography/Copy.js';
-export { Link } from './typography/Link.js';
-export { Mark } from './typography/Mark.js';
-export { Text } from './typography/Text.js';
-export { useClientService } from './hooks/useClientService.js';
-export { useDebounce } from './hooks/useDebounce.js';
-export { useEffectDebugger, useLayoutEffectDebugger, useMemoDebugger } from './hooks/useEffectDebugger.js';
-export { useIsDark } from './hooks/useIsDark.js';
-export { useIsRtl } from './hooks/useIsRtl.js';
-export { useNavigator } from './hooks/useNavigator.js';
-export { useOverlayService } from './hooks/useOverlayService.js';
-export { useResize } from './hooks/useResize.js';
-export { useResizeObserver } from './hooks/useResizeObserver.js';
-export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
-export { HotKey } from './hotkeys/HotKey.js';
-export { HotKeyLabel } from './hotkeys/HotKeyLabel.js';
-export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService } from './context/Global.js';
+export { Titlebar } from './components/titlebar/Titlebar.js';
+export { Tooltip } from './components/tooltip/Tooltip.js';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 */
+
+var CORE_PACKAGE = "@react-fabric/core";
+var CORE_VERSION = "1.0.1";
+
+export { CORE_PACKAGE, CORE_VERSION };

package/dist/esm/typography/Abbr.js

@@ -2,44 +2,63 @@
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useCallback, Fragment, useMemo } from 'react';
+import { cn, isString, isEmpty, tokenize } from '@react-fabric/utilities';
+import { useCallback, useMemo, Fragment } from 'react';
+import { Tooltip } from '../components/tooltip/Tooltip.js';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { Tooltip, getTooltipProps } from '../overlays/tooltip/Tooltip.js';
-import { getColorClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
+import { getTooltipProps } from '../utils/getTooltipProps.js';
 
 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 AbbrText = function AbbrText(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function AbbrText(_ref) {
   var color = _ref.color,
     children = _ref.children,
     tooltip = _ref.tooltip,
     content = _ref.content;
-  var TooltipWrapper = useMemo(function () {
-    return tooltip ? Tooltip : Fragment;
-  }, [tooltip]);
+  var TooltipWrapper = tooltip ? Tooltip : Fragment;
   var tooltipProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
+    return tooltip ? _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
       copyContent: content
-    });
+    }) : {};
   }, [tooltip, content]);
   return /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsx("abbr", {
-      className: classNames(classes.abbr, "whitespace-nowrap", color && getColorClass(color)),
+      className: cn("fabric-abbr whitespace-nowrap"),
       style: color ? {
         "--abbr-color": getColor(color)
       } : undefined,
       children: children
     })
   }));
-};
+}
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
  */
-var Abbr = function Abbr(_ref2) {
+function Abbr(_ref2) {
   var children = _ref2.children,
     abbr = _ref2.abbr,
     className = _ref2.className,
@@ -90,9 +109,13 @@ var Abbr = function Abbr(_ref2) {
               tooltip = _ref9$tooltip === void 0 ? "" : _ref9$tooltip,
               _ref9$color = _ref9.color,
               color = _ref9$color === void 0 ? "" : _ref9$color;
-            return /*#__PURE__*/jsxs(Fragment, {
-              children: [start, text ? abbrRender(text, tooltip, color) : null]
-            }, i);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxs(Fragment, {
+                children: [start, text ? abbrRender(text, tooltip, color) : null]
+              }, "".concat(text, "-").concat(i))
+            );
           })
         });
       }
@@ -102,9 +125,9 @@ var Abbr = function Abbr(_ref2) {
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsx("span", {
-    className: className,
+    className: cn(className, "mixed-lang whitespace-pre-wrap"),
     children: inner
   });
-};
+}
 
 export { Abbr };

package/dist/esm/typography/Anchor.js

@@ -0,0 +1,39 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cn } from '@react-fabric/utilities';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "as", "children", "className"];
+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), true).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; }
+/**
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with default styling.
+ * ```
+ */
+function Anchor(_ref) {
+  var ref = _ref.ref,
+    as = _ref.as,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var E = as !== null && as !== void 0 ? as : "a";
+  return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
+    className: cn("link", className),
+    ref: ref,
+    "data-clickable": true
+  }, props), {}, {
+    children: children
+  }));
+}
+
+export { Anchor };

package/dist/esm/typography/Copy.js

@@ -1,37 +1,37 @@
 'use client';
 
-import classNames from 'classnames';
-import { useCallback } from 'react';
+import { cn } from '@react-fabric/utilities';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../components/button/Button.js';
-import { Tooltip } from '../overlays/tooltip/Tooltip.js';
-import { CoreIcons } from '../types/icons.js';
+import { Tooltip } from '../components/tooltip/Tooltip.js';
 import { jsx } from 'react/jsx-runtime';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 Copy = function Copy(_ref) {
+function Copy(_ref) {
   var text = _ref.text,
     size = _ref.size,
     className = _ref.className;
@@ -39,21 +39,21 @@ var Copy = function Copy(_ref) {
     t = _useTranslation.t;
 
   /** ***************** handle copy *******************/
-  var doCopy = useCallback(function () {
+  var doCopy = function doCopy() {
     void navigator.clipboard.writeText(text);
-  }, [text]);
+  };
   return /*#__PURE__*/jsx(Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
-      actionMessage: t("action.copied"),
       variant: "link",
       size: size,
-      className: classNames(className, "align-bottom"),
+      showActionDone: true,
+      className: cn(className, "align-bottom"),
       onClick: doCopy
     })
   });
-};
+}
 
 export { Copy };

package/dist/esm/typography/Kbd.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { formatForDisplay } from '@tanstack/react-hotkeys';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
+function Kbd(_ref) {
+  var keys = _ref.keys;
+  return [keys].flat().map(function (key, i) {
+    return /*#__PURE__*/jsx("kbd", {
+      className: "hotkey-label align-top inline-flex gap-1 select-none self-center font-sans items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1",
+      children: formatForDisplay(key, {
+        useSymbols: true
+      })
+    }, "".concat(key, "-").concat(i.toString(16)));
+  });
+}
+
+export { Kbd };