@tuwaio/nova-core 0.0.5 → 0.0.7

package/README.md

@@ -32,7 +32,6 @@ Use this package to:
 2.  **Import the core styles** into the root of your application's main CSS file (e.g., `globals.css`). **This step is crucial.**
 
     ```css
-    @import "tailwindcss";
     @import '@tuwaio/nova-core/dist/index.css';
     ```
 
@@ -40,9 +39,9 @@ Use this package to:
 
 You can use the provided styles in two ways: directly with CSS variables (basic) or by integrating them into your theme (recommended).
 
-### Basic Usage (Without `tailwind.config.js`)
+### Usage
 
-With Tailwind CSS v4, you can use the CSS variables from this package directly in your className as arbitrary values. A `tailwind.config.js` file is not required for this to work.
+For example with Tailwind CSS v4, you can use the CSS variables from this package directly in your className as arbitrary values only need to @import tailwindcss in your .css file.
 
 ```tsx
 // You can use the variables directly
@@ -51,55 +50,6 @@ With Tailwind CSS v4, you can use the CSS variables from this package directly i
 </button>
 ```
 
-### Recommended Usage (Theming with `tailwind.config.js`)
-
-While a config file is optional in Tailwind v4, creating one to map our CSS variables to Tailwind's theme allows you to use clean, semantic class names. This is the recommended approach for building a consistent design system.
-
-**1. Create or update your `tailwind.config.js`:**
-
-```js
-// tailwind.config.js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'var(--tuwa-color-primary)',
-        secondary: 'var(--tuwa-color-secondary)',
-        background: 'var(--tuwa-color-background)',
-        foreground: 'var(--tuwa-color-foreground)',
-      },
-      // ... etc.
-    },
-  },
-  plugins: [],
-};
-```
-
-**2. Use semantic class names in your components:**
-
-Now your code becomes much cleaner and easier to read.
-
-```tsx
-import { cn } from '@tuwaio/nova-core';
-
-export function Button({ intent, className, ...props }) {
-  const buttonClasses = cn(
-    'px-4 py-2 rounded-md font-semibold transition-colors',
-    {
-      'bg-primary text-white hover:opacity-90': intent === 'primary',
-      'bg-secondary text-foreground hover:opacity-90': intent === 'secondary',
-    },
-    className,
-  );
-
-  return <button className={buttonClasses} {...props} />;
-}
-```
-
 ## Contributing
 
 Contributions are welcome! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function g(r=2e3){let[o,e]=react.useState(false),[t,n]=react.useState(null),s=react.useCallback(async c=>{if(c)try{await navigator.clipboard.writeText(c),e(!0),n(null),setTimeout(()=>e(!1),r);}catch(l){let a=l instanceof Error?l:new Error("Failed to copy text.");console.error(a),n(a),setTimeout(()=>n(null),r);}},[r]);return {isCopied:o,copy:s,error:t}}function C(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var i=r=>r&&typeof r=="object"&&!Array.isArray(r);function y(r,o){let e={...r};return i(r)&&i(o)&&Object.keys(o).forEach(t=>{let n=r[t],s=o[t];i(n)&&i(s)?e[t]=y(n,s):e[t]=s;}),e}function j(r,o,e){if(!r)return "";if(r.length<=o+e)return r;let t=r.slice(0,o),n=r.slice(r.length-e);return `${t}...${n}`}exports.cn=C;exports.deepMerge=y;exports.textCenterEllipsis=j;exports.useCopyToClipboard=g;//# sourceMappingURL=index.cjs.map
+'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function w(e=2e3){let[o,t]=react.useState(false),[n,r]=react.useState(null),s=react.useCallback(async a=>{if(a)try{await navigator.clipboard.writeText(a),t(!0),r(null),setTimeout(()=>t(!1),e);}catch(c){let l=c instanceof Error?c:new Error("Failed to copy text.");console.error(l),r(l),setTimeout(()=>r(null),e);}},[e]);return {isCopied:o,copy:s,error:n}}function E(e){let o=r=>typeof window<"u"?window.matchMedia(r).matches:false,[t,n]=react.useState(o(e));return react.useEffect(()=>{let r=window.matchMedia(e),s=()=>n(r.matches);return s(),window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[e]),t}function v(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var i=e=>e&&typeof e=="object"&&!Array.isArray(e);function g(e,o){let t={...e};return i(e)&&i(o)&&Object.keys(o).forEach(n=>{let r=e[n],s=o[n];i(r)&&i(s)?t[n]=g(r,s):t[n]=s;}),t}function R(e,o,t){if(!e)return "";if(e.length<=o+t)return e;let n=e.slice(0,o),r=e.slice(e.length-t);return `${n}...${r}`}exports.cn=v;exports.deepMerge=g;exports.textCenterEllipsis=R;exports.useCopyToClipboard=w;exports.useMediaQuery=E;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useCopyToClipboard.ts","../src/utils/cn.ts","../src/utils/deepMerge.ts","../src/utils/textCenterEllipsis.ts"],"names":["useCopyToClipboard","timeout","isCopied","setIsCopied","useState","error","setError","copy","useCallback","text","e","copyError","cn","inputs","twMerge","clsx","isObject","item","deepMerge","target","source","output","key","targetValue","sourceValue","textCenterEllipsis","str","from","to","start","end"],"mappings":"qGA6BO,SAASA,CAAAA,CAAmBC,CAAAA,CAAU,GAAA,CAI3C,CACA,GAAM,CAACC,CAAAA,CAAUC,CAAW,CAAA,CAAIC,cAAAA,CAAS,KAAK,CAAA,CACxC,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIF,cAAAA,CAAuB,IAAI,CAAA,CAE/CG,EAAOC,iBAAAA,CACX,MAAOC,CAAAA,EAAiB,CACtB,GAAKA,CAAAA,CAEL,GAAI,CACF,MAAM,SAAA,CAAU,SAAA,CAAU,SAAA,CAAUA,CAAI,EACxCN,CAAAA,CAAY,CAAA,CAAI,CAAA,CAChBG,CAAAA,CAAS,IAAI,CAAA,CAEb,WAAW,IAAMH,CAAAA,CAAY,CAAA,CAAK,CAAA,CAAGF,CAAO,EAC9C,OAASS,CAAAA,CAAG,CACV,IAAMC,CAAAA,CAAYD,CAAAA,YAAa,KAAA,CAAQA,EAAI,IAAI,KAAA,CAAM,sBAAsB,CAAA,CAC3E,OAAA,CAAQ,KAAA,CAAMC,CAAS,CAAA,CACvBL,CAAAA,CAASK,CAAS,CAAA,CAGlB,UAAA,CAAW,IAAML,EAAS,IAAI,CAAA,CAAGL,CAAO,EAC1C,CACF,CAAA,CACA,CAACA,CAAO,CACV,CAAA,CAEA,OAAO,CAAE,QAAA,CAAAC,EAAU,IAAA,CAAAK,CAAAA,CAAM,KAAA,CAAAF,CAAM,CACjC,CCpCO,SAASO,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,qBAAAA,CAAQC,UAAKF,CAAM,CAAC,CAC7B,CChBA,IAAMG,EAAYC,CAAAA,EACTA,CAAAA,EAAQ,OAAOA,CAAAA,EAAS,QAAA,EAAY,CAAC,MAAM,OAAA,CAAQA,CAAI,CAAA,CAkBzD,SAASC,CAAAA,CAA4BC,CAAAA,CAAWC,EAAuB,CAE5E,IAAMC,CAAAA,CAAS,CAAE,GAAGF,CAAO,EAE3B,OAAIH,CAAAA,CAASG,CAAM,CAAA,EAAKH,CAAAA,CAASI,CAAM,GAErC,MAAA,CAAO,IAAA,CAAKA,CAAM,CAAA,CAAE,OAAA,CAASE,CAAAA,EAAQ,CACnC,IAAMC,CAAAA,CAAcJ,CAAAA,CAAOG,CAAc,CAAA,CACnCE,CAAAA,CAAcJ,EAAOE,CAAc,CAAA,CAGrCN,CAAAA,CAASO,CAAW,CAAA,EAAKP,CAAAA,CAASQ,CAAW,CAAA,CAG9CH,CAAAA,CAA+BC,CAAG,CAAA,CAAIJ,CAAAA,CAAUK,CAAAA,CAAaC,CAAW,CAAA,CAGxEH,CAAAA,CAA+BC,CAAG,CAAA,CAAIE,EAE3C,CAAC,EAGIH,CACT,CCjCO,SAASI,CAAAA,CAAmBC,CAAAA,CAAgCC,CAAAA,CAAcC,EAAoB,CACnG,GAAI,CAACF,CAAAA,CACH,OAAO,EAAA,CAIT,GAAIA,CAAAA,CAAI,MAAA,EAAUC,CAAAA,CAAOC,CAAAA,CACvB,OAAOF,CAAAA,CAGT,IAAMG,CAAAA,CAAQH,CAAAA,CAAI,KAAA,CAAM,CAAA,CAAGC,CAAI,CAAA,CACzBG,EAAMJ,CAAAA,CAAI,KAAA,CAAMA,CAAAA,CAAI,MAAA,CAASE,CAAE,CAAA,CAErC,OAAO,CAAA,EAAGC,CAAK,CAAA,GAAA,EAAMC,CAAG,CAAA,CAC1B","file":"index.cjs","sourcesContent":["/**\n * @file This file contains a custom React hook for copying text to the clipboard.\n */\n\nimport { useCallback, useState } from 'react';\n\n/**\n * A custom React hook that provides functionality to copy text to the clipboard.\n * It also manages a \"copied\" state with a timeout for user feedback.\n *\n * @param {number} [timeout=2000] - The duration in milliseconds to keep the `isCopied` state as true.\n * @returns {{\n * isCopied: boolean;\n * copy: (text: string) => Promise<void>;\n * error: Error | null;\n * }} An object containing the `isCopied` state, the `copy` function, and any potential error.\n *\n * @example\n * const MyComponent = () => {\n * const { isCopied, copy } = useCopyToClipboard();\n * const textToCopy = '0x123...';\n *\n * return (\n * <button onClick={() => copy(textToCopy)}>\n * {isCopied ? 'Copied!' : 'Copy Address'}\n * </button>\n * );\n * }\n */\nexport function useCopyToClipboard(timeout = 2000): {\n  isCopied: boolean;\n  copy: (text: string) => Promise<void>;\n  error: Error | null;\n} {\n  const [isCopied, setIsCopied] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const copy = useCallback(\n    async (text: string) => {\n      if (!text) return;\n\n      try {\n        await navigator.clipboard.writeText(text);\n        setIsCopied(true);\n        setError(null);\n\n        setTimeout(() => setIsCopied(false), timeout);\n      } catch (e) {\n        const copyError = e instanceof Error ? e : new Error('Failed to copy text.');\n        console.error(copyError);\n        setError(copyError);\n\n        // Reset error state after timeout as well\n        setTimeout(() => setError(null), timeout);\n      }\n    },\n    [timeout],\n  );\n\n  return { isCopied, copy, error };\n}\n","/**\n * @file This file contains a utility function for conditionally merging Tailwind CSS classes.\n */\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * A utility function to conditionally join class names together and resolve\n * conflicting Tailwind CSS classes.\n *\n * It combines the functionality of `clsx` and `tailwind-merge`.\n *\n * @param {...ClassValue[]} inputs - A list of class values to be combined.\n * This can include strings, numbers, objects, arrays, and booleans.\n * @returns {string} The final, merged class name string.\n *\n * @example\n * cn('p-4', 'bg-red-500', { 'font-bold': true }); // => 'p-4 bg-red-500 font-bold'\n * cn('p-2', 'p-4'); // => 'p-4' (tailwind-merge resolves the conflict)\n *\n * @see https://github.com/dcastil/tailwind-merge\n * @see https://github.com/lukeed/clsx\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * @file This file contains a utility for performing a deep (recursive) merge of two objects.\n */\n\n/**\n * Checks if the provided item is a plain object (i.e., not null and not an array).\n *\n * @param {any} item - The item to check.\n * @returns {item is Record<string, any>} True if the item is a plain object, otherwise false.\n */\nconst isObject = (item: any): item is Record<string, any> => {\n  return item && typeof item === 'object' && !Array.isArray(item);\n};\n\n/**\n * Recursively merges the properties of a source object into a target object.\n * This function creates a new object and does not mutate the original target.\n *\n * @template T - The type of the objects being merged.\n * @param {T} target - The base object.\n * @param {Partial<T>} source - The object with properties to merge into the target.\n * @returns {T} A new object representing the merged result.\n *\n * @example\n * const defaults = { a: 1, b: { c: 2, d: 3 } };\n * const custom = { b: { c: 99 } };\n * const result = deepMerge(defaults, custom);\n * // result will be { a: 1, b: { c: 99, d: 3 } }\n */\nexport function deepMerge<T extends object>(target: T, source: Partial<T>): T {\n  // Start with a shallow copy of the target to avoid mutation.\n  const output = { ...target };\n\n  if (isObject(target) && isObject(source)) {\n    // Iterate over the keys in the source object.\n    Object.keys(source).forEach((key) => {\n      const targetValue = target[key as keyof T];\n      const sourceValue = source[key as keyof T];\n\n      // If the value is an object in both target and source, merge them recursively.\n      if (isObject(targetValue) && isObject(sourceValue)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        (output as Record<string, any>)[key] = deepMerge(targetValue, sourceValue);\n      } else {\n        // Otherwise, the source value overwrites the target value.\n        (output as Record<string, any>)[key] = sourceValue;\n      }\n    });\n  }\n\n  return output;\n}\n","/**\n * @file This file contains a utility function for truncating a string with a center ellipsis.\n */\n\n/**\n * Truncates a string by showing a specified number of characters from the start and end,\n * with an ellipsis in the middle. If the string is too short to be truncated, it's returned as is.\n *\n * @param {string} str - The string to truncate.\n * @param {number} from - The number of characters to show from the beginning of the string.\n * @param {number} to - The number of characters to show from the end of the string.\n * @returns {string} The truncated string, or the original string if it's too short.\n *\n * @example\n * const hash = '0x1234567890abcdef1234567890abcdef';\n * textCenterEllipsis(hash, 6, 4); // => \"0x1234...cdef\"\n *\n * textCenterEllipsis('short', 6, 4); // => \"short\"\n */\nexport function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string {\n  if (!str) {\n    return '';\n  }\n\n  // If the string is short enough, don't truncate it.\n  if (str.length <= from + to) {\n    return str;\n  }\n\n  const start = str.slice(0, from);\n  const end = str.slice(str.length - to);\n\n  return `${start}...${end}`;\n}\n"]}
+{"version":3,"sources":["../src/hooks/useCopyToClipboard.ts","../src/hooks/useMediaQuery.ts","../src/utils/cn.ts","../src/utils/deepMerge.ts","../src/utils/textCenterEllipsis.ts"],"names":["useCopyToClipboard","timeout","isCopied","setIsCopied","useState","error","setError","copy","useCallback","text","e","copyError","useMediaQuery","query","getMatches","q","matches","setMatches","useEffect","media","listener","cn","inputs","twMerge","clsx","isObject","item","deepMerge","target","source","output","key","targetValue","sourceValue","textCenterEllipsis","str","from","to","start","end"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * @file This file contains a custom React hook for copying text to the clipboard.\n */\n\nimport { useCallback, useState } from 'react';\n\n/**\n * A custom React hook that provides functionality to copy text to the clipboard.\n * It also manages a \"copied\" state with a timeout for user feedback.\n *\n * @param {number} [timeout=2000] - The duration in milliseconds to keep the `isCopied` state as true.\n * @returns {{\n * isCopied: boolean;\n * copy: (text: string) => Promise<void>;\n * error: Error | null;\n * }} An object containing the `isCopied` state, the `copy` function, and any potential error.\n *\n * @example\n * const MyComponent = () => {\n * const { isCopied, copy } = useCopyToClipboard();\n * const textToCopy = '0x123...';\n *\n * return (\n * <button onClick={() => copy(textToCopy)}>\n * {isCopied ? 'Copied!' : 'Copy Address'}\n * </button>\n * );\n * }\n */\nexport function useCopyToClipboard(timeout = 2000): {\n  isCopied: boolean;\n  copy: (text: string) => Promise<void>;\n  error: Error | null;\n} {\n  const [isCopied, setIsCopied] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const copy = useCallback(\n    async (text: string) => {\n      if (!text) return;\n\n      try {\n        await navigator.clipboard.writeText(text);\n        setIsCopied(true);\n        setError(null);\n\n        setTimeout(() => setIsCopied(false), timeout);\n      } catch (e) {\n        const copyError = e instanceof Error ? e : new Error('Failed to copy text.');\n        console.error(copyError);\n        setError(copyError);\n\n        // Reset error state after timeout as well\n        setTimeout(() => setError(null), timeout);\n      }\n    },\n    [timeout],\n  );\n\n  return { isCopied, copy, error };\n}\n","import { useEffect, useState } from 'react';\n\n/**\n * A custom hook to detect if a media query matches the current screen dimensions.\n * Handles SSR gracefully.\n * @param {string} query - The media query string (e.g., '(max-width: 767px)').\n * @returns {boolean} Whether the query matches or not.\n */\nexport function useMediaQuery(query: string): boolean {\n  const getMatches = (q: string): boolean => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia(q).matches;\n    }\n    return false;\n  };\n\n  const [matches, setMatches] = useState<boolean>(getMatches(query));\n\n  useEffect(() => {\n    const media = window.matchMedia(query);\n    const listener = () => setMatches(media.matches);\n\n    // Re-check on mount and subscribe to changes\n    listener();\n    window.addEventListener('resize', listener);\n\n    return () => window.removeEventListener('resize', listener);\n  }, [query]);\n\n  return matches;\n}\n","/**\n * @file This file contains a utility function for conditionally merging Tailwind CSS classes.\n */\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * A utility function to conditionally join class names together and resolve\n * conflicting Tailwind CSS classes.\n *\n * It combines the functionality of `clsx` and `tailwind-merge`.\n *\n * @param {...ClassValue[]} inputs - A list of class values to be combined.\n * This can include strings, numbers, objects, arrays, and booleans.\n * @returns {string} The final, merged class name string.\n *\n * @example\n * cn('p-4', 'bg-red-500', { 'font-bold': true }); // => 'p-4 bg-red-500 font-bold'\n * cn('p-2', 'p-4'); // => 'p-4' (tailwind-merge resolves the conflict)\n *\n * @see https://github.com/dcastil/tailwind-merge\n * @see https://github.com/lukeed/clsx\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * @file This file contains a utility for performing a deep (recursive) merge of two objects.\n */\n\n/**\n * Checks if the provided item is a plain object (i.e., not null and not an array).\n *\n * @param {any} item - The item to check.\n * @returns {item is Record<string, any>} True if the item is a plain object, otherwise false.\n */\nconst isObject = (item: any): item is Record<string, any> => {\n  return item && typeof item === 'object' && !Array.isArray(item);\n};\n\n/**\n * Recursively merges the properties of a source object into a target object.\n * This function creates a new object and does not mutate the original target.\n *\n * @template T - The type of the objects being merged.\n * @param {T} target - The base object.\n * @param {Partial<T>} source - The object with properties to merge into the target.\n * @returns {T} A new object representing the merged result.\n *\n * @example\n * const defaults = { a: 1, b: { c: 2, d: 3 } };\n * const custom = { b: { c: 99 } };\n * const result = deepMerge(defaults, custom);\n * // result will be { a: 1, b: { c: 99, d: 3 } }\n */\nexport function deepMerge<T extends object>(target: T, source: Partial<T>): T {\n  // Start with a shallow copy of the target to avoid mutation.\n  const output = { ...target };\n\n  if (isObject(target) && isObject(source)) {\n    // Iterate over the keys in the source object.\n    Object.keys(source).forEach((key) => {\n      const targetValue = target[key as keyof T];\n      const sourceValue = source[key as keyof T];\n\n      // If the value is an object in both target and source, merge them recursively.\n      if (isObject(targetValue) && isObject(sourceValue)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        (output as Record<string, any>)[key] = deepMerge(targetValue, sourceValue);\n      } else {\n        // Otherwise, the source value overwrites the target value.\n        (output as Record<string, any>)[key] = sourceValue;\n      }\n    });\n  }\n\n  return output;\n}\n","/**\n * @file This file contains a utility function for truncating a string with a center ellipsis.\n */\n\n/**\n * Truncates a string by showing a specified number of characters from the start and end,\n * with an ellipsis in the middle. If the string is too short to be truncated, it's returned as is.\n *\n * @param {string} str - The string to truncate.\n * @param {number} from - The number of characters to show from the beginning of the string.\n * @param {number} to - The number of characters to show from the end of the string.\n * @returns {string} The truncated string, or the original string if it's too short.\n *\n * @example\n * const hash = '0x1234567890abcdef1234567890abcdef';\n * textCenterEllipsis(hash, 6, 4); // => \"0x1234...cdef\"\n *\n * textCenterEllipsis('short', 6, 4); // => \"short\"\n */\nexport function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string {\n  if (!str) {\n    return '';\n  }\n\n  // If the string is short enough, don't truncate it.\n  if (str.length <= from + to) {\n    return str;\n  }\n\n  const start = str.slice(0, from);\n  const end = str.slice(str.length - to);\n\n  return `${start}...${end}`;\n}\n"]}

package/dist/index.css

@@ -1,309 +1,73 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --radius-md: 0.375rem;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -moz-tab-size: 4;
-      -o-tab-size: 4;
-         tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::-moz-placeholder {
-    opacity: 1;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::-moz-placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-    ::placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-    -webkit-appearance: button;
-       -moz-appearance: button;
-            appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .contents {
-    display: contents;
-  }
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
-  .bg-\[var\(--tuwa-color-primary\)\] {
-    background-color: var(--tuwa-color-primary);
-  }
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-  .p-\[var\(--tuwa-spacing-md\)\] {
-    padding: var(--tuwa-spacing-md);
-  }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-\[var\(--tuwa-color-foreground\)\] {
-    color: var(--tuwa-color-foreground);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .hover\:opacity-90 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 90%;
-      }
-    }
-  }
-}
 :root {
-  --tuwa-success-bg: oklch(96.2% 0.044 156.743);
-  --tuwa-success-text: oklch(52.7% 0.154 150.069);
-  --tuwa-success-icon: oklch(72.3% 0.219 149.579);
-  --tuwa-error-bg: oklch(93.6% 0.032 17.717);
-  --tuwa-error-text: oklch(50.5% 0.213 27.518);
-  --tuwa-error-icon: oklch(63.7% 0.237 25.331);
-  --tuwa-pending-bg: oklch(97.3% 0.071 103.193);
-  --tuwa-pending-text: oklch(47.6% 0.114 61.907);
-  --tuwa-pending-icon: oklch(68.1% 0.162 75.834);
-  --tuwa-info-bg: oklch(96.7% 0.003 264.542);
-  --tuwa-info-text: oklch(44.6% 0.03 256.802);
-  --tuwa-info-icon: oklch(55.1% 0.027 264.364);
-  --tuwa-text-primary: oklch(21% 0.034 264.665);
-  --tuwa-text-secondary: oklch(55.1% 0.027 264.364);
-  --tuwa-text-tertiary: oklch(70.7% 0.022 261.325);
-  --tuwa-text-accent: oklch(54.6% 0.245 262.881);
-  --tuwa-text-on-accent: #fff;
-  --tuwa-bg-primary: #fff;
-  --tuwa-bg-secondary: oklch(98.5% 0.002 247.839);
-  --tuwa-bg-muted: oklch(96.7% 0.003 264.542);
-  --tuwa-border-primary: oklch(92.8% 0.006 264.531);
-  --tuwa-border-secondary: oklch(96.7% 0.003 264.542);
-  --tuwa-button-gradient-from: oklch(54.6% 0.245 262.881);
-  --tuwa-button-gradient-to: oklch(55.8% 0.288 302.321);
-  --tuwa-button-gradient-from-hover: oklch(48.8% 0.243 264.376);
-  --tuwa-button-gradient-to-hover: oklch(49.6% 0.265 301.924);
+  --tuwa-success-bg: theme('colors.green.100');
+  --tuwa-success-text: theme('colors.green.700');
+  --tuwa-success-icon: theme('colors.green.500');
+
+  --tuwa-error-bg: theme('colors.red.100');
+  --tuwa-error-text: theme('colors.red.700');
+  --tuwa-error-icon: theme('colors.red.500');
+
+  --tuwa-pending-bg: theme('colors.yellow.100');
+  --tuwa-pending-text: theme('colors.yellow.800');
+  --tuwa-pending-icon: theme('colors.yellow.600');
+
+  --tuwa-info-bg: theme('colors.gray.100');
+  --tuwa-info-text: theme('colors.gray.600');
+  --tuwa-info-icon: theme('colors.gray.500');
+
+  --tuwa-text-primary: theme('colors.gray.900');
+  --tuwa-text-secondary: theme('colors.gray.500');
+  --tuwa-text-tertiary: theme('colors.gray.400');
+  --tuwa-text-accent: theme('colors.blue.600');
+  --tuwa-text-on-accent: theme('colors.white');
+
+  --tuwa-bg-primary: theme('colors.white');
+  --tuwa-bg-secondary: theme('colors.gray.50');
+  --tuwa-bg-muted: theme('colors.gray.100');
+
+  --tuwa-border-primary: theme('colors.gray.200');
+  --tuwa-border-secondary: theme('colors.gray.100');
+
+  --tuwa-button-gradient-from: theme('colors.blue.600');
+  --tuwa-button-gradient-to: theme('colors.purple.600');
+
+  --tuwa-button-gradient-from-hover: theme('colors.blue.700');
+  --tuwa-button-gradient-to-hover: theme('colors.purple.700');
 }
+
 .dark {
-  --tuwa-success-bg: oklch(39.3% 0.095 152.535);
-  --tuwa-success-text: oklch(87.1% 0.15 154.449);
-  --tuwa-success-icon: oklch(79.2% 0.209 151.711);
-  --tuwa-error-bg: oklch(39.6% 0.141 25.723);
-  --tuwa-error-text: oklch(80.8% 0.114 19.571);
-  --tuwa-error-icon: oklch(70.4% 0.191 22.216);
-  --tuwa-pending-bg: oklch(42.1% 0.095 57.708);
-  --tuwa-pending-text: oklch(90.5% 0.182 98.111);
-  --tuwa-pending-icon: oklch(85.2% 0.199 91.936);
-  --tuwa-info-bg: oklch(37.3% 0.034 259.733);
-  --tuwa-info-text: oklch(87.2% 0.01 258.338);
-  --tuwa-info-icon: oklch(70.7% 0.022 261.325);
-  --tuwa-text-primary: oklch(98.5% 0.002 247.839);
-  --tuwa-text-secondary: oklch(70.7% 0.022 261.325);
-  --tuwa-text-tertiary: oklch(55.1% 0.027 264.364);
-  --tuwa-text-accent: oklch(70.7% 0.165 254.624);
-  --tuwa-text-on-accent: #fff;
-  --tuwa-bg-primary: oklch(21% 0.034 264.665);
-  --tuwa-bg-secondary: oklch(27.8% 0.033 256.848);
-  --tuwa-bg-muted: oklch(37.3% 0.034 259.733);
-  --tuwa-border-primary: oklch(37.3% 0.034 259.733);
-  --tuwa-border-secondary: oklch(27.8% 0.033 256.848);
-  --tuwa-button-gradient-from: oklch(62.3% 0.214 259.815);
-  --tuwa-button-gradient-to: oklch(62.7% 0.265 303.9);
-  --tuwa-button-gradient-from-hover: oklch(54.6% 0.245 262.881);
-  --tuwa-button-gradient-to-hover: oklch(55.8% 0.288 302.321);
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
+  --tuwa-success-bg: theme('colors.green.900');
+  --tuwa-success-text: theme('colors.green.300');
+  --tuwa-success-icon: theme('colors.green.400');
+
+  --tuwa-error-bg: theme('colors.red.900');
+  --tuwa-error-text: theme('colors.red.300');
+  --tuwa-error-icon: theme('colors.red.400');
+
+  --tuwa-pending-bg: theme('colors.yellow.900');
+  --tuwa-pending-text: theme('colors.yellow.300');
+  --tuwa-pending-icon: theme('colors.yellow.400');
+
+  --tuwa-info-bg: theme('colors.gray.700');
+  --tuwa-info-text: theme('colors.gray.300');
+  --tuwa-info-icon: theme('colors.gray.400');
+
+  --tuwa-text-primary: theme('colors.gray.50');
+  --tuwa-text-secondary: theme('colors.gray.400');
+  --tuwa-text-tertiary: theme('colors.gray.500');
+  --tuwa-text-accent: theme('colors.blue.400');
+  --tuwa-text-on-accent: theme('colors.white');
+
+  --tuwa-bg-primary: theme('colors.gray.900');
+  --tuwa-bg-secondary: theme('colors.gray.800');
+  --tuwa-bg-muted: theme('colors.gray.700');
+
+  --tuwa-border-primary: theme('colors.gray.700');
+  --tuwa-border-secondary: theme('colors.gray.800');
+
+  --tuwa-button-gradient-from: theme('colors.blue.500');
+  --tuwa-button-gradient-to: theme('colors.purple.500');
+
+  --tuwa-button-gradient-from-hover: theme('colors.blue.600');
+  --tuwa-button-gradient-to-hover: theme('colors.purple.600');
 }

package/dist/index.d.cts

@@ -32,6 +32,14 @@ declare function useCopyToClipboard(timeout?: number): {
     error: Error | null;
 };
 
+/**
+ * A custom hook to detect if a media query matches the current screen dimensions.
+ * Handles SSR gracefully.
+ * @param {string} query - The media query string (e.g., '(max-width: 767px)').
+ * @returns {boolean} Whether the query matches or not.
+ */
+declare function useMediaQuery(query: string): boolean;
+
 /**
  * @file This file contains a utility function for conditionally merging Tailwind CSS classes.
  */
@@ -95,4 +103,4 @@ declare function deepMerge<T extends object>(target: T, source: Partial<T>): T;
  */
 declare function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string;
 
-export { cn, deepMerge, textCenterEllipsis, useCopyToClipboard };
+export { cn, deepMerge, textCenterEllipsis, useCopyToClipboard, useMediaQuery };

package/dist/index.d.ts

@@ -32,6 +32,14 @@ declare function useCopyToClipboard(timeout?: number): {
     error: Error | null;
 };
 
+/**
+ * A custom hook to detect if a media query matches the current screen dimensions.
+ * Handles SSR gracefully.
+ * @param {string} query - The media query string (e.g., '(max-width: 767px)').
+ * @returns {boolean} Whether the query matches or not.
+ */
+declare function useMediaQuery(query: string): boolean;
+
 /**
  * @file This file contains a utility function for conditionally merging Tailwind CSS classes.
  */
@@ -95,4 +103,4 @@ declare function deepMerge<T extends object>(target: T, source: Partial<T>): T;
  */
 declare function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string;
 
-export { cn, deepMerge, textCenterEllipsis, useCopyToClipboard };
+export { cn, deepMerge, textCenterEllipsis, useCopyToClipboard, useMediaQuery };

package/dist/index.js

@@ -1,2 +1,2 @@
-import {useState,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function g(r=2e3){let[o,e]=useState(false),[t,n]=useState(null),s=useCallback(async c=>{if(c)try{await navigator.clipboard.writeText(c),e(!0),n(null),setTimeout(()=>e(!1),r);}catch(l){let a=l instanceof Error?l:new Error("Failed to copy text.");console.error(a),n(a),setTimeout(()=>n(null),r);}},[r]);return {isCopied:o,copy:s,error:t}}function C(...r){return twMerge(clsx(r))}var i=r=>r&&typeof r=="object"&&!Array.isArray(r);function y(r,o){let e={...r};return i(r)&&i(o)&&Object.keys(o).forEach(t=>{let n=r[t],s=o[t];i(n)&&i(s)?e[t]=y(n,s):e[t]=s;}),e}function j(r,o,e){if(!r)return "";if(r.length<=o+e)return r;let t=r.slice(0,o),n=r.slice(r.length-e);return `${t}...${n}`}export{C as cn,y as deepMerge,j as textCenterEllipsis,g as useCopyToClipboard};//# sourceMappingURL=index.js.map
+import {useState,useCallback,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function w(e=2e3){let[o,t]=useState(false),[n,r]=useState(null),s=useCallback(async a=>{if(a)try{await navigator.clipboard.writeText(a),t(!0),r(null),setTimeout(()=>t(!1),e);}catch(c){let l=c instanceof Error?c:new Error("Failed to copy text.");console.error(l),r(l),setTimeout(()=>r(null),e);}},[e]);return {isCopied:o,copy:s,error:n}}function E(e){let o=r=>typeof window<"u"?window.matchMedia(r).matches:false,[t,n]=useState(o(e));return useEffect(()=>{let r=window.matchMedia(e),s=()=>n(r.matches);return s(),window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[e]),t}function v(...e){return twMerge(clsx(e))}var i=e=>e&&typeof e=="object"&&!Array.isArray(e);function g(e,o){let t={...e};return i(e)&&i(o)&&Object.keys(o).forEach(n=>{let r=e[n],s=o[n];i(r)&&i(s)?t[n]=g(r,s):t[n]=s;}),t}function R(e,o,t){if(!e)return "";if(e.length<=o+t)return e;let n=e.slice(0,o),r=e.slice(e.length-t);return `${n}...${r}`}export{v as cn,g as deepMerge,R as textCenterEllipsis,w as useCopyToClipboard,E as useMediaQuery};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useCopyToClipboard.ts","../src/utils/cn.ts","../src/utils/deepMerge.ts","../src/utils/textCenterEllipsis.ts"],"names":["useCopyToClipboard","timeout","isCopied","setIsCopied","useState","error","setError","copy","useCallback","text","e","copyError","cn","inputs","twMerge","clsx","isObject","item","deepMerge","target","source","output","key","targetValue","sourceValue","textCenterEllipsis","str","from","to","start","end"],"mappings":"sGA6BO,SAASA,CAAAA,CAAmBC,CAAAA,CAAU,GAAA,CAI3C,CACA,GAAM,CAACC,CAAAA,CAAUC,CAAW,CAAA,CAAIC,QAAAA,CAAS,KAAK,CAAA,CACxC,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIF,QAAAA,CAAuB,IAAI,CAAA,CAE/CG,EAAOC,WAAAA,CACX,MAAOC,CAAAA,EAAiB,CACtB,GAAKA,CAAAA,CAEL,GAAI,CACF,MAAM,SAAA,CAAU,SAAA,CAAU,SAAA,CAAUA,CAAI,EACxCN,CAAAA,CAAY,CAAA,CAAI,CAAA,CAChBG,CAAAA,CAAS,IAAI,CAAA,CAEb,WAAW,IAAMH,CAAAA,CAAY,CAAA,CAAK,CAAA,CAAGF,CAAO,EAC9C,OAASS,CAAAA,CAAG,CACV,IAAMC,CAAAA,CAAYD,CAAAA,YAAa,KAAA,CAAQA,EAAI,IAAI,KAAA,CAAM,sBAAsB,CAAA,CAC3E,OAAA,CAAQ,KAAA,CAAMC,CAAS,CAAA,CACvBL,CAAAA,CAASK,CAAS,CAAA,CAGlB,UAAA,CAAW,IAAML,EAAS,IAAI,CAAA,CAAGL,CAAO,EAC1C,CACF,CAAA,CACA,CAACA,CAAO,CACV,CAAA,CAEA,OAAO,CAAE,QAAA,CAAAC,EAAU,IAAA,CAAAK,CAAAA,CAAM,KAAA,CAAAF,CAAM,CACjC,CCpCO,SAASO,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,KAAKF,CAAM,CAAC,CAC7B,CChBA,IAAMG,EAAYC,CAAAA,EACTA,CAAAA,EAAQ,OAAOA,CAAAA,EAAS,QAAA,EAAY,CAAC,MAAM,OAAA,CAAQA,CAAI,CAAA,CAkBzD,SAASC,CAAAA,CAA4BC,CAAAA,CAAWC,EAAuB,CAE5E,IAAMC,CAAAA,CAAS,CAAE,GAAGF,CAAO,EAE3B,OAAIH,CAAAA,CAASG,CAAM,CAAA,EAAKH,CAAAA,CAASI,CAAM,GAErC,MAAA,CAAO,IAAA,CAAKA,CAAM,CAAA,CAAE,OAAA,CAASE,CAAAA,EAAQ,CACnC,IAAMC,CAAAA,CAAcJ,CAAAA,CAAOG,CAAc,CAAA,CACnCE,CAAAA,CAAcJ,EAAOE,CAAc,CAAA,CAGrCN,CAAAA,CAASO,CAAW,CAAA,EAAKP,CAAAA,CAASQ,CAAW,CAAA,CAG9CH,CAAAA,CAA+BC,CAAG,CAAA,CAAIJ,CAAAA,CAAUK,CAAAA,CAAaC,CAAW,CAAA,CAGxEH,CAAAA,CAA+BC,CAAG,CAAA,CAAIE,EAE3C,CAAC,EAGIH,CACT,CCjCO,SAASI,CAAAA,CAAmBC,CAAAA,CAAgCC,CAAAA,CAAcC,EAAoB,CACnG,GAAI,CAACF,CAAAA,CACH,OAAO,EAAA,CAIT,GAAIA,CAAAA,CAAI,MAAA,EAAUC,CAAAA,CAAOC,CAAAA,CACvB,OAAOF,CAAAA,CAGT,IAAMG,CAAAA,CAAQH,CAAAA,CAAI,KAAA,CAAM,CAAA,CAAGC,CAAI,CAAA,CACzBG,EAAMJ,CAAAA,CAAI,KAAA,CAAMA,CAAAA,CAAI,MAAA,CAASE,CAAE,CAAA,CAErC,OAAO,CAAA,EAAGC,CAAK,CAAA,GAAA,EAAMC,CAAG,CAAA,CAC1B","file":"index.js","sourcesContent":["/**\n * @file This file contains a custom React hook for copying text to the clipboard.\n */\n\nimport { useCallback, useState } from 'react';\n\n/**\n * A custom React hook that provides functionality to copy text to the clipboard.\n * It also manages a \"copied\" state with a timeout for user feedback.\n *\n * @param {number} [timeout=2000] - The duration in milliseconds to keep the `isCopied` state as true.\n * @returns {{\n * isCopied: boolean;\n * copy: (text: string) => Promise<void>;\n * error: Error | null;\n * }} An object containing the `isCopied` state, the `copy` function, and any potential error.\n *\n * @example\n * const MyComponent = () => {\n * const { isCopied, copy } = useCopyToClipboard();\n * const textToCopy = '0x123...';\n *\n * return (\n * <button onClick={() => copy(textToCopy)}>\n * {isCopied ? 'Copied!' : 'Copy Address'}\n * </button>\n * );\n * }\n */\nexport function useCopyToClipboard(timeout = 2000): {\n  isCopied: boolean;\n  copy: (text: string) => Promise<void>;\n  error: Error | null;\n} {\n  const [isCopied, setIsCopied] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const copy = useCallback(\n    async (text: string) => {\n      if (!text) return;\n\n      try {\n        await navigator.clipboard.writeText(text);\n        setIsCopied(true);\n        setError(null);\n\n        setTimeout(() => setIsCopied(false), timeout);\n      } catch (e) {\n        const copyError = e instanceof Error ? e : new Error('Failed to copy text.');\n        console.error(copyError);\n        setError(copyError);\n\n        // Reset error state after timeout as well\n        setTimeout(() => setError(null), timeout);\n      }\n    },\n    [timeout],\n  );\n\n  return { isCopied, copy, error };\n}\n","/**\n * @file This file contains a utility function for conditionally merging Tailwind CSS classes.\n */\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * A utility function to conditionally join class names together and resolve\n * conflicting Tailwind CSS classes.\n *\n * It combines the functionality of `clsx` and `tailwind-merge`.\n *\n * @param {...ClassValue[]} inputs - A list of class values to be combined.\n * This can include strings, numbers, objects, arrays, and booleans.\n * @returns {string} The final, merged class name string.\n *\n * @example\n * cn('p-4', 'bg-red-500', { 'font-bold': true }); // => 'p-4 bg-red-500 font-bold'\n * cn('p-2', 'p-4'); // => 'p-4' (tailwind-merge resolves the conflict)\n *\n * @see https://github.com/dcastil/tailwind-merge\n * @see https://github.com/lukeed/clsx\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * @file This file contains a utility for performing a deep (recursive) merge of two objects.\n */\n\n/**\n * Checks if the provided item is a plain object (i.e., not null and not an array).\n *\n * @param {any} item - The item to check.\n * @returns {item is Record<string, any>} True if the item is a plain object, otherwise false.\n */\nconst isObject = (item: any): item is Record<string, any> => {\n  return item && typeof item === 'object' && !Array.isArray(item);\n};\n\n/**\n * Recursively merges the properties of a source object into a target object.\n * This function creates a new object and does not mutate the original target.\n *\n * @template T - The type of the objects being merged.\n * @param {T} target - The base object.\n * @param {Partial<T>} source - The object with properties to merge into the target.\n * @returns {T} A new object representing the merged result.\n *\n * @example\n * const defaults = { a: 1, b: { c: 2, d: 3 } };\n * const custom = { b: { c: 99 } };\n * const result = deepMerge(defaults, custom);\n * // result will be { a: 1, b: { c: 99, d: 3 } }\n */\nexport function deepMerge<T extends object>(target: T, source: Partial<T>): T {\n  // Start with a shallow copy of the target to avoid mutation.\n  const output = { ...target };\n\n  if (isObject(target) && isObject(source)) {\n    // Iterate over the keys in the source object.\n    Object.keys(source).forEach((key) => {\n      const targetValue = target[key as keyof T];\n      const sourceValue = source[key as keyof T];\n\n      // If the value is an object in both target and source, merge them recursively.\n      if (isObject(targetValue) && isObject(sourceValue)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        (output as Record<string, any>)[key] = deepMerge(targetValue, sourceValue);\n      } else {\n        // Otherwise, the source value overwrites the target value.\n        (output as Record<string, any>)[key] = sourceValue;\n      }\n    });\n  }\n\n  return output;\n}\n","/**\n * @file This file contains a utility function for truncating a string with a center ellipsis.\n */\n\n/**\n * Truncates a string by showing a specified number of characters from the start and end,\n * with an ellipsis in the middle. If the string is too short to be truncated, it's returned as is.\n *\n * @param {string} str - The string to truncate.\n * @param {number} from - The number of characters to show from the beginning of the string.\n * @param {number} to - The number of characters to show from the end of the string.\n * @returns {string} The truncated string, or the original string if it's too short.\n *\n * @example\n * const hash = '0x1234567890abcdef1234567890abcdef';\n * textCenterEllipsis(hash, 6, 4); // => \"0x1234...cdef\"\n *\n * textCenterEllipsis('short', 6, 4); // => \"short\"\n */\nexport function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string {\n  if (!str) {\n    return '';\n  }\n\n  // If the string is short enough, don't truncate it.\n  if (str.length <= from + to) {\n    return str;\n  }\n\n  const start = str.slice(0, from);\n  const end = str.slice(str.length - to);\n\n  return `${start}...${end}`;\n}\n"]}
+{"version":3,"sources":["../src/hooks/useCopyToClipboard.ts","../src/hooks/useMediaQuery.ts","../src/utils/cn.ts","../src/utils/deepMerge.ts","../src/utils/textCenterEllipsis.ts"],"names":["useCopyToClipboard","timeout","isCopied","setIsCopied","useState","error","setError","copy","useCallback","text","e","copyError","useMediaQuery","query","getMatches","q","matches","setMatches","useEffect","media","listener","cn","inputs","twMerge","clsx","isObject","item","deepMerge","target","source","output","key","targetValue","sourceValue","textCenterEllipsis","str","from","to","start","end"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @file This file contains a custom React hook for copying text to the clipboard.\n */\n\nimport { useCallback, useState } from 'react';\n\n/**\n * A custom React hook that provides functionality to copy text to the clipboard.\n * It also manages a \"copied\" state with a timeout for user feedback.\n *\n * @param {number} [timeout=2000] - The duration in milliseconds to keep the `isCopied` state as true.\n * @returns {{\n * isCopied: boolean;\n * copy: (text: string) => Promise<void>;\n * error: Error | null;\n * }} An object containing the `isCopied` state, the `copy` function, and any potential error.\n *\n * @example\n * const MyComponent = () => {\n * const { isCopied, copy } = useCopyToClipboard();\n * const textToCopy = '0x123...';\n *\n * return (\n * <button onClick={() => copy(textToCopy)}>\n * {isCopied ? 'Copied!' : 'Copy Address'}\n * </button>\n * );\n * }\n */\nexport function useCopyToClipboard(timeout = 2000): {\n  isCopied: boolean;\n  copy: (text: string) => Promise<void>;\n  error: Error | null;\n} {\n  const [isCopied, setIsCopied] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const copy = useCallback(\n    async (text: string) => {\n      if (!text) return;\n\n      try {\n        await navigator.clipboard.writeText(text);\n        setIsCopied(true);\n        setError(null);\n\n        setTimeout(() => setIsCopied(false), timeout);\n      } catch (e) {\n        const copyError = e instanceof Error ? e : new Error('Failed to copy text.');\n        console.error(copyError);\n        setError(copyError);\n\n        // Reset error state after timeout as well\n        setTimeout(() => setError(null), timeout);\n      }\n    },\n    [timeout],\n  );\n\n  return { isCopied, copy, error };\n}\n","import { useEffect, useState } from 'react';\n\n/**\n * A custom hook to detect if a media query matches the current screen dimensions.\n * Handles SSR gracefully.\n * @param {string} query - The media query string (e.g., '(max-width: 767px)').\n * @returns {boolean} Whether the query matches or not.\n */\nexport function useMediaQuery(query: string): boolean {\n  const getMatches = (q: string): boolean => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia(q).matches;\n    }\n    return false;\n  };\n\n  const [matches, setMatches] = useState<boolean>(getMatches(query));\n\n  useEffect(() => {\n    const media = window.matchMedia(query);\n    const listener = () => setMatches(media.matches);\n\n    // Re-check on mount and subscribe to changes\n    listener();\n    window.addEventListener('resize', listener);\n\n    return () => window.removeEventListener('resize', listener);\n  }, [query]);\n\n  return matches;\n}\n","/**\n * @file This file contains a utility function for conditionally merging Tailwind CSS classes.\n */\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * A utility function to conditionally join class names together and resolve\n * conflicting Tailwind CSS classes.\n *\n * It combines the functionality of `clsx` and `tailwind-merge`.\n *\n * @param {...ClassValue[]} inputs - A list of class values to be combined.\n * This can include strings, numbers, objects, arrays, and booleans.\n * @returns {string} The final, merged class name string.\n *\n * @example\n * cn('p-4', 'bg-red-500', { 'font-bold': true }); // => 'p-4 bg-red-500 font-bold'\n * cn('p-2', 'p-4'); // => 'p-4' (tailwind-merge resolves the conflict)\n *\n * @see https://github.com/dcastil/tailwind-merge\n * @see https://github.com/lukeed/clsx\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * @file This file contains a utility for performing a deep (recursive) merge of two objects.\n */\n\n/**\n * Checks if the provided item is a plain object (i.e., not null and not an array).\n *\n * @param {any} item - The item to check.\n * @returns {item is Record<string, any>} True if the item is a plain object, otherwise false.\n */\nconst isObject = (item: any): item is Record<string, any> => {\n  return item && typeof item === 'object' && !Array.isArray(item);\n};\n\n/**\n * Recursively merges the properties of a source object into a target object.\n * This function creates a new object and does not mutate the original target.\n *\n * @template T - The type of the objects being merged.\n * @param {T} target - The base object.\n * @param {Partial<T>} source - The object with properties to merge into the target.\n * @returns {T} A new object representing the merged result.\n *\n * @example\n * const defaults = { a: 1, b: { c: 2, d: 3 } };\n * const custom = { b: { c: 99 } };\n * const result = deepMerge(defaults, custom);\n * // result will be { a: 1, b: { c: 99, d: 3 } }\n */\nexport function deepMerge<T extends object>(target: T, source: Partial<T>): T {\n  // Start with a shallow copy of the target to avoid mutation.\n  const output = { ...target };\n\n  if (isObject(target) && isObject(source)) {\n    // Iterate over the keys in the source object.\n    Object.keys(source).forEach((key) => {\n      const targetValue = target[key as keyof T];\n      const sourceValue = source[key as keyof T];\n\n      // If the value is an object in both target and source, merge them recursively.\n      if (isObject(targetValue) && isObject(sourceValue)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        (output as Record<string, any>)[key] = deepMerge(targetValue, sourceValue);\n      } else {\n        // Otherwise, the source value overwrites the target value.\n        (output as Record<string, any>)[key] = sourceValue;\n      }\n    });\n  }\n\n  return output;\n}\n","/**\n * @file This file contains a utility function for truncating a string with a center ellipsis.\n */\n\n/**\n * Truncates a string by showing a specified number of characters from the start and end,\n * with an ellipsis in the middle. If the string is too short to be truncated, it's returned as is.\n *\n * @param {string} str - The string to truncate.\n * @param {number} from - The number of characters to show from the beginning of the string.\n * @param {number} to - The number of characters to show from the end of the string.\n * @returns {string} The truncated string, or the original string if it's too short.\n *\n * @example\n * const hash = '0x1234567890abcdef1234567890abcdef';\n * textCenterEllipsis(hash, 6, 4); // => \"0x1234...cdef\"\n *\n * textCenterEllipsis('short', 6, 4); // => \"short\"\n */\nexport function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string {\n  if (!str) {\n    return '';\n  }\n\n  // If the string is short enough, don't truncate it.\n  if (str.length <= from + to) {\n    return str;\n  }\n\n  const start = str.slice(0, from);\n  const end = str.slice(str.length - to);\n\n  return `${start}...${end}`;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuwaio/nova-core",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "private": false,
   "author": "Oleksandr Tkach",
   "license": "Apache-2.0",