npm - @intlayer/design-system - Versions diffs - 9.4.4 → 9.5.0 - Mend

@intlayer/design-system 9.4.4 → 9.5.0

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 (80) hide show

package/README.md CHANGED Viewed

@@ -66,8 +66,6 @@ With **per-locale content files**, **TypeScript autocompletion**, **tree-shakabl
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700">                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                   |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700">                    | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer compat adapters](https://intlayer.org/doc/compatibility) |
----
 ## 📦 Installation
 Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.

package/dist/esm/api/index.mjs CHANGED Viewed

@@ -1,12 +1,13 @@
 import { useAiAPI, useAnalyticsAPI, useAssetAPI, useAuditAPI, useBitbucketAPI, useDictionaryAPI, useEditorAPI, useEnvironmentAPI, useGithubAPI, useGitlabAPI, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useNewsletterAPI, useOAuthAPI, useOrganizationAPI, useProjectAPI, useReviewerAPI, useSearchAPI, useShowcaseProjectAPI, useStripeAPI, useTagAPI, useTranslateAPI, useUserAPI } from "./useIntlayerAPI.mjs";
+import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
 import { useSession } from "./useAuth/useSession.mjs";
 import { useAuth } from "./useAuth/useAuth.mjs";
+import { useUser } from "./useUser/index.mjs";
 import { useAskDocQuestion, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAutocomplete, useChat, useCustomQuery, useGetAIStats, useTranslateJSONDeclaration } from "./hooks/ai.mjs";
 import { useGetAnalyticsAudience, useGetContentStats, useGetExperimentResults } from "./hooks/analytics.mjs";
 import { useDeleteAsset, useGetAssetById, useGetAssets, useUpdateAsset, useUploadAsset } from "./hooks/asset.mjs";
 import { useAuditScan, useGetRecursiveAuditStatus, useStartRecursiveAudit } from "./hooks/audit.mjs";
-import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos } from "./hooks/bitbucket.mjs";
 import { useAddDictionary, useDeleteDictionary, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useInfiniteGetDictionaries, usePushDictionaries, useUpdateDictionary } from "./hooks/dictionary.mjs";
 import { useGetDiscussions, useGetDiscussionsData } from "./hooks/discussions.mjs";
@@ -24,6 +25,5 @@ import { useAcceptAffiliateInvitation, useCancelSubscription, useCreatePortalSes
 import { useAddTag, useDeleteTag, useGetTags, useUpdateTag } from "./hooks/tag.mjs";
 import { useFillAllTranslations, usePauseTranslationJob, useResumeTranslationJob, useStopTranslationJob } from "./hooks/translate.mjs";
 import { useCreateUser, useDeleteUser, useGetUserById, useGetUsers, useUpdateUser, useUploadUserAvatar } from "./hooks/user.mjs";
-import { useUser } from "./useUser/index.mjs";
 export { useAcceptAffiliateInvitation, useAddDictionary, useAddEnvironment, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAiAPI, useAnalyticsAPI, useAskDocQuestion, useAskResetPassword, useAssetAPI, useAuditAPI, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAPI, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useContactReviewer, useCreateMission, useCreatePortalSession, useCreatePromoCode, useCreateUser, useCustomQuery, useDeleteAccessKey, useDeleteAsset, useDeleteDictionary, useDeleteEnvironment, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeletePromoCode, useDeleteReviewerProfile, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDictionaryAPI, useDisableTwoFactor, useEditorAPI, useEnableTwoFactor, useEnvironmentAPI, useEstimateMission, useFillAllTranslations, useGetAIStats, useGetAdminReviewers, useGetAffiliate, useGetAffiliateAccountSession, useGetAffiliateById, useGetAffiliateInvitation, useGetAffiliateInvitations, useGetAffiliateOnboardingLink, useGetAffiliatePromoCode, useGetAffiliateStats, useGetAffiliates, useGetAnalyticsAudience, useGetAssetById, useGetAssets, useGetCIConfig, useGetChatHistory, useGetContentStats, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetExperimentResults, useGetInvoices, useGetMissionById, useGetMyMissions, useGetMyReviewerProfile, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjectInsights, useGetProjects, useGetPromoCodeById, useGetPromoCodes, useGetRecursiveAuditStatus, useGetReviewerById, useGetReviewerMarketplace, useGetReviewerPriceDistribution, useGetReviewerReviews, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAPI, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAPI, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useGrantAffiliateAccess, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useMigrateEnvironment, useNewsletterAPI, useOAuth2, useOAuthAPI, useOrganizationAPI, usePauseTranslationJob, useProjectAPI, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useRefreshAccessKey, useRegister, useRegisterAsReviewer, useRegisterSSO, useResetPassword, useResetToProductionEnvironment, useResumeTranslationJob, useReviewerAPI, useSearchAPI, useSearchDoc, useSelectEnvironment, useSelectOrganization, useSelectProject, useSendAffiliateInvitation, useSendReviewerMessage, useSession, useShowcaseProjectAPI, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useStripeAPI, useSubmitReview, useSubmitShowcaseProject, useSubscribeToNewsletter, useTagAPI, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateAPI, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateAffiliateStatus, useUpdateAsset, useUpdateDictionary, useUpdateEnvironment, useUpdateMemberAccess, useUpdateMissionStatus, useUpdateOrganization, useUpdateOrganizationMailerConfig, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdatePromoCode, useUpdateReviewerProfile, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadAsset, useUploadReviewerCoverPicture, useUploadReviewerMainPicture, useUploadUserAvatar, useUser, useUserAPI, useValidateReviewerProfile, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };

package/dist/esm/api/useAuth/useOAuth2.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
 import { useIsAuthFetchEnabled } from "../../providers/DeferredAuthProvider.mjs";
-import { useQuery } from "@tanstack/react-query";
 import { editor } from "@intlayer/config/built";
+import { useQuery } from "@tanstack/react-query";
 import { getOAuthAPI } from "@intlayer/api";
 import { useConfiguration } from "@intlayer/editor-react";
 import { defu } from "defu";

package/dist/esm/api/useAuth/useSession.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
-import { useIsAuthFetchEnabled } from "../../providers/DeferredAuthProvider.mjs";
 import { getAuthAPI } from "../../libs/auth.mjs";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useIsAuthFetchEnabled } from "../../providers/DeferredAuthProvider.mjs";
 import { editor } from "@intlayer/config/built";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useConfiguration } from "@intlayer/editor-react";
 //#region src/api/useAuth/useSession.ts

package/dist/esm/api/useUser/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useAuth } from "../useAuth/useAuth.mjs";
 import { useLogout } from "../hooks/auth.mjs";
+import { useAuth } from "../useAuth/useAuth.mjs";
 //#region src/api/useUser/index.ts
 const useUser = () => {

package/dist/esm/components/Badge/index.mjs CHANGED Viewed

@@ -10,8 +10,6 @@ import { cva } from "class-variance-authority";
 const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
 	variants: {
 		color: {
-			primary: "border-primary bg-primary text-primary hover:bg-primary-500",
-			secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
 			success: "border-success bg-success text-success hover:bg-success-500",
 			error: "border-error bg-error text-error hover:bg-error-500",
 			neutral: "border-neutral bg-neutral text-muted-foreground hover:bg-neutral-600",
@@ -34,7 +32,7 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
 	},
 	defaultVariants: {
 		variant: "default",
-		color: "primary",
+		color: "text",
 		size: "md"
 	}
 });
