@intlayer/design-system 8.7.3 → 8.7.4
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.
- package/dist/esm/components/Accordion/Accordion.mjs +2 -2
- package/dist/esm/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/esm/components/Avatar/image.mjs +4 -14
- package/dist/esm/components/Avatar/image.mjs.map +1 -1
- package/dist/esm/components/Badge/index.mjs +21 -21
- package/dist/esm/components/Badge/index.mjs.map +1 -1
- package/dist/esm/components/Breadcrumb/index.mjs +13 -13
- package/dist/esm/components/Breadcrumb/index.mjs.map +1 -1
- package/dist/esm/components/Browser/Browser.content.mjs +0 -20
- package/dist/esm/components/Browser/Browser.content.mjs.map +1 -1
- package/dist/esm/components/Button/Button.mjs +60 -60
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/Carousel/index.mjs +6 -6
- package/dist/esm/components/Carousel/index.mjs.map +1 -1
- package/dist/esm/components/ContentEditor/ContentEditor.mjs +1 -1
- package/dist/esm/components/ContentEditor/ContentEditor.mjs.map +1 -1
- package/dist/esm/components/ContentEditor/ContentEditorInput.mjs +7 -7
- package/dist/esm/components/ContentEditor/ContentEditorInput.mjs.map +1 -1
- package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs +6 -6
- package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs.map +1 -1
- package/dist/esm/components/CopyButton/index.mjs +3 -3
- package/dist/esm/components/CopyButton/index.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs +28 -38
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.mjs +0 -42
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs +3 -3
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +2 -2
- package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +10 -10
- package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +11 -11
- package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs +7 -7
- package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs +4 -4
- package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs.map +1 -1
- package/dist/esm/components/DropDown/index.mjs +2 -2
- package/dist/esm/components/DropDown/index.mjs.map +1 -1
- package/dist/esm/components/EditableField/EditableFieldLayout.mjs +9 -9
- package/dist/esm/components/EditableField/EditableFieldLayout.mjs.map +1 -1
- package/dist/esm/components/IDE/CopyCode.mjs +1 -1
- package/dist/esm/components/IDE/CopyCode.mjs.map +1 -1
- package/dist/esm/components/Link/Link.mjs +70 -70
- package/dist/esm/components/Link/Link.mjs.map +1 -1
- package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs +6 -6
- package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs.map +1 -1
- package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs +3 -3
- package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs.map +1 -1
- package/dist/esm/components/Modal/Modal.mjs +4 -4
- package/dist/esm/components/Modal/Modal.mjs.map +1 -1
- package/dist/esm/components/Navbar/DesktopNavbar.mjs +1 -1
- package/dist/esm/components/Navbar/DesktopNavbar.mjs.map +1 -1
- package/dist/esm/components/Pagination/Pagination.mjs +14 -12
- package/dist/esm/components/Pagination/Pagination.mjs.map +1 -1
- package/dist/esm/components/Popover/dynamic.mjs +9 -9
- package/dist/esm/components/Popover/dynamic.mjs.map +1 -1
- package/dist/esm/components/Popover/static.mjs +1 -1
- package/dist/esm/components/Popover/static.mjs.map +1 -1
- package/dist/esm/components/RightDrawer/RightDrawer.mjs +5 -5
- package/dist/esm/components/RightDrawer/RightDrawer.mjs.map +1 -1
- package/dist/esm/components/Select/Multiselect.mjs +1 -1
- package/dist/esm/components/Select/Multiselect.mjs.map +1 -1
- package/dist/esm/components/Select/Select.mjs +1 -1
- package/dist/esm/components/Select/Select.mjs.map +1 -1
- package/dist/esm/components/SwitchSelector/index.mjs +20 -20
- package/dist/esm/components/SwitchSelector/index.mjs.map +1 -1
- package/dist/esm/components/Tab/Tab.mjs +1 -1
- package/dist/esm/components/Tab/Tab.mjs.map +1 -1
- package/dist/esm/components/TabSelector/TabSelector.mjs +1 -1
- package/dist/esm/components/TabSelector/TabSelector.mjs.map +1 -1
- package/dist/esm/components/Table/ExpandButton.mjs +1 -1
- package/dist/esm/components/Table/ExpandButton.mjs.map +1 -1
- package/dist/esm/components/Table/SmartTable.mjs +1 -1
- package/dist/esm/components/Table/SmartTable.mjs.map +1 -1
- package/dist/esm/components/Tag/index.mjs +38 -38
- package/dist/esm/components/Tag/index.mjs.map +1 -1
- package/dist/esm/components/TechLogo/TechLogo.mjs +36 -36
- package/dist/esm/components/TechLogo/TechLogo.mjs.map +1 -1
- package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs +12 -12
- package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map +1 -1
- package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs +9 -9
- package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map +1 -1
- package/dist/esm/components/Toaster/useToast.mjs +9 -26
- package/dist/esm/components/Toaster/useToast.mjs.map +1 -1
- package/dist/esm/hooks/useAuth/useOAuth2.mjs +1 -1
- package/dist/esm/hooks/useAuth/useSession.mjs +1 -1
- package/dist/esm/libs/auth.mjs +1 -1
- package/dist/types/components/Badge/index.d.ts +1 -1
- package/dist/types/components/Browser/Browser.content.d.ts +0 -20
- package/dist/types/components/Browser/Browser.content.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts +2 -2
- package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts +2 -2
- package/dist/types/components/Command/index.d.ts +2 -2
- package/dist/types/components/Container/index.d.ts +6 -6
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.d.ts +0 -42
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.d.ts.map +1 -1
- package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.d.ts +1 -1
- package/dist/types/components/Input/Checkbox.d.ts +1 -1
- package/dist/types/components/Link/Link.d.ts +1 -1
- package/dist/types/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/types/components/Tag/index.d.ts +1 -1
- package/dist/types/components/Toaster/Toast.d.ts +1 -1
- package/package.json +20 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-red-500 bg-red-500/10 text-red-500 dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,iBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,IAAY,WAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;AAyBD,IAAY,UAAL;AACL;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,YAAL;AACL;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,gBAAL;AACL;AACA;;KACD;AAED,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,QAAQ;IAC1B,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,SAAS;GAC7B;EACD,OAAO;IACJ,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,SAAS;IACrB,GAAG,SAAS,SACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,QACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,UAAU;GACxB;EACD,MAAM;IACH,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;GACpB;EACD,QAAQ;IACL,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;GACxB;EACD,YAAY;IACT,GAAG,cAAc,SAAS;IAC1B,GAAG,cAAc,SAAS;GAC5B;EACF;CAED,iBAAiB;EACf,aAAa,eAAe;EAC5B,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,MAAM,QAAQ;EACf;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;EACG"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-red-500 bg-red-500/10 text-red-500 dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,iBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,IAAY,WAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;AAyBD,IAAY,UAAL;AACL;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,YAAL;AACL;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,gBAAL;AACL;AACA;;KACD;AAED,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,SAA2B;IAC3B,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,QAA0B;IAC1B,QAA2B;IAC3B,SAA2B;GAC7B;EACD,OAAO;IACJ,YAAwB;IACxB,YAAwB;IACxB,UAAsB;IACtB,YAAwB;IACxB,YAAwB;IACxB,SAAqB;IACrB,SACC;IACD,WACC;IACD,UACC;IACD,QACC;IACD,WACC;IACD,WACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,UAAsB;IACtB,UAAsB;GACxB;EACD,MAAM;IACH,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;GACpB;EACD,QAAQ;IACL,SAAsB;IACtB,SAAsB;GACxB;EACD,YAAY;IACT,SAA0B;IAC1B,SAA0B;GAC5B;EACF;CAED,iBAAiB;EACf;EACA;EACA;EACA;EACD;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;EACG"}
|
|
@@ -11,42 +11,42 @@ const dynamicLogo = (importFn, exportName) => lazy(async () => {
|
|
|
11
11
|
return { default: (await importFn())[exportName] };
|
|
12
12
|
});
|
|
13
13
|
const logoRecord = {
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[
|
|
20
|
-
[
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
24
|
-
[
|
|
25
|
-
[
|
|
26
|
-
[
|
|
27
|
-
[
|
|
28
|
-
[
|
|
29
|
-
[
|
|
30
|
-
[
|
|
31
|
-
[
|
|
32
|
-
[
|
|
33
|
-
[
|
|
34
|
-
[
|
|
35
|
-
[
|
|
36
|
-
[
|
|
37
|
-
[
|
|
38
|
-
[
|
|
39
|
-
[
|
|
40
|
-
[
|
|
41
|
-
[
|
|
42
|
-
[
|
|
43
|
-
[
|
|
44
|
-
[
|
|
45
|
-
[
|
|
46
|
-
[
|
|
47
|
-
[
|
|
48
|
-
[
|
|
49
|
-
[
|
|
14
|
+
["adonis"]: dynamicLogo(() => import("./logos/Adonis.mjs"), "AdonisLogo"),
|
|
15
|
+
["angular"]: dynamicLogo(() => import("./logos/Angular.mjs"), "AngularLogo"),
|
|
16
|
+
["astro"]: dynamicLogo(() => import("./logos/Astro.mjs"), "AstroLogo"),
|
|
17
|
+
["express"]: dynamicLogo(() => import("./logos/Express.mjs"), "ExpressLogo"),
|
|
18
|
+
["fastify"]: dynamicLogo(() => import("./logos/Fastify.mjs"), "FastifyLogo"),
|
|
19
|
+
["hono"]: dynamicLogo(() => import("./logos/Hono.mjs"), "HonoLogo"),
|
|
20
|
+
["lynx"]: dynamicLogo(() => import("./logos/Lynx.mjs"), "LynxLogo"),
|
|
21
|
+
["nestjs"]: dynamicLogo(() => import("./logos/NestJS.mjs"), "NestJSLogo"),
|
|
22
|
+
["nextjs"]: dynamicLogo(() => import("./logos/Nextjs.mjs"), "NextJSLogo"),
|
|
23
|
+
["node"]: dynamicLogo(() => import("./logos/Node.mjs"), "NodejsLogo"),
|
|
24
|
+
["nuxt"]: dynamicLogo(() => import("./logos/Nuxt.mjs"), "NuxtLogo"),
|
|
25
|
+
["preact"]: dynamicLogo(() => import("./logos/Preact.mjs"), "PreactLogo"),
|
|
26
|
+
["react"]: dynamicLogo(() => import("./logos/Reactjs.mjs"), "ReactLogo"),
|
|
27
|
+
["solid"]: dynamicLogo(() => import("./logos/Solid.mjs"), "SolidLogo"),
|
|
28
|
+
["svelte"]: dynamicLogo(() => import("./logos/Svelte.mjs"), "SvelteLogo"),
|
|
29
|
+
["tanstack"]: dynamicLogo(() => import("./logos/Tanstack.mjs"), "TanstackLogo"),
|
|
30
|
+
["vite"]: dynamicLogo(() => import("./logos/Vitejs.mjs"), "ViteLogo"),
|
|
31
|
+
["vue"]: dynamicLogo(() => import("./logos/Vuejs.mjs"), "VuejsLogo"),
|
|
32
|
+
["lit"]: dynamicLogo(() => import("./logos/Lit.mjs"), "LitLogo"),
|
|
33
|
+
["vanilla"]: dynamicLogo(() => import("./logos/Vanilla.mjs"), "JavaScriptLogo"),
|
|
34
|
+
["anthropic"]: dynamicLogo(() => import("./logos/Anthropic.mjs"), "AnthropicLogo"),
|
|
35
|
+
["claude"]: dynamicLogo(() => import("./logos/Claude.mjs"), "ClaudeLogo"),
|
|
36
|
+
["chatgpt"]: dynamicLogo(() => import("./logos/ChatGPT.mjs"), "ChatGPTLogo"),
|
|
37
|
+
["deepseek"]: dynamicLogo(() => import("./logos/DeepSeek.mjs"), "DeepSeekLogo"),
|
|
38
|
+
["gemini"]: dynamicLogo(() => import("./logos/Gemini.mjs"), "GeminiLogo"),
|
|
39
|
+
["googleai"]: dynamicLogo(() => import("./logos/GoogleAI.mjs"), "GoogleAILogo"),
|
|
40
|
+
["grok"]: dynamicLogo(() => import("./logos/Grok.mjs"), "GrokLogo"),
|
|
41
|
+
["mistral"]: dynamicLogo(() => import("./logos/Mistral.mjs"), "MistralLogo"),
|
|
42
|
+
["ollama"]: dynamicLogo(() => import("./logos/Ollama.mjs"), "OllamaLogo"),
|
|
43
|
+
["openai"]: dynamicLogo(() => import("./logos/OpenAI.mjs"), "OpenAILogo"),
|
|
44
|
+
["perplexity"]: dynamicLogo(() => import("./logos/Perplexity.mjs"), "PerplexityLogo"),
|
|
45
|
+
["github"]: dynamicLogo(() => import("./logos/GitHub.mjs"), "GitHubLogo"),
|
|
46
|
+
["gitlab"]: dynamicLogo(() => import("./logos/GitLab.mjs"), "GitLabLogo"),
|
|
47
|
+
["bitbucket"]: dynamicLogo(() => import("./logos/Bitbucket.mjs"), "BitbucketLogo"),
|
|
48
|
+
["google"]: dynamicLogo(() => import("./logos/Google.mjs"), "GoogleLogo"),
|
|
49
|
+
["linkedin"]: dynamicLogo(() => import("./logos/LinkedIn.mjs"), "LinkedInLogo")
|
|
50
50
|
};
|
|
51
51
|
const TechLogo = ({ name, ...props }) => {
|
|
52
52
|
const LazyLogo = logoRecord[name];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n name: TechLogoName;\n};\n\n/**\n * This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n lazy(async () => {\n const module = await importFn();\n const asset = module[exportName];\n\n return { default: asset };\n });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n [TechLogoName.Adonis]: dynamicLogo(\n () => import('./logos/Adonis'),\n 'AdonisLogo'\n ),\n [TechLogoName.Angular]: dynamicLogo(\n () => import('./logos/Angular'),\n 'AngularLogo'\n ),\n [TechLogoName.Astro]: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n [TechLogoName.Express]: dynamicLogo(\n () => import('./logos/Express'),\n 'ExpressLogo'\n ),\n [TechLogoName.Fastify]: dynamicLogo(\n () => import('./logos/Fastify'),\n 'FastifyLogo'\n ),\n [TechLogoName.Hono]: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n [TechLogoName.Lynx]: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n [TechLogoName.NestJS]: dynamicLogo(\n () => import('./logos/NestJS'),\n 'NestJSLogo'\n ),\n [TechLogoName.Nextjs]: dynamicLogo(\n () => import('./logos/Nextjs'),\n 'NextJSLogo'\n ),\n [TechLogoName.Node]: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n [TechLogoName.Nuxt]: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n [TechLogoName.Preact]: dynamicLogo(\n () => import('./logos/Preact'),\n 'PreactLogo'\n ),\n [TechLogoName.React]: dynamicLogo(\n () => import('./logos/Reactjs'),\n 'ReactLogo'\n ),\n [TechLogoName.Solid]: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n [TechLogoName.Svelte]: dynamicLogo(\n () => import('./logos/Svelte'),\n 'SvelteLogo'\n ),\n [TechLogoName.Tanstack]: dynamicLogo(\n () => import('./logos/Tanstack'),\n 'TanstackLogo'\n ),\n [TechLogoName.Vite]: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n [TechLogoName.Vue]: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n [TechLogoName.Lit]: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n [TechLogoName.Vanilla]: dynamicLogo(\n () => import('./logos/Vanilla'),\n 'JavaScriptLogo'\n ),\n [TechLogoName.Anthropic]: dynamicLogo(\n () => import('./logos/Anthropic'),\n 'AnthropicLogo'\n ),\n [TechLogoName.Claude]: dynamicLogo(\n () => import('./logos/Claude'),\n 'ClaudeLogo'\n ),\n [TechLogoName.ChatGPT]: dynamicLogo(\n () => import('./logos/ChatGPT'),\n 'ChatGPTLogo'\n ),\n [TechLogoName.DeepSeek]: dynamicLogo(\n () => import('./logos/DeepSeek'),\n 'DeepSeekLogo'\n ),\n [TechLogoName.Gemini]: dynamicLogo(\n () => import('./logos/Gemini'),\n 'GeminiLogo'\n ),\n [TechLogoName.GoogleAI]: dynamicLogo(\n () => import('./logos/GoogleAI'),\n 'GoogleAILogo'\n ),\n [TechLogoName.Grok]: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n [TechLogoName.Mistral]: dynamicLogo(\n () => import('./logos/Mistral'),\n 'MistralLogo'\n ),\n [TechLogoName.Ollama]: dynamicLogo(\n () => import('./logos/Ollama'),\n 'OllamaLogo'\n ),\n [TechLogoName.OpenAI]: dynamicLogo(\n () => import('./logos/OpenAI'),\n 'OpenAILogo'\n ),\n [TechLogoName.Perplexity]: dynamicLogo(\n () => import('./logos/Perplexity'),\n 'PerplexityLogo'\n ),\n [TechLogoName.GitHub]: dynamicLogo(\n () => import('./logos/GitHub'),\n 'GitHubLogo'\n ),\n [TechLogoName.GitLab]: dynamicLogo(\n () => import('./logos/GitLab'),\n 'GitLabLogo'\n ),\n [TechLogoName.Bitbucket]: dynamicLogo(\n () => import('./logos/Bitbucket'),\n 'BitbucketLogo'\n ),\n [TechLogoName.Google]: dynamicLogo(\n () => import('./logos/Google'),\n 'GoogleLogo'\n ),\n [TechLogoName.LinkedIn]: dynamicLogo(\n () => import('./logos/LinkedIn'),\n 'LinkedInLogo'\n ),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n name,\n ...props\n}): JSX.Element => {\n const LazyLogo = logoRecord[name];\n\n if (!LazyLogo) {\n return <></>;\n }\n\n return (\n <Suspense\n fallback={\n <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n }\n >\n <LazyLogo {...(props as any)} />\n </Suspense>\n );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;AAIf,QAAO,EAAE,UAHM,MAAM,UAAU,EACV,aAEI;EACzB;AAEJ,MAAM,aAAmE;
|
|
1
|
+
{"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n name: TechLogoName;\n};\n\n/**\n * This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n lazy(async () => {\n const module = await importFn();\n const asset = module[exportName];\n\n return { default: asset };\n });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n [TechLogoName.Adonis]: dynamicLogo(\n () => import('./logos/Adonis'),\n 'AdonisLogo'\n ),\n [TechLogoName.Angular]: dynamicLogo(\n () => import('./logos/Angular'),\n 'AngularLogo'\n ),\n [TechLogoName.Astro]: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n [TechLogoName.Express]: dynamicLogo(\n () => import('./logos/Express'),\n 'ExpressLogo'\n ),\n [TechLogoName.Fastify]: dynamicLogo(\n () => import('./logos/Fastify'),\n 'FastifyLogo'\n ),\n [TechLogoName.Hono]: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n [TechLogoName.Lynx]: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n [TechLogoName.NestJS]: dynamicLogo(\n () => import('./logos/NestJS'),\n 'NestJSLogo'\n ),\n [TechLogoName.Nextjs]: dynamicLogo(\n () => import('./logos/Nextjs'),\n 'NextJSLogo'\n ),\n [TechLogoName.Node]: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n [TechLogoName.Nuxt]: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n [TechLogoName.Preact]: dynamicLogo(\n () => import('./logos/Preact'),\n 'PreactLogo'\n ),\n [TechLogoName.React]: dynamicLogo(\n () => import('./logos/Reactjs'),\n 'ReactLogo'\n ),\n [TechLogoName.Solid]: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n [TechLogoName.Svelte]: dynamicLogo(\n () => import('./logos/Svelte'),\n 'SvelteLogo'\n ),\n [TechLogoName.Tanstack]: dynamicLogo(\n () => import('./logos/Tanstack'),\n 'TanstackLogo'\n ),\n [TechLogoName.Vite]: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n [TechLogoName.Vue]: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n [TechLogoName.Lit]: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n [TechLogoName.Vanilla]: dynamicLogo(\n () => import('./logos/Vanilla'),\n 'JavaScriptLogo'\n ),\n [TechLogoName.Anthropic]: dynamicLogo(\n () => import('./logos/Anthropic'),\n 'AnthropicLogo'\n ),\n [TechLogoName.Claude]: dynamicLogo(\n () => import('./logos/Claude'),\n 'ClaudeLogo'\n ),\n [TechLogoName.ChatGPT]: dynamicLogo(\n () => import('./logos/ChatGPT'),\n 'ChatGPTLogo'\n ),\n [TechLogoName.DeepSeek]: dynamicLogo(\n () => import('./logos/DeepSeek'),\n 'DeepSeekLogo'\n ),\n [TechLogoName.Gemini]: dynamicLogo(\n () => import('./logos/Gemini'),\n 'GeminiLogo'\n ),\n [TechLogoName.GoogleAI]: dynamicLogo(\n () => import('./logos/GoogleAI'),\n 'GoogleAILogo'\n ),\n [TechLogoName.Grok]: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n [TechLogoName.Mistral]: dynamicLogo(\n () => import('./logos/Mistral'),\n 'MistralLogo'\n ),\n [TechLogoName.Ollama]: dynamicLogo(\n () => import('./logos/Ollama'),\n 'OllamaLogo'\n ),\n [TechLogoName.OpenAI]: dynamicLogo(\n () => import('./logos/OpenAI'),\n 'OpenAILogo'\n ),\n [TechLogoName.Perplexity]: dynamicLogo(\n () => import('./logos/Perplexity'),\n 'PerplexityLogo'\n ),\n [TechLogoName.GitHub]: dynamicLogo(\n () => import('./logos/GitHub'),\n 'GitHubLogo'\n ),\n [TechLogoName.GitLab]: dynamicLogo(\n () => import('./logos/GitLab'),\n 'GitLabLogo'\n ),\n [TechLogoName.Bitbucket]: dynamicLogo(\n () => import('./logos/Bitbucket'),\n 'BitbucketLogo'\n ),\n [TechLogoName.Google]: dynamicLogo(\n () => import('./logos/Google'),\n 'GoogleLogo'\n ),\n [TechLogoName.LinkedIn]: dynamicLogo(\n () => import('./logos/LinkedIn'),\n 'LinkedInLogo'\n ),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n name,\n ...props\n}): JSX.Element => {\n const LazyLogo = logoRecord[name];\n\n if (!LazyLogo) {\n return <></>;\n }\n\n return (\n <Suspense\n fallback={\n <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n }\n >\n <LazyLogo {...(props as any)} />\n </Suspense>\n );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;AAIf,QAAO,EAAE,UAHM,MAAM,UAAU,EACV,aAEI;EACzB;AAEJ,MAAM,aAAmE;aAChD,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;cACrD,kBAChB,OAAO,wBACb,cACD;cACuB,kBAChB,OAAO,wBACb,cACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;WACrD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;WACoB,kBAAkB,OAAO,qBAAiB,aAAa;WACvD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;YACqB,kBACd,OAAO,wBACb,YACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;aACtD,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,uBAAmB,WAAW;UACxD,kBAAkB,OAAO,sBAAkB,YAAY;UACvD,kBAAkB,OAAO,oBAAgB,UAAU;cAC/C,kBAChB,OAAO,wBACb,iBACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;eACwB,kBACjB,OAAO,yBACb,eACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;cAClD,kBAChB,OAAO,wBACb,cACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;iBAC0B,kBACnB,OAAO,2BACb,iBACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;CACF;AAED,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;AAE5B,KAAI,CAAC,SACH,QAAO,kCAAK;AAGd,QACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,UAAU,EAAI;YAGzE,oBAAC,UAAD,EAAU,GAAK,OAAiB;EACvB"}
|
|
@@ -16,15 +16,15 @@ const ButtonItem = ({ Icon, children, ...props }) => /* @__PURE__ */ jsx("div",
|
|
|
16
16
|
Icon,
|
|
17
17
|
"data-mode": "system",
|
|
18
18
|
role: "option",
|
|
19
|
-
variant:
|
|
19
|
+
variant: "none",
|
|
20
20
|
...props,
|
|
21
21
|
children
|
|
22
22
|
})
|
|
23
23
|
});
|
|
24
24
|
const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
|
|
25
|
-
const [mode, setMode] = useState(systemTheme === theme ?
|
|
25
|
+
const [mode, setMode] = useState(systemTheme === theme ? "system" : theme);
|
|
26
26
|
const switchMode = (mode) => {
|
|
27
|
-
if (mode ===
|
|
27
|
+
if (mode === "system") setTheme(systemTheme ?? "light");
|
|
28
28
|
else setTheme(mode);
|
|
29
29
|
setMode(mode);
|
|
30
30
|
};
|
|
@@ -36,9 +36,9 @@ const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
|
|
|
36
36
|
identifier: panelIdentifier,
|
|
37
37
|
"aria-label": "Theme selector",
|
|
38
38
|
children: [
|
|
39
|
-
mode ===
|
|
40
|
-
mode ===
|
|
41
|
-
mode ===
|
|
39
|
+
mode === "system" && /* @__PURE__ */ jsx(CircleDashed, { "data-mode": "system" }),
|
|
40
|
+
mode === "light" && /* @__PURE__ */ jsx(Sun, { "data-mode": "light" }),
|
|
41
|
+
mode === "dark" && /* @__PURE__ */ jsx(Moon, { "data-mode": "dark" })
|
|
42
42
|
]
|
|
43
43
|
}), /* @__PURE__ */ jsx(DropDown.Panel, {
|
|
44
44
|
identifier: panelIdentifier,
|
|
@@ -50,22 +50,22 @@ const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
|
|
|
50
50
|
children: [
|
|
51
51
|
/* @__PURE__ */ jsx(ButtonItem, {
|
|
52
52
|
Icon: CircleDashed,
|
|
53
|
-
onClick: () => switchMode(
|
|
54
|
-
isActive: mode ===
|
|
53
|
+
onClick: () => switchMode("system"),
|
|
54
|
+
isActive: mode === "system",
|
|
55
55
|
label: "Restore to system mode",
|
|
56
56
|
children: "System"
|
|
57
57
|
}),
|
|
58
58
|
/* @__PURE__ */ jsx(ButtonItem, {
|
|
59
59
|
Icon: Sun,
|
|
60
|
-
onClick: () => switchMode(
|
|
61
|
-
isActive: mode ===
|
|
60
|
+
onClick: () => switchMode("light"),
|
|
61
|
+
isActive: mode === "light",
|
|
62
62
|
label: "Switch to light mode",
|
|
63
63
|
children: "Light"
|
|
64
64
|
}),
|
|
65
65
|
/* @__PURE__ */ jsx(ButtonItem, {
|
|
66
66
|
Icon: Moon,
|
|
67
|
-
onClick: () => switchMode(
|
|
68
|
-
isActive: mode ===
|
|
67
|
+
onClick: () => switchMode("dark"),
|
|
68
|
+
isActive: mode === "dark",
|
|
69
69
|
label: "Switch to dark mode",
|
|
70
70
|
children: "Dark"
|
|
71
71
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant={ButtonVariant.NONE}\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL
|
|
1
|
+
{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant={ButtonVariant.NONE}\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL;EACA,GAAI;EAEH;EACM;CACL;AASR,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,mBACa,MAEJ;CAEpD,MAAM,cAAc,SAAgB;AAClC,MAAI,kBACF,UAAS,uBAA2B;MAEpC,UAAS,KAAK;AAEhB,UAAQ,KAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,qBAAyB,oBAAC,cAAD,EAAc,aAAU,UAAW;IAC5D,oBAAwB,oBAAC,KAAD,EAAK,aAAU,SAAU;IACjD,mBAAuB,oBAAC,MAAD,EAAM,aAAU,QAAS;IAChC;MAEnB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,oBAAwB;MACvC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,mBAAuB;MACtC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,kBAAsB;MACrC,UAAU;MACV,OAAM;gBACP;MAEY;KACH;;GACG,EACR"}
|
|
@@ -10,10 +10,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
10
10
|
const getIconStyle = ({ isCurrentMode, isNextMode }) => cn(`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`, `opacity-0 transition-opacity duration-300 ease-in-out`, isCurrentMode && `opacity-100 group-hover:opacity-0`, isNextMode && `group-hover:opacity-100`);
|
|
11
11
|
const MobileThemeSwitcher = ({ theme, systemTheme, setTheme }) => {
|
|
12
12
|
const isThemeSystemTheme = systemTheme === theme;
|
|
13
|
-
const [mode, setMode] = useState(isThemeSystemTheme ?
|
|
14
|
-
const nextMode = mode ===
|
|
13
|
+
const [mode, setMode] = useState(isThemeSystemTheme ? "system" : theme);
|
|
14
|
+
const nextMode = mode === "system" ? theme === "dark" ? "light" : "dark" : isThemeSystemTheme ? "system" : mode === "light" ? "dark" : "light";
|
|
15
15
|
const toggleMode = () => {
|
|
16
|
-
if (nextMode ===
|
|
16
|
+
if (nextMode === "system") setTheme(systemTheme ?? "light");
|
|
17
17
|
else setTheme(nextMode);
|
|
18
18
|
setMode(nextMode);
|
|
19
19
|
};
|
|
@@ -23,24 +23,24 @@ const MobileThemeSwitcher = ({ theme, systemTheme, setTheme }) => {
|
|
|
23
23
|
children: [
|
|
24
24
|
/* @__PURE__ */ jsx(CircleDashed, {
|
|
25
25
|
className: getIconStyle({
|
|
26
|
-
isCurrentMode: mode ===
|
|
27
|
-
isNextMode: nextMode ===
|
|
26
|
+
isCurrentMode: mode === "system",
|
|
27
|
+
isNextMode: nextMode === "system"
|
|
28
28
|
}),
|
|
29
29
|
onClick: toggleMode,
|
|
30
30
|
"data-mode": "system"
|
|
31
31
|
}),
|
|
32
32
|
/* @__PURE__ */ jsx(Moon, {
|
|
33
33
|
className: getIconStyle({
|
|
34
|
-
isCurrentMode: mode ===
|
|
35
|
-
isNextMode: nextMode ===
|
|
34
|
+
isCurrentMode: mode === "light",
|
|
35
|
+
isNextMode: nextMode === "light"
|
|
36
36
|
}),
|
|
37
37
|
onClick: toggleMode,
|
|
38
38
|
"data-mode": "light"
|
|
39
39
|
}),
|
|
40
40
|
/* @__PURE__ */ jsx(Sun, {
|
|
41
41
|
className: getIconStyle({
|
|
42
|
-
isCurrentMode: mode ===
|
|
43
|
-
isNextMode: nextMode ===
|
|
42
|
+
isCurrentMode: mode === "dark",
|
|
43
|
+
isNextMode: nextMode === "dark"
|
|
44
44
|
}),
|
|
45
45
|
onClick: toggleMode,
|
|
46
46
|
"data-mode": "dark"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,
|
|
1
|
+
{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,gCAAoC,MAEJ;CAEpD,MAAM,WAGJ,oBACI,sCAKA,gCAIE;CAIR,MAAM,mBAAmB;AACvB,MAAI,sBACF,UAAS,uBAA2B;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GACK"}
|
|
@@ -13,23 +13,6 @@ const TOAST_LIMIT = 1;
|
|
|
13
13
|
* Set to 15 minutes (900,000ms) to allow for potential undo actions.
|
|
14
14
|
*/
|
|
15
15
|
const TOAST_REMOVE_DELAY = 900 * 1e3;
|
|
16
|
-
/**
|
|
17
|
-
* Action types for toast state management using reducer pattern.
|
|
18
|
-
*
|
|
19
|
-
* Defines all possible actions that can be performed on the toast state,
|
|
20
|
-
* enabling predictable state updates and better debugging.
|
|
21
|
-
*/
|
|
22
|
-
var ActionTypes = /* @__PURE__ */ function(ActionTypes) {
|
|
23
|
-
/** Add a new toast to the display queue */
|
|
24
|
-
ActionTypes["ADD_TOAST"] = "ADD_TOAST";
|
|
25
|
-
/** Update properties of an existing toast */
|
|
26
|
-
ActionTypes["UPDATE_TOAST"] = "UPDATE_TOAST";
|
|
27
|
-
/** Mark a toast as dismissed (triggers exit animation) */
|
|
28
|
-
ActionTypes["DISMISS_TOAST"] = "DISMISS_TOAST";
|
|
29
|
-
/** Completely remove a toast from memory */
|
|
30
|
-
ActionTypes["REMOVE_TOAST"] = "REMOVE_TOAST";
|
|
31
|
-
return ActionTypes;
|
|
32
|
-
}(ActionTypes || {});
|
|
33
16
|
let count = 0;
|
|
34
17
|
const genId = () => {
|
|
35
18
|
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
@@ -41,7 +24,7 @@ const addToRemoveQueue = (toastId) => {
|
|
|
41
24
|
const timeout = setTimeout(() => {
|
|
42
25
|
toastTimeouts.delete(toastId);
|
|
43
26
|
dispatch({
|
|
44
|
-
type:
|
|
27
|
+
type: "REMOVE_TOAST",
|
|
45
28
|
toastId
|
|
46
29
|
});
|
|
47
30
|
}, TOAST_REMOVE_DELAY);
|
|
@@ -84,18 +67,18 @@ const addToRemoveQueue = (toastId) => {
|
|
|
84
67
|
*/
|
|
85
68
|
const reducer = (state, action) => {
|
|
86
69
|
switch (action.type) {
|
|
87
|
-
case
|
|
70
|
+
case "ADD_TOAST": return {
|
|
88
71
|
...state,
|
|
89
72
|
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
90
73
|
};
|
|
91
|
-
case
|
|
74
|
+
case "UPDATE_TOAST": return {
|
|
92
75
|
...state,
|
|
93
76
|
toasts: state.toasts.map((t) => t.id === action.toast.id ? {
|
|
94
77
|
...t,
|
|
95
78
|
...action.toast
|
|
96
79
|
} : t)
|
|
97
80
|
};
|
|
98
|
-
case
|
|
81
|
+
case "DISMISS_TOAST": {
|
|
99
82
|
const { toastId } = action;
|
|
100
83
|
if (toastId) addToRemoveQueue(toastId);
|
|
101
84
|
else state.toasts.forEach((toast) => {
|
|
@@ -109,7 +92,7 @@ const reducer = (state, action) => {
|
|
|
109
92
|
} : t)
|
|
110
93
|
};
|
|
111
94
|
}
|
|
112
|
-
case
|
|
95
|
+
case "REMOVE_TOAST":
|
|
113
96
|
if (action.toastId === void 0) return {
|
|
114
97
|
...state,
|
|
115
98
|
toasts: []
|
|
@@ -181,18 +164,18 @@ const dispatch = (action) => {
|
|
|
181
164
|
const toast = ({ ...props }) => {
|
|
182
165
|
const id = genId();
|
|
183
166
|
const update = (props) => dispatch({
|
|
184
|
-
type:
|
|
167
|
+
type: "UPDATE_TOAST",
|
|
185
168
|
toast: {
|
|
186
169
|
...props,
|
|
187
170
|
id
|
|
188
171
|
}
|
|
189
172
|
});
|
|
190
173
|
const dismiss = () => dispatch({
|
|
191
|
-
type:
|
|
174
|
+
type: "DISMISS_TOAST",
|
|
192
175
|
toastId: id
|
|
193
176
|
});
|
|
194
177
|
dispatch({
|
|
195
|
-
type:
|
|
178
|
+
type: "ADD_TOAST",
|
|
196
179
|
toast: {
|
|
197
180
|
...props,
|
|
198
181
|
id,
|
|
@@ -298,7 +281,7 @@ const useToast = () => {
|
|
|
298
281
|
...state,
|
|
299
282
|
toast,
|
|
300
283
|
dismiss: (toastId) => dispatch({
|
|
301
|
-
type:
|
|
284
|
+
type: "DISMISS_TOAST",
|
|
302
285
|
toastId
|
|
303
286
|
})
|
|
304
287
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useToast.mjs","names":[],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/**\n * Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n */\nconst TOAST_LIMIT = 1;\n\n/**\n * Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n */\nconst TOAST_REMOVE_DELAY = 15 * 60 * 1000; // 15 seconds\n\n/**\n * Extended toast configuration with additional properties for the toast system.\n *\n * Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n *\n * @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n */\ntype ToasterToast = ToastProps & {\n /** Unique identifier for the toast instance */\n id: string;\n /** Optional title text or React element */\n title?: ReactNode;\n /** Optional description text or React element */\n description?: ReactNode;\n /** Optional action button element */\n action?: ToastActionElement;\n};\n\n/**\n * Action types for toast state management using reducer pattern.\n *\n * Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n */\nenum ActionTypes {\n /** Add a new toast to the display queue */\n ADD_TOAST = 'ADD_TOAST',\n /** Update properties of an existing toast */\n UPDATE_TOAST = 'UPDATE_TOAST',\n /** Mark a toast as dismissed (triggers exit animation) */\n DISMISS_TOAST = 'DISMISS_TOAST',\n /** Completely remove a toast from memory */\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n | {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n | {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n | {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/**\n * Toast state reducer function that handles all toast state transitions.\n *\n * Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n *\n * ## State Management\n * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts\n * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity\n * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal\n * - **REMOVE_TOAST**: Permanently removes toasts from state\n *\n * ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n *\n * @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n *\n * @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n *\n * // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n */\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((toast) => toast.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/**\n * Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n */\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/**\n * Creates and displays a new toast notification.\n *\n * This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n *\n * ## Features\n * - **Automatic ID Generation**: Each toast gets a unique identifier\n * - **State Management**: Integrates with global toast state\n * - **Lifecycle Control**: Returns functions to update or dismiss the toast\n * - **Auto-dismiss**: Automatically closes when user dismisses\n *\n * ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n *\n * @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n *\n * @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n *\n * // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n *\n * // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n *\n * // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n */\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/**\n * React hook for managing toast notifications.\n *\n * Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n *\n * ## Features\n * - **State Synchronization**: Automatically updates when toast state changes\n * - **Toast Creation**: Provides the `toast()` function for creating notifications\n * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID\n * - **Memory Management**: Handles proper cleanup of listeners\n *\n * ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n *\n * @returns Toast state and control functions\n *\n * @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n *\n * const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n *\n * const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n *\n * return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n *\n * // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n *\n * const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n *\n * // ... form JSX\n * }\n * ```\n *\n * ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":";;;;;;;;;AASA,MAAM,cAAc;;;;;AAMpB,MAAM,qBAAqB,MAAU;;;;;;;AAoCrC,IAAK,cAAL;;AAEE;;AAEA;;AAEA;;AAEA;;EARG,kBASJ;AAED,IAAI,QAAQ;AAEZ,MAAM,cAAc;AAClB,UAAS,QAAQ,KAAK,OAAO;AAC7B,QAAO,MAAM,UAAU;;AAyBzB,MAAM,gCAAgB,IAAI,KAA4C;AAEtE,MAAM,oBAAoB,YAAoB;AAC5C,KAAI,cAAc,IAAI,QAAQ,CAC5B;CAGF,MAAM,UAAU,iBAAiB;AAC/B,gBAAc,OAAO,QAAQ;AAC7B,WAAS;GACP,MAAM,YAAY;GACT;GACV,CAAC;IACD,mBAAmB;AAEtB,eAAc,IAAI,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrC,MAAa,WAAW,OAAc,WAA0B;AAC9D,SAAQ,OAAO,MAAf;EACE,KAAK,YAAY,UACf,QAAO;GACL,GAAG;GACH,QAAQ,CAAC,OAAO,OAAO,GAAG,MAAM,OAAO,CAAC,MAAM,GAAG,YAAY;GAC9D;EAEH,KAAK,YAAY,aACf,QAAO;GACL,GAAG;GACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,OAAO,MAAM,KAAK;IAAE,GAAG;IAAG,GAAG,OAAO;IAAO,GAAG,EACxD;GACF;EAEH,KAAK,YAAY,eAAe;GAC9B,MAAM,EAAE,YAAY;AAIpB,OAAI,QACF,kBAAiB,QAAQ;OAEzB,OAAM,OAAO,SAAS,UAAU;AAC9B,qBAAiB,MAAM,GAAG;KAC1B;AAGJ,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,WAAW,YAAY,SAC5B;KACE,GAAG;KACH,MAAM;KACP,GACD,EACL;IACF;;EAEH,KAAK,YAAY;AACf,OAAI,OAAO,YAAY,OACrB,QAAO;IACL,GAAG;IACH,QAAQ,EAAE;IACX;AAEH,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,QAAQ,UAAU,MAAM,OAAO,OAAO,QAAQ;IACpE;;;AAIP,MAAM,YAAwC,EAAE;AAEhD,IAAI,cAAqB,EAAE,QAAQ,EAAE,EAAE;AAEvC,MAAM,YAAY,WAAmB;AACnC,eAAc,QAAQ,aAAa,OAAO;AAC1C,WAAU,SAAS,aAAa;AAC9B,WAAS,YAAY;GACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DJ,MAAM,SAAS,EAAE,GAAG,YAAmB;CACrC,MAAM,KAAK,OAAO;CAElB,MAAM,UAAU,UACd,SAAS;EACP,MAAM,YAAY;EAClB,OAAO;GAAE,GAAG;GAAO;GAAI;EACxB,CAAC;CACJ,MAAM,gBACJ,SAAS;EAAE,MAAM,YAAY;EAAe,SAAS;EAAI,CAAC;AAE5D,UAAS;EACP,MAAM,YAAY;EAClB,OAAO;GACL,GAAG;GACH;GACA,MAAM;GACN,eAAe,SAAS;AACtB,QAAI,CAAC,KAAM,UAAS;;GAEvB;EACF,CAAC;AAEF,QAAO;EACD;EACJ;EACA;EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFH,MAAM,iBAAiB;CACrB,MAAM,CAAC,OAAO,YAAY,SAAgB,YAAY;AAEtD,iBAAgB;AACd,YAAU,KAAK,SAAS;AACxB,eAAa;GACX,MAAM,QAAQ,UAAU,QAAQ,SAAS;AACzC,OAAI,QAAQ,GACV,WAAU,OAAO,OAAO,EAAE;;IAG7B,CAAC,MAAM,CAAC;AAEX,QAAO;EACL,GAAG;EACH;EACA,UAAU,YACR,SAAS;GAAE,MAAM,YAAY;GAAe;GAAS,CAAC;EACzD"}
|
|
1
|
+
{"version":3,"file":"useToast.mjs","names":[],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/**\n * Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n */\nconst TOAST_LIMIT = 1;\n\n/**\n * Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n */\nconst TOAST_REMOVE_DELAY = 15 * 60 * 1000; // 15 seconds\n\n/**\n * Extended toast configuration with additional properties for the toast system.\n *\n * Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n *\n * @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n */\ntype ToasterToast = ToastProps & {\n /** Unique identifier for the toast instance */\n id: string;\n /** Optional title text or React element */\n title?: ReactNode;\n /** Optional description text or React element */\n description?: ReactNode;\n /** Optional action button element */\n action?: ToastActionElement;\n};\n\n/**\n * Action types for toast state management using reducer pattern.\n *\n * Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n */\nenum ActionTypes {\n /** Add a new toast to the display queue */\n ADD_TOAST = 'ADD_TOAST',\n /** Update properties of an existing toast */\n UPDATE_TOAST = 'UPDATE_TOAST',\n /** Mark a toast as dismissed (triggers exit animation) */\n DISMISS_TOAST = 'DISMISS_TOAST',\n /** Completely remove a toast from memory */\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n | {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n | {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n | {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/**\n * Toast state reducer function that handles all toast state transitions.\n *\n * Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n *\n * ## State Management\n * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts\n * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity\n * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal\n * - **REMOVE_TOAST**: Permanently removes toasts from state\n *\n * ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n *\n * @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n *\n * @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n *\n * // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n */\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((toast) => toast.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/**\n * Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n */\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/**\n * Creates and displays a new toast notification.\n *\n * This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n *\n * ## Features\n * - **Automatic ID Generation**: Each toast gets a unique identifier\n * - **State Management**: Integrates with global toast state\n * - **Lifecycle Control**: Returns functions to update or dismiss the toast\n * - **Auto-dismiss**: Automatically closes when user dismisses\n *\n * ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n *\n * @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n *\n * @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n *\n * // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n *\n * // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n *\n * // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n */\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/**\n * React hook for managing toast notifications.\n *\n * Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n *\n * ## Features\n * - **State Synchronization**: Automatically updates when toast state changes\n * - **Toast Creation**: Provides the `toast()` function for creating notifications\n * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID\n * - **Memory Management**: Handles proper cleanup of listeners\n *\n * ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n *\n * @returns Toast state and control functions\n *\n * @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n *\n * const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n *\n * const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n *\n * return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n *\n * // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n *\n * const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n *\n * // ... form JSX\n * }\n * ```\n *\n * ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":";;;;;;;;;AASA,MAAM,cAAc;;;;;AAMpB,MAAM,qBAAqB,MAAU;AA+CrC,IAAI,QAAQ;AAEZ,MAAM,cAAc;AAClB,UAAS,QAAQ,KAAK,OAAO;AAC7B,QAAO,MAAM,UAAU;;AAyBzB,MAAM,gCAAgB,IAAI,KAA4C;AAEtE,MAAM,oBAAoB,YAAoB;AAC5C,KAAI,cAAc,IAAI,QAAQ,CAC5B;CAGF,MAAM,UAAU,iBAAiB;AAC/B,gBAAc,OAAO,QAAQ;AAC7B,WAAS;GACP;GACS;GACV,CAAC;IACD,mBAAmB;AAEtB,eAAc,IAAI,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrC,MAAa,WAAW,OAAc,WAA0B;AAC9D,SAAQ,OAAO,MAAf;EACE,iBACE,QAAO;GACL,GAAG;GACH,QAAQ,CAAC,OAAO,OAAO,GAAG,MAAM,OAAO,CAAC,MAAM,GAAG,YAAY;GAC9D;EAEH,oBACE,QAAO;GACL,GAAG;GACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,OAAO,MAAM,KAAK;IAAE,GAAG;IAAG,GAAG,OAAO;IAAO,GAAG,EACxD;GACF;EAEH,sBAAgC;GAC9B,MAAM,EAAE,YAAY;AAIpB,OAAI,QACF,kBAAiB,QAAQ;OAEzB,OAAM,OAAO,SAAS,UAAU;AAC9B,qBAAiB,MAAM,GAAG;KAC1B;AAGJ,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,WAAW,YAAY,SAC5B;KACE,GAAG;KACH,MAAM;KACP,GACD,EACL;IACF;;EAEH;AACE,OAAI,OAAO,YAAY,OACrB,QAAO;IACL,GAAG;IACH,QAAQ,EAAE;IACX;AAEH,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,QAAQ,UAAU,MAAM,OAAO,OAAO,QAAQ;IACpE;;;AAIP,MAAM,YAAwC,EAAE;AAEhD,IAAI,cAAqB,EAAE,QAAQ,EAAE,EAAE;AAEvC,MAAM,YAAY,WAAmB;AACnC,eAAc,QAAQ,aAAa,OAAO;AAC1C,WAAU,SAAS,aAAa;AAC9B,WAAS,YAAY;GACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DJ,MAAM,SAAS,EAAE,GAAG,YAAmB;CACrC,MAAM,KAAK,OAAO;CAElB,MAAM,UAAU,UACd,SAAS;EACP;EACA,OAAO;GAAE,GAAG;GAAO;GAAI;EACxB,CAAC;CACJ,MAAM,gBACJ,SAAS;EAAE;EAAiC,SAAS;EAAI,CAAC;AAE5D,UAAS;EACP;EACA,OAAO;GACL,GAAG;GACH;GACA,MAAM;GACN,eAAe,SAAS;AACtB,QAAI,CAAC,KAAM,UAAS;;GAEvB;EACF,CAAC;AAEF,QAAO;EACD;EACJ;EACA;EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFH,MAAM,iBAAiB;CACrB,MAAM,CAAC,OAAO,YAAY,SAAgB,YAAY;AAEtD,iBAAgB;AACd,YAAU,KAAK,SAAS;AACxB,eAAa;GACX,MAAM,QAAQ,UAAU,QAAQ,SAAS;AACzC,OAAI,QAAQ,GACV,WAAU,OAAO,OAAO,EAAE;;IAG7B,CAAC,MAAM,CAAC;AAEX,QAAO;EACL,GAAG;EACH;EACA,UAAU,YACR,SAAS;GAAE;GAAiC;GAAS,CAAC;EACzD"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { useQuery } from "@tanstack/react-query";
|
|
4
|
-
import configuration from "@intlayer/config/built";
|
|
5
4
|
import { useConfiguration } from "@intlayer/editor-react";
|
|
6
5
|
import { getOAuthAPI } from "@intlayer/api";
|
|
6
|
+
import configuration from "@intlayer/config/built";
|
|
7
7
|
|
|
8
8
|
//#region src/hooks/useAuth/useOAuth2.ts
|
|
9
9
|
const useOAuth2 = (intlayerConfiguration) => {
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
import { getAuthAPI } from "../../libs/auth.mjs";
|
|
4
4
|
import { useQueryClient } from "../reactQuery.mjs";
|
|
5
5
|
import { useQuery } from "@tanstack/react-query";
|
|
6
|
-
import configuration from "@intlayer/config/built";
|
|
7
6
|
import { useConfiguration } from "@intlayer/editor-react";
|
|
7
|
+
import configuration from "@intlayer/config/built";
|
|
8
8
|
|
|
9
9
|
//#region src/hooks/useAuth/useSession.ts
|
|
10
10
|
const useSession = (sessionProp, intlayerConfiguration) => {
|
package/dist/esm/libs/auth.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import configuration from "@intlayer/config/built";
|
|
1
2
|
import { passkeyClient } from "@better-auth/passkey/client";
|
|
2
3
|
import { ssoClient } from "@better-auth/sso/client";
|
|
3
|
-
import configuration from "@intlayer/config/built";
|
|
4
4
|
import { BACKEND_URL } from "@intlayer/config/defaultValues";
|
|
5
5
|
import { createAuthClient } from "better-auth/client";
|
|
6
6
|
import { magicLinkClient, twoFactorClient } from "better-auth/client/plugins";
|
|
@@ -44,7 +44,7 @@ declare enum BadgeSize {
|
|
|
44
44
|
*/
|
|
45
45
|
declare const badgeVariants: (props?: {
|
|
46
46
|
color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "error" | "success" | "custom";
|
|
47
|
-
variant?: "
|
|
47
|
+
variant?: "none" | "default" | "outline" | "hoverable";
|
|
48
48
|
size?: "md" | "sm" | "lg";
|
|
49
49
|
} & _$class_variance_authority_types0.ClassProp) => string;
|
|
50
50
|
/**
|
|
@@ -125,26 +125,6 @@ declare const browserContent: {
|
|
|
125
125
|
vi: string;
|
|
126
126
|
uk: string;
|
|
127
127
|
}>;
|
|
128
|
-
reloadButtonTitle: _$_intlayer_core_transpiler0.TranslationContent<unknown, {
|
|
129
|
-
en: string;
|
|
130
|
-
'en-GB': string;
|
|
131
|
-
fr: string;
|
|
132
|
-
es: string;
|
|
133
|
-
de: string;
|
|
134
|
-
ja: string;
|
|
135
|
-
ko: string;
|
|
136
|
-
zh: string;
|
|
137
|
-
it: string;
|
|
138
|
-
pt: string;
|
|
139
|
-
hi: string;
|
|
140
|
-
ar: string;
|
|
141
|
-
ru: string;
|
|
142
|
-
tr: string;
|
|
143
|
-
pl: string;
|
|
144
|
-
id: string;
|
|
145
|
-
vi: string;
|
|
146
|
-
uk: string;
|
|
147
|
-
}>;
|
|
148
128
|
iframeTitle: _$_intlayer_core_transpiler0.TranslationContent<unknown, {
|
|
149
129
|
en: string;
|
|
150
130
|
'en-GB': string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Browser.content.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"mappings":";;;cAEa,cAAA;;;
|
|
1
|
+
{"version":3,"file":"Browser.content.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"mappings":";;;cAEa,cAAA;;;eAqJS,4BAAA,CAAA,kBAAA"}
|
|
@@ -62,8 +62,8 @@ declare enum ButtonTextAlign {
|
|
|
62
62
|
declare const buttonVariants: (props?: {
|
|
63
63
|
size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
|
|
64
64
|
color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
|
|
65
|
-
roundedSize?: "
|
|
66
|
-
variant?: "
|
|
65
|
+
roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
|
|
66
|
+
variant?: "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
|
|
67
67
|
textAlign?: "left" | "center" | "right";
|
|
68
68
|
isFullWidth?: boolean;
|
|
69
69
|
} & _$class_variance_authority_types0.ClassProp) => string;
|