npm - @intlayer/design-system - Versions diffs - 8.11.3 → 8.12.0-canary.0 - Mend

@intlayer/design-system 8.11.3 → 8.12.0-canary.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 (259) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n Horizontal alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownAlign {\n /* Align panel to the start (left in LTR, right in RTL) of the trigger /\n START = 'start',\n /* Align panel to the end (right in LTR, left in RTL) of the trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownYAlign {\n /* Position panel below the trigger (default) /\n BELOW = 'below',\n /* Position panel above the trigger /\n ABOVE = 'above',\n}\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default DropDownAlign.START\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n\n /\n Vertical alignment of the panel relative to the trigger\n * @default DropDownYAlign.BELOW\n /\n yAlign?: DropDownYAlign \| `${DropDownYAlign}`;\n\n /\n Additional className applied directly to the MaxHeightSmoother container.\n * Useful for adding transition delays — e.g. `\"delay-0 group-hover/dropdown:delay-500\"`\n * gives an open delay while keeping the close instant.\n /\n smootherClassName?: string;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n \n // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n * <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n /\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = DropDownAlign.START,\n yAlign = DropDownYAlign.BELOW,\n identifier,\n className,\n smootherClassName,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute z-100 min-w-full',\n / Horizontal positioning /\n align === DropDownAlign.START && 'left-0',\n align === DropDownAlign.END && 'right-0',\n / Vertical positioning */\n yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]',\n smootherClassName\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,gCAAgC,SAAS;CACvD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;AACE;;;;;;;;;;;;;;;;;;;;;;;AAoCP,MAAM,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC,QAAD;CACE,WAAW,GAAG;EACZ;EACA;EACA;CACF,CAAC;CACD,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;EAEd,AAAC,EAAE,cAAoC,MAAM;CAC/C;CACA,SAAQ;CACR,GAAI;CAEH;AACK;;;;AAMV,IAAY,gBAAL;;CAEL;;CAEA;;AACF;;;;AAKA,IAAY,iBAAL;;CAEL;;CAEA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,iBACA,kBACA,YACA,WACA,mBACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,6BAEA,qBAAiC,UACjC,mBAA+B,WAE/B,sBAAmC,2BACnC,sBAAmC,8BACnC,SACF;CACA,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC,mBAAD;EACY;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,mFACF,iBACF;EACA,GAAI;EAEH;CACgB;AAChB;AAGP,SAAS,UAAU;AACnB,SAAS,QAAQ"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n Horizontal alignment options for the dropdown panel relative to the trigger\n /\nexport type DropDownAlign = \n \| 'start' \|\n 'end';\n\n/\n Vertical alignment options for the dropdown panel relative to the trigger\n /\nexport type DropDownYAlign = \n \| 'below' \|\n 'above';\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default 'start'\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n\n /\n Vertical alignment of the panel relative to the trigger\n * @default 'below'\n /\n yAlign?: DropDownYAlign \| `${DropDownYAlign}`;\n\n /\n Additional className applied directly to the MaxHeightSmoother container.\n * Useful for adding transition delays — e.g. `\"delay-0 group-hover/dropdown:delay-500\"`\n * gives an open delay while keeping the close instant.\n /\n smootherClassName?: string;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align=\"end\" isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n \n // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign=\"above\" isOverable>\n * <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n /\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = 'start',\n yAlign = 'below',\n identifier,\n className,\n smootherClassName,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute z-100 min-w-full',\n / Horizontal positioning /\n align === 'start' && 'left-0',\n align === 'end' && 'right-0',\n / Vertical positioning */\n yAlign === 'below' && 'top-[calc(100%+0.5rem)]',\n yAlign === 'above' && 'bottom-[calc(100%+0.5rem)]',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]',\n smootherClassName\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,gCAAgC,SAAS;CACvD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;AACE;;;;;;;;;;;;;;;;;;;;;;;AAoCP,MAAM,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC,QAAD;CACE,WAAW,GAAG;EACZ;EACA;EACA;CACF,CAAC;CACD,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;EAEd,AAAC,EAAE,cAAoC,MAAM;CAC/C;CACA,SAAQ;CACR,GAAI;CAEH;AACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GV,MAAM,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,SACR,SAAS,SACT,YACA,WACA,mBACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,6BAEA,UAAU,WAAW,UACrB,UAAU,SAAS,WAEnB,WAAW,WAAW,2BACtB,WAAW,WAAW,8BACtB,SACF;CACA,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC,mBAAD;EACY;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,mFACF,iBACF;EACA,GAAI;EAEH;CACgB;AAChB;AAGP,SAAS,UAAU;AACnB,SAAS,QAAQ"}

package/dist/esm/components/EditableField/EditableFieldLayout.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Button } from "../Button/Button.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Check, Pencil, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/EditableField/EditableFieldLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button, ~~ButtonColor, ButtonSize, ButtonVariant~~ } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant~~={ButtonVariant.HOVERABLE}~~\n size~~={ButtonSize.ICON_SM}~~\n color~~={ButtonColor.TEXT}~~\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color~~={ButtonColor.TEXT}~~\n variant~~={ButtonVariant.HOVERABLE}~~\n className=\"!text-current\"\n size~~={ButtonSize.ICON_SM}~~\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color~~={ButtonColor.TEXT}~~\n variant~~={ButtonVariant.HOVERABLE}~~\n size~~={ButtonSize.ICON_SM}~~\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,mBAAmB,OAAwB,IAAI;CAErD,MAAM,cAAc,MAA2C;EAC7D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,OAAO;CACT;CAEA,MAAM,gBAAgB,MAA2C;EAC/D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,SAAS;CACX;CAEA,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,aAAa;EACtC,IAAI,aAAa,UAAU,SAAS,EAAE,KAAK,MAAM,IAE/C;EAIF,IACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,MAAc,GACnD;GACA,aAAa,KAAK;GAClB,OAAO;EACT;CACF,GACA,CAAC,MAAM,CACT;CAEA,gBAAgB;EACd,IAAI,WACF,SAAS,iBAAiB,SAAS,kBAAkB;OAErD,SAAS,oBAAoB,SAAS,kBAAkB;EAG1D,aAAa,SAAS,oBAAoB,SAAS,kBAAkB;CACvE,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;GACd,aAAa,IAAI;GACjB,UAAU,CAAC;EACb;EACA,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,QAAQ;aADrE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN;~~KACA~~;~~KACA~~;~~KACA~~,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;IACD,oBAAC,QAAD;KACE,OAAM;KACN;~~KACA~~;~~KACA~~,WAAU;KACV;~~KACA~~,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;GACE;KA/BE,OAAO,SAAS,CA+BlB,GAEL,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,SAAS;aADrE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,IACN,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN;~~IACA~~;~~IACA~~;~~IACA~~,WAAU;IACV,UAAU;IACV,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,aAAa,IAAI;IACnB;GACD,EACE;IACD;;AAEV"}
1	+ {"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant=\"hoverable\"\n size=\"icon-sm\"\n color=\"text\"\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color=\"text\"\n variant=\"hoverable\"\n className=\"!text-current\"\n size=\"icon-sm\"\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color=\"text\"\n variant=\"hoverable\"\n size=\"icon-sm\"\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,mBAAmB,OAAwB,IAAI;CAErD,MAAM,cAAc,MAA2C;EAC7D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,OAAO;CACT;CAEA,MAAM,gBAAgB,MAA2C;EAC/D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,SAAS;CACX;CAEA,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,aAAa;EACtC,IAAI,aAAa,UAAU,SAAS,EAAE,KAAK,MAAM,IAE/C;EAIF,IACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,MAAc,GACnD;GACA,aAAa,KAAK;GAClB,OAAO;EACT;CACF,GACA,CAAC,MAAM,CACT;CAEA,gBAAgB;EACd,IAAI,WACF,SAAS,iBAAiB,SAAS,kBAAkB;OAErD,SAAS,oBAAoB,SAAS,kBAAkB;EAG1D,aAAa,SAAS,oBAAoB,SAAS,kBAAkB;CACvE,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;GACd,aAAa,IAAI;GACjB,UAAU,CAAC;EACb;EACA,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,QAAQ;aADrE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN,SAAQ;KACR,MAAK;KACL,OAAM;KACN,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;IACD,oBAAC,QAAD;KACE,OAAM;KACN,OAAM;KACN,SAAQ;KACR,WAAU;KACV,MAAK;KACL,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;GACE;KA/BE,OAAO,SAAS,CA+BlB,GAEL,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,SAAS;aADrE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,IACN,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,OAAM;IACN,SAAQ;IACR,MAAK;IACL,WAAU;IACV,UAAU;IACV,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,aAAa,IAAI;IACnB;GACD,EACE;IACD;;AAEV"}