@@ -63,7 +61,7 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
 * </Badge>
 * ```
 */
-const Badge = ({ className, variant = "default", color = "primary", size = "md", children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel, ...props }) => {
+const Badge = ({ className, variant = "default", color = "text", size = "md", children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel, ...props }) => {
 	const Component = clickable ? "button" : "span";
 	const handleKeyDown = (event) => {
 		if (clickable && onClick && (event.key === "Enter" || event.key === " ")) {

package/dist/esm/components/Badge/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/*\n Badge color variants enum\n * @description Defines the available color themes for the badge component\n /\nexport type BadgeColor =\n \| '~~primary'\n \| 'secondary'\n \| '~~success'\n \| 'error'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text'\n \| 'custom';\n\n/\n Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n /\nexport type BadgeVariant = 'default' \| 'none' \| 'outline' \| 'hoverable';\n\n/\n Badge size variants enum\n * @description Defines the available sizes for the badge component\n /\nexport type BadgeSize = 'sm' \| 'md' \| 'lg';\n\n/\n Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n /\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n color: {\n ~~primary: 'border-primary bg-primary text-primary hover:bg-primary-500',\n secondary:\n 'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n~~ success: 'border-success bg-success text-success hover:bg-success-500',\n error: 'border-error bg-error text-error hover:bg-error-500',\n neutral:\n 'border-neutral bg-neutral text-muted-foreground hover:bg-neutral-600',\n light: 'border-white bg-white text-white hover:bg-neutral-500',\n dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n text: 'border-text bg-text text-foreground hover:opacity-80',\n custom: '',\n },\n variant: {\n default: 'rounded-lg text-foreground-opposite',\n none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n outline: 'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n hoverable:\n 'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-xs',\n lg: 'px-3 py-1 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: '~~primary~~',\n size: 'md',\n },\n }\n);\n\n/\n Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n /\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n /* The content to display inside the badge /\n children?: React.ReactNode;\n /* Color theme variant /\n color?: BadgeColor \| `${BadgeColor}`;\n /* Visual style variant /\n variant?: BadgeVariant \| `${BadgeVariant}`;\n /* Size of the badge /\n size?: BadgeSize \| `${BadgeSize}`;\n /* Whether the badge is clickable /\n clickable?: boolean;\n /* Whether the badge is dismissible (shows close button) /\n dismissible?: boolean;\n /* Click handler for the badge /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n /* Click handler for the dismiss button /\n onDismiss?: () => void;\n /* ARIA label for accessibility /\n 'aria-label'?: string;\n /* Badge role for accessibility (default: 'status') /\n role?: 'status' \| 'button' \| 'generic';\n /* Whether badge should be focusable /\n tabIndex?: number;\n};\n\n/\n Utility type for badge variant props\n /\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/\n Badge component for displaying status indicators, labels, and notifications\n \n @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n \n @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n \n // Colored badge\n * <Badge color=\"error\">Error</Badge>\n \n // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n * Clickable\n * </Badge>\n \n // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n * Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n className,\n variant = 'default',\n color = '~~primary~~',\n size = 'md',\n children,\n clickable = false,\n dismissible = false,\n onClick,\n onDismiss,\n role,\n tabIndex,\n 'aria-label': ariaLabel,\n ...props\n}) => {\n const Component = clickable ? 'button' : 'span';\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (clickable && onClick && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n onClick(event as any);\n }\n };\n\n const handleDismiss = (event: React.MouseEvent) => {\n event.stopPropagation();\n onDismiss?.();\n };\n\n return (\n <Component\n className={cn(\n badgeVariants({ variant, color, size }),\n clickable &&\n 'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n dismissible && 'pr-1',\n className\n )}\n onClick={clickable ? onClick : undefined}\n onKeyDown={clickable ? handleKeyDown : undefined}\n role={role \|\| (clickable ? 'button' : 'status')}\n tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n aria-label={ariaLabel \|\| (clickable ? `${children} button` : undefined)}\n {...props}\n >\n {children}\n {dismissible && (\n <button\n type=\"button\"\n className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n onClick={handleDismiss}\n aria-label={`Remove ${children} badge`}\n >\n <svg\n className=\"size-3\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-label=\"Remove badge\"\n >\n <title>Remove badge</title>\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </Component>\n );\n};\n"],"mappings":";;;;;;;;;~~AAmCA~~,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,~~WACE;GACF,SAAS;GACT,~~OAAO;GACP,SACE;GACF,OAAO;GACP,MAAM;GACN,MAAM;GACN,QAAQ;EACV;EACA,SAAS;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACT,WACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,SAA+B,EAC1C,WACA,UAAU,WACV,QAAQ,~~WACR~~,OAAO,MACP,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,WACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GACxE,MAAM,eAAe;GACrB,QAAQ,KAAY;EACtB;CACF;CAEA,MAAM,iBAAiB,UAA4B;EACjD,MAAM,gBAAgB;EACtB,YAAY;CACd;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;EAAK,CAAC,GACtC,aACE,oFACF,eAAe,QACf,SACF;EACA,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;YAbN,CAeG,UACA,eACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;cAJb,CAME,oBAAC,SAAD,YAAO,eAAmB,IAC1B,oBAAC,QAAD;KACE,UAAS;KACT,GAAE;KACF,UAAS;IACV,EACE;;EACC,EAED;;AAEf"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/*\n Badge color variants enum\n * @description Defines the available color themes for the badge component\n /\nexport type BadgeColor =\n \| 'success'\n \| 'error'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text'\n \| 'custom';\n\n/\n Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n /\nexport type BadgeVariant = 'default' \| 'none' \| 'outline' \| 'hoverable';\n\n/\n Badge size variants enum\n * @description Defines the available sizes for the badge component\n /\nexport type BadgeSize = 'sm' \| 'md' \| 'lg';\n\n/\n Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n /\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n color: {\n success: 'border-success bg-success text-success hover:bg-success-500',\n error: 'border-error bg-error text-error hover:bg-error-500',\n neutral:\n 'border-neutral bg-neutral text-muted-foreground hover:bg-neutral-600',\n light: 'border-white bg-white text-white hover:bg-neutral-500',\n dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n text: 'border-text bg-text text-foreground hover:opacity-80',\n custom: '',\n },\n variant: {\n default: 'rounded-lg text-foreground-opposite',\n none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n outline: 'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n hoverable:\n 'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-xs',\n lg: 'px-3 py-1 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'text',\n size: 'md',\n },\n }\n);\n\n/\n Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n /\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n /* The content to display inside the badge /\n children?: React.ReactNode;\n /* Color theme variant /\n color?: BadgeColor \| `${BadgeColor}`;\n /* Visual style variant /\n variant?: BadgeVariant \| `${BadgeVariant}`;\n /* Size of the badge /\n size?: BadgeSize \| `${BadgeSize}`;\n /* Whether the badge is clickable /\n clickable?: boolean;\n /* Whether the badge is dismissible (shows close button) /\n dismissible?: boolean;\n /* Click handler for the badge /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n /* Click handler for the dismiss button /\n onDismiss?: () => void;\n /* ARIA label for accessibility /\n 'aria-label'?: string;\n /* Badge role for accessibility (default: 'status') /\n role?: 'status' \| 'button' \| 'generic';\n /* Whether badge should be focusable /\n tabIndex?: number;\n};\n\n/\n Utility type for badge variant props\n /\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/\n Badge component for displaying status indicators, labels, and notifications\n \n @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n \n @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n \n // Colored badge\n * <Badge color=\"error\">Error</Badge>\n \n // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n * Clickable\n * </Badge>\n \n // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n * Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n className,\n variant = 'default',\n color = 'text',\n size = 'md',\n children,\n clickable = false,\n dismissible = false,\n onClick,\n onDismiss,\n role,\n tabIndex,\n 'aria-label': ariaLabel,\n ...props\n}) => {\n const Component = clickable ? 'button' : 'span';\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (clickable && onClick && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n onClick(event as any);\n }\n };\n\n const handleDismiss = (event: React.MouseEvent) => {\n event.stopPropagation();\n onDismiss?.();\n };\n\n return (\n <Component\n className={cn(\n badgeVariants({ variant, color, size }),\n clickable &&\n 'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n dismissible && 'pr-1',\n className\n )}\n onClick={clickable ? onClick : undefined}\n onKeyDown={clickable ? handleKeyDown : undefined}\n role={role \|\| (clickable ? 'button' : 'status')}\n tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n aria-label={ariaLabel \|\| (clickable ? `${children} button` : undefined)}\n {...props}\n >\n {children}\n {dismissible && (\n <button\n type=\"button\"\n className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n onClick={handleDismiss}\n aria-label={`Remove ${children} badge`}\n >\n <svg\n className=\"size-3\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-label=\"Remove badge\"\n >\n <title>Remove badge</title>\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </Component>\n );\n};\n"],"mappings":";;;;;;;;;AAiCA,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,OAAO;GACP,SACE;GACF,OAAO;GACP,MAAM;GACN,MAAM;GACN,QAAQ;EACV;EACA,SAAS;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACT,WACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,SAA+B,EAC1C,WACA,UAAU,WACV,QAAQ,QACR,OAAO,MACP,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,WACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GACxE,MAAM,eAAe;GACrB,QAAQ,KAAY;EACtB;CACF;CAEA,MAAM,iBAAiB,UAA4B;EACjD,MAAM,gBAAgB;EACtB,YAAY;CACd;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;EAAK,CAAC,GACtC,aACE,oFACF,eAAe,QACf,SACF;EACA,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;YAbN,CAeG,UACA,eACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;cAJb,CAME,oBAAC,SAAD,YAAO,eAAmB,IAC1B,oBAAC,QAAD;KACE,UAAS;KACT,GAAE;KACF,UAAS;IACV,EACE;;EACC,EAED;;AAEf"}

package/dist/esm/components/Breadcrumb/index.mjs CHANGED Viewed

@@ -17,11 +17,7 @@ import { useIntlayer } from "react-intlayer";
 const getColorClass = (color) => {
 	if (!color) return "";
 	return {
-		primary: "text-primary",
-		secondary: "text-secondary",
 		neutral: "text-neutral",
-		light: "text-white",
-		dark: "text-neutral-800",
 		text: "text-muted-foreground",
 		"text-inverse": "text-foreground-opposite",
 		error: "text-error",

package/dist/esm/components/Breadcrumb/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { getIntlayer } from 'intlayer';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { type FC, Fragment, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps } from '../Button';\nimport { Link, type LinkColor } from '../Link';\n\n/*\n Props for LinkLink sub-component that renders breadcrumb items as links\n /\ntype LinkLinkProps = {\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n /\n Locale for internationalization\n /\n locale?: LocalesValues;\n /\n URL to navigate to\n /\n href?: string;\n /\n Link color\n /\n color?: LinkColor \| `${LinkColor}`;\n /\n Click handler\n /\n onClick?: () => void;\n /\n Children content\n /\n children?: string;\n /\n Additional CSS classes\n /\n className?: string;\n} & Omit<\n HTMLAttributes<HTMLAnchorElement>,\n 'href' \| 'onClick' \| 'color' \| 'children' \| 'className'\n>;\n\n/\n Maps LinkColor to corresponding Tailwind text color classes\n /\nconst getColorClass = (color?: LinkColor \| `${LinkColor}`): string => {\n if (!color) return '';\n\n const colorMap: Record<LinkColor, string> = {\n primary: 'text-primary',\n secondary: 'text-secondary',\n neutral: 'text-neutral',\n light: 'text-white',\n dark: 'text-neutral-800',\n text: 'text-muted-foreground',\n 'text-inverse': 'text-foreground-opposite',\n error: 'text-error',\n success: 'text-success',\n custom: '',\n };\n\n return colorMap[color as LinkColor] \|\| '';\n};\n\n/\n Breadcrumb variant styles using class-variance-authority\n /\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center', {\n variants: {\n size: {\n xs: 'gap-1 text-xs',\n sm: 'gap-1.5 text-sm',\n md: 'gap-2 text-base',\n lg: 'gap-3 text-lg',\n xl: 'gap-4 text-xl',\n },\n spacing: {\n compact: 'gap-1',\n normal: 'gap-2',\n loose: 'gap-4',\n },\n },\n defaultVariants: {\n size: 'md',\n spacing: 'normal',\n },\n});\n\n/\n LinkLink sub-component for breadcrumb items that navigate to other pages\n /\nconst LinkLink: FC<LinkLinkProps> = ({\n href,\n lang,\n children,\n onClick,\n color,\n position,\n locale,\n className,\n ...props\n}) => {\n const content = getIntlayer('breadcrumb');\n const linkLabel = content.linkLabel;\n\n return (\n <>\n <Link\n href={href}\n locale={locale}\n color={color}\n onClick={onClick}\n itemProp=\"item\"\n isExternalLink={false}\n itemScope\n itemType=\"https://schema.org/WebPage\"\n {...props}\n label={`${linkLabel} ${children}`}\n itemID={href}\n size=\"custom\"\n >\n <span itemProp=\"name\">{children}</span>\n </Link>\n <meta itemProp=\"position\" content={position.toString()} />\n </>\n );\n};\n\n/\n Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n /\ntype ButtonButtonProps = {\n /\n Text content for the breadcrumb button\n /\n children: string;\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n} & Omit<ButtonProps, 'children' \| 'label'>;\n\n/\n ButtonLink sub-component for breadcrumb items with click handlers\n /\nconst ButtonLink: FC<ButtonButtonProps> = ({\n children: text,\n onClick,\n color,\n position,\n className,\n ...props\n}) => {\n const { linkLabel } = useIntlayer('breadcrumb');\n\n return (\n <>\n <Button\n onClick={onClick}\n variant=\"link\"\n label={`${linkLabel} ${text}`}\n color={color}\n itemProp=\"item\"\n size=\"custom\"\n {...props}\n >\n <span itemProp=\"name\">{text}</span>\n </Button>\n <meta itemProp=\"position\" content={position.toString()} />\n </>\n );\n};\n\n/\n Props for Span sub-component that renders static breadcrumb text\n /\ntype SpanProps = {\n /\n Text content for the static breadcrumb item\n /\n children: string;\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/\n Span sub-component for static breadcrumb text items\n /\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n <span\n itemProp=\"item\"\n className={cn(\n 'inline-flex items-center',\n 'font-medium text-muted-foreground',\n 'transition-colors duration-200',\n className\n )}\n >\n <span itemProp=\"name\" {...props}>\n {children}\n </span>\n <meta itemProp=\"position\" content={position.toString()} />\n </span>\n);\n\n/\n Detailed breadcrumb link configuration with optional href or onClick\n /\ntype DetailedBreadcrumbLink = {\n /\n URL to navigate to when the breadcrumb item is clicked\n /\n href?: string;\n /\n Text content to display for this breadcrumb item\n /\n text: string;\n /\n Custom click handler function for interactive breadcrumb items\n /\n onClick?: () => void;\n};\n\n/\n Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n /\nexport type BreadcrumbLink = string \| DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n /\n Array of breadcrumb items\n /\n links: BreadcrumbLink[];\n /\n Color scheme for breadcrumb links\n * @default \"text\"\n /\n color?: LinkColor \| `${LinkColor}`;\n /\n Locale for internationalization\n /\n locale?: LocalesValues;\n /\n Element type for ARIA current attribute\n * @default 'page'\n /\n elementType?: 'page' \| 'location';\n /\n Custom separator between breadcrumb items\n * @default ChevronRightIcon\n /\n separator?: ReactNode;\n /\n ARIA label for breadcrumb navigation\n * @default 'breadcrumb'\n /\n ariaLabel?: string;\n /\n Whether to include structured data markup\n * @default true\n /\n includeStructuredData?: boolean;\n /\n Maximum number of breadcrumb items to show before truncation\n /\n maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n HTMLAttributes<HTMLOListElement>;\n\n/\n Breadcrumb component providing navigational context with accessibility features\n \n Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n \n @example\n * ```tsx\n * <Breadcrumb\n * links={[\n * 'Home',\n * { href: '/products', text: 'Products' },\n * { onClick: handleCategory, text: 'Electronics' },\n * 'Smartphones'\n * ]}\n * size=\"md\"\n * ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n links,\n className,\n color = 'text',\n locale,\n elementType = 'page',\n separator = <ChevronRightIcon size={10} />,\n ariaLabel = 'breadcrumb',\n includeStructuredData = true,\n maxItems,\n size,\n spacing,\n ...props\n}) => {\n const displayLinks =\n maxItems && links.length > maxItems\n ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n : links;\n\n return (\n <nav aria-label={ariaLabel}>\n <ol\n className={cn(breadcrumbVariants({ size, spacing }), className)}\n {...(includeStructuredData && {\n itemScope: true,\n itemType: 'http://schema.org/BreadcrumbList',\n })}\n {...props}\n >\n {displayLinks.map((link, index) => {\n const isLastLink = index === displayLinks.length - 1;\n const isLink =\n typeof link === 'object' && typeof link.href === 'string';\n const isButton =\n typeof link === 'object' && typeof link.onClick === 'function';\n const isActive = index === displayLinks.length - 1;\n const ariaCurrent = isActive ? elementType : undefined;\n const isTruncated = link === '...';\n\n const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n const separatorColorClass = getColorClass(color);\n\n if (isTruncated) {\n return (\n <Fragment key={`truncated-${text}`}>\n <li className=\"flex items-center\" aria-hidden=\"true\">\n <span className=\"text-neutral-500\">…</span>\n </li>\n {!isLastLink && (\n <li aria-hidden=\"true\" className=\"flex items-center\">\n <span className={cn(separatorColorClass)}>{separator}</span>\n </li>\n )}\n </Fragment>\n );\n }\n\n let section = (\n <Span\n key={text}\n position={index + 1}\n aria-current={ariaCurrent}\n className={cn(\n 'transition-colors duration-200',\n isActive && 'text-foreground'\n )}\n >\n {text}\n </Span>\n );\n\n if (isLink) {\n section = (\n <LinkLink\n key={text}\n href={link.href!}\n color={color}\n position={index + 1}\n locale={locale}\n aria-current={ariaCurrent}\n className={cn(isActive && 'cursor-default text-foreground')}\n >\n {text}\n </LinkLink>\n );\n } else if (isButton) {\n section = (\n <ButtonLink\n key={text}\n onClick={link.onClick!}\n color={color}\n position={index + 1}\n aria-current={ariaCurrent}\n className={cn(isActive && 'cursor-default text-neutral-900')}\n >\n {text}\n </ButtonLink>\n );\n }\n\n const listElement = (\n <li\n {...(includeStructuredData && {\n itemProp: 'itemListElement',\n itemScope: true,\n itemType: 'https://schema.org/ListItem',\n })}\n key={text}\n className=\"flex items-center\"\n >\n {section}\n </li>\n );\n\n if (isLastLink) {\n return listElement;\n }\n\n return (\n <Fragment key={text}>\n {listElement}\n <li aria-hidden=\"true\" className=\"flex items-center\">\n <span className={cn(separatorColorClass)}>{separator}</span>\n </li>\n </Fragment>\n );\n })}\n </ol>\n </nav>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { getIntlayer } from 'intlayer';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { type FC, Fragment, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps } from '../Button';\nimport { Link, type LinkColor } from '../Link';\n\n/*\n Props for LinkLink sub-component that renders breadcrumb items as links\n /\ntype LinkLinkProps = {\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n /\n Locale for internationalization\n /\n locale?: LocalesValues;\n /\n URL to navigate to\n /\n href?: string;\n /\n Link color\n /\n color?: LinkColor \| `${LinkColor}`;\n /\n Click handler\n /\n onClick?: () => void;\n /\n Children content\n /\n children?: string;\n /\n Additional CSS classes\n /\n className?: string;\n} & Omit<\n HTMLAttributes<HTMLAnchorElement>,\n 'href' \| 'onClick' \| 'color' \| 'children' \| 'className'\n>;\n\n/\n Maps LinkColor to corresponding Tailwind text color classes\n /\nconst getColorClass = (color?: LinkColor \| `${LinkColor}`): string => {\n if (!color) return '';\n\n const colorMap: Record<LinkColor, string> = {\n neutral: 'text-neutral',\n text: 'text-muted-foreground',\n 'text-inverse': 'text-foreground-opposite',\n error: 'text-error',\n success: 'text-success',\n custom: '',\n };\n\n return colorMap[color as LinkColor] \|\| '';\n};\n\n/\n Breadcrumb variant styles using class-variance-authority\n /\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center', {\n variants: {\n size: {\n xs: 'gap-1 text-xs',\n sm: 'gap-1.5 text-sm',\n md: 'gap-2 text-base',\n lg: 'gap-3 text-lg',\n xl: 'gap-4 text-xl',\n },\n spacing: {\n compact: 'gap-1',\n normal: 'gap-2',\n loose: 'gap-4',\n },\n },\n defaultVariants: {\n size: 'md',\n spacing: 'normal',\n },\n});\n\n/\n LinkLink sub-component for breadcrumb items that navigate to other pages\n /\nconst LinkLink: FC<LinkLinkProps> = ({\n href,\n lang,\n children,\n onClick,\n color,\n position,\n locale,\n className,\n ...props\n}) => {\n const content = getIntlayer('breadcrumb');\n const linkLabel = content.linkLabel;\n\n return (\n <>\n <Link\n href={href}\n locale={locale}\n color={color}\n onClick={onClick}\n itemProp=\"item\"\n isExternalLink={false}\n itemScope\n itemType=\"https://schema.org/WebPage\"\n {...props}\n label={`${linkLabel} ${children}`}\n itemID={href}\n size=\"custom\"\n >\n <span itemProp=\"name\">{children}</span>\n </Link>\n <meta itemProp=\"position\" content={position.toString()} />\n </>\n );\n};\n\n/\n Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n /\ntype ButtonButtonProps = {\n /\n Text content for the breadcrumb button\n /\n children: string;\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n} & Omit<ButtonProps, 'children' \| 'label'>;\n\n/\n ButtonLink sub-component for breadcrumb items with click handlers\n /\nconst ButtonLink: FC<ButtonButtonProps> = ({\n children: text,\n onClick,\n color,\n position,\n className,\n ...props\n}) => {\n const { linkLabel } = useIntlayer('breadcrumb');\n\n return (\n <>\n <Button\n onClick={onClick}\n variant=\"link\"\n label={`${linkLabel} ${text}`}\n color={color}\n itemProp=\"item\"\n size=\"custom\"\n {...props}\n >\n <span itemProp=\"name\">{text}</span>\n </Button>\n <meta itemProp=\"position\" content={position.toString()} />\n </>\n );\n};\n\n/\n Props for Span sub-component that renders static breadcrumb text\n /\ntype SpanProps = {\n /\n Text content for the static breadcrumb item\n /\n children: string;\n /\n Position of the breadcrumb item in the list (1-based index)\n /\n position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/\n Span sub-component for static breadcrumb text items\n /\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n <span\n itemProp=\"item\"\n className={cn(\n 'inline-flex items-center',\n 'font-medium text-muted-foreground',\n 'transition-colors duration-200',\n className\n )}\n >\n <span itemProp=\"name\" {...props}>\n {children}\n </span>\n <meta itemProp=\"position\" content={position.toString()} />\n </span>\n);\n\n/\n Detailed breadcrumb link configuration with optional href or onClick\n /\ntype DetailedBreadcrumbLink = {\n /\n URL to navigate to when the breadcrumb item is clicked\n /\n href?: string;\n /\n Text content to display for this breadcrumb item\n /\n text: string;\n /\n Custom click handler function for interactive breadcrumb items\n /\n onClick?: () => void;\n};\n\n/\n Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n /\nexport type BreadcrumbLink = string \| DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n /\n Array of breadcrumb items\n /\n links: BreadcrumbLink[];\n /\n Color scheme for breadcrumb links\n * @default \"text\"\n /\n color?: LinkColor \| `${LinkColor}`;\n /\n Locale for internationalization\n /\n locale?: LocalesValues;\n /\n Element type for ARIA current attribute\n * @default 'page'\n /\n elementType?: 'page' \| 'location';\n /\n Custom separator between breadcrumb items\n * @default ChevronRightIcon\n /\n separator?: ReactNode;\n /\n ARIA label for breadcrumb navigation\n * @default 'breadcrumb'\n /\n ariaLabel?: string;\n /\n Whether to include structured data markup\n * @default true\n /\n includeStructuredData?: boolean;\n /\n Maximum number of breadcrumb items to show before truncation\n /\n maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n HTMLAttributes<HTMLOListElement>;\n\n/\n Breadcrumb component providing navigational context with accessibility features\n \n Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n \n @example\n * ```tsx\n * <Breadcrumb\n * links={[\n * 'Home',\n * { href: '/products', text: 'Products' },\n * { onClick: handleCategory, text: 'Electronics' },\n * 'Smartphones'\n * ]}\n * size=\"md\"\n * ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n links,\n className,\n color = 'text',\n locale,\n elementType = 'page',\n separator = <ChevronRightIcon size={10} />,\n ariaLabel = 'breadcrumb',\n includeStructuredData = true,\n maxItems,\n size,\n spacing,\n ...props\n}) => {\n const displayLinks =\n maxItems && links.length > maxItems\n ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n : links;\n\n return (\n <nav aria-label={ariaLabel}>\n <ol\n className={cn(breadcrumbVariants({ size, spacing }), className)}\n {...(includeStructuredData && {\n itemScope: true,\n itemType: 'http://schema.org/BreadcrumbList',\n })}\n {...props}\n >\n {displayLinks.map((link, index) => {\n const isLastLink = index === displayLinks.length - 1;\n const isLink =\n typeof link === 'object' && typeof link.href === 'string';\n const isButton =\n typeof link === 'object' && typeof link.onClick === 'function';\n const isActive = index === displayLinks.length - 1;\n const ariaCurrent = isActive ? elementType : undefined;\n const isTruncated = link === '...';\n\n const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n const separatorColorClass = getColorClass(color);\n\n if (isTruncated) {\n return (\n <Fragment key={`truncated-${text}`}>\n <li className=\"flex items-center\" aria-hidden=\"true\">\n <span className=\"text-neutral-500\">…</span>\n </li>\n {!isLastLink && (\n <li aria-hidden=\"true\" className=\"flex items-center\">\n <span className={cn(separatorColorClass)}>{separator}</span>\n </li>\n )}\n </Fragment>\n );\n }\n\n let section = (\n <Span\n key={text}\n position={index + 1}\n aria-current={ariaCurrent}\n className={cn(\n 'transition-colors duration-200',\n isActive && 'text-foreground'\n )}\n >\n {text}\n </Span>\n );\n\n if (isLink) {\n section = (\n <LinkLink\n key={text}\n href={link.href!}\n color={color}\n position={index + 1}\n locale={locale}\n aria-current={ariaCurrent}\n className={cn(isActive && 'cursor-default text-foreground')}\n >\n {text}\n </LinkLink>\n );\n } else if (isButton) {\n section = (\n <ButtonLink\n key={text}\n onClick={link.onClick!}\n color={color}\n position={index + 1}\n aria-current={ariaCurrent}\n className={cn(isActive && 'cursor-default text-neutral-900')}\n >\n {text}\n </ButtonLink>\n );\n }\n\n const listElement = (\n <li\n {...(includeStructuredData && {\n itemProp: 'itemListElement',\n itemScope: true,\n itemType: 'https://schema.org/ListItem',\n })}\n key={text}\n className=\"flex items-center\"\n >\n {section}\n </li>\n );\n\n if (isLastLink) {\n return listElement;\n }\n\n return (\n <Fragment key={text}>\n {listElement}\n <li aria-hidden=\"true\" className=\"flex items-center\">\n <span className={cn(separatorColorClass)}>{separator}</span>\n </li>\n </Fragment>\n );\n })}\n </ol>\n </nav>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/Button/Button.mjs CHANGED Viewed

