@intlayer/design-system 8.4.7 → 8.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/esm/components/MarkDownRender/MarkDownRender.mjs +5 -1
  2. package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map +1 -1
  3. package/dist/esm/components/Table/Table.mjs +40 -3
  4. package/dist/esm/components/Table/Table.mjs.map +1 -1
  5. package/dist/esm/providers/ReactQueryProvider.mjs +8 -0
  6. package/dist/esm/providers/ReactQueryProvider.mjs.map +1 -1
  7. package/dist/types/components/Badge/index.d.ts +1 -1
  8. package/dist/types/components/Button/Button.d.ts +1 -1
  9. package/dist/types/components/Command/index.d.ts +1 -1
  10. package/dist/types/components/Container/index.d.ts +1 -1
  11. package/dist/types/components/Input/Checkbox.d.ts +1 -1
  12. package/dist/types/components/Link/Link.d.ts +1 -1
  13. package/dist/types/components/SwitchSelector/index.d.ts +1 -1
  14. package/dist/types/components/Table/Table.d.ts.map +1 -1
  15. package/dist/types/components/Tag/index.d.ts +1 -1
  16. package/dist/types/providers/ReactQueryProvider.d.ts.map +1 -1
  17. package/package.json +15 -15
package/dist/esm/components/MarkDownRender/MarkDownRender.mjs CHANGED
@@ -98,7 +98,11 @@ const createLinkRenderer = (locale) => {
98
98
  });
99
99
  };
100
100
  const PreRenderer = (props) => /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
101
- const TableRenderer = (props) => /* @__PURE__ */ jsx(Table, { ...props });
101
+ const TableRenderer = (props) => /* @__PURE__ */ jsx(Table, {
102
+ isRollable: true,
103
+ displayModal: true,
104
+ ...props
105
+ });
102
106
  const ThRenderer = ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
103
107
  className: cn("border-neutral border-b bg-neutral/10 p-4", className),
104
108
  ...props
package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n ({\n className,\n children,\n isDarkMode,\n ...rest\n }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n const decodedContent = content.replace(\n /&(?:amp;)?#(\\d+);/g,\n (_, code: string) => String.fromCharCode(parseInt(code, 10))\n );\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {decodedContent}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') ||\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n },\n (prevProps, nextProps) =>\n prevProps.children === nextProps.children &&\n prevProps.className === nextProps.className &&\n prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return function CodeWrapper(props: ComponentProps<'code'>) {\n return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={\n src?.includes('github.com')\n ? src\n ?.replace('github.com', 'raw.githubusercontent.com')\n .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n : src\n }\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n ({\n className,\n children,\n isDarkMode,\n ...rest\n }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n const decodedContent = content.replace(\n /&(?:amp;)?#(\\d+);/g,\n (_, code: string) => String.fromCharCode(parseInt(code, 10))\n );\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {decodedContent}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') ||\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n },\n (prevProps, nextProps) =>\n prevProps.children === nextProps.children &&\n prevProps.className === nextProps.className &&\n prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return function CodeWrapper(props: ComponentProps<'code'>) {\n return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={\n src?.includes('github.com')\n ? src\n ?.replace('github.com', 'raw.githubusercontent.com')\n .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n : src\n }\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table isRollable displayModal {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"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"}
package/dist/esm/components/Table/Table.mjs CHANGED
@@ -4,11 +4,14 @@ import { cn } from "../../utils/cn.mjs";
4
4
  import { Button } from "../Button/Button.mjs";
5
5
  import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
6
6
  import { Modal, ModalSize } from "../Modal/Modal.mjs";
7
- import { useState } from "react";
7
+ import { useEffect, useRef, useState } from "react";
8
8
  import { MoveDiagonal } from "lucide-react";
9
9
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  //#region src/components/Table/Table.tsx
12
+ const CHAR_WIDTH_REM = .55;
13
+ const MIN_WIDTH_REM = 5;
14
+ const MAX_WIDTH_REM = 30;
12
15
  /**
13
16
  * Table component that provides an enhanced table experience with modal expansion and collapsible content
14
17
  *
@@ -148,8 +151,39 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
148
151
  */
149
152
  const Table = ({ className, isRollable = false, displayModal, ...props }) => {
150
153
  const [isModalOpen, setIsModalOpen] = useState(false);
154
+ const tableRef = useRef(null);
155
+ const modalTableRef = useRef(null);
156
+ useEffect(() => {
157
+ if (!tableRef.current) return;
158
+ const colLengths = [];
159
+ Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
160
+ Array.from(row.children).forEach((cell, index) => {
161
+ const len = cell.textContent?.trim().length ?? 0;
162
+ if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
163
+ });
164
+ });
165
+ const applyToTable = (table) => {
166
+ const rows = Array.from(table.querySelectorAll("tr"));
167
+ if (rows.length === 0) return;
168
+ const applyColStyle = (el, index) => {
169
+ const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
170
+ el.style.minWidth = `${minRem}rem`;
171
+ el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
172
+ };
173
+ table.querySelectorAll("th").forEach((th, index) => {
174
+ applyColStyle(th, index);
175
+ });
176
+ rows.forEach((row) => {
177
+ row.querySelectorAll("td").forEach((td, index) => {
178
+ applyColStyle(td, index);
179
+ });
180
+ });
181
+ };
182
+ applyToTable(tableRef.current);
183
+ if (modalTableRef.current) applyToTable(modalTableRef.current);
184
+ }, [props.children, isModalOpen]);
151
185
  return /* @__PURE__ */ jsxs("div", {
152
- className: "relative",
186
+ className: "relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
153
187
  children: [
154
188
  displayModal && /* @__PURE__ */ jsx("div", {
155
189
  className: "sticky top-48 z-10",
@@ -170,7 +204,8 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
170
204
  isRollable,
171
205
  className: "max-w-full overflow-x-auto",
172
206
  children: /* @__PURE__ */ jsx("table", {
173
- className: cn("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
207
+ ref: tableRef,
208
+ className: cn("w-full table-auto text-left", className),
174
209
  ...props
175
210
  })
176
211
  }),
@@ -179,9 +214,11 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
179
214
  onClose: () => setIsModalOpen(false),
180
215
  size: ModalSize.XL,
181
216
  hasCloseButton: true,
217
+ isScrollable: true,
182
218
  children: isModalOpen ? /* @__PURE__ */ jsx("div", {
183
219
  className: "grid",
184
220
  children: /* @__PURE__ */ jsx("table", {
221
+ ref: modalTableRef,
185
222
  className: cn("min-w-full max-w-full table-auto text-left", className),
186
223
  ...props
187
224
  })
package/dist/esm/components/Table/Table.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,WAAW,GACT,4EACA,UACD;KACD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
1
+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined || len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, [props.children, isModalOpen]);\n\n return (\n <div className=\"relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n ref={tableRef}\n className={cn('w-full table-auto text-left', className)}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n ref={modalTableRef}\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2ItB,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAErD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GAAG,+BAA+B,UAAU;KACvD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
package/dist/esm/providers/ReactQueryProvider.mjs CHANGED
@@ -27,10 +27,18 @@ const useToastEvents = () => {
27
27
  [(() => {
28
28
  try {
29
29
  if (typeof error === "string") return JSON.parse(error);
30
+ if (error instanceof Error) return JSON.parse(error.message);
30
31
  } catch (_) {}
31
32
  return error;
32
33
  })()].flat().forEach((err) => {
33
34
  const apiError = err?.error ?? err;
35
+ if (apiError?.code === "RATE_LIMIT_EXCEEDED_UNAUTHENTICATED") {
36
+ toast({
37
+ title: apiError.message,
38
+ variant: "error"
39
+ });
40
+ return;
41
+ }
34
42
  toast({
35
43
  title: formatErrorCode(apiError?.title ?? err?.title ?? "Error"),
36
44
  description: apiError?.message ?? err?.message ?? String(apiError ?? "An error occurred"),
package/dist/esm/providers/ReactQueryProvider.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactQueryProvider.mjs","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type DefaultOptions,\n MutationCache,\n QueryClient,\n QueryClientProvider,\n type QueryKey,\n type UseMutationOptions,\n} from '@tanstack/react-query';\nimport { type FC, type PropsWithChildren, useRef } from 'react';\nimport { useToast } from '../components/Toaster';\n\nconst defaultQueryOptions: DefaultOptions = {\n queries: {\n retry: 1,\n // Keep data fresh for 30 seconds to avoid unnecessary refetches during navigation\n staleTime: 30 * 1000,\n // Give the cache a little breathing room across route transitions:\n gcTime: 5 * 60 * 1000, // e.g. 5 minutes\n // Only refetch on mount if data is stale (not every single mount)\n refetchOnMount: true,\n refetchOnWindowFocus: false,\n refetchOnReconnect: false,\n },\n mutations: {\n retry: 0,\n },\n};\n\nconst SHOW_ERROR_CODE = false;\n\ndeclare module '@tanstack/react-query' {\n interface Register {\n mutationMeta: {\n onSuccess?: UseMutationOptions['onSuccess'];\n onError?: UseMutationOptions['onError'];\n invalidateQueries?: QueryKey[];\n resetQueries?: QueryKey[];\n };\n }\n}\n\nconst formatErrorCode = (errorCode: string) => errorCode.split('_').join(' ');\n\n/**\n * Hook to handle error logging and toast notifications\n */\nconst useToastEvents = () => {\n const { toast } = useToast();\n\n const onError: MutationCache['config']['onError'] = (error: any) => {\n const parsed = (() => {\n try {\n if (typeof error === 'string') return JSON.parse(error);\n } catch (_) {}\n return error;\n })();\n\n [parsed].flat().forEach((err: any) => {\n // Check for nested error object (standard in your API responses: { statusCode, error: { ... } })\n const apiError = err?.error ?? err;\n\n toast({\n title: formatErrorCode(\n SHOW_ERROR_CODE\n ? (apiError?.code ?? err?.code)\n : (apiError?.title ?? err?.title ?? 'Error')\n ),\n description:\n apiError?.message ??\n err?.message ??\n String(apiError ?? 'An error occurred'),\n variant: 'error',\n });\n });\n };\n\n const onSuccess: MutationCache['config']['onSuccess'] = (data: any) => {\n if (data?.error) {\n toast({\n title: formatErrorCode(data.error.title ?? data.error.code ?? 'Error'),\n description:\n data.error.message ?? data.error.code ?? 'An error occurred',\n variant: 'error',\n });\n }\n\n if (data?.message) {\n toast({\n title: data.message,\n description: data.description,\n variant: 'success',\n });\n }\n };\n\n return {\n onError,\n onSuccess,\n };\n};\n\nexport const ReactQueryProvider: FC<PropsWithChildren> = ({ children }) => {\n const { onError, onSuccess } = useToastEvents();\n const clientRef = useRef<QueryClient>(null);\n\n if (!clientRef.current) {\n const mutationCache = new MutationCache({\n onSuccess,\n onError,\n onSettled: (_data, _error, _variables, _context, mutation) => {\n if (mutation.meta?.invalidateQueries) {\n mutation.meta.invalidateQueries.forEach((queryKey) => {\n queryClient.invalidateQueries({\n queryKey,\n });\n });\n }\n\n if (mutation.meta?.resetQueries) {\n mutation.meta.resetQueries.forEach((queryKey) => {\n queryClient.resetQueries({\n queryKey,\n });\n });\n }\n },\n });\n\n const queryClient = new QueryClient({\n defaultOptions: defaultQueryOptions,\n mutationCache,\n });\n clientRef.current = queryClient;\n }\n\n return (\n <QueryClientProvider client={clientRef.current}>\n {children}\n </QueryClientProvider>\n );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,sBAAsC;CAC1C,SAAS;EACP,OAAO;EAEP,WAAW,KAAK;EAEhB,QAAQ,MAAS;EAEjB,gBAAgB;EAChB,sBAAsB;EACtB,oBAAoB;EACrB;CACD,WAAW,EACT,OAAO,GACR;CACF;AAeD,MAAM,mBAAmB,cAAsB,UAAU,MAAM,IAAI,CAAC,KAAK,IAAI;;;;AAK7E,MAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,UAAU;CAE5B,MAAM,WAA+C,UAAe;AAQlE,UAPsB;AACpB,OAAI;AACF,QAAI,OAAO,UAAU,SAAU,QAAO,KAAK,MAAM,MAAM;YAChD,GAAG;AACZ,UAAO;MACL,CAEI,CAAC,MAAM,CAAC,SAAS,QAAa;GAEpC,MAAM,WAAW,KAAK,SAAS;AAE/B,SAAM;IACJ,OAAO,gBAGA,UAAU,SAAS,KAAK,SAAS,QACvC;IACD,aACE,UAAU,WACV,KAAK,WACL,OAAO,YAAY,oBAAoB;IACzC,SAAS;IACV,CAAC;IACF;;CAGJ,MAAM,aAAmD,SAAc;AACrE,MAAI,MAAM,MACR,OAAM;GACJ,OAAO,gBAAgB,KAAK,MAAM,SAAS,KAAK,MAAM,QAAQ,QAAQ;GACtE,aACE,KAAK,MAAM,WAAW,KAAK,MAAM,QAAQ;GAC3C,SAAS;GACV,CAAC;AAGJ,MAAI,MAAM,QACR,OAAM;GACJ,OAAO,KAAK;GACZ,aAAa,KAAK;GAClB,SAAS;GACV,CAAC;;AAIN,QAAO;EACL;EACA;EACD;;AAGH,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,EAAE,SAAS,cAAc,gBAAgB;CAC/C,MAAM,YAAY,OAAoB,KAAK;AAE3C,KAAI,CAAC,UAAU,SAAS;EAuBtB,MAAM,cAAc,IAAI,YAAY;GAClC,gBAAgB;GAChB,eAxBoB,IAAI,cAAc;IACtC;IACA;IACA,YAAY,OAAO,QAAQ,YAAY,UAAU,aAAa;AAC5D,SAAI,SAAS,MAAM,kBACjB,UAAS,KAAK,kBAAkB,SAAS,aAAa;AACpD,kBAAY,kBAAkB,EAC5B,UACD,CAAC;OACF;AAGJ,SAAI,SAAS,MAAM,aACjB,UAAS,KAAK,aAAa,SAAS,aAAa;AAC/C,kBAAY,aAAa,EACvB,UACD,CAAC;OACF;;IAGP,CAAC;GAKD,CAAC;AACF,YAAU,UAAU;;AAGtB,QACE,oBAAC,qBAAD;EAAqB,QAAQ,UAAU;EACpC;EACmB"}
1
+ {"version":3,"file":"ReactQueryProvider.mjs","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type DefaultOptions,\n MutationCache,\n QueryClient,\n QueryClientProvider,\n type QueryKey,\n type UseMutationOptions,\n} from '@tanstack/react-query';\nimport { type FC, type PropsWithChildren, useRef } from 'react';\nimport { useToast } from '../components/Toaster';\n\nconst defaultQueryOptions: DefaultOptions = {\n queries: {\n retry: 1,\n // Keep data fresh for 30 seconds to avoid unnecessary refetches during navigation\n staleTime: 30 * 1000,\n // Give the cache a little breathing room across route transitions:\n gcTime: 5 * 60 * 1000, // e.g. 5 minutes\n // Only refetch on mount if data is stale (not every single mount)\n refetchOnMount: true,\n refetchOnWindowFocus: false,\n refetchOnReconnect: false,\n },\n mutations: {\n retry: 0,\n },\n};\n\nconst SHOW_ERROR_CODE = false;\n\ndeclare module '@tanstack/react-query' {\n interface Register {\n mutationMeta: {\n onSuccess?: UseMutationOptions['onSuccess'];\n onError?: UseMutationOptions['onError'];\n invalidateQueries?: QueryKey[];\n resetQueries?: QueryKey[];\n };\n }\n}\n\nconst formatErrorCode = (errorCode: string) => errorCode.split('_').join(' ');\n\n/**\n * Hook to handle error logging and toast notifications\n */\nconst useToastEvents = () => {\n const { toast } = useToast();\n\n const onError: MutationCache['config']['onError'] = (error: any) => {\n const parsed = (() => {\n try {\n if (typeof error === 'string') return JSON.parse(error);\n if (error instanceof Error) return JSON.parse(error.message);\n } catch (_) {}\n return error;\n })();\n\n [parsed].flat().forEach((err: any) => {\n // Check for nested error object (standard in your API responses: { statusCode, error: { ... } })\n const apiError = err?.error ?? err;\n\n if (apiError?.code === 'RATE_LIMIT_EXCEEDED_UNAUTHENTICATED') {\n toast({\n title: apiError.message,\n variant: 'error',\n });\n return;\n }\n\n toast({\n title: formatErrorCode(\n SHOW_ERROR_CODE\n ? (apiError?.code ?? err?.code)\n : (apiError?.title ?? err?.title ?? 'Error')\n ),\n description:\n apiError?.message ??\n err?.message ??\n String(apiError ?? 'An error occurred'),\n variant: 'error',\n });\n });\n };\n\n const onSuccess: MutationCache['config']['onSuccess'] = (data: any) => {\n if (data?.error) {\n toast({\n title: formatErrorCode(data.error.title ?? data.error.code ?? 'Error'),\n description:\n data.error.message ?? data.error.code ?? 'An error occurred',\n variant: 'error',\n });\n }\n\n if (data?.message) {\n toast({\n title: data.message,\n description: data.description,\n variant: 'success',\n });\n }\n };\n\n return {\n onError,\n onSuccess,\n };\n};\n\nexport const ReactQueryProvider: FC<PropsWithChildren> = ({ children }) => {\n const { onError, onSuccess } = useToastEvents();\n const clientRef = useRef<QueryClient>(null);\n\n if (!clientRef.current) {\n const mutationCache = new MutationCache({\n onSuccess,\n onError,\n onSettled: (_data, _error, _variables, _context, mutation) => {\n if (mutation.meta?.invalidateQueries) {\n mutation.meta.invalidateQueries.forEach((queryKey) => {\n queryClient.invalidateQueries({\n queryKey,\n });\n });\n }\n\n if (mutation.meta?.resetQueries) {\n mutation.meta.resetQueries.forEach((queryKey) => {\n queryClient.resetQueries({\n queryKey,\n });\n });\n }\n },\n });\n\n const queryClient = new QueryClient({\n defaultOptions: defaultQueryOptions,\n mutationCache,\n });\n clientRef.current = queryClient;\n }\n\n return (\n <QueryClientProvider client={clientRef.current}>\n {children}\n </QueryClientProvider>\n );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,sBAAsC;CAC1C,SAAS;EACP,OAAO;EAEP,WAAW,KAAK;EAEhB,QAAQ,MAAS;EAEjB,gBAAgB;EAChB,sBAAsB;EACtB,oBAAoB;EACrB;CACD,WAAW,EACT,OAAO,GACR;CACF;AAeD,MAAM,mBAAmB,cAAsB,UAAU,MAAM,IAAI,CAAC,KAAK,IAAI;;;;AAK7E,MAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,UAAU;CAE5B,MAAM,WAA+C,UAAe;AASlE,UARsB;AACpB,OAAI;AACF,QAAI,OAAO,UAAU,SAAU,QAAO,KAAK,MAAM,MAAM;AACvD,QAAI,iBAAiB,MAAO,QAAO,KAAK,MAAM,MAAM,QAAQ;YACrD,GAAG;AACZ,UAAO;MACL,CAEI,CAAC,MAAM,CAAC,SAAS,QAAa;GAEpC,MAAM,WAAW,KAAK,SAAS;AAE/B,OAAI,UAAU,SAAS,uCAAuC;AAC5D,UAAM;KACJ,OAAO,SAAS;KAChB,SAAS;KACV,CAAC;AACF;;AAGF,SAAM;IACJ,OAAO,gBAGA,UAAU,SAAS,KAAK,SAAS,QACvC;IACD,aACE,UAAU,WACV,KAAK,WACL,OAAO,YAAY,oBAAoB;IACzC,SAAS;IACV,CAAC;IACF;;CAGJ,MAAM,aAAmD,SAAc;AACrE,MAAI,MAAM,MACR,OAAM;GACJ,OAAO,gBAAgB,KAAK,MAAM,SAAS,KAAK,MAAM,QAAQ,QAAQ;GACtE,aACE,KAAK,MAAM,WAAW,KAAK,MAAM,QAAQ;GAC3C,SAAS;GACV,CAAC;AAGJ,MAAI,MAAM,QACR,OAAM;GACJ,OAAO,KAAK;GACZ,aAAa,KAAK;GAClB,SAAS;GACV,CAAC;;AAIN,QAAO;EACL;EACA;EACD;;AAGH,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,EAAE,SAAS,cAAc,gBAAgB;CAC/C,MAAM,YAAY,OAAoB,KAAK;AAE3C,KAAI,CAAC,UAAU,SAAS;EAuBtB,MAAM,cAAc,IAAI,YAAY;GAClC,gBAAgB;GAChB,eAxBoB,IAAI,cAAc;IACtC;IACA;IACA,YAAY,OAAO,QAAQ,YAAY,UAAU,aAAa;AAC5D,SAAI,SAAS,MAAM,kBACjB,UAAS,KAAK,kBAAkB,SAAS,aAAa;AACpD,kBAAY,kBAAkB,EAC5B,UACD,CAAC;OACF;AAGJ,SAAI,SAAS,MAAM,aACjB,UAAS,KAAK,aAAa,SAAS,aAAa;AAC/C,kBAAY,aAAa,EACvB,UACD,CAAC;OACF;;IAGP,CAAC;GAKD,CAAC;AACF,YAAU,UAAU;;AAGtB,QACE,oBAAC,qBAAD;EAAqB,QAAQ,UAAU;EACpC;EACmB"}
package/dist/types/components/Badge/index.d.ts CHANGED
@@ -43,7 +43,7 @@ declare enum BadgeSize {
43
43
  * @description Defines the styling variants for different badge combinations
44
44
  */
45
45
  declare const badgeVariants: (props?: {
46
- color?: "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "success";
46
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
47
47
  variant?: "none" | "default" | "outline" | "hoverable";
48
48
  size?: "sm" | "md" | "lg";
49
49
  } & class_variance_authority_types0.ClassProp) => string;
package/dist/types/components/Button/Button.d.ts CHANGED
@@ -61,7 +61,7 @@ declare enum ButtonTextAlign {
61
61
  */
62
62
  declare const buttonVariants: (props?: {
63
63
  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
64
- color?: "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "success";
64
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "error" | "success" | "custom";
65
65
  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
66
66
  variant?: "input" | "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
67
67
  textAlign?: "left" | "center" | "right";
package/dist/types/components/Command/index.d.ts CHANGED
@@ -29,7 +29,7 @@ declare const Command: {
29
29
  ref?: React.Ref<HTMLInputElement>;
30
30
  } & {
31
31
  asChild?: boolean;
32
- }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
32
+ }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
33
33
  value?: string;
34
34
  onValueChange?: (search: string) => void;
35
35
  } & react.RefAttributes<HTMLInputElement>>;
package/dist/types/components/Container/index.d.ts CHANGED
@@ -14,7 +14,7 @@ declare const containerVariants: (props?: {
14
14
  separator?: "both" | "without" | "x" | "y";
15
15
  border?: "none" | "with";
16
16
  borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "card" | "warning";
17
- background?: "none" | "with" | "hoverable";
17
+ background?: "none" | "hoverable" | "with";
18
18
  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
19
19
  } & class_variance_authority_types0.ClassProp) => string;
20
20
  /** Available rounded corner sizes for the container */
package/dist/types/components/Input/Checkbox.d.ts CHANGED
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
6
6
  declare const checkboxVariants: (props?: {
7
7
  variant?: "default";
8
8
  size?: "xs" | "sm" | "md" | "lg";
9
- color?: "error" | "success" | "custom" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
9
+ color?: "error" | "success" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "custom";
10
10
  validationStyleEnabled?: "enabled" | "disabled";
11
11
  } & class_variance_authority_types0.ClassProp) => string;
12
12
  declare enum CheckboxSize {
package/dist/types/components/Link/Link.d.ts CHANGED
@@ -55,7 +55,7 @@ declare enum LinkUnderlined {
55
55
  declare const linkVariants: (props?: {
56
56
  variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
57
57
  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
58
- color?: "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "success";
58
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom";
59
59
  size?: "sm" | "md" | "lg" | "xl" | "custom";
60
60
  underlined?: boolean | LinkUnderlined.DEFAULT;
61
61
  } & class_variance_authority_types0.ClassProp) => string;
package/dist/types/components/SwitchSelector/index.d.ts CHANGED
@@ -29,7 +29,7 @@ declare enum SwitchSelectorColor {
29
29
  TEXT = "text"
30
30
  }
31
31
  declare const switchSelectorVariant: (props?: {
32
- color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text";
32
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
33
33
  disabled?: boolean;
34
34
  } & class_variance_authority_types0.ClassProp) => string;
35
35
  declare enum SwitchSelectorSize {
package/dist/types/components/Table/Table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"mappings":";;;;;AAI+D;;;;;;;;;;AAkM/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA9IK,UAAA,GAAa,cAAA,CAAe,gBAAA;EAC/B,UAAA;EACA,YAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4IW,KAAA,EAAO,EAAA,CAAG,UAAA"}
1
+ {"version":3,"file":"Table.d.ts","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"mappings":";;;;;AAUe;;;;;;;;;;AAuMf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAnJK,UAAA,GAAa,cAAA,CAAe,gBAAA;EAC/B,UAAA;EACA,YAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiJW,KAAA,EAAO,EAAA,CAAG,UAAA"}
package/dist/types/components/Tag/index.d.ts CHANGED
@@ -186,7 +186,7 @@ declare enum TagBackground {
186
186
  }
187
187
  declare const containerVariants: (props?: {
188
188
  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
189
- color?: "error" | "primary" | "neutral" | "text" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
189
+ color?: "text" | "primary" | "neutral" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
190
190
  size?: "xs" | "sm" | "md" | "lg" | "xl";
191
191
  border?: "none" | "with";
192
192
  background?: "none" | "with";
package/dist/types/providers/ReactQueryProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactQueryProvider.d.ts","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"mappings":";;;;;YAiCY,QAAA;IACR,YAAA;MACE,SAAA,GAAY,kBAAA;MACZ,OAAA,GAAU,kBAAA;MACV,iBAAA,GAAoB,QAAA;MACpB,YAAA,GAAe,QAAA;IAAA;EAAA;AAAA;AAAA,cAiER,kBAAA,EAAoB,EAAA,CAAG,iBAAA"}
1
+ {"version":3,"file":"ReactQueryProvider.d.ts","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"mappings":";;;;;YAiCY,QAAA;IACR,YAAA;MACE,SAAA,GAAY,kBAAA;MACZ,OAAA,GAAU,kBAAA;MACV,iBAAA,GAAoB,QAAA;MACpB,YAAA,GAAe,QAAA;IAAA;EAAA;AAAA;AAAA,cA0ER,kBAAA,EAAoB,EAAA,CAAG,iBAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intlayer/design-system",
3
- "version": "8.4.7",
3
+ "version": "8.4.9",
4
4
  "private": false,
5
5
  "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
6
6
  "keywords": [
@@ -106,12 +106,12 @@
106
106
  "dependencies": {
107
107
  "@better-auth/passkey": "1.5.5",
108
108
  "@better-auth/sso": "1.5.5",
109
- "@intlayer/api": "8.4.7",
110
- "@intlayer/config": "8.4.7",
111
- "@intlayer/core": "8.4.7",
112
- "@intlayer/dictionaries-entry": "8.4.7",
113
- "@intlayer/editor-react": "8.4.7",
114
- "@intlayer/types": "8.4.7",
109
+ "@intlayer/api": "8.4.9",
110
+ "@intlayer/config": "8.4.9",
111
+ "@intlayer/core": "8.4.9",
112
+ "@intlayer/dictionaries-entry": "8.4.9",
113
+ "@intlayer/editor-react": "8.4.9",
114
+ "@intlayer/types": "8.4.9",
115
115
  "@radix-ui/react-dialog": "1.1.15",
116
116
  "@radix-ui/react-select": "2.2.6",
117
117
  "@radix-ui/react-slot": "1.2.4",
@@ -120,12 +120,12 @@
120
120
  "better-auth": "1.5.5",
121
121
  "class-variance-authority": "0.7.1",
122
122
  "cmdk": "1.1.1",
123
- "react-intlayer": "8.4.7",
123
+ "react-intlayer": "8.4.9",
124
124
  "rollup-preserve-directives": "1.1.3",
125
125
  "zod": "4.3.6"
126
126
  },
127
127
  "devDependencies": {
128
- "@intlayer/backend": "8.4.7",
128
+ "@intlayer/backend": "8.4.9",
129
129
  "@shikijs/transformers": "4.0.2",
130
130
  "@storybook/addon-a11y": "8.6.14",
131
131
  "@storybook/addon-essentials": "8.6.14",
@@ -154,14 +154,14 @@
154
154
  "@utils/ts-config": "1.0.4",
155
155
  "@utils/ts-config-types": "1.0.4",
156
156
  "fast-glob": "3.3.3",
157
- "intlayer": "8.4.7",
157
+ "intlayer": "8.4.9",
158
158
  "rimraf": "6.1.3",
159
159
  "shiki": "4.0.2",
160
160
  "storybook": "8.6.17",
161
161
  "tsdown": "0.21.4",
162
162
  "typescript": "5.9.3",
163
163
  "vite": "8.0.1",
164
- "vite-intlayer": "8.4.7",
164
+ "vite-intlayer": "8.4.9",
165
165
  "vite-plugin-dts": "4.5.4",
166
166
  "vite-tsconfig-paths": "6.1.1",
167
167
  "vitest": "4.1.0"
@@ -169,20 +169,20 @@
169
169
  "peerDependencies": {
170
170
  "@better-fetch/fetch": "1.1.21",
171
171
  "@hookform/resolvers": "5.2.2",
172
- "@intlayer/backend": "8.4.7",
172
+ "@intlayer/backend": "8.4.9",
173
173
  "@monaco-editor/react": "4.7.0",
174
174
  "@shikijs/transformers": "4.0.2",
175
- "@tanstack/react-query": "5.91.3",
175
+ "@tanstack/react-query": "5.94.5",
176
176
  "@tanstack/react-query-devtools": "5.91.3",
177
177
  "clsx": "2.1.1",
178
178
  "framer-motion": "12.38.0",
179
179
  "fuse.js": "7.1.0",
180
- "intlayer": "8.4.7",
180
+ "intlayer": "8.4.9",
181
181
  "lucide-react": "0.577.0",
182
182
  "react": ">=16.0.0",
183
183
  "react-dom": ">=16.0.0",
184
184
  "react-hook-form": "7.71.2",
185
- "react-intlayer": "8.4.7",
185
+ "react-intlayer": "8.4.9",
186
186
  "shiki": "4.0.2",
187
187
  "tailwind-merge": "3.5.0",
188
188
  "tailwindcss": "4.2.1"