package/dist/esm/components/EditableField/EditableFieldTextArea.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
+import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
 import { useImperativeHandle, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/IDE/CopyCode.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
-import { PopoverXAlign } from "../Popover/static.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
 import { CopyButton } from "../CopyButton/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/IDE/CopyCode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, ~~PopoverXAlign~~ } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} {...props} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign~~={PopoverXAlign.END}~~\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;CAEjD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;EAAQ,IAEvC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV;~~aAHF~~,CAKE,oBAAC,UAAD,YAAS,MAAc,IACvB,oBAAC,KAAD;IAAG,WAAU;cAAgB;GAAe,EAC9B;IACT;;AAEb"}
1	+ {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} {...props} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign=\"end\"\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;CAEjD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;EAAQ,IAEvC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAO;aAHT,CAKE,oBAAC,UAAD,YAAS,MAAc,IACvB,oBAAC,KAAD;IAAG,WAAU;cAAgB;GAAe,EAC9B;IACT;;AAEb"}

package/dist/esm/components/Input/Checkbox.mjs CHANGED Viewed

@@ -32,7 +32,7 @@ const checkboxVariants = cva([
 			neutral: "border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral",
 			light: "border-white/30 text-white ring-white/20 checked:border-white checked:bg-white",
 			text: "border-text/30 text-text ring-text/20 checked:border-text checked:bg-text",
-			["text-inverse"]: "border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
+			"text-inverse": "border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
 			dark: "border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800",
 			error: "border-error/30 text-error ring-error/20 checked:border-error checked:bg-error",
 			success: "border-success/30 text-success ring-success/20 checked:border-success checked:bg-success",
@@ -50,26 +50,6 @@ const checkboxVariants = cva([
 		size: "md"
 	}
 });
-let CheckboxSize = /* @__PURE__ */ function(CheckboxSize) {
-	CheckboxSize["XS"] = "xs";
-	CheckboxSize["SM"] = "sm";
-	CheckboxSize["MD"] = "md";
-	CheckboxSize["LG"] = "lg";
-	return CheckboxSize;
-}({});
-let CheckboxColor = /* @__PURE__ */ function(CheckboxColor) {
-	CheckboxColor["PRIMARY"] = "primary";
-	CheckboxColor["SECONDARY"] = "secondary";
-	CheckboxColor["NEUTRAL"] = "neutral";
-	CheckboxColor["LIGHT"] = "light";
-	CheckboxColor["TEXT"] = "text";
-	CheckboxColor["TEXT_INVERSE"] = "text-inverse";
-	CheckboxColor["DARK"] = "dark";
-	CheckboxColor["ERROR"] = "error";
-	CheckboxColor["SUCCESS"] = "success";
-	CheckboxColor["CUSTOM"] = "custom";
-	return CheckboxColor;
-}({});
 const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
 	type: "checkbox",
 	className: cn(checkboxVariants({
@@ -96,5 +76,5 @@ const Checkbox = (props) => {
 };
 //#endregion
-export { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants };
+export { Checkbox, checkboxVariants };
 //# sourceMappingURL=Checkbox.mjs.map

package/dist/esm/components/Input/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n [\n 'appearance-none',\n 'relative cursor-pointer border-2',\n 'focus:outline-0',\n 'checked:hover:opacity-80',\n 'ring-offset-background',\n 'hover:bg-neutral-500/10',\n 'disabled:opacity-50',\n\n // Ring + animation\n 'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n // centered custom checkmark with text-opposite color\n \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n 'checked:before:flex checked:before:items-center checked:before:justify-center',\n 'checked:before:text-text-opposite/80',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n \"after:absolute after:-inset-2 after:content-['']\",\n ].join(' '),\n {\n variants: {\n variant: {\n default: '',\n },\n size: {\n xs: 'size-3 rounded-sm',\n sm: 'size-4 rounded-md',\n md: 'size-5 rounded-lg',\n lg: 'size-6 rounded-xl',\n },\n color: {\n primary:\n 'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n secondary:\n 'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n neutral:\n 'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n light:\n 'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n ['text-inverse']:\n 'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n error:\n 'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n success:\n 'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n custom:\n 'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'text',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n }\n);\n\nexport ~~enum~~ CheckboxSize ~~{\n XS~~ = 'xs'~~,\n SM~~ = 'sm'~~,\n MD~~ = 'md'~~,\n LG~~ = 'lg',\n}\n\nexport ~~enum~~ CheckboxColor {\n ~~PRIMARY~~ = 'primary',\n ~~SECONDARY~~ = 'secondary',\n ~~NEUTRAL~~ = 'neutral',\n ~~LIGHT~~ = 'light',\n ~~TEXT~~ = 'text',\n ~~TEXT_INVERSE~~ = 'text-inverse',\n ~~DARK~~ = 'dark',\n ~~ERROR~~ = 'error',\n ~~SUCCESS~~ = 'success',\n ~~CUSTOM~~ = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof checkboxVariants>,\n 'validationStyleEnabled' \| 'size' \| 'color'\n > & {\n size?: CheckboxSize \| `${CheckboxSize}`;\n color?: CheckboxColor \| `${CheckboxColor}`;\n labelClassName?: string;\n };\n\nconst Input: FC<CheckboxProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n labelClassName,\n ...props\n}) => (\n <input\n type=\"checkbox\"\n className={cn(\n checkboxVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n {...props}\n />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className={cn(\n 'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n props.size === 'xs' && 'text-xs',\n props.labelClassName\n )}\n >\n <Input id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <Input id={id ?? name} {...props} />\n );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;~~IACL~~,~~iBACC~~;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;~~AAEA~~,~~IAAY,eAAL;CACL;CACA;CACA;CACA;;AACF;AAEA,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAkBA,~~MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;EAAQ,IAClC,KACI;MAEP,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;CAAQ;AAEvC"}
1	+ {"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n [\n 'appearance-none',\n 'relative cursor-pointer border-2',\n 'focus:outline-0',\n 'checked:hover:opacity-80',\n 'ring-offset-background',\n 'hover:bg-neutral-500/10',\n 'disabled:opacity-50',\n\n // Ring + animation\n 'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n // centered custom checkmark with text-opposite color\n \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n 'checked:before:flex checked:before:items-center checked:before:justify-center',\n 'checked:before:text-text-opposite/80',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n \"after:absolute after:-inset-2 after:content-['']\",\n ].join(' '),\n {\n variants: {\n variant: {\n default: '',\n },\n size: {\n xs: 'size-3 rounded-sm',\n sm: 'size-4 rounded-md',\n md: 'size-5 rounded-lg',\n lg: 'size-6 rounded-xl',\n },\n color: {\n primary:\n 'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n secondary:\n 'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n neutral:\n 'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n light:\n 'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n 'text-inverse':\n 'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n error:\n 'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n success:\n 'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n custom:\n 'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'text',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n }\n);\n\nexport type CheckboxSize = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nexport type CheckboxColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'light'\n \| 'text'\n \| 'text-inverse'\n \| 'dark'\n \| 'error'\n \| 'success'\n \| 'custom';\n\nexport type CheckboxProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof checkboxVariants>,\n 'validationStyleEnabled' \| 'size' \| 'color'\n > & {\n size?: CheckboxSize \| `${CheckboxSize}`;\n color?: CheckboxColor \| `${CheckboxColor}`;\n labelClassName?: string;\n };\n\nconst Input: FC<CheckboxProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n labelClassName,\n ...props\n}) => (\n <input\n type=\"checkbox\"\n className={cn(\n checkboxVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n {...props}\n />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className={cn(\n 'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n props.size === 'xs' && 'text-xs',\n props.labelClassName\n )}\n >\n <Input id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <Input id={id ?? name} {...props} />\n );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,gBACE;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAgCA,MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;EAAQ,IAClC,KACI;MAEP,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;CAAQ;AAEvC"}

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

@@ -41,16 +41,6 @@ const inputVariants = cva([
 		validationStyleEnabled: "disabled"
 	}
 });
-let InputVariant = /* @__PURE__ */ function(InputVariant) {
-	InputVariant["DEFAULT"] = "default";
-	InputVariant["INVISIBLE"] = "invisible";
-	return InputVariant;
-}({});
-let InputSize = /* @__PURE__ */ function(InputSize) {
-	InputSize["MD"] = "md";
-	InputSize["LG"] = "lg";
-	return InputSize;
-}({});
 const Input = ({ validationStyleEnabled = false, variant, size, className, ...props }) => /* @__PURE__ */ jsx("input", {
 	className: cn(inputVariants({
 		variant,
@@ -62,5 +52,5 @@ const Input = ({ validationStyleEnabled = false, variant, size, className, ...pr
 });
 //#endregion
-export { Input, InputSize, InputVariant, inputVariants };
+export { Input, inputVariants };
 //# sourceMappingURL=Input.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string \| undefined \| false \| null)[]) =>\n classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n [\n // base styles\n 'w-full select-text resize-none text-base shadow-none outline-none',\n 'transition-all duration-300 md:text-sm',\n 'ring-0',\n 'disabled:opacity-50',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n ].join(' '),\n {\n variants: {\n variant: {\n default: [\n 'text-text',\n 'bg-neutral-50 dark:bg-neutral-950',\n 'ring-text/20',\n\n // Focus ring\n 'disabled:ring-0',\n 'hover:ring-3',\n 'focus-within:ring-4',\n 'focus-visible:outline-none focus-visible:ring-4',\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 ].join(' '),\n invisible: 'border-none text-inherit outline-none ring-0',\n },\n size: {\n sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n md: 'px-2 py-3 md:py-2',\n lg: 'p-4',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n validationStyleEnabled: 'disabled',\n },\n }\n);\n\nexport ~~enum~~ InputVariant {\n ~~DEFAULT~~ = 'default',\n ~~INVISIBLE =~~ 'invisible',\n}\n\nexport ~~enum~~ InputSize {\n MD = 'md',\n ~~LG =~~ 'lg',\n}\n\nexport type InputProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n validationStyleEnabled = false,\n variant,\n size,\n className,\n ...props\n}) => (\n <input\n className={cn(\n inputVariants({\n variant,\n size,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n suppressHydrationWarning\n {...props}\n />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAElC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;GACF,EAAE,KAAK,GAAG;GACV,WAAW;EACb;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;CAC1B;AACF,CACF;~~AAEA~~,~~IAAY,eAAL;CACL;CACA;;AACF;AAEA,IAAY,YAAL;CACL;CACA;;AACF;AASA,~~MAAa,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC,SAAD;CACE,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA;CACA,GAAI;AACL"}
1	+ {"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string \| undefined \| false \| null)[]) =>\n classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n [\n // base styles\n 'w-full select-text resize-none text-base shadow-none outline-none',\n 'transition-all duration-300 md:text-sm',\n 'ring-0',\n 'disabled:opacity-50',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n ].join(' '),\n {\n variants: {\n variant: {\n default: [\n 'text-text',\n 'bg-neutral-50 dark:bg-neutral-950',\n 'ring-text/20',\n\n // Focus ring\n 'disabled:ring-0',\n 'hover:ring-3',\n 'focus-within:ring-4',\n 'focus-visible:outline-none focus-visible:ring-4',\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 ].join(' '),\n invisible: 'border-none text-inherit outline-none ring-0',\n },\n size: {\n sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n md: 'px-2 py-3 md:py-2',\n lg: 'p-4',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n validationStyleEnabled: 'disabled',\n },\n }\n);\n\nexport type InputVariant = \n \| 'default' \|\n 'invisible';\n\nexport type InputSize = \n \| 'md' \|\n 'lg';\n\nexport type InputProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n validationStyleEnabled = false,\n variant,\n size,\n className,\n ...props\n}) => (\n <input\n className={cn(\n inputVariants({\n variant,\n size,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n suppressHydrationWarning\n {...props}\n />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAElC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;GACF,EAAE,KAAK,GAAG;GACV,WAAW;EACb;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;CAC1B;AACF,CACF;AAiBA,MAAa,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC,SAAD;CACE,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA;CACA,GAAI;AACL"}

package/dist/esm/components/Input/Radio.mjs ADDED Viewed

@@ -0,0 +1,82 @@
+import { cn } from "../../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Input/Radio.tsx
+const radioVariants = cva([
+	"appearance-none",
+	"relative cursor-pointer rounded-full border-2",
+	"focus:outline-0",
+	"checked:hover:opacity-80",
+	"ring-offset-background",
+	"hover:bg-neutral-500/10",
+	"disabled:opacity-50",
+	"ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6",
+	"checked:before:absolute checked:before:inset-0 checked:before:flex",
+	"checked:before:items-center checked:before:justify-center",
+	"checked:before:content-['']",
+	"checked:before:m-auto checked:before:size-[45%]",
+	"checked:before:rounded-full checked:before:bg-text-opposite/80",
+	"after:absolute after:-inset-2 after:content-['']"
+].join(" "), {
+	variants: {
+		variant: { default: "" },
+		size: {
+			xs: "size-3",
+			sm: "size-4",
+			md: "size-5",
+			lg: "size-6"
+		},
+		color: {
+			primary: "border-primary/30 ring-primary/20 checked:border-primary checked:bg-primary",
+			secondary: "border-secondary/30 ring-secondary/20 checked:border-secondary checked:bg-secondary",
+			neutral: "border-neutral/30 ring-neutral/20 checked:border-neutral checked:bg-neutral",
+			light: "border-white/30 ring-white/20 checked:border-white checked:bg-white",
+			text: "border-text/30 ring-text/20 checked:border-text checked:bg-text",
+			"text-inverse": "border-text-inverse/30 ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
+			dark: "border-neutral-800/30 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800",
+			error: "border-error/30 ring-error/20 checked:border-error checked:bg-error",
+			success: "border-success/30 ring-success/20 checked:border-success checked:bg-success",
+			custom: "border-custom/30 ring-custom/20 checked:border-custom checked:bg-custom"
+		},
+		validationStyleEnabled: {
+			disabled: "",
+			enabled: "valid:border-success invalid:border-error"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		color: "text",
+		validationStyleEnabled: "disabled",
+		size: "md"
+	}
+});
+const RadioInput = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
+	type: "radio",
+	name,
+	className: cn(radioVariants({
+		variant,
+		size,
+		color,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+	}), className),
+	...props
+});
+const Radio = (props) => {
+	const { label, name, id } = props;
+	return label ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: id ?? name,
+		className: cn("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.size === "xs" && "text-xs", props.labelClassName),
+		children: [/* @__PURE__ */ jsx(RadioInput, {
+			id: id ?? name,
+			...props
+		}), label]
+	}) : /* @__PURE__ */ jsx(RadioInput, {
+		id: id ?? name,
+		...props
+	});
+};
+//#endregion
+export { Radio, radioVariants };
+//# sourceMappingURL=Radio.mjs.map

package/dist/esm/components/Input/Radio.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Radio.mjs","names":[],"sources":["../../../../src/components/Input/Radio.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const radioVariants = cva(\n [\n 'appearance-none',\n 'relative cursor-pointer rounded-full border-2',\n 'focus:outline-0',\n 'checked:hover:opacity-80',\n 'ring-offset-background',\n 'hover:bg-neutral-500/10',\n 'disabled:opacity-50',\n\n // Ring + animation\n 'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n // Centered dot when checked\n 'checked:before:absolute checked:before:inset-0 checked:before:flex',\n 'checked:before:items-center checked:before:justify-center',\n \"checked:before:content-['']\",\n 'checked:before:m-auto checked:before:size-[45%]',\n 'checked:before:rounded-full checked:before:bg-text-opposite/80',\n\n \"after:absolute after:-inset-2 after:content-['']\",\n ].join(' '),\n {\n variants: {\n variant: {\n default: '',\n },\n size: {\n xs: 'size-3',\n sm: 'size-4',\n md: 'size-5',\n lg: 'size-6',\n },\n color: {\n primary:\n 'border-primary/30 ring-primary/20 checked:border-primary checked:bg-primary',\n secondary:\n 'border-secondary/30 ring-secondary/20 checked:border-secondary checked:bg-secondary',\n neutral:\n 'border-neutral/30 ring-neutral/20 checked:border-neutral checked:bg-neutral',\n light:\n 'border-white/30 ring-white/20 checked:border-white checked:bg-white',\n text: 'border-text/30 ring-text/20 checked:border-text checked:bg-text',\n 'text-inverse':\n 'border-text-inverse/30 ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n dark: 'border-neutral-800/30 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n error:\n 'border-error/30 ring-error/20 checked:border-error checked:bg-error',\n success:\n 'border-success/30 ring-success/20 checked:border-success checked:bg-success',\n custom:\n 'border-custom/30 ring-custom/20 checked:border-custom checked:bg-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'text',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n }\n);\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type RadioColor =\n | 'primary'\n | 'secondary'\n | 'neutral'\n | 'light'\n | 'text'\n | 'text-inverse'\n | 'dark'\n | 'error'\n | 'success'\n | 'custom';\n\nexport type RadioProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size' | 'type'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof radioVariants>,\n 'validationStyleEnabled' | 'size' | 'color'\n > & {\n size?: RadioSize | `${RadioSize}`;\n color?: RadioColor | `${RadioColor}`;\n labelClassName?: string;\n };\n\nconst RadioInput: FC<RadioProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n labelClassName,\n ...props\n}) => (\n <input\n type=\"radio\"\n name={name}\n className={cn(\n radioVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n {...props}\n />\n);\n\nexport const Radio: FC<RadioProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className={cn(\n 'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n props.size === 'xs' && 'text-xs',\n props.labelClassName\n )}\n >\n <RadioInput id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <RadioInput id={id ?? name} {...props} />\n );\n};\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;CACA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,gBACE;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAgCA,MAAM,cAA8B,EAClC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACC;CACN,WAAW,GACT,cAAc;EACZ;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,YAAD;GAAY,IAAI,MAAM;GAAM,GAAI;EAAQ,IACvC,KACI;MAEP,oBAAC,YAAD;EAAY,IAAI,MAAM;EAAM,GAAI;CAAQ;AAE5C"}

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

@@ -1,7 +1,8 @@
-import { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants } from "./Checkbox.mjs";
-import { Input, InputSize, InputVariant, inputVariants } from "./Input.mjs";
+import { Checkbox, checkboxVariants } from "./Checkbox.mjs";
+import { Input, inputVariants } from "./Input.mjs";
 import { InputPassword } from "./InputPassword.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, OTPInput, OTPInputContext, inputSlotVariants, usePasswordManagerBadge, usePrevious } from "./OTPInput.mjs";
+import { Radio, radioVariants } from "./Radio.mjs";
 import { SearchInput } from "./SearchInput.mjs";
-export { Checkbox, CheckboxColor, CheckboxSize, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, OTPInput, OTPInputContext, SearchInput, checkboxVariants, inputSlotVariants, inputVariants, usePasswordManagerBadge, usePrevious };
+export { Checkbox, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, OTPInput, OTPInputContext, Radio, SearchInput, checkboxVariants, inputSlotVariants, inputVariants, radioVariants, usePasswordManagerBadge, usePrevious };

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

@@ -7,57 +7,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/KeyboardShortcut/KeyboardShortcut.tsx
 /**
-* Enum for available keyboard keys
-*/
-let KeyList = /* @__PURE__ */ function(KeyList) {
-	KeyList["⌘"] = "⌘";
-	KeyList["Ctrl"] = "Ctrl";
-	KeyList["Alt"] = "Alt";
-	KeyList["⌥"] = "⌥";
-	KeyList["Shift"] = "Shift";
-	KeyList["Meta"] = "Meta";
-	KeyList["F"] = "F";
-	KeyList["K"] = "K";
-	KeyList["L"] = "L";
-	KeyList["P"] = "P";
-	KeyList["S"] = "S";
-	KeyList["A"] = "A";
-	KeyList["B"] = "B";
-	KeyList["C"] = "C";
-	KeyList["D"] = "D";
-	KeyList["E"] = "E";
-	KeyList["G"] = "G";
-	KeyList["H"] = "H";
-	KeyList["I"] = "I";
-	KeyList["J"] = "J";
-	KeyList["M"] = "M";
-	KeyList["N"] = "N";
-	KeyList["O"] = "O";
-	KeyList["Q"] = "Q";
-	KeyList["R"] = "R";
-	KeyList["T"] = "T";
-	KeyList["U"] = "U";
-	KeyList["V"] = "V";
-	KeyList["W"] = "W";
-	KeyList["X"] = "X";
-	KeyList["Y"] = "Y";
-	KeyList["Z"] = "Z";
-	KeyList["Enter"] = "Enter";
-	KeyList["Escape"] = "Escape";
-	KeyList["Backspace"] = "Backspace";
-	KeyList["Tab"] = "Tab";
-	KeyList["Space"] = "Space";
-	KeyList["ArrowUp"] = "ArrowUp";
-	KeyList["ArrowDown"] = "ArrowDown";
-	KeyList["ArrowLeft"] = "ArrowLeft";
-	KeyList["ArrowRight"] = "ArrowRight";
-	KeyList["↑"] = "↑";
-	KeyList["↓"] = "↓";
-	KeyList["←"] = "←";
-	KeyList["→"] = "→";
-	return KeyList;
-}({});
-/**
 * Parse keyboard shortcut string into individual keys
 */
 const parseShortcut = (shortcut) => {
@@ -227,5 +176,5 @@ const KeyboardShortcut = ({ shortcut, onTriggered, display = true, disabled = fa
 };
 //#endregion
-export { KeyList, KeyboardShortcut };
+export { KeyboardShortcut };
 //# sourceMappingURL=KeyboardShortcut.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyboardShortcut.mjs","names":[],"sources":["../../../../src/components/KeyboardShortcut/KeyboardShortcut.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useState } from 'react';\n\n/*\n Enum for available keyboard keys\n /\nexport enum KeyList {\n '⌘' = '⌘',\n Ctrl = 'Ctrl',\n Alt = 'Alt',\n '⌥' = '⌥',\n Shift = 'Shift',\n Meta = 'Meta',\n F = 'F',\n K = 'K',\n L = 'L',\n P = 'P',\n S = 'S',\n A = 'A',\n B = 'B',\n C = 'C',\n D = 'D',\n E = 'E',\n G = 'G',\n H = 'H',\n I = 'I',\n J = 'J',\n M = 'M',\n N = 'N',\n O = 'O',\n Q = 'Q',\n R = 'R',\n T = 'T',\n U = 'U',\n V = 'V',\n W = 'W',\n X = 'X',\n Y = 'Y',\n Z = 'Z',\n Enter = 'Enter',\n Escape = 'Escape',\n Backspace = 'Backspace',\n Tab = 'Tab',\n Space = 'Space',\n ArrowUp = 'ArrowUp',\n ArrowDown = 'ArrowDown',\n ArrowLeft = 'ArrowLeft',\n ArrowRight = 'ArrowRight',\n '↑' = '↑',\n '↓' = '↓',\n '←' = '←',\n '→' = '→',\n}\n\n/\n Type-safe keyboard shortcut combinations\n * Note: Using string type to avoid union type complexity issues\n * Expected format: \"Key + Key\" (e.g., \"⌘ + F\", \"Ctrl + Shift + K\")\n /\nexport type KeyboardShortcutType = string;\n\nexport type KeyboardShortcutProps = {\n /* The keyboard shortcut combination (e.g., \"⌘ + F\" or \"Ctrl + K\") /\n shortcut: KeyboardShortcutType;\n /* Callback function triggered when the shortcut is pressed /\n onTriggered?: () => void;\n /* Whether to display the shortcut visually (default: true) /\n display?: boolean;\n /* Whether to disable the shortcut trigger (default: false) /\n disabled?: boolean;\n /* Additional CSS classes /\n className?: string;\n /* Size of the keyboard shortcut display /\n size?: 'sm' \| 'md' \| 'lg';\n};\n\n/\n Parse keyboard shortcut string into individual keys\n /\nconst parseShortcut = (shortcut: string): string[] => {\n return shortcut.split(' + ').map((key) => key.trim());\n};\n\n/\n Normalize key name for event comparison\n /\nconst normalizeKey = (key: string): string => {\n const keyMap: Record<string, string> = {\n '⌘': 'Meta',\n Ctrl: 'Control',\n Control: 'Control',\n Alt: 'Alt',\n '⌥': 'Alt',\n Shift: 'Shift',\n Meta: 'Meta',\n '↑': 'ArrowUp',\n '↓': 'ArrowDown',\n '←': 'ArrowLeft',\n '→': 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n };\n\n return keyMap[key] \|\| key;\n};\n\n/\n Check if the keyboard event matches the shortcut\n /\nconst matchesShortcut = (event: KeyboardEvent, keys: string[]): boolean => {\n const normalizedKeys = keys.map(normalizeKey);\n const hasModifiers = {\n Meta: normalizedKeys.includes('Meta'),\n Control: normalizedKeys.includes('Control'),\n Alt: normalizedKeys.includes('Alt'),\n Shift: normalizedKeys.includes('Shift'),\n };\n\n // Check if all required modifiers are pressed\n if (\n hasModifiers.Meta !== event.metaKey \|\|\n hasModifiers.Control !== event.ctrlKey \|\|\n hasModifiers.Alt !== event.altKey \|\|\n hasModifiers.Shift !== event.shiftKey\n ) {\n return false;\n }\n\n // Find the non-modifier key\n const nonModifierKey = keys.find(\n (key) =>\n !['⌘', 'Ctrl', 'Control', 'Alt', '⌥', 'Shift', 'Meta'].includes(\n normalizeKey(key)\n )\n );\n\n if (!nonModifierKey) return false;\n\n // Normalize the key for comparison\n const normalizedNonModifierKey = normalizeKey(nonModifierKey);\n\n // Compare the main key\n // For arrow keys, compare directly with event.key\n if (normalizedNonModifierKey.startsWith('Arrow')) {\n return event.key === normalizedNonModifierKey;\n }\n\n // For other keys, compare case-insensitive\n return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();\n};\n\n/\n Get display key symbol for better visual representation\n /\nconst getDisplayKey = (key: string): string => {\n const displayMap: Record<string, string> = {\n ArrowUp: '↑',\n ArrowDown: '↓',\n ArrowLeft: '←',\n ArrowRight: '→',\n };\n\n return displayMap[key] \|\| key;\n};\n\n/\n Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)\n /\nconst getDisplayShortcut = (shortcut: string, isMac: boolean): string => {\n let result = shortcut;\n\n if (isMac) {\n result = result.replace(/Ctrl/g, '⌘');\n result = result.replace(/Alt/g, '⌥');\n } else {\n result = result.replace(/⌘/g, 'Ctrl');\n result = result.replace(/⌥/g, 'Alt');\n }\n\n // Replace arrow key names with symbols\n result = result.replace(/ArrowUp/g, '↑');\n result = result.replace(/ArrowDown/g, '↓');\n result = result.replace(/ArrowLeft/g, '←');\n result = result.replace(/ArrowRight/g, '→');\n\n return result;\n};\n\n/\n KeyboardShortcut Component\n \n A reusable component that displays keyboard shortcuts and listens for key combinations.\n * Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.\n \n @example\n * ```tsx\n * <KeyboardShortcut\n * shortcut=\"⌘ + F\"\n * onTriggered={() => setShowSearch(true)}\n * />\n * ```\n /\nexport const KeyboardShortcut: FC<KeyboardShortcutProps> = ({\n shortcut,\n onTriggered,\n display = true,\n disabled = false,\n className,\n size = 'md',\n}) => {\n const { isMac } = useDevice();\n const displayShortcut = getDisplayShortcut(shortcut, isMac ?? false);\n const keys = parseShortcut(displayShortcut);\n const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set());\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n // 1. Identify input fields\n const target = event.target as HTMLElement;\n const isInputField =\n target.tagName === 'INPUT' \|\|\n target.tagName === 'TEXTAREA' \|\|\n target.isContentEditable;\n\n // ... (Your existing key visualization logic here) ...\n // Note: Copied your key tracking logic for context\n const currentKey = event.key;\n const normalizedEventKeys = new Set<string>();\n if (event.metaKey) normalizedEventKeys.add('⌘');\n if (event.ctrlKey) normalizedEventKeys.add('Ctrl');\n if (event.altKey) normalizedEventKeys.add(isMac ? '⌥' : 'Alt');\n if (event.shiftKey) normalizedEventKeys.add('Shift');\n\n if (currentKey.startsWith('Arrow')) {\n normalizedEventKeys.add(currentKey);\n normalizedEventKeys.add(getDisplayKey(currentKey));\n } else {\n normalizedEventKeys.add(currentKey.toUpperCase());\n }\n setPressedKeys(normalizedEventKeys);\n\n // 2. Trigger callback if shortcut matches\n if (!disabled && onTriggered && matchesShortcut(event, keys)) {\n // FIX: Check if the required shortcut is \"Escape\"\n const isEscapeShortcut = keys.includes('Escape');\n\n // Only block if it is an input field AND the shortcut is NOT Escape\n if (isInputField && !isEscapeShortcut) {\n return;\n }\n\n event.preventDefault();\n onTriggered();\n }\n };\n\n const handleKeyUp = () => {\n setPressedKeys(new Set());\n };\n\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n window.addEventListener('blur', handleKeyUp);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n window.removeEventListener('blur', handleKeyUp);\n };\n }, [keys, onTriggered, isMac, disabled]);\n if (!display) return null;\n\n /\n Check if a key is currently pressed\n */\n const isKeyPressed = (key: string): boolean => {\n const upperKey = key.toUpperCase();\n const normalizedKey = normalizeKey(key);\n\n return (\n pressedKeys.has(key) \|\|\n pressedKeys.has(upperKey) \|\|\n pressedKeys.has(normalizedKey) \|\|\n // Check for modifier key matches\n (key === '⌘' && pressedKeys.has('Meta')) \|\|\n (key === 'Ctrl' && pressedKeys.has('Control')) \|\|\n (key === '⌥' && pressedKeys.has('Alt')) \|\|\n (key === 'Alt' && pressedKeys.has('Alt')) \|\|\n // Check for arrow key symbols\n (key === '←' && pressedKeys.has('ArrowLeft')) \|\|\n (key === '→' && pressedKeys.has('ArrowRight')) \|\|\n (key === '↑' && pressedKeys.has('ArrowUp')) \|\|\n (key === '↓' && pressedKeys.has('ArrowDown'))\n );\n };\n\n return (\n <kbd\n className={cn(\n 'inline-flex items-center justify-center gap-0.5 p-0.5',\n 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n 'font-medium font-sans',\n 'border-1 border-neutral/20 text-neutral',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n size === 'lg' && 'text-base',\n className\n )}\n >\n {keys.map((key, index) => {\n const keyId = `${key}-${index}-${shortcut}`;\n const displayKey = getDisplayKey(key);\n return (\n <span key={keyId} className=\"inline-flex items-center\">\n {index > 0 && <span className=\"text-neutral/50\">+</span>}\n <span\n className={cn(\n 'min-w-4 px-0.5 text-center',\n isKeyPressed(key) && 'scale-120 font-bold text-text'\n )}\n suppressHydrationWarning\n >\n {displayKey}\n </span>\n </span>\n );\n })}\n </kbd>\n );\n};\n"],"mappings":";;;;;;;;;;;AASA,IAAY,UAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AA2BA,MAAM,iBAAiB,aAA+B;CACpD,OAAO,SAAS,MAAM,KAAK,EAAE,KAAK,QAAQ,IAAI,KAAK,CAAC;AACtD;;;;AAKA,MAAM,gBAAgB,QAAwB;CAmB5C,OAAO;EAjBL,KAAK;EACL,MAAM;EACN,SAAS;EACT,KAAK;EACL,KAAK;EACL,OAAO;EACP,MAAM;EACN,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,SAAS;EACT,WAAW;EACX,WAAW;EACX,YAAY;CAGF,EAAE,QAAQ;AACxB;;;;AAKA,MAAM,mBAAmB,OAAsB,SAA4B;CACzE,MAAM,iBAAiB,KAAK,IAAI,YAAY;CAC5C,MAAM,eAAe;EACnB,MAAM,eAAe,SAAS,MAAM;EACpC,SAAS,eAAe,SAAS,SAAS;EAC1C,KAAK,eAAe,SAAS,KAAK;EAClC,OAAO,eAAe,SAAS,OAAO;CACxC;CAGA,IACE,aAAa,SAAS,MAAM,WAC5B,aAAa,YAAY,MAAM,WAC/B,aAAa,QAAQ,MAAM,UAC3B,aAAa,UAAU,MAAM,UAE7B,OAAO;CAIT,MAAM,iBAAiB,KAAK,MACzB,QACC,CAAC;EAAC;EAAK;EAAQ;EAAW;EAAO;EAAK;EAAS;CAAM,EAAE,SACrD,aAAa,GAAG,CAClB,CACJ;CAEA,IAAI,CAAC,gBAAgB,OAAO;CAG5B,MAAM,2BAA2B,aAAa,cAAc;CAI5D,IAAI,yBAAyB,WAAW,OAAO,GAC7C,OAAO,MAAM,QAAQ;CAIvB,OAAO,MAAM,IAAI,YAAY,MAAM,yBAAyB,YAAY;AAC1E;;;;AAKA,MAAM,iBAAiB,QAAwB;CAQ7C,OAAO;EANL,SAAS;EACT,WAAW;EACX,WAAW;EACX,YAAY;CAGE,EAAE,QAAQ;AAC5B;;;;AAKA,MAAM,sBAAsB,UAAkB,UAA2B;CACvE,IAAI,SAAS;CAEb,IAAI,OAAO;EACT,SAAS,OAAO,QAAQ,SAAS,GAAG;EACpC,SAAS,OAAO,QAAQ,QAAQ,GAAG;CACrC,OAAO;EACL,SAAS,OAAO,QAAQ,MAAM,MAAM;EACpC,SAAS,OAAO,QAAQ,MAAM,KAAK;CACrC;CAGA,SAAS,OAAO,QAAQ,YAAY,GAAG;CACvC,SAAS,OAAO,QAAQ,cAAc,GAAG;CACzC,SAAS,OAAO,QAAQ,cAAc,GAAG;CACzC,SAAS,OAAO,QAAQ,eAAe,GAAG;CAE1C,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,MAAa,oBAA+C,EAC1D,UACA,aACA,UAAU,MACV,WAAW,OACX,WACA,OAAO,WACH;CACJ,MAAM,EAAE,UAAU,UAAU;CAE5B,MAAM,OAAO,cADW,mBAAmB,UAAU,SAAS,KACrB,CAAC;CAC1C,MAAM,CAAC,aAAa,kBAAkB,yBAAsB,IAAI,IAAI,CAAC;CAErE,gBAAgB;EACd,MAAM,iBAAiB,UAAyB;GAE9C,MAAM,SAAS,MAAM;GACrB,MAAM,eACJ,OAAO,YAAY,WACnB,OAAO,YAAY,cACnB,OAAO;GAIT,MAAM,aAAa,MAAM;GACzB,MAAM,sCAAsB,IAAI,IAAY;GAC5C,IAAI,MAAM,SAAS,oBAAoB,IAAI,GAAG;GAC9C,IAAI,MAAM,SAAS,oBAAoB,IAAI,MAAM;GACjD,IAAI,MAAM,QAAQ,oBAAoB,IAAI,QAAQ,MAAM,KAAK;GAC7D,IAAI,MAAM,UAAU,oBAAoB,IAAI,OAAO;GAEnD,IAAI,WAAW,WAAW,OAAO,GAAG;IAClC,oBAAoB,IAAI,UAAU;IAClC,oBAAoB,IAAI,cAAc,UAAU,CAAC;GACnD,OACE,oBAAoB,IAAI,WAAW,YAAY,CAAC;GAElD,eAAe,mBAAmB;GAGlC,IAAI,CAAC,YAAY,eAAe,gBAAgB,OAAO,IAAI,GAAG;IAE5D,MAAM,mBAAmB,KAAK,SAAS,QAAQ;IAG/C,IAAI,gBAAgB,CAAC,kBACnB;IAGF,MAAM,eAAe;IACrB,YAAY;GACd;EACF;EAEA,MAAM,oBAAoB;GACxB,+BAAe,IAAI,IAAI,CAAC;EAC1B;EAEA,OAAO,iBAAiB,WAAW,aAAa;EAChD,OAAO,iBAAiB,SAAS,WAAW;EAC5C,OAAO,iBAAiB,QAAQ,WAAW;EAE3C,aAAa;GACX,OAAO,oBAAoB,WAAW,aAAa;GACnD,OAAO,oBAAoB,SAAS,WAAW;GAC/C,OAAO,oBAAoB,QAAQ,WAAW;EAChD;CACF,GAAG;EAAC;EAAM;EAAa;EAAO;CAAQ,CAAC;CACvC,IAAI,CAAC,SAAS,OAAO;;;;CAKrB,MAAM,gBAAgB,QAAyB;EAC7C,MAAM,WAAW,IAAI,YAAY;EACjC,MAAM,gBAAgB,aAAa,GAAG;EAEtC,OACE,YAAY,IAAI,GAAG,KACnB,YAAY,IAAI,QAAQ,KACxB,YAAY,IAAI,aAAa,KAE5B,QAAQ,OAAO,YAAY,IAAI,MAAM,KACrC,QAAQ,UAAU,YAAY,IAAI,SAAS,KAC3C,QAAQ,OAAO,YAAY,IAAI,KAAK,KACpC,QAAQ,SAAS,YAAY,IAAI,KAAK,KAEtC,QAAQ,OAAO,YAAY,IAAI,WAAW,KAC1C,QAAQ,OAAO,YAAY,IAAI,YAAY,KAC3C,QAAQ,OAAO,YAAY,IAAI,SAAS,KACxC,QAAQ,OAAO,YAAY,IAAI,WAAW;CAE/C;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yDACA,kFACA,yBACA,2CACA,SAAS,QAAQ,WACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,aACjB,SACF;YAEC,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG;GACjC,MAAM,aAAa,cAAc,GAAG;GACpC,OACE,qBAAC,QAAD;IAAkB,WAAU;cAA5B,CACG,QAAQ,KAAK,oBAAC,QAAD;KAAM,WAAU;eAAkB;IAAO,IACvD,oBAAC,QAAD;KACE,WAAW,GACT,8BACA,aAAa,GAAG,KAAK,+BACvB;KACA;eAEC;IACG,EACF;MAXK,KAWL;EAEV,CAAC;CACE;AAET"}
1	+ {"version":3,"file":"KeyboardShortcut.mjs","names":[],"sources":["../../../../src/components/KeyboardShortcut/KeyboardShortcut.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useState } from 'react';\n\n/*\n Enum for available keyboard keys\n /\nexport type KeyList = \n \| 'Ctrl' \|\n 'Alt' \|\n 'Shift' \|\n 'Meta' \|\n 'F' \|\n 'K' \|\n 'L' \|\n 'P' \|\n 'S' \|\n 'A' \|\n 'B' \|\n 'C' \|\n 'D' \|\n 'E' \|\n 'G' \|\n 'H' \|\n 'I' \|\n 'J' \|\n 'M' \|\n 'N' \|\n 'O' \|\n 'Q' \|\n 'R' \|\n 'T' \|\n 'U' \|\n 'V' \|\n 'W' \|\n 'X' \|\n 'Y' \|\n 'Z' \|\n 'Enter' \|\n 'Escape' \|\n 'Backspace' \|\n 'Tab' \|\n 'Space' \|\n 'ArrowUp' \|\n 'ArrowDown' \|\n 'ArrowLeft' \|\n 'ArrowRight';\n\n/\n Type-safe keyboard shortcut combinations\n * Note: Using string type to avoid union type complexity issues\n * Expected format: \"Key + Key\" (e.g., \"⌘ + F\", \"Ctrl + Shift + K\")\n /\nexport type KeyboardShortcutType = string;\n\nexport type KeyboardShortcutProps = {\n /* The keyboard shortcut combination (e.g., \"⌘ + F\" or \"Ctrl + K\") /\n shortcut: KeyboardShortcutType;\n /* Callback function triggered when the shortcut is pressed /\n onTriggered?: () => void;\n /* Whether to display the shortcut visually (default: true) /\n display?: boolean;\n /* Whether to disable the shortcut trigger (default: false) /\n disabled?: boolean;\n /* Additional CSS classes /\n className?: string;\n /* Size of the keyboard shortcut display /\n size?: 'sm' \| 'md' \| 'lg';\n};\n\n/\n Parse keyboard shortcut string into individual keys\n /\nconst parseShortcut = (shortcut: string): string[] => {\n return shortcut.split(' + ').map((key) => key.trim());\n};\n\n/\n Normalize key name for event comparison\n /\nconst normalizeKey = (key: string): string => {\n const keyMap: Record<string, string> = {\n '⌘': 'Meta',\n Ctrl: 'Control',\n Control: 'Control',\n Alt: 'Alt',\n '⌥': 'Alt',\n Shift: 'Shift',\n Meta: 'Meta',\n '↑': 'ArrowUp',\n '↓': 'ArrowDown',\n '←': 'ArrowLeft',\n '→': 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n };\n\n return keyMap[key] \|\| key;\n};\n\n/\n Check if the keyboard event matches the shortcut\n /\nconst matchesShortcut = (event: KeyboardEvent, keys: string[]): boolean => {\n const normalizedKeys = keys.map(normalizeKey);\n const hasModifiers = {\n Meta: normalizedKeys.includes('Meta'),\n Control: normalizedKeys.includes('Control'),\n Alt: normalizedKeys.includes('Alt'),\n Shift: normalizedKeys.includes('Shift'),\n };\n\n // Check if all required modifiers are pressed\n if (\n hasModifiers.Meta !== event.metaKey \|\|\n hasModifiers.Control !== event.ctrlKey \|\|\n hasModifiers.Alt !== event.altKey \|\|\n hasModifiers.Shift !== event.shiftKey\n ) {\n return false;\n }\n\n // Find the non-modifier key\n const nonModifierKey = keys.find(\n (key) =>\n !['⌘', 'Ctrl', 'Control', 'Alt', '⌥', 'Shift', 'Meta'].includes(\n normalizeKey(key)\n )\n );\n\n if (!nonModifierKey) return false;\n\n // Normalize the key for comparison\n const normalizedNonModifierKey = normalizeKey(nonModifierKey);\n\n // Compare the main key\n // For arrow keys, compare directly with event.key\n if (normalizedNonModifierKey.startsWith('Arrow')) {\n return event.key === normalizedNonModifierKey;\n }\n\n // For other keys, compare case-insensitive\n return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();\n};\n\n/\n Get display key symbol for better visual representation\n /\nconst getDisplayKey = (key: string): string => {\n const displayMap: Record<string, string> = {\n ArrowUp: '↑',\n ArrowDown: '↓',\n ArrowLeft: '←',\n ArrowRight: '→',\n };\n\n return displayMap[key] \|\| key;\n};\n\n/\n Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)\n /\nconst getDisplayShortcut = (shortcut: string, isMac: boolean): string => {\n let result = shortcut;\n\n if (isMac) {\n result = result.replace(/Ctrl/g, '⌘');\n result = result.replace(/Alt/g, '⌥');\n } else {\n result = result.replace(/⌘/g, 'Ctrl');\n result = result.replace(/⌥/g, 'Alt');\n }\n\n // Replace arrow key names with symbols\n result = result.replace(/ArrowUp/g, '↑');\n result = result.replace(/ArrowDown/g, '↓');\n result = result.replace(/ArrowLeft/g, '←');\n result = result.replace(/ArrowRight/g, '→');\n\n return result;\n};\n\n/\n KeyboardShortcut Component\n \n A reusable component that displays keyboard shortcuts and listens for key combinations.\n * Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.\n \n @example\n * ```tsx\n * <KeyboardShortcut\n * shortcut=\"⌘ + F\"\n * onTriggered={() => setShowSearch(true)}\n * />\n * ```\n /\nexport const KeyboardShortcut: FC<KeyboardShortcutProps> = ({\n shortcut,\n onTriggered,\n display = true,\n disabled = false,\n className,\n size = 'md',\n}) => {\n const { isMac } = useDevice();\n const displayShortcut = getDisplayShortcut(shortcut, isMac ?? false);\n const keys = parseShortcut(displayShortcut);\n const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set());\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n // 1. Identify input fields\n const target = event.target as HTMLElement;\n const isInputField =\n target.tagName === 'INPUT' \|\|\n target.tagName === 'TEXTAREA' \|\|\n target.isContentEditable;\n\n // ... (Your existing key visualization logic here) ...\n // Note: Copied your key tracking logic for context\n const currentKey = event.key;\n const normalizedEventKeys = new Set<string>();\n if (event.metaKey) normalizedEventKeys.add('⌘');\n if (event.ctrlKey) normalizedEventKeys.add('Ctrl');\n if (event.altKey) normalizedEventKeys.add(isMac ? '⌥' : 'Alt');\n if (event.shiftKey) normalizedEventKeys.add('Shift');\n\n if (currentKey.startsWith('Arrow')) {\n normalizedEventKeys.add(currentKey);\n normalizedEventKeys.add(getDisplayKey(currentKey));\n } else {\n normalizedEventKeys.add(currentKey.toUpperCase());\n }\n setPressedKeys(normalizedEventKeys);\n\n // 2. Trigger callback if shortcut matches\n if (!disabled && onTriggered && matchesShortcut(event, keys)) {\n // FIX: Check if the required shortcut is \"Escape\"\n const isEscapeShortcut = keys.includes('Escape');\n\n // Only block if it is an input field AND the shortcut is NOT Escape\n if (isInputField && !isEscapeShortcut) {\n return;\n }\n\n event.preventDefault();\n onTriggered();\n }\n };\n\n const handleKeyUp = () => {\n setPressedKeys(new Set());\n };\n\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n window.addEventListener('blur', handleKeyUp);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n window.removeEventListener('blur', handleKeyUp);\n };\n }, [keys, onTriggered, isMac, disabled]);\n if (!display) return null;\n\n /\n Check if a key is currently pressed\n */\n const isKeyPressed = (key: string): boolean => {\n const upperKey = key.toUpperCase();\n const normalizedKey = normalizeKey(key);\n\n return (\n pressedKeys.has(key) \|\|\n pressedKeys.has(upperKey) \|\|\n pressedKeys.has(normalizedKey) \|\|\n // Check for modifier key matches\n (key === '⌘' && pressedKeys.has('Meta')) \|\|\n (key === 'Ctrl' && pressedKeys.has('Control')) \|\|\n (key === '⌥' && pressedKeys.has('Alt')) \|\|\n (key === 'Alt' && pressedKeys.has('Alt')) \|\|\n // Check for arrow key symbols\n (key === '←' && pressedKeys.has('ArrowLeft')) \|\|\n (key === '→' && pressedKeys.has('ArrowRight')) \|\|\n (key === '↑' && pressedKeys.has('ArrowUp')) \|\|\n (key === '↓' && pressedKeys.has('ArrowDown'))\n );\n };\n\n return (\n <kbd\n className={cn(\n 'inline-flex items-center justify-center gap-0.5 p-0.5',\n 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n 'font-medium font-sans',\n 'border-1 border-neutral/20 text-neutral',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n size === 'lg' && 'text-base',\n className\n )}\n >\n {keys.map((key, index) => {\n const keyId = `${key}-${index}-${shortcut}`;\n const displayKey = getDisplayKey(key);\n return (\n <span key={keyId} className=\"inline-flex items-center\">\n {index > 0 && <span className=\"text-neutral/50\">+</span>}\n <span\n className={cn(\n 'min-w-4 px-0.5 text-center',\n isKeyPressed(key) && 'scale-120 font-bold text-text'\n )}\n suppressHydrationWarning\n >\n {displayKey}\n </span>\n </span>\n );\n })}\n </kbd>\n );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import { KeyList, KeyboardShortcut } from "./KeyboardShortcut.mjs";
+import { KeyboardShortcut } from "./KeyboardShortcut.mjs";
-export { KeyList, KeyboardShortcut };
+export { KeyboardShortcut };