@@ -37,15 +37,10 @@ const buttonVariants = cva("relative inline-flex cursor-pointer items-center jus
 			custom: ""
 		},
 		color: {
-			primary: "hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light",
-			secondary: "hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light",
 			neutral: "text-neutral ring-neutral-500/5 *:text-text-light",
 			card: "hover-card-500/20 text-card ring-card-500/20 *:text-text-light",
-			light: "hover-white-500/20 text-white ring-white/20 *:text-text-light",
-			dark: "text-neutral-800 ring-text-light/50 *:text-text-light",
 			text: "text-text ring-text/20 *:text-text-opposite",
 			foreground: "text-foreground ring-foreground/20 *:text-foreground-opposite",
-			current: "hover-current-500/10 text-current ring-current/10 *:text-text-light",
 			"text-inverse": "text-text-opposite ring-text-opposite/20 *:text-text",
 			error: "hover-error-500/20 text-error ring-error/20 *:text-text-light",
 			success: "hover-success-500/20 text-success ring-success/20 *:text-text-light",
@@ -71,8 +66,8 @@ const buttonVariants = cva("relative inline-flex cursor-pointer items-center jus
 				"aria-selected:ring-5"
 			],
 			outline: [
-				"rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!",
-				"hover:bg-current/20 focus-visible:bg-current/20",
+				"rounded-2xl border-[1.3px] border-current! bg-current/0 *:text-current!",
+				"hover:border-transparent hover:bg-current/30! focus-visible:bg-current/20",
 				"hover:ring-5 focus-visible:ring-5",
 				"aria-selected:ring-5"
 			],

package/dist/esm/components/Button/Button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { Loader } from '../Loader';\n\n/*\n Button size variants for different use cases\n /\nexport type ButtonSize =\n \| 'xs'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| 'icon-sm'\n \| 'icon-md'\n \| 'icon-lg'\n \| 'icon-xl'\n \| 'custom';\n\nconst buttonIconVariants = cva('flex-none shrink-0', {\n variants: {\n size: {\n xs: 'size-2',\n sm: 'size-3',\n md: 'size-4',\n lg: 'size-5',\n xl: 'size-6',\n 'icon-sm': 'size-3',\n 'icon-md': 'size-4',\n 'icon-lg': 'size-5',\n 'icon-xl': 'size-6',\n custom: '',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\n/\n Button visual style variants\n /\nexport type ButtonVariant =\n \| 'default'\n \| 'none'\n \| 'outline'\n \| 'link'\n \| 'invisible-link'\n \| 'hoverable'\n \| 'fade'\n \| 'input';\n\n/\n Button color themes that work with the design system\n /\nexport type ButtonColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text'\n \| 'foreground'\n \| 'card'\n \| 'text-inverse'\n \| 'current'\n \| 'error'\n \| 'success'\n \| 'custom';\n\n/\n Text alignment options for button content\n /\nexport type ButtonTextAlign = 'left' \| 'center' \| 'right';\n\n/\n Enhanced button variants with improved accessibility and focus states\n /\nexport const buttonVariants = cva(\n 'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n size: {\n xs: 'min-h-7 px-3 text-xs max-md:py-1',\n sm: 'min-h-7 px-3 text-xs max-md:py-1',\n md: 'min-h-8 px-6 text-sm max-md:py-2',\n lg: 'min-h-10 px-8 text-lg max-md:py-3',\n xl: 'min-h-11 px-10 text-xl max-md:py-4',\n 'icon-sm': 'p-1.5',\n 'icon-md': 'p-1.5',\n 'icon-lg': 'p-1.5',\n 'icon-xl': 'p-3',\n custom: '',\n },\n color: {\n primary:\n 'hover-primary-500/20 text-primary ring-primary-500/20 :text-text-light',\n secondary:\n 'hover-secondary-500/20 text-secondary ring-secondary-500/20 :text-text-light',\n neutral: 'text-neutral ring-neutral-500/5 :text-text-light',\n card: 'hover-card-500/20 text-card ring-card-500/20 :text-text-light',\n light: 'hover-white-500/20 text-white ring-white/20 :text-text-light',\n dark: 'text-neutral-800 ring-text-light/50 :text-text-light',\n text: 'text-text ring-text/20 :text-text-opposite',\n foreground:\n 'text-foreground ring-foreground/20 :text-foreground-opposite',\n current:\n 'hover-current-500/10 text-current ring-current/10 :text-text-light',\n 'text-inverse': 'text-text-opposite ring-text-opposite/20 :text-text',\n error: 'hover-error-500/20 text-error ring-error/20 :text-text-light',\n success:\n 'hover-success-500/20 text-success ring-success/20 :text-text-light',\n custom: '',\n },\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n md: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n lg: 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n xl: 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n '2xl':\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n '3xl':\n 'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n '4xl':\n 'rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]',\n '5xl':\n 'rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]',\n full: 'rounded-full',\n },\n variant: {\n default: [\n 'bg-current',\n 'hover:bg-current/90',\n 'hover:ring-5',\n 'aria-selected:ring-5',\n ],\n\n outline: [\n 'rounded-2xl border-[1.3px] border-current bg-current/0 :text-current!',\n 'hover:bg-current/20 focus-visible:bg-current/20',\n 'hover:ring-5 focus-visible:ring-5',\n 'aria-selected:ring-5',\n ],\n\n none: 'border-none bg-current/0 text-inherit hover:bg-current/0',\n\n link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent hover:underline',\n\n 'invisible-link':\n 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent',\n\n hoverable:\n 'rounded-lg border-none bg-current/0 transition :text-current! hover:bg-current/10 aria-[current]:bg-current/5',\n\n fade: [\n 'rounded-lg border-none bg-current/10 ring-current/5 transition :text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n 'hover:ring-5 focus-visible:ring-5',\n 'aria-selected:ring-5',\n ],\n input: [\n // base styles\n 'text-text',\n 'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',\n 'transition-shadow duration-100 md:text-sm',\n 'ring-0', // base ring\n 'disabled:opacity-50',\n\n 'text-text',\n 'bg-neutral-50 dark:bg-neutral-950',\n 'ring-neutral-100 dark:ring-neutral-700',\n\n // Hover ring (similar spirit to your input)\n 'hover:ring-3', // width\n 'aria-selected:ring-4',\n 'focus-visible:ring-3',\n 'disabled:ring-0',\n\n // Focus ring + animation\n 'focus-visible:outline-none',\n\n // Remove any weird box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // aria-invalid border color\n 'aria-invalid:border-error',\n ],\n },\n\n textAlign: {\n left: 'justify-start text-left',\n center: 'justify-center text-center',\n right: 'justify-end text-right',\n },\n\n isFullWidth: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n color: 'text',\n roundedSize: 'md',\n textAlign: 'center',\n isFullWidth: false,\n },\n }\n);\n\n/*\n Enhanced Button component props with comprehensive type safety and accessibility features\n /\nexport type ButtonProps = DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n> &\n VariantProps<typeof buttonVariants> & {\n /\n Accessible label for screen readers and assistive technologies.\n * This is required for accessibility compliance.\n /\n label: string \| null;\n\n /\n Optional icon to display on the left side of the button\n /\n Icon?: FC \| LucideIcon;\n\n /\n Optional icon to display on the right side of the button\n /\n IconRight?: FC \| LucideIcon;\n\n /\n Additional CSS classes for icon styling\n /\n iconClassName?: string;\n\n /\n Shows loading spinner and disables button interaction when true\n /\n isLoading?: boolean;\n\n /\n Marks the button as active (useful for navigation or toggle states)\n /\n isActive?: boolean;\n\n /\n Marks the button as selected\n /\n isSelected?: boolean;\n\n /\n Makes the button span the full width of its container\n /\n isFullWidth?: boolean;\n\n /\n Additional description for complex buttons (optional)\n /\n 'aria-describedby'?: string;\n\n /\n Expanded state for collapsible sections (optional)\n /\n 'aria-expanded'?: boolean;\n\n /\n Controls whether the button has popup/menu (optional)\n /\n 'aria-haspopup'?:\n \| boolean\n \| 'true'\n \| 'false'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog';\n\n /\n Indicates if button controls are currently pressed (for toggle buttons)\n /\n 'aria-pressed'?: boolean;\n };\n\n/\n Button Component - A comprehensive, accessible button component\n \n Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n \n @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n \n // Button with icon and loading state\n * <Button\n * label=\"Save document\"\n * Icon={SaveIcon}\n * isLoading={saving}\n * disabled={!hasChanges}\n * >\n * Save\n * </Button>\n \n // Error action button\n * <Button\n * variant=\"outline\"\n * color=\"error\"\n * label=\"Delete item permanently\"\n * aria-describedby=\"delete-warning\"\n * >\n * Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n variant,\n size,\n color,\n children,\n Icon,\n IconRight,\n iconClassName,\n isLoading = false,\n isActive,\n isSelected,\n isFullWidth,\n roundedSize,\n textAlign,\n disabled,\n label,\n className,\n type = 'button',\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': ariaPressed,\n ...props\n}) => {\n const isLink = variant === 'link' \|\| variant === 'invisible-link';\n const isIconOnly = !children && (Icon \|\| IconRight);\n\n const accessibilityProps = {\n 'aria-label': isIconOnly ? (label ?? undefined) : undefined,\n 'aria-labelledby': !isIconOnly ? undefined : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n 'aria-busy': isLoading,\n 'aria-current': (isActive ? 'page' : undefined) as 'page' \| undefined,\n 'aria-disabled': disabled \|\| isLoading,\n 'aria-selected': isSelected,\n };\n\n const isSquareButton =\n size === 'icon-sm' \|\|\n size === 'icon-md' \|\|\n size === 'icon-lg' \|\|\n size === 'icon-xl';\n\n return (\n <button\n disabled={isLoading \|\| disabled}\n role={isLink ? 'link' : 'button'}\n type={type}\n className={buttonVariants({\n variant,\n size,\n color,\n isFullWidth,\n roundedSize,\n textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n className,\n })}\n {...accessibilityProps}\n {...props}\n >\n {Icon && !isLoading && (\n <Icon\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n\n <div\n className={cn(\n 'flex items-center justify-center transition-[width] duration-300',\n isLoading && size === 'sm' && 'w-3',\n isLoading && size === 'md' && 'w-4',\n isLoading && size === 'lg' && 'w-6',\n isLoading && size === 'xl' && 'w-8'\n )}\n >\n <Loader\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n isLoading={isLoading}\n aria-hidden=\"true\"\n data-testid=\"loader\"\n />\n </div>\n\n {children && (\n <span className=\"flex-1 truncate whitespace-nowrap\">{children}</span>\n )}\n\n {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n {IconRight && (\n <IconRight\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'ml-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n};\n"],"mappings":";;;;;;AAqBA,MAAM,qBAAqB,IAAI,sBAAsB;CACnD,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;;;AAyCD,MAAa,iBAAiB,IAC5B,8LACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;EACV;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SAAS;GACT,MAAM;GACN,OAAO;GACP,MAAM;GACN,MAAM;GACN,YACE;GACF,SACE;GACF,gBAAgB;GAChB,OAAO;GACP,SACE;GACF,QAAQ;EACV;EACA,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;EACR;EACA,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;GACF;GAEA,SAAS;IACP;IACA;IACA;IACA;GACF;GAEA,MAAM;GAEN,MAAM;GAEN,kBACE;GAEF,WACE;GAEF,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO;IAEL;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IAGA;GACF;EACF;EAEA,WAAW;GACT,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,aAAa;EACb,WAAW;EACX,aAAa;CACf;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,MAAa,UAA2B,EACtC,SACA,MACA,OACA,UACA,MACA,WACA,eACA,YAAY,OACZ,UACA,YACA,aACA,aACA,WACA,UACA,OACA,WACA,OAAO,UACP,oBAAoB,iBACpB,iBAAiB,cACjB,iBAAiB,cACjB,gBAAgB,aAChB,GAAG,YACC;CACJ,MAAM,SAAS,YAAY,UAAU,YAAY;CACjD,MAAM,aAAa,CAAC,aAAa,QAAQ;CAEzC,MAAM,qBAAqB;EACzB,cAAc,aAAc,SAAS,SAAa;EAClD,mBAAmB,CAAC,aAAa,SAAY;EAC7C,oBAAoB;EACpB,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB,aAAa,SAAY,WAAW;EACpD,aAAa;EACb,gBAAiB,WAAW,SAAS;EACrC,iBAAiB,YAAY;EAC7B,iBAAiB;CACnB;CAEA,MAAM,iBACJ,SAAS,aACT,SAAS,aACT,SAAS,aACT,SAAS;CAEX,OACE,qBAAC,UAAD;EACE,UAAU,aAAa;EACvB,MAAM,SAAS,SAAS;EAClB;EACN,WAAW,eAAe;GACxB;GACA;GACA;GACA;GACA;GACA,WAAW,cAAc,YAAY,SAAS;GAC9C;EACF,CAAC;EACD,GAAI;EACJ,GAAI;YAdN;GAgBG,QAAQ,CAAC,aACR,oBAAC,MAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;GAGH,oBAAC,OAAD;IACE,WAAW,GACT,oEACA,aAAa,SAAS,QAAQ,OAC9B,aAAa,SAAS,QAAQ,OAC9B,aAAa,SAAS,QAAQ,OAC9B,aAAa,SAAS,QAAQ,KAChC;cAEA,oBAAC,QAAD;KACE,WAAW,mBAAmB;MAC5B;MACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;KACxD,CAAC;KACU;KACX,eAAY;KACZ,eAAY;IACb;GACE;GAEJ,YACC,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe;GAGrE,CAAC,YAAY,cAAc,oBAAC,QAAD;IAAM,WAAU;cAAW;GAAY;GAElE,aACC,oBAAC,WAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;EAEG;;AAEZ"}
1	+ {"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { Loader } from '../Loader';\n\n/*\n Button size variants for different use cases\n /\nexport type ButtonSize =\n \| 'xs'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| 'icon-sm'\n \| 'icon-md'\n \| 'icon-lg'\n \| 'icon-xl'\n \| 'custom';\n\nconst buttonIconVariants = cva('flex-none shrink-0', {\n variants: {\n size: {\n xs: 'size-2',\n sm: 'size-3',\n md: 'size-4',\n lg: 'size-5',\n xl: 'size-6',\n 'icon-sm': 'size-3',\n 'icon-md': 'size-4',\n 'icon-lg': 'size-5',\n 'icon-xl': 'size-6',\n custom: '',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\n/\n Button visual style variants\n /\nexport type ButtonVariant =\n \| 'default'\n \| 'none'\n \| 'outline'\n \| 'link'\n \| 'invisible-link'\n \| 'hoverable'\n \| 'fade'\n \| 'input';\n\n/\n Button color themes that work with the design system\n /\nexport type ButtonColor =\n \| 'neutral'\n \| 'text'\n \| 'foreground'\n \| 'card'\n \| 'error'\n \| 'success'\n \| 'custom'\n \| 'text-inverse';\n\n/\n Text alignment options for button content\n /\nexport type ButtonTextAlign = 'left' \| 'center' \| 'right';\n\n/\n Enhanced button variants with improved accessibility and focus states\n /\nexport const buttonVariants = cva(\n 'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n size: {\n xs: 'min-h-7 px-3 text-xs max-md:py-1',\n sm: 'min-h-7 px-3 text-xs max-md:py-1',\n md: 'min-h-8 px-6 text-sm max-md:py-2',\n lg: 'min-h-10 px-8 text-lg max-md:py-3',\n xl: 'min-h-11 px-10 text-xl max-md:py-4',\n 'icon-sm': 'p-1.5',\n 'icon-md': 'p-1.5',\n 'icon-lg': 'p-1.5',\n 'icon-xl': 'p-3',\n custom: '',\n },\n color: {\n neutral: 'text-neutral ring-neutral-500/5 :text-text-light',\n card: 'hover-card-500/20 text-card ring-card-500/20 :text-text-light',\n text: 'text-text ring-text/20 :text-text-opposite',\n foreground:\n 'text-foreground ring-foreground/20 :text-foreground-opposite',\n 'text-inverse': 'text-text-opposite ring-text-opposite/20 :text-text',\n error: 'hover-error-500/20 text-error ring-error/20 :text-text-light',\n success:\n 'hover-success-500/20 text-success ring-success/20 :text-text-light',\n custom: '',\n },\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n md: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n lg: 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n xl: 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n '2xl':\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n '3xl':\n 'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n '4xl':\n 'rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]',\n '5xl':\n 'rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]',\n full: 'rounded-full',\n },\n variant: {\n default: [\n 'bg-current',\n 'hover:bg-current/90',\n 'hover:ring-5',\n 'aria-selected:ring-5',\n ],\n\n outline: [\n 'rounded-2xl border-[1.3px] border-current! bg-current/0 :text-current!',\n 'hover:border-transparent hover:bg-current/30! focus-visible:bg-current/20',\n 'hover:ring-5 focus-visible:ring-5',\n 'aria-selected:ring-5',\n ],\n\n none: 'border-none bg-current/0 text-inherit hover:bg-current/0',\n\n link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent hover:underline',\n\n 'invisible-link':\n 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent',\n\n hoverable:\n 'rounded-lg border-none bg-current/0 transition :text-current! hover:bg-current/10 aria-[current]:bg-current/5',\n\n fade: [\n 'rounded-lg border-none bg-current/10 ring-current/5 transition :text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n 'hover:ring-5 focus-visible:ring-5',\n 'aria-selected:ring-5',\n ],\n input: [\n // base styles\n 'text-text',\n 'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',\n 'transition-shadow duration-100 md:text-sm',\n 'ring-0', // base ring\n 'disabled:opacity-50',\n\n 'text-text',\n 'bg-neutral-50 dark:bg-neutral-950',\n 'ring-neutral-100 dark:ring-neutral-700',\n\n // Hover ring (similar spirit to your input)\n 'hover:ring-3', // width\n 'aria-selected:ring-4',\n 'focus-visible:ring-3',\n 'disabled:ring-0',\n\n // Focus ring + animation\n 'focus-visible:outline-none',\n\n // Remove any weird box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // aria-invalid border color\n 'aria-invalid:border-error',\n ],\n },\n\n textAlign: {\n left: 'justify-start text-left',\n center: 'justify-center text-center',\n right: 'justify-end text-right',\n },\n\n isFullWidth: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n color: 'text',\n roundedSize: 'md',\n textAlign: 'center',\n isFullWidth: false,\n },\n }\n);\n\n/\n Enhanced Button component props with comprehensive type safety and accessibility features\n /\nexport type ButtonProps = DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n> &\n VariantProps<typeof buttonVariants> & {\n /\n Accessible label for screen readers and assistive technologies.\n * This is required for accessibility compliance.\n /\n label: string \| null;\n\n /\n Optional icon to display on the left side of the button\n /\n Icon?: FC \| LucideIcon;\n\n /\n Optional icon to display on the right side of the button\n /\n IconRight?: FC \| LucideIcon;\n\n /\n Additional CSS classes for icon styling\n /\n iconClassName?: string;\n\n /\n Shows loading spinner and disables button interaction when true\n /\n isLoading?: boolean;\n\n /\n Marks the button as active (useful for navigation or toggle states)\n /\n isActive?: boolean;\n\n /\n Marks the button as selected\n /\n isSelected?: boolean;\n\n /\n Makes the button span the full width of its container\n /\n isFullWidth?: boolean;\n\n /\n Additional description for complex buttons (optional)\n /\n 'aria-describedby'?: string;\n\n /\n Expanded state for collapsible sections (optional)\n /\n 'aria-expanded'?: boolean;\n\n /\n Controls whether the button has popup/menu (optional)\n /\n 'aria-haspopup'?:\n \| boolean\n \| 'true'\n \| 'false'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog';\n\n /\n Indicates if button controls are currently pressed (for toggle buttons)\n /\n 'aria-pressed'?: boolean;\n };\n\n/\n Button Component - A comprehensive, accessible button component\n \n Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n \n @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n \n // Button with icon and loading state\n * <Button\n * label=\"Save document\"\n * Icon={SaveIcon}\n * isLoading={saving}\n * disabled={!hasChanges}\n * >\n * Save\n * </Button>\n \n // Error action button\n * <Button\n * variant=\"outline\"\n * color=\"error\"\n * label=\"Delete item permanently\"\n * aria-describedby=\"delete-warning\"\n * >\n * Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n variant,\n size,\n color,\n children,\n Icon,\n IconRight,\n iconClassName,\n isLoading = false,\n isActive,\n isSelected,\n isFullWidth,\n roundedSize,\n textAlign,\n disabled,\n label,\n className,\n type = 'button',\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': ariaPressed,\n ...props\n}) => {\n const isLink = variant === 'link' \|\| variant === 'invisible-link';\n const isIconOnly = !children && (Icon \|\| IconRight);\n\n const accessibilityProps = {\n 'aria-label': isIconOnly ? (label ?? undefined) : undefined,\n 'aria-labelledby': !isIconOnly ? undefined : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n 'aria-busy': isLoading,\n 'aria-current': (isActive ? 'page' : undefined) as 'page' \| undefined,\n 'aria-disabled': disabled \|\| isLoading,\n 'aria-selected': isSelected,\n };\n\n const isSquareButton =\n size === 'icon-sm' \|\|\n size === 'icon-md' \|\|\n size === 'icon-lg' \|\|\n size === 'icon-xl';\n\n return (\n <button\n disabled={isLoading \|\| disabled}\n role={isLink ? 'link' : 'button'}\n type={type}\n className={buttonVariants({\n variant,\n size,\n color,\n isFullWidth,\n roundedSize,\n textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n className,\n })}\n {...accessibilityProps}\n {...props}\n >\n {Icon && !isLoading && (\n <Icon\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n\n <div\n className={cn(\n 'flex items-center justify-center transition-[width] duration-300',\n isLoading && size === 'sm' && 'w-3',\n isLoading && size === 'md' && 'w-4',\n isLoading && size === 'lg' && 'w-6',\n isLoading && size === 'xl' && 'w-8'\n )}\n >\n <Loader\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n isLoading={isLoading}\n aria-hidden=\"true\"\n data-testid=\"loader\"\n />\n </div>\n\n {children && (\n <span className=\"flex-1 truncate whitespace-nowrap\">{children}</span>\n )}\n\n {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n {IconRight && (\n <IconRight\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'ml-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/Container/index.mjs CHANGED Viewed

@@ -48,8 +48,6 @@ const containerVariants = cva("flex flex-col text-foreground backdrop-blur", {
 			with: "border-[1.3px]"
 		},
 		borderColor: {
-			primary: "border-primary",
-			secondary: "border-secondary",
 			neutral: "",
 			card: "border-card",
 			text: "border-text",

package/dist/esm/components/Container/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n HTMLAttributes,\n PropsWithChildren,\n} from 'react';\n\n/*\n Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n /\nexport const containerVariants = cva(\n 'flex flex-col text-foreground backdrop-blur',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n '2xl':\n 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n '3xl':\n 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n '4xl':\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n full: 'rounded-full',\n },\n transparency: {\n none: 'bg-card',\n xs: 'bg-card/95',\n sm: 'bg-card/90',\n md: 'bg-card/70',\n lg: 'bg-card/40',\n xl: 'bg-card/20',\n full: '',\n },\n padding: {\n none: 'p-0',\n sm: 'px-3 py-2',\n md: 'px-4 py-3',\n lg: 'px-6 py-4',\n xl: 'px-8 py-6',\n '2xl': 'px-10 py-8',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20',\n y: 'divide-y divide-dashed divide-text/20',\n both: 'divide-x divide-y divide-dashed divide-text/20',\n },\n border: {\n none: '',\n with: 'border-[1.3px]',\n },\n borderColor: {\n ~~primary: 'border-primary',\n secondary: 'border-secondary',\n~~ neutral: '',\n card: 'border-card',\n text: 'border-text',\n error: 'border-error',\n warning: 'border-warning',\n success: 'border-success',\n },\n background: {\n none: 'backdrop-blur-none',\n hoverable:\n 'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n defaultVariants: {\n roundedSize: 'lg',\n border: 'none',\n borderColor: 'text',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n compoundVariants: [\n {\n background: 'none',\n class: 'bg-transparent',\n },\n ],\n }\n);\n\n/* Available rounded corner sizes for the container /\nexport type ContainerRoundedSize = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Background transparency levels for the container /\nexport type ContainerTransparency = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Padding sizes for container content /\nexport type ContainerPadding = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Separator options for dividing container children /\nexport type ContainerSeparator = 'without' \| 'x' \| 'y' \| 'both';\n\n/* Border color options for the container /\nexport type ContainerBorderColor =\n \| '~~primary'\n \| 'secondary'\n \| '~~neutral'\n \| 'card'\n \| 'text'\n \| 'error'\n \| 'warning'\n \| 'success';\n\n/* Background interaction states for the container /\nexport type ContainerBackground = 'none' \| 'hoverable' \| 'with';\n\n/* Gap sizes between container children /\nexport type ContainerGap = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Container component props extending HTML div attributes /\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n /* Whether to show a border around the container /\n border?: boolean;\n };\n\n/\n Container Component\n \n A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n \n ## Features\n * - Flexible Layout: Supports different padding, gap, and separator options\n * - Visual Variants: Multiple background transparency levels and border styles\n * - Responsive Design: Configurable rounded corners and spacing\n * - Semantic HTML: Proper div element with extensible attributes\n \n ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n \n @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n background,\n gap,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n borderColor,\n gap,\n }),\n className\n )}\n {...props}\n >\n {children}\n </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAC/B,+CACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;EACR;EACA,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;EACR;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,SAAS;GACT,~~WAAW;GACX,SAAS;GACT,~~MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;EACX;EACA,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;EACR;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;CACF;CACA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;CACP;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;CACT,CACF;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqEA~~,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;CACF,CAAC,GACD,SACF;CACA,GAAI;CAEH;AACE"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n HTMLAttributes,\n PropsWithChildren,\n} from 'react';\n\n/*\n Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n /\nexport const containerVariants = cva(\n 'flex flex-col text-foreground backdrop-blur',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n '2xl':\n 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n '3xl':\n 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n '4xl':\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n full: 'rounded-full',\n },\n transparency: {\n none: 'bg-card',\n xs: 'bg-card/95',\n sm: 'bg-card/90',\n md: 'bg-card/70',\n lg: 'bg-card/40',\n xl: 'bg-card/20',\n full: '',\n },\n padding: {\n none: 'p-0',\n sm: 'px-3 py-2',\n md: 'px-4 py-3',\n lg: 'px-6 py-4',\n xl: 'px-8 py-6',\n '2xl': 'px-10 py-8',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20',\n y: 'divide-y divide-dashed divide-text/20',\n both: 'divide-x divide-y divide-dashed divide-text/20',\n },\n border: {\n none: '',\n with: 'border-[1.3px]',\n },\n borderColor: {\n neutral: '',\n card: 'border-card',\n text: 'border-text',\n error: 'border-error',\n warning: 'border-warning',\n success: 'border-success',\n },\n background: {\n none: 'backdrop-blur-none',\n hoverable:\n 'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n defaultVariants: {\n roundedSize: 'lg',\n border: 'none',\n borderColor: 'text',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n compoundVariants: [\n {\n background: 'none',\n class: 'bg-transparent',\n },\n ],\n }\n);\n\n/* Available rounded corner sizes for the container /\nexport type ContainerRoundedSize = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Background transparency levels for the container /\nexport type ContainerTransparency = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Padding sizes for container content /\nexport type ContainerPadding = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Separator options for dividing container children /\nexport type ContainerSeparator = 'without' \| 'x' \| 'y' \| 'both';\n\n/* Border color options for the container /\nexport type ContainerBorderColor =\n \| 'neutral'\n \| 'card'\n \| 'text'\n \| 'error'\n \| 'warning'\n \| 'success';\n\n/* Background interaction states for the container /\nexport type ContainerBackground = 'none' \| 'hoverable' \| 'with';\n\n/* Gap sizes between container children /\nexport type ContainerGap = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Container component props extending HTML div attributes /\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n /* Whether to show a border around the container /\n border?: boolean;\n };\n\n/\n Container Component\n \n A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n \n ## Features\n * - Flexible Layout: Supports different padding, gap, and separator options\n * - Visual Variants: Multiple background transparency levels and border styles\n * - Responsive Design: Configurable rounded corners and spacing\n * - Semantic HTML: Proper div element with extensible attributes\n \n ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n \n @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n background,\n gap,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n borderColor,\n gap,\n }),\n className\n )}\n {...props}\n >\n {children}\n </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAC/B,+CACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;EACR;EACA,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;EACR;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;EACX;EACA,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;EACR;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;CACF;CACA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;CACP;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;CACT,CACF;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;CACF,CAAC,GACD,SACF;CACA,GAAI;CAEH;AACE"}

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useUser } from "../../api/useUser/index.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useUser } from "../../api/useUser/index.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/CopyButton/index.mjs CHANGED Viewed

@@ -55,7 +55,7 @@ import { useIntlayer } from "react-intlayer";
 *   content="https://example.com/api/endpoint"
 *   label="Copy API endpoint"
 *   variant="outline"
-*   color="primary"
+*   color="text"
 *   size="icon-md"
 * />
 * ```

package/dist/esm/components/CopyButton/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps } from '../Button';\n\n/*\n Props for the CopyButton component\n /\ntype CopyButtonProps = {\n /\n The text content to copy to the clipboard, or a resolver invoked when the\n * button is pressed.\n \n The resolver form exists for content that is not worth keeping in memory —\n * or shipping to the browser — until someone actually asks for it.\n \n @example\n * ```tsx\n * <CopyButton content=\"Hello World!\" />\n * <CopyButton content={() => fetch(url).then((response) => response.text())} />\n * ```\n /\n content: string \| (() => string \| Promise<string>);\n // `content` is also an RDFa attribute on `HTMLAttributes`, whose `string`\n // type would intersect the resolver form away.\n} & Omit<Partial<ButtonProps>, 'content'>;\n\n/\n CopyButton - A specialized button component for copying text to the clipboard\n \n This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n \n ## Key Features\n * - Clipboard Integration: Uses modern Clipboard API for reliable text copying\n * - Visual Feedback: Icon changes from copy to check mark on successful copy\n * - Auto-Reset: Automatically reverts to copy icon after 1 second\n * - Error Handling: Graceful error handling with console logging\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Internationalization: Multi-language support via Intlayer\n \n ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n \n ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n \n ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n \n @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n \n @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n * content=\"https://example.com/api/endpoint\"\n * label=\"Copy API endpoint\"\n * variant=\"outline\"\n * color=\"~~primary~~\"\n * size=\"icon-md\"\n * />\n * ```\n \n @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n * <pre className=\"bg-gray-100 p-4 rounded\">\n * <code>npm install @intlayer/design-system</code>\n * </pre>\n * <CopyButton\n * content=\"npm install @intlayer/design-system\"\n * className=\"absolute top-2 right-2\"\n * label=\"Copy installation command\"\n * />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n const [copied, setCopied] = useState(false);\n const [error, setError] = useState(false);\n const { label } = useIntlayer('copy-button');\n\n const handleCopy = async () => {\n try {\n setError(false);\n const text = typeof content === 'function' ? await content() : content;\n await navigator.clipboard.writeText(text);\n setCopied(true);\n } catch (error) {\n console.error('Failed to copy text: ', error);\n setError(true);\n }\n };\n\n useEffect(() => {\n if (copied \|\| error) {\n const timer = setTimeout(() => {\n setCopied(false);\n setError(false);\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [copied, error]);\n\n // Determine the current state for accessibility\n const getAriaLabel = () => {\n if (copied) return 'Content copied to clipboard';\n if (error) return 'Failed to copy content';\n return props.label ?? label.value;\n };\n\n return (\n <Button\n Icon={copied ? CopyCheckIcon : CopyIcon}\n onClick={handleCopy}\n variant=\"hoverable\"\n color=\"text\"\n size=\"icon-sm\"\n tabIndex={0}\n title={getAriaLabel()}\n {...props}\n label={getAriaLabel()}\n aria-describedby={\n copied ? 'copy-success' : error ? 'copy-error' : undefined\n }\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,MAAa,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,EAAE,UAAU,YAAY,aAAa;CAE3C,MAAM,aAAa,YAAY;EAC7B,IAAI;GACF,SAAS,KAAK;GACd,MAAM,OAAO,OAAO,YAAY,aAAa,MAAM,QAAQ,IAAI;GAC/D,MAAM,UAAU,UAAU,UAAU,IAAI;GACxC,UAAU,IAAI;EAChB,SAAS,OAAO;GACd,QAAQ,MAAM,yBAAyB,KAAK;GAC5C,SAAS,IAAI;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;IAC7B,UAAU,KAAK;IACf,SAAS,KAAK;GAChB,GAAG,GAAI;GACP,aAAa,aAAa,KAAK;EACjC;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,qBAAqB;EACzB,IAAI,QAAQ,OAAO;EACnB,IAAI,OAAO,OAAO;EAClB,OAAO,MAAM,SAAS,MAAM;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAQ;EACR,OAAM;EACN,MAAK;EACL,UAAU;EACV,OAAO,aAAa;EACpB,GAAI;EACJ,OAAO,aAAa;EACpB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;CAEpD;AAEL"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps } from '../Button';\n\n/*\n Props for the CopyButton component\n /\ntype CopyButtonProps = {\n /\n The text content to copy to the clipboard, or a resolver invoked when the\n * button is pressed.\n \n The resolver form exists for content that is not worth keeping in memory —\n * or shipping to the browser — until someone actually asks for it.\n \n @example\n * ```tsx\n * <CopyButton content=\"Hello World!\" />\n * <CopyButton content={() => fetch(url).then((response) => response.text())} />\n * ```\n /\n content: string \| (() => string \| Promise<string>);\n // `content` is also an RDFa attribute on `HTMLAttributes`, whose `string`\n // type would intersect the resolver form away.\n} & Omit<Partial<ButtonProps>, 'content'>;\n\n/\n CopyButton - A specialized button component for copying text to the clipboard\n \n This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n \n ## Key Features\n * - Clipboard Integration: Uses modern Clipboard API for reliable text copying\n * - Visual Feedback: Icon changes from copy to check mark on successful copy\n * - Auto-Reset: Automatically reverts to copy icon after 1 second\n * - Error Handling: Graceful error handling with console logging\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Internationalization: Multi-language support via Intlayer\n \n ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n \n ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n \n ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n \n @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n \n @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n * content=\"https://example.com/api/endpoint\"\n * label=\"Copy API endpoint\"\n * variant=\"outline\"\n * color=\"text\"\n * size=\"icon-md\"\n * />\n * ```\n \n @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n * <pre className=\"bg-gray-100 p-4 rounded\">\n * <code>npm install @intlayer/design-system</code>\n * </pre>\n * <CopyButton\n * content=\"npm install @intlayer/design-system\"\n * className=\"absolute top-2 right-2\"\n * label=\"Copy installation command\"\n * />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n const [copied, setCopied] = useState(false);\n const [error, setError] = useState(false);\n const { label } = useIntlayer('copy-button');\n\n const handleCopy = async () => {\n try {\n setError(false);\n const text = typeof content === 'function' ? await content() : content;\n await navigator.clipboard.writeText(text);\n setCopied(true);\n } catch (error) {\n console.error('Failed to copy text: ', error);\n setError(true);\n }\n };\n\n useEffect(() => {\n if (copied \|\| error) {\n const timer = setTimeout(() => {\n setCopied(false);\n setError(false);\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [copied, error]);\n\n // Determine the current state for accessibility\n const getAriaLabel = () => {\n if (copied) return 'Content copied to clipboard';\n if (error) return 'Failed to copy content';\n return props.label ?? label.value;\n };\n\n return (\n <Button\n Icon={copied ? CopyCheckIcon : CopyIcon}\n onClick={handleCopy}\n variant=\"hoverable\"\n color=\"text\"\n size=\"icon-sm\"\n tabIndex={0}\n title={getAriaLabel()}\n {...props}\n label={getAriaLabel()}\n aria-describedby={\n copied ? 'copy-success' : error ? 'copy-error' : undefined\n }\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,MAAa,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,EAAE,UAAU,YAAY,aAAa;CAE3C,MAAM,aAAa,YAAY;EAC7B,IAAI;GACF,SAAS,KAAK;GACd,MAAM,OAAO,OAAO,YAAY,aAAa,MAAM,QAAQ,IAAI;GAC/D,MAAM,UAAU,UAAU,UAAU,IAAI;GACxC,UAAU,IAAI;EAChB,SAAS,OAAO;GACd,QAAQ,MAAM,yBAAyB,KAAK;GAC5C,SAAS,IAAI;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;IAC7B,UAAU,KAAK;IACf,SAAS,KAAK;GAChB,GAAG,GAAI;GACP,aAAa,aAAa,KAAK;EACjC;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,qBAAqB;EACzB,IAAI,QAAQ,OAAO;EACnB,IAAI,OAAO,OAAO;EAClB,OAAO,MAAM,SAAS,MAAM;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAQ;EACR,OAAM;EACN,MAAK;EACL,UAAU;EACV,OAAO,aAAa;EACpB,GAAI;EACJ,OAAO,aAAa;EACpB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;CAEpD;AAEL"}

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
-import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
@@ -8,6 +7,7 @@ import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { renameKey } from "./object.mjs";
 import { Label } from "../../Label/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
@@ -16,9 +16,9 @@ import { SafeHtmlRenderer } from "./SafeHtmlRenderer.mjs";
 import { Fragment, Suspense, lazy, memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash, WandSparkles } from "lucide-react";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { camelCaseToSentence } from "@intlayer/config/client";

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
+import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAddDictionary } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
-import { Button } from "../../Button/Button.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { InputElement } from "../../Form/elements/InputElement.mjs";

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs CHANGED Viewed

@@ -1,16 +1,16 @@
 'use client';
 import { cn } from "../../../utils/cn.mjs";
-import { useSession } from "../../../api/useAuth/useSession.mjs";
-import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
-import { useGetDictionaries } from "../../../api/hooks/dictionary.mjs";
-import { useGetProjects } from "../../../api/hooks/project.mjs";
-import { useGetTags } from "../../../api/hooks/tag.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
 import { Checkbox } from "../../Input/Checkbox.mjs";
 import { Input } from "../../Input/Input.mjs";
+import { useSession } from "../../../api/useAuth/useSession.mjs";
+import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
+import { useGetDictionaries } from "../../../api/hooks/dictionary.mjs";
+import { useGetProjects } from "../../../api/hooks/project.mjs";
+import { useGetTags } from "../../../api/hooks/tag.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { FormItem } from "../../Form/FormItem.mjs";
@@ -30,8 +30,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WandSparkles } from "lucide-react";
-import { useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContent } from "@intlayer/editor-react";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs CHANGED Viewed

@@ -13,8 +13,8 @@ import { StructureEditor } from "./StructureEditor.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true, rightContent }) => {

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED Viewed

@@ -5,8 +5,8 @@ import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Plus } from "lucide-react";
-import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/DictionaryFieldEditor/NodeEditor.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useGetDictionaries } from "../../api/hooks/dictionary.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetDictionaries } from "../../api/hooks/dictionary.mjs";
 import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
 import { Pagination } from "../Pagination/Pagination.mjs";
@@ -10,8 +10,8 @@ import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 import { useCallback, useDeferredValue, useEffect, useMemo, useState, useTransition } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 //#region src/components/DictionaryFieldEditor/NodeEditor.tsx

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs CHANGED Viewed

@@ -1,17 +1,17 @@
 'use client';
 import { cn } from "../../../utils/cn.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuth } from "../../../api/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useWriteDictionary } from "../../../api/hooks/editor.mjs";
-import { Button } from "../../Button/Button.mjs";
 import { Modal } from "../../Modal/Modal.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
-import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {