{"dist":{"shasum":"677d58b0245c08fef437db0010313d1425651ef5","tarball":"https://registry.npmjs.org/@robust-ui/functions/-/functions-0.0.0-dev-20230916012106.tgz","fileCount":7,"integrity":"sha512-c+MYDWrLzWZm0mQhsMTIWnnF1fZECabxCQlG10iHFBDfPrQjsZVlu2Ht9Hg0ye1832PKwYA+/GWm29+z/j+ivg==","signatures":[{"sig":"MEUCIDNSXHPGneHYPWb1IlsO8u4ANziBLyXXuL/Qympx6Sm4AiEAzo9B2MiWOLuVE9wt2Z3llbcd/ukB6medUfNnASQ8+z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112585},"main":"./dist/index.js","name":"@robust-ui/functions","_from":"file:robust-ui-functions-0.0.0-dev-20230916012106.tgz","types":"./dist/index.d.ts","author":{"name":"Nahuel Rosas","email":"nahuel.rosas@mi.unc.edu.ar"},"module":"./dist/index.mjs","readme":"# Functions\n\n## InjectCSS\n\n```typescript\n/**\n * Injects CSS styles based on the provided component props and theme.\n * @param classSelector - The CSS class selector to target the component.\n * @param componentProps - The component props containing style information.\n * @param breakPoint - The breakpoint value for responsive styles.\n * @param theme - The theme object containing style mappings.\n * @returns void\n */\nexport function InjectCSS({\n  classSelector,\n  componentProps,\n  breakPoint,\n  theme = defaultTheme,\n}: InjectCSST): void;\n```\n\nThe `InjectCSS` function is a powerful utility that allows you to dynamically inject CSS styles into the DOM based on the provided `componentProps` and `theme`. It enables flexible and customized styling of components using class selectors and a set of properties and values.\n\n### Parameters\n\n- `classSelector`: The CSS class selector used to target the component to which the styles will be applied. It should be a valid CSS selector string, such as `'.my-component'`.\n- `componentProps`: An object containing the component's properties and their respective style values. Each property represents a CSS property, and its value represents the corresponding value for that property. The supported value types include strings and objects.\n- `breakPoint` (optional): The breakpoint value used for responsive styles. It allows styles to be adapted based on the screen size or device. It should be a string representing the desired breakpoint value, such as `'md'`, `'lg'`, etc.\n- `theme` (optional): An object containing theme-specific style mappings. It provides a way to set default values for certain properties and customize styles based on the theme. The theme object should follow a specific structure with property-value mappings.\n\n### Usage\n\nTo use the `InjectCSS` function, follow these steps:\n\n1. Import the `InjectCSS` function into your file:\n\n```typescript\nimport { InjectCSS } from \"InjectCSS\";\n```\n\n2. Define your component and its props. For example:\n\n```typescript\nconst MyComponent = ({ color, fontSize }) => {\n  // Your component logic here\n};\n```\n\n3. Within your component, call the `InjectCSS` function to apply the styles:\n\n```typescript\nconst MyComponent = ({ color, fontSize }) => {\n  const classSelector = \".my-component\";\n  const componentProps = {\n    color,\n    fontSize,\n    // Additional component properties and their values\n  };\n\n  InjectCSS({\n    classSelector,\n    componentProps,\n    breakPoint: \"md\", // Optional: Set the breakpoint for responsive styles\n    theme: myCustomTheme, // Optional: Provide a custom theme object\n  });\n\n  // Rest of your component code\n};\n```\n\n4. In the example above, the `InjectCSS` function is called within the component to apply the styles defined by the `color` and `fontSize` props. The styles will be applied to any element with the class `my-component`. You can add additional properties to `componentProps` as needed for your component.\n\n5. Optionally, you can specify a breakpoint value using the `breakPoint` parameter to apply responsive styles. This allows the styles to adapt based on the screen size or device. The breakpoint value should be a string corresponding to the desired breakpoint, such as `'md'`, `'lg'`, etc.\n\n6. If you have a theme object with style mappings specific to your application, you can provide it using the `theme` parameter. The theme object should have property-value mappings that align with the CSS properties used in your `componentProps`. This allows you to customize the styles based on the theme.\n\n7. Finally, make sure to render your component with\n\nthe appropriate class name:\n\n```typescript\nconst MyComponent = ({ color, fontSize }) => {\n  // Your component logic here\n\n  return <div className=\"my-component\">Hello, world!</div>;\n};\n```\n\nIt's important to note that the `InjectCSS` function should be called whenever the component props change to ensure that the styles are updated accordingly.\n\nThat's it! The `InjectCSS` function provides a powerful mechanism for dynamically applying styles to components based on props and themes. It offers great flexibility in styling and enables you to create versatile and visually appealing components.\n\n## generateHash\n\n```typescript\nimport crypto from \"crypto\";\nimport { generateHashT } from \"functions\";\n\n/**\n * Generates a hash using the specified algorithm from a given string.\n * @param {string} str - The string to generate the hash from.\n * @param {string} algorithm - The hash algorithm to use. Default is \"sha512\".\n * @returns {string} - The generated hash as a hexadecimal string.\n * @throws {Error} - If an invalid hash algorithm is provided.\n */\nexport function generateHash({\n  str,\n  algorithm = \"sha512\",\n}: generateHashT): string {\n  if (!crypto.getHashes().includes(algorithm)) {\n    throw new Error(\n      `Invalid algorithm: ${algorithm}. Valid algorithms are: ${crypto\n        .getHashes()\n        .join(\", \")}.`\n    );\n  }\n  return crypto.createHash(algorithm).update(str).digest(\"hex\");\n}\n```\n\nThe `generateHash` function generates a hash using the specified algorithm from a given string. It uses the `crypto` module from Node.js for hash generation.\n\n### Parameters\n\n- `str` (string): The string to generate the hash from.\n- `algorithm` (string): The hash algorithm to use. Default is \"sha512\".\n\n### Returns\n\n- A string representing the generated hash as a hexadecimal string.\n\n### Throws\n\n- An error if an invalid hash algorithm is provided.\n\n---\n\n## generateId\n\n```typescript\nimport { generateIdT } from \"functions\";\nimport { generateHash, safeJSON } from \"functions\";\n\n/**\n * Generates a unique ID based on the provided object or string using a specified algorithm.\n *\n * @param obj - The object or string to generate the ID from.\n * @param prefix - An optional prefix to include in the generated ID.\n * @param algorithm - The hash algorithm to use for generating the hash. Default is \"sha1\".\n * @returns The generated ID as a string.\n */\nexport function generateId({\n  obj,\n  prefix,\n  algorithm = \"sha1\",\n}: generateIdT): string {\n  if (typeof obj === \"string\") {\n    // If obj is a string, generate hash directly from it\n    return generateHash({ str: obj, algorithm });\n  }\n  // If obj is an object, generate hash from its JSON representation\n  return `${Boolean(prefix) && prefix}-${generateHash({\n    str: safeJSON({ obj }),\n    algorithm,\n  })}`;\n}\n```\n\nThe `generateId` function generates a unique ID based on the provided object or string using a specified algorithm. It internally uses the `generateHash` and `safeJSON` functions.\n\n### Parameters\n\n- `obj` (object|string): The object or string to generate the ID from.\n- `prefix` (string, optional): An optional prefix to include in the generated ID.\n- `algorithm` (string, optional): The hash algorithm to use for generating the hash. Default is \"sha1\".\n\n### Returns\n\n- The generated ID as a string.\n\n---\n\n### How to Use\n\nTo use the `generateHash` and `generateId` functions, follow these steps:\n\n1. Import the functions into your project:\n\n```typescript\nimport { generateHash, generateId } from \"./path/to/functions\";\n```\n\n2. Use the functions in your code:\n\n```typescript\nconst hash = generateHash({\n  str: \"Hello, world!\",\n  algorithm: \"sha256\",\n});\nconsole.log(\"Generated hash:\", hash);\n\nconst id = generateId({\n  obj: { key: \"value\" },\n  prefix: \"id\",\n  algorithm: \"md5\",\n});\nconsole.log(\"Generated ID:\", id);\n```\n\nMake sure to provide the necessary\n\n## createCSSRule\n\n```typescript\nimport { createCSSRuleT } from \"functions\";\n\n/**\n * Creates a CSS rule string with the specified selector and styles.\n *\n * @param selector - The CSS selector for the rule.\n * @param styles - The CSS styles to apply.\n * @returns The generated CSS rule as a string.\n */\nexport function createCSSRule({ selector, styles }: createCSSRuleT): string {\n  return `.${selector} {${styles}}`;\n}\n```\n\nThe `createCSSRule` function generates a CSS rule string with the specified selector and styles.\n\n### Parameters\n\n- `selector` (string): The CSS selector for the rule.\n- `styles` (string): The CSS styles to apply.\n\n### Returns\n\n- The generated CSS rule as a string.\n\n---\n\n## createStyleSheet\n\n```typescript\nimport { createStyleSheetT } from \"functions\";\n\n/**\n * Creates a CSS stylesheet string with the specified rules.\n *\n * @param rules - An array of CSS rules.\n * @returns The generated CSS stylesheet as a string.\n */\nexport function createStyleSheet({ rules }: createStyleSheetT): string {\n  return rules.join(\"\\n\");\n}\n```\n\nThe `createStyleSheet` function generates a CSS stylesheet string with the specified rules.\n\n### Parameters\n\n- `rules` (string[]): An array of CSS rules.\n\n### Returns\n\n- The generated CSS stylesheet as a string.\n\n---\n\n### How to Use\n\nTo use the `createCSSRule` and `createStyleSheet` functions, follow these steps:\n\n1. Import the functions into your project:\n\n```typescript\nimport { createCSSRule, createStyleSheet } from \"./path/to/functions\";\n```\n\n2. Use the functions in your code:\n\n```typescript\nconst cssRule = createCSSRule({\n  selector: \"my-class\",\n  styles: \"color: red; font-size: 16px;\",\n});\nconsole.log(\"Generated CSS rule:\", cssRule);\n\nconst cssStylesheet = createStyleSheet({\n  rules: [\n    createCSSRule({ selector: \"class-1\", styles: \"background-color: blue;\" }),\n    createCSSRule({ selector: \"class-2\", styles: \"background-color: green;\" }),\n  ],\n});\nconsole.log(\"Generated CSS stylesheet:\", cssStylesheet);\n```\n\nMake sure to provide the necessary parameters and handle the generated CSS rule or stylesheet as needed in your application.\n\n## getInitials\n\n```typescript\n/**\n * Returns the initials of a given name.\n * If the name is composed of multiple words, it takes the first letter of each word.\n * If the name is empty, it returns an empty string.\n * @param name - The name to get the initials from.\n * @param maxLength - Optional parameter to specify the maximum number of characters to return. If not provided or if the resulting string is shorter than the specified length, it returns the full initials.\n * @returns The initials of the given name, or an empty string if the name is empty.\n */\nexport function getInitials({\n  name,\n  maxLength = 2,\n}: {\n  name: string;\n  maxLength?: number;\n}): string {\n  if (!name) return \"\";\n  const words = name.trim().split(/\\s+/);\n  let initials = \"\";\n\n  for (const word of words) {\n    initials += word[0].toUpperCase();\n    if (maxLength && initials.length >= maxLength) break;\n  }\n\n  return initials;\n}\n```\n\nThe `getInitials` function returns the initials of a given name. If the name is composed of multiple words, it takes the first letter of each word. If the name is empty, it returns an empty string.\n\n### Parameters\n\n- `name` (string): The name to get the initials from.\n- `maxLength` (number, optional): Optional parameter to specify the maximum number of characters to return. If not provided or if the resulting string is shorter than the specified length, it returns the full initials.\n\n### Returns\n\n- The initials of the given name, or an empty string if the name is empty.\n\n---\n\n### How to Use\n\nTo use the `getInitials` function, follow these steps:\n\n1. Import the function into your project:\n\n```typescript\nimport { getInitials } from \"./path/to/functions\";\n```\n\n2. Use the function in your code:\n\n```typescript\nconst initials = getInitials({ name: \"John Doe\", maxLength: 2 });\nconsole.log(\"Initials:\", initials);\n```\n\nMake sure to provide the necessary parameters and handle the returned initials as needed in your application.\n\n## getPropValueGetters\n\n```typescript\n/**\n * Retrieves the property value getter function based on the component type.\n * @param componentType - The component type.\n * @returns The property value getter function or undefined if not found.\n */\nexport function getPropValueGetters({\n  componentType,\n}: {\n  componentType: string;\n}) {\n  let STRforced = false;\n  const CTString = componentType\n    .split(/(?=[A-Z])/)\n    .filter((item) => {\n      const itemLowerCase = item.toLowerCase();\n      if (itemLowerCase === \"str\" || itemLowerCase === \"string\") {\n        STRforced = true;\n      }\n      return itemLowerCase !== \"str\" && itemLowerCase !== \"string\";\n    })\n    .join(\"-\")\n    .toLowerCase();\n\n  if (cssPropertyMappings[componentType] === undefined && !STRforced) {\n    return undefined;\n  } else if (alternative[CTString]) {\n    return alternative[CTString];\n  }\n\n  return (propValue: string): string => {\n    return `${CTString} : ${propValue};`;\n  };\n}\n\nexport enum cssPropertyMappings {}\n// List of CSS property mappings\n\nexport const alternative = {\n  // List of alternative property value getter functions\n};\n```\n\nThe `getPropValueGetters` function retrieves the property value getter function based on the component type.\n\n### Parameters\n\n- `componentType` (string): The component type.\n\n### Returns\n\n- The property value getter function or `undefined` if not found.\n\n---\n\n### How to Use\n\nTo use the `getPropValueGetters` function, follow these steps:\n\n1. Import the function into your project:\n\n```typescript\nimport { getPropValueGetters } from \"./path/to/functions\";\n```\n\n2. Use the function in your code:\n\n```typescript\nconst propValueGetter = getPropValueGetters({ componentType: \"borderColor\" });\nconsole.log(\"Property Value Getter:\", propValueGetter);\n```\n\nThe `propValueGetter` variable will contain the property value getter function for the specified component type. You can then use this function to generate the desired property value based on a provided value.\n\nNote: The `cssPropertyMappings` enum and `alternative` object in the code represent placeholders for the actual mappings and alternative property value getter functions. Make sure to update them with the appropriate values according to your application's needs.\n\nMake sure to provide the necessary parameters and handle the returned property value getter function as needed in your application.\n\n## getPropValueWithBreakpoint\n\n```typescript\n/**\n * Retrieves the property value with the specified breakpoint.\n * @param propValue - The property value.\n * @param breakPoint - The breakpoint to consider.\n * @returns The property value with the specified breakpoint or undefined.\n * @throws {Error} - If an invalid propValue or breakpoint is provided.\n */\nexport function getPropValueWithBreakpoint({\n  propValue,\n  breakPoint,\n}: getPropValueWithBreakpointT): string | undefined {\n  if (typeof propValue === \"string\") {\n    return propValue as string;\n  } else if (\n    typeof propValue === \"object\" &&\n    propValue !== null &&\n    breakPoint !== undefined\n  ) {\n    if (propValue[breakPoint]) return propValue[breakPoint] as string;\n\n    for (const e of Object.keys(breakpoints)) {\n      if (e <= breakPoint && propValue[e]) {\n        return propValue[e] as string;\n      }\n      if (e > breakPoint) {\n        return propValue[e] as string;\n      }\n    }\n    throw new Error(\n      `Invalid propValue for breakpoint ${breakPoint} and propValue ${propValue}`\n    );\n  } else if (typeof propValue === \"undefined\") {\n    const Location = new Error().stack?.split(\"\\n\")[2];\n    throw new Error(`Invalid propValue ${propValue} at ${Location}`);\n  }\n}\n```\n\nThe `getPropValueWithBreakpoint` function retrieves the property value with the specified breakpoint.\n\n### Parameters\n\n- `propValue` (string | object): The property value.\n- `breakPoint` (string): The breakpoint to consider.\n\n### Returns\n\n- The property value with the specified breakpoint or `undefined`.\n\n### Throws\n\n- `Error`: If an invalid `propValue` or `breakpoint` is provided.\n\n---\n\n### How to Use\n\nTo use the `getPropValueWithBreakpoint` function, follow these steps:\n\n1. Import the function into your project:\n\n```typescript\nimport { getPropValueWithBreakpoint } from \"./path/to/functions\";\n```\n\n2. Use the function in your code:\n\n```typescript\nconst propValue = { base: \"10px\", md: \"20px\", lg: \"30px\" };\nconst breakPoint = \"md\";\nconst result = getPropValueWithBreakpoint({ propValue, breakPoint });\nconsole.log(\"Result:\", result);\n```\n\nThe `result` variable will contain the property value with the specified breakpoint. If a value for the exact breakpoint exists in the `propValue` object, that value will be returned. Otherwise, the function will find the nearest breakpoint based on the provided `breakPoint` and return the corresponding value. If no value is found, `undefined` will be returned.\n\nNote: The `breakpoints` object in the code represents the breakpoints mapping. Make sure to update it with the appropriate breakpoints and values according to your application's needs.\n\nMake sure to provide the necessary parameters and handle the returned property value as needed in your application.\n\n## handleDragStart\n\n```typescript\n/**\n * Handles the drag start event.\n * @param onDragStart - The callback function to execute on drag start.\n * @param event - The drag start event object.\n * @param dragRef - The drag reference object.\n * @returns void\n */\nexport function handleDragStart({\n  onDragStart,\n  event,\n  dragRef,\n}: handleDragStartT): void {\n  event.stopPropagation();\n  if (onDragStart) onDragStart(event);\n  if (dragRef.current) {\n    event.dataTransfer.setData(\"text/plain\", dragRef.current.id);\n    event.dataTransfer.effectAllowed = \"move\";\n  }\n}\n```\n\nThe `handleDragStart` function is responsible for handling the drag start event.\n\n### Parameters\n\n- `onDragStart` (function): The callback function to execute on drag start.\n- `event` (DragEvent): The drag start event object.\n- `dragRef` (RefObject): The drag reference object.\n\n### Returns\n\n- `void`\n\n---\n\n### How to Use\n\nTo use the `handleDragStart` function, follow these steps:\n\n1. Import the function into your project:\n\n```typescript\nimport { handleDragStart } from \"./path/to/functions\";\n```\n\n2. Use the function in your code:\n\n```typescript\nfunction MyComponent() {\n  const dragRef = useRef(null);\n\n  const handleOnDragStart = (event) => {\n    console.log(\"Drag started!\");\n  };\n\n  const handleDragStartEvent = (event) => {\n    handleDragStart({\n      onDragStart: handleOnDragStart,\n      event,\n      dragRef,\n    });\n  };\n\n  return (\n    <div draggable=\"true\" ref={dragRef} onDragStart={handleDragStartEvent}>\n      Drag me!\n    </div>\n  );\n}\n```\n\nIn the example above, `handleDragStart` is used to handle the drag start event. The `handleOnDragStart` function is passed as the `onDragStart` callback, which will be executed when the drag starts. The `event` object and `dragRef` are also provided as parameters.\n\nEnsure that you have a draggable element and assign the `handleDragStartEvent` function to the `onDragStart` event handler.\n\nCustomize the implementation of `handleOnDragStart` to perform the desired actions when the drag starts.\n\nMake sure to provide the necessary parameters and handle the event accordingly in your application.\n\nSure! Here's the documentation for the `isDark` function:\n\n## isDark\n\n```typescript\n/**\n * Determines if a given color is considered \"dark\" or \"light\".\n * @param color - The color string to check.\n * @returns True if the color is considered \"dark\", false otherwise.\n * @throws An error if the color string is not in the format \"hsl(H, S%, L%)\", where H is the hue value, S is the saturation value, and L is the lightness value.\n */\nexport function isDark({ color }: { color: string }): boolean;\n```\n\nThe `isDark` function is a utility that helps determine if a given color is considered \"dark\" or \"light\" based on the HSL (Hue, Saturation, Lightness) color model. It takes a color string as input and returns `true` if the color is considered \"dark,\" and `false` otherwise.\n\n### Parameters\n\n- `color`: The color string to be evaluated. It should be in the format \"hsl(H, S%, L%)\", where H represents the hue value, S represents the saturation value, and L represents the lightness value.\n\n### Returns\n\n- A boolean value indicating whether the color is considered \"dark\" (`true`) or \"light\" (`false`).\n\n### Throws\n\n- An error is thrown if the provided color string does not adhere to the required format of \"hsl(H, S%, L%)\".\n\n### Usage\n\nTo use the `isDark` function, follow these steps:\n\n1. Import the `isDark` function into your file:\n\n```typescript\nimport { isDark } from \"isDark\";\n```\n\n2. Call the `isDark` function with the color string you want to evaluate:\n\n```typescript\nconst color = \"hsl(200, 50%, 20%)\";\nconst isColorDark = isDark({ color });\nconsole.log(isColorDark); // Output: true\n```\n\nIn the example above, the `isDark` function is used to determine if the color `'hsl(200, 50%, 20%)'` is considered \"dark\" or \"light.\" The function returns `true` since the color has a lightness value below 128, indicating a \"dark\" color.\n\nPlease ensure that the color string you provide follows the correct format of \"hsl(H, S%, L%)\" to avoid any errors.\n\nThe `isDark` function can be helpful in various scenarios where you need to assess the brightness of a color and make decisions based on its perceived darkness or lightness.\n\n## randomColor\n\n```typescript\n/**\n * Generates a random HSL color based on a given seed string.\n * @param seed - The seed string used to generate the color.\n * @returns A random HSL color in the format \"hsl(H, S%, L%)\", where H is the hue value, S is the saturation value, and L is the lightness value.\n */\nexport function randomColor({ seed }: { seed?: string } = {}): string;\n```\n\nThe `randomColor` function generates a random HSL (Hue, Saturation, Lightness) color based on a given seed string. It returns a string representation of the color in the format \"hsl(H, S%, L%)\", where H represents the hue value, S represents the saturation value, and L represents the lightness value.\n\n### Parameters\n\n- `seed` (optional): The seed string used to generate the random color. If not provided, a random seed string will be generated internally. The seed string helps ensure that the generated color remains consistent for a given seed.\n\n### Returns\n\n- A string representing a random HSL color in the format \"hsl(H, S%, L%)\".\n\n### Usage\n\nTo use the `randomColor` function, follow these steps:\n\n1. Import the `randomColor` function into your file:\n\n```typescript\nimport { randomColor } from \"randomColor\";\n```\n\n2. Call the `randomColor` function to generate a random color:\n\n```typescript\nconst color = randomColor();\nconsole.log(color); // Output: e.g., \"hsl(200, 100%, 70%)\"\n```\n\nIn the example above, the `randomColor` function is called without any arguments, generating a random HSL color. The function returns a string representing the color, such as \"hsl(200, 100%, 70%)\".\n\nIf you want to generate a consistent color based on a specific seed string, you can provide the `seed` parameter:\n\n```typescript\nconst seed = \"mySeed\";\nconst color = randomColor({ seed });\nconsole.log(color); // Output: e.g., \"hsl(120, 100%, 70%)\"\n```\n\nBy using the same `seed` value, you can ensure that the generated color remains the same across multiple invocations.\n\nThe `randomColor` function can be useful in scenarios where you need to generate random colors dynamically, such as for visualizations, user interfaces, or data representation.\n\nPlease note that the generated colors are pseudorandom and deterministic based on the provided seed.\n\n## RecoveryBreakPointValue\n\n```typescript\n/**\n * Retrieves the current breakpoint value from the global context.\n * @returns The current breakpoint value as a string.\n */\nexport function RecoveryBreakPointValue(): string;\n```\n\nThe `RecoveryBreakPointValue` function is responsible for retrieving the current breakpoint value from the global context. It returns the current breakpoint value as a string.\n\n### Usage\n\nTo use the `RecoveryBreakPointValue` function, follow these steps:\n\n1. Import the `RecoveryBreakPointValue` function and the necessary dependencies into your file:\n\n```typescript\nimport { useGlobalContext } from \"hooks\";\nimport { GlobalContext } from \"provider\";\n```\n\n2. Call the `RecoveryBreakPointValue` function to retrieve the current breakpoint value:\n\n```typescript\nconst breakpointValue = RecoveryBreakPointValue();\nconsole.log(breakpointValue); // Output: The current breakpoint value as a string\n```\n\nIn the example above, the `RecoveryBreakPointValue` function is called to retrieve the current breakpoint value from the global context. The function returns the breakpoint value as a string.\n\nPlease note that you need to ensure that the `useGlobalContext` hook is set up correctly and that the `GlobalContext` provider is properly configured to provide the breakpoint value to the `RecoveryBreakPointValue` function.\n\nIf the `breakpointValue` exists in the global context, it will be returned. Otherwise, the function will return the string \"base\" as a fallback value.\n\nThe `RecoveryBreakPointValue` function can be useful in scenarios where you need to access and utilize the current breakpoint value within your application logic or UI components.\n\nIt's important to have a proper understanding of the `useGlobalContext` hook and the `GlobalContext` provider to ensure the correct usage of the `RecoveryBreakPointValue` function.\n\n## safeJSON\n\n```typescript\n/**\n * Safely converts an object to a JSON string, handling circular references.\n * @param {unknown} obj - The object to convert to JSON.\n * @param {(key: string, value: unknown) => unknown} replacer - A function that alters the behavior of stringifying objects. Optional.\n * @param {string | number} indent - The number of spaces to use for indentation or a string to use for indentation. Optional.\n * @returns {string} - The JSON string representation of the object.\n */\nexport function safeJSON({ obj, replacer, indent }: safeJSONT): string;\n```\n\nThe `safeJSON` function is responsible for safely converting an object to a JSON string, handling circular references. It takes in an object `obj` to convert, an optional `replacer` function that can alter the behavior of stringifying objects, and an optional `indent` parameter that specifies the indentation format for the resulting JSON string.\n\n### Usage\n\nTo use the `safeJSON` function, follow these steps:\n\n1. Import the `safeJSON` function and the necessary dependencies into your file:\n\n```typescript\nimport { safeJSONT } from \"functions\";\n```\n\n2. Call the `safeJSON` function with the appropriate parameters:\n\n```typescript\nconst jsonObject = {\n  /* Your object here */\n};\nconst jsonString = safeJSON({ obj: jsonObject, replacer: null, indent: 2 });\nconsole.log(jsonString); // Output: The JSON string representation of the object\n```\n\nIn the example above, the `safeJSON` function is called to convert an object `jsonObject` to a JSON string. The `replacer` parameter is set to `null` and the `indent` parameter is set to `2` spaces for indentation. The function returns the JSON string representation of the object.\n\nThe `replacer` parameter allows you to provide a custom function that alters the behavior of stringifying objects. This can be useful for selectively including or excluding certain properties or transforming values before stringification. If not provided, the default behavior of `JSON.stringify` is used.\n\nThe `indent` parameter determines the indentation format of the resulting JSON string. It can be either a number specifying the number of spaces to use for indentation or a string (e.g., \"\\t\") to use for indentation. If not provided, the JSON string will not be indented.\n\nThe `safeJSON` function handles circular references in objects by replacing them with the string \"[Circular]\". This helps prevent errors that can occur when stringifying objects with circular references.\n\nPlease note that the `safeJSON` function relies on the `JSON.stringify` method to perform the stringification. Therefore, it supports the same data types and limitations as the native JSON.stringify method.\n\nEnsure that the `safeJSON` function is used when you need to convert objects to JSON strings and handle circular references in a safe manner.\n","license":"MIT","scripts":{"dev":"tsup src/index.ts* --format esm,cjs --watch --dts --external react","lint":"eslint \"src/**/*.ts*\"","build":"tsup-node src/index.ts* --format esm,cjs --dts --minify terser --external react","clean":"rm -rf .turbo node_modules dist packages CHANGELOG.md"},"_npmUser":{"name":"nahuelrosas","email":"nahuel.rosas@mi.unc.edu.ar"},"_resolved":"/tmp/18601f8f633053930ac5bd2bf01e8018/robust-ui-functions-0.0.0-dev-20230916012106.tgz","_integrity":"sha512-c+MYDWrLzWZm0mQhsMTIWnnF1fZECabxCQlG10iHFBDfPrQjsZVlu2Ht9Hg0ye1832PKwYA+/GWm29+z/j+ivg==","deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"8.19.4","description":"Robust UI functions","directories":{},"maintainers":[{"name":"nahuelrosas","email":"nahuel.rosas@mi.unc.edu.ar"}],"_nodeVersion":"16.20.2","dependencies":{"react":"^18.2.0","@robust-ui/theme":"0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tsup":"^7.2.0","eslint":"^8.49.0","typescript":"5.2.2","@types/react":"^18.2.21","@types/react-dom":"^18.2.7","@robust-ui/tsconfig":"0.2.0","eslint-config-robust":"0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/functions_0.0.0-dev-20230916012106_1694827276720_0.20214005315841566","host":"s3://npm-registry-packages"},"_id":"@robust-ui/functions@0.0.0-dev-20230916012106","version":"0.0.0-dev-20230916012106"}