@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/core/Sidebar/SidebarFooter.js

@@ -6,7 +6,9 @@ import { useSidebarContext } from './SidebarContext.js';
 const SidebarFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    const isCollapsedView = collapsed && !isMobile;
+    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] transition-all duration-200", isCollapsedView ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -1,17 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.js';
+import { Button } from '../Button/Button.js';
 
 const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    const isMobileOpen = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobileOpen) || false;
     // If children are provided, use them instead of default layout
     if (children) {
-        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className), ...props, children: children }));
+        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1"), children: logo }), showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] transition-all duration-200", collapsed && !isMobile ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed && !isMobile ? "flex-shrink-0" : "flex-1"), children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "soft", size: "sm", className: "size-8 p-0", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-5" }) })), !isMobile && showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

package/dist/components/core/Sidebar/SidebarMobileTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarMobileTriggerProps } from "./Sidebar.types";
+export declare const SidebarMobileTrigger: React.ForwardRefExoticComponent<SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Sidebar/SidebarMobileTrigger.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Button } from '../Button/Button.js';
+
+const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarMobileTrigger must be used within a Sidebar component");
+        }
+        return null;
+    }
+    const { isMobile, setMobileOpen } = sidebarContext;
+    // Only render on mobile
+    if (!isMobile)
+        return null;
+    const handleClick = (e) => {
+        setMobileOpen(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+});
+SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
+
+export { SidebarMobileTrigger };

package/dist/components/core/Sidebar/SidebarNav.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { AccordionNavProvider } from './SidebarContext.js';
 
-const SidebarNav = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: children }));
+const SidebarNav = React__default.forwardRef(({ accordion = false, children, className, ...props }, ref) => {
+    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: jsx(AccordionNavProvider, { accordion: accordion, children: children }) }));
 });
 SidebarNav.displayName = 'SidebarNav';
 

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -6,8 +6,10 @@ import { useSidebarContext } from './SidebarContext.js';
 const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    const isCollapsedView = collapsed && !isMobile;
+    const showTitle = title && (!isCollapsedView || showTitleWhenCollapsed);
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), isCollapsedView && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

package/dist/components/core/Sidebar/SidebarToggle.js

@@ -19,7 +19,8 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         toggleCollapsed();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
                 ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
                 : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
 });

package/dist/components/core/Sidebar/SidebarUserProfile.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarUserProfileProps } from "./Sidebar.types";
+export declare const SidebarUserProfile: React.ForwardRefExoticComponent<SidebarUserProfileProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarUserProfile.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+
+const statusColors = {
+    online: "bg-[var(--color-success)]",
+    offline: "bg-[var(--color-background-quaternary)]",
+    away: "bg-[var(--color-warning)]",
+    busy: "bg-[var(--color-danger)]",
+};
+const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    const isCollapsedView = collapsed && !isMobile;
+    const avatarElement = (jsxs("div", { className: "relative flex-shrink-0", children: [jsx(Avatar, { src: avatar, name: name, size: "sm" }), status && (jsx("span", { className: cn("absolute -bottom-0.5 -right-0.5 size-3 rounded-full ring-2 ring-[var(--color-background)]", statusColors[status]), "aria-label": `Status: ${status}` }))] }));
+    const content = (jsxs("div", { ref: ref, className: cn("flex items-center gap-3 rounded-[var(--radius-base)] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-background-secondary)]", isCollapsedView ? "justify-center p-2" : "px-3 py-2", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && onClick) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }, ...props, children: [avatarElement, !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] truncate", children: email }))] }))] }));
+    // Tooltip when collapsed
+    if (isCollapsedView) {
+        return (jsx(Tooltip, { content: name, placement: "right", children: content }));
+    }
+    return content;
+});
+SidebarUserProfile.displayName = "SidebarUserProfile";
+
+export { SidebarUserProfile };

package/dist/components/core/Sidebar/index.d.ts

@@ -6,5 +6,7 @@ export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
 export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
+export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
+export { SidebarUserProfile } from "./SidebarUserProfile";
 export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";

package/dist/components/core/SocialIcon/SocialIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SocialIconProps } from './SocialIcon.types';
+export declare const SocialIcon: React.ForwardRefExoticComponent<Omit<SocialIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/SocialIcon/SocialIcon.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { socialIconTheme } from './SocialIcon.theme.js';
+import { platforms } from './platforms.js';
+
+const SocialIcon = React__default.forwardRef(({ icon, size = 'md', colorMode = 'brand', className, theme: customTheme, ...props }, ref) => {
+    var _a;
+    const platform = platforms[icon];
+    if (!platform) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[SocialIcon]: Unknown icon "${icon}". Available icons: ${Object.keys(platforms).join(', ')}`);
+        }
+        return null;
+    }
+    const theme = {
+        ...socialIconTheme,
+        ...customTheme,
+        sizes: { ...socialIconTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
+    };
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const fill = colorMode === 'brand' ? platform.brandColor : 'currentColor';
+    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
+            var _a;
+            return (jsx("path", { d: shape.d, fill: colorMode === 'brand' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
+        }) }));
+});
+SocialIcon.displayName = 'SocialIcon';
+
+export { SocialIcon };

package/dist/components/core/SocialIcon/SocialIcon.theme.d.ts

@@ -0,0 +1,2 @@
+import { SocialIconTheme } from './SocialIcon.types';
+export declare const socialIconTheme: SocialIconTheme;

package/dist/components/core/SocialIcon/SocialIcon.theme.js

@@ -0,0 +1,12 @@
+const socialIconTheme = {
+    baseStyle: 'inline-block shrink-0',
+    sizes: {
+        xs: 16,
+        sm: 20,
+        md: 24,
+        lg: 32,
+        xl: 40,
+    },
+};
+
+export { socialIconTheme };

package/dist/components/core/SocialIcon/SocialIcon.types.d.ts

@@ -0,0 +1,18 @@
+export type SocialIconName = 'github' | 'x' | 'linkedin' | 'instagram' | 'facebook' | 'youtube' | 'discord' | 'dribbble' | 'tiktok' | 'reddit' | 'twitch' | 'slack' | 'medium' | 'pinterest' | 'snapchat' | 'whatsapp' | 'telegram' | 'google' | 'apple';
+export type SocialIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SocialIconColorMode = 'brand' | 'mono';
+export interface SocialIconTheme {
+    baseStyle: string;
+    sizes: Record<SocialIconSize, number>;
+}
+export interface SocialIconThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<SocialIconSize, number>>;
+}
+export interface SocialIconProps extends React.SVGProps<SVGSVGElement> {
+    icon: SocialIconName;
+    size?: SocialIconSize | number;
+    colorMode?: SocialIconColorMode;
+    className?: string;
+    theme?: SocialIconThemeOverrides;
+}

package/dist/components/core/SocialIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { SocialIcon } from './SocialIcon';
+export type { SocialIconProps, SocialIconName, SocialIconSize, SocialIconColorMode, SocialIconTheme, SocialIconThemeOverrides, } from './SocialIcon.types';

package/dist/components/core/SocialIcon/platforms.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SVG path data and brand colors for social media platforms.
+ * Paths sourced from Simple Icons (https://simpleicons.org/).
+ * All icons use a 24x24 viewBox.
+ */
+export interface PlatformShape {
+    type: 'path';
+    d: string;
+    fill?: string;
+}
+export interface PlatformData {
+    viewBox: string;
+    brandColor: string;
+    label: string;
+    shapes: PlatformShape[];
+}
+export declare const platforms: Record<string, PlatformData>;

package/dist/components/core/SocialIcon/platforms.js

@@ -0,0 +1,234 @@
+/**
+ * SVG path data and brand colors for social media platforms.
+ * Paths sourced from Simple Icons (https://simpleicons.org/).
+ * All icons use a 24x24 viewBox.
+ */
+const platforms = {
+    github: {
+        viewBox: '0 0 24 24',
+        brandColor: '#181717',
+        label: 'GitHub',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+            },
+        ],
+    },
+    x: {
+        viewBox: '0 0 24 24',
+        brandColor: '#000000',
+        label: 'X',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+            },
+        ],
+    },
+    linkedin: {
+        viewBox: '0 0 24 24',
+        brandColor: '#0A66C2',
+        label: 'LinkedIn',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+            },
+        ],
+    },
+    instagram: {
+        viewBox: '0 0 24 24',
+        brandColor: '#E4405F',
+        label: 'Instagram',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.8981-1.3783-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.8988.4227-.1645 1.0573-.3617 2.2274-.4174 1.2645-.0595 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.8988 1.3783.1645.4217.3617 1.056.4174 2.2274.0595 1.2645.072 1.6447.079 4.848.007 3.2033-.0053 3.5835-.0607 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.8988-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.1736 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1502 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077',
+            },
+        ],
+    },
+    facebook: {
+        viewBox: '0 0 24 24',
+        brandColor: '#0866FF',
+        label: 'Facebook',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.09.044 1.613.115v3.146c-.427-.044-.602-.044-.855-.044-1.245 0-1.729.473-1.729 1.704v2.637h4.332l-.744 3.667h-3.588v7.98C18.343 23.166 22.344 19.073 24 14.02c.522-1.593.8-3.289.8-5.05C24.8 4.025 19.975-.8 13.95-.8S3.1 4.024 3.1 8.97c0 6.068 4.759 11.027 10.88 11.504-.16-.165-.328-.328-.505-.486a12.13 12.13 0 0 1-4.374-3.297z',
+            },
+        ],
+    },
+    youtube: {
+        viewBox: '0 0 24 24',
+        brandColor: '#FF0000',
+        label: 'YouTube',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+            },
+        ],
+    },
+    discord: {
+        viewBox: '0 0 24 24',
+        brandColor: '#5865F2',
+        label: 'Discord',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
+            },
+        ],
+    },
+    dribbble: {
+        viewBox: '0 0 24 24',
+        brandColor: '#EA4C89',
+        label: 'Dribbble',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.91 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z',
+            },
+        ],
+    },
+    tiktok: {
+        viewBox: '0 0 24 24',
+        brandColor: '#000000',
+        label: 'TikTok',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+            },
+        ],
+    },
+    reddit: {
+        viewBox: '0 0 24 24',
+        brandColor: '#FF4500',
+        label: 'Reddit',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.627-5.373-12-12-12zm6.066 9.645c.183.049.3.212.3.395 0 .04-.009.077-.023.114.161.404.254.854.254 1.33 0 2.705-2.725 4.9-6.097 4.9-3.372 0-6.097-2.195-6.097-4.9 0-.46.085-.895.235-1.29a.493.493 0 01-.032-.147c0-.282.23-.512.513-.512.147 0 .278.063.37.163A8.345 8.345 0 0112 8.066a8.344 8.344 0 014.524 1.641.487.487 0 01.353-.15c.166 0 .313.08.406.196l.783-.45a.49.49 0 01-.064-.236c0-.282.23-.513.513-.513.282 0 .512.23.512.513 0 .282-.23.512-.512.512a.51.51 0 01-.449-.268zm-7.066 3.66c-.67 0-1.217-.547-1.217-1.217 0-.67.547-1.217 1.217-1.217.67 0 1.216.547 1.216 1.217 0 .67-.547 1.217-1.216 1.217zm4.982.018c-.67 0-1.216-.547-1.216-1.217 0-.67.547-1.216 1.216-1.216.67 0 1.217.547 1.217 1.216 0 .67-.547 1.217-1.217 1.217zM14.893 16c-.243.337-.608.575-1.024.69-.416.115-.856.13-1.264.045a2.504 2.504 0 01-1.159-.55 1.762 1.762 0 01-.122-.115.282.282 0 01.399-.399l.053.052c.258.237.578.396.925.461.348.065.707.05 1.035-.048.328-.099.62-.271.842-.502a.282.282 0 11.415.38l-.1-.014z',
+            },
+        ],
+    },
+    twitch: {
+        viewBox: '0 0 24 24',
+        brandColor: '#9146FF',
+        label: 'Twitch',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z',
+            },
+        ],
+    },
+    slack: {
+        viewBox: '0 0 24 24',
+        brandColor: '#4A154B',
+        label: 'Slack',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z',
+            },
+        ],
+    },
+    medium: {
+        viewBox: '0 0 24 24',
+        brandColor: '#000000',
+        label: 'Medium',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.86 0-3.38-2.88-3.38-6.42 0-3.54 1.52-6.42 3.38-6.42 1.87 0 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z',
+            },
+        ],
+    },
+    pinterest: {
+        viewBox: '0 0 24 24',
+        brandColor: '#BD081C',
+        label: 'Pinterest',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z',
+            },
+        ],
+    },
+    snapchat: {
+        viewBox: '0 0 24 24',
+        brandColor: '#FFFC00',
+        label: 'Snapchat',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12.922-.214.12-.042.176-.065.249-.088a.863.863 0 01.304-.058c.279 0 .543.098.744.268a.72.72 0 01.075.96c-.106.143-.244.231-.389.3a2.458 2.458 0 01-.605.228c-.096.03-.204.064-.324.107a3.147 3.147 0 00-.723.37.985.985 0 00-.38.588c-.024.138-.008.28.058.45.221.545.547 1.058.91 1.513.258.33.554.63.876.905.402.341.82.59 1.206.746.286.118.571.187.82.215a.826.826 0 01.349.09c.206.112.262.322.2.505-.104.307-.457.543-.997.687a3.23 3.23 0 01-.357.08c-.128.027-.271.058-.423.1-.367.101-.589.247-.7.465a4.065 4.065 0 01-.484-.032c-.252-.028-.511-.057-.784-.057a4.233 4.233 0 00-.882.104 4.593 4.593 0 00-.564.207c-.326.155-.648.385-.975.72-.988 1.012-2.068 1.53-3.21 1.53-.044 0-.088-.001-.132-.004a5.53 5.53 0 01-.127.004c-1.142 0-2.222-.518-3.21-1.53a3.764 3.764 0 00-.975-.72 4.573 4.573 0 00-.564-.207 4.22 4.22 0 00-.882-.104c-.273 0-.531.03-.784.058a4.032 4.032 0 01-.483.031c-.112-.217-.334-.363-.7-.465a4.962 4.962 0 00-.424-.1 3.236 3.236 0 01-.356-.08c-.54-.143-.893-.38-.997-.686-.062-.183-.006-.393.2-.505a.826.826 0 01.349-.09c.25-.027.534-.097.82-.215a4.49 4.49 0 001.207-.746c.32-.275.616-.575.876-.905.362-.455.688-.968.91-1.514.065-.17.082-.311.057-.449a.985.985 0 00-.38-.588 3.157 3.157 0 00-.722-.37 5.19 5.19 0 00-.325-.108 2.459 2.459 0 01-.604-.228 1.022 1.022 0 01-.39-.299.72.72 0 01.076-.96.856.856 0 01.744-.268c.073.001.127.012.249.058.264.094.622.198.922.214.2 0 .326-.045.401-.09a11.58 11.58 0 01-.033-.57c-.104-1.628-.23-3.654.3-4.847C6.661 1.07 10.017.793 11.007.793h.39a.39.39 0 00-.191 0z',
+            },
+        ],
+    },
+    whatsapp: {
+        viewBox: '0 0 24 24',
+        brandColor: '#25D366',
+        label: 'WhatsApp',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z',
+            },
+        ],
+    },
+    telegram: {
+        viewBox: '0 0 24 24',
+        brandColor: '#26A5E4',
+        label: 'Telegram',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z',
+            },
+        ],
+    },
+    google: {
+        viewBox: '0 0 24 24',
+        brandColor: '#4285F4',
+        label: 'Google',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z',
+                fill: '#4285F4',
+            },
+            {
+                type: 'path',
+                d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z',
+                fill: '#34A853',
+            },
+            {
+                type: 'path',
+                d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z',
+                fill: '#FBBC05',
+            },
+            {
+                type: 'path',
+                d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z',
+                fill: '#EA4335',
+            },
+        ],
+    },
+    apple: {
+        viewBox: '0 0 24 24',
+        brandColor: '#000000',
+        label: 'Apple',
+        shapes: [
+            {
+                type: 'path',
+                d: 'M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z',
+            },
+        ],
+    },
+};
+
+export { platforms };

package/dist/components/core/Sortable/Sortable.js

@@ -154,7 +154,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDraggedItemContent(children);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [disabled, id, children, context, value]);
     const handleDragEnd = useCallback(() => {
         var _a;
@@ -164,7 +164,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDropPosition(null);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [id, context, value]);
     const handlePointerDown = useCallback((event) => {
         if (disabled) {

package/dist/components/core/Sortable/Sortable.theme.js

@@ -1,7 +1,7 @@
 const sortableTheme = {
     containerStyle: "relative list-none",
     itemStyle: "relative cursor-move select-none relative focus-within:z-10 list-none",
-    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-gray-400 hover:text-gray-600 flex items-center justify-center rounded transition-colors duration-200",
+    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] flex items-center justify-center rounded transition-colors duration-200",
 };
 
 export { sortableTheme };

package/dist/components/core/Sortable/Sortable.types.d.ts

@@ -1,9 +1,11 @@
-import { HTMLAttributes, ReactNode, DragEvent } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SortableData {
     id: string;
     index: number;
     data?: string | number | Record<string, unknown>;
 }
+/** Event type for sort drag callbacks - may be a native event, React event, or absent (keyboard-initiated) */
+export type SortableEvent = React.KeyboardEvent<HTMLDivElement> | Event | undefined;
 export interface SortableTheme {
     containerStyle: string;
     itemStyle: string;
@@ -28,9 +30,9 @@ export interface SortableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onD
     /** Show drag handles */
     showDragHandle?: boolean;
     /** Called when drag starts */
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
     /** Called when drag ends */
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     /** Optional array of values for Reorder.Group - auto-extracted from children if not provided */
     values?: (string | number)[];
 }
@@ -53,8 +55,8 @@ export interface SortableContextValue {
     showDragHandle: boolean;
     theme: SortableTheme;
     onReorder: (fromIndex: number, toIndex: number) => void;
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     draggedItem: string | null;
     setDraggedItem: (id: string | null) => void;
     dropPosition: {

package/dist/components/core/Spinner/Spinner.theme.js

@@ -1,3 +1,5 @@
+import { semanticSpinnerColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme for the Spinner component
  */
@@ -12,12 +14,8 @@ const spinnerTheme = {
     },
     // Color variants
     colors: {
-        neutral: "border-[var(--color-border)] border-t-transparent",
+        ...semanticSpinnerColors,
         dark: "border-[var(--color-background-quinary)] border-t-transparent",
-        primary: "border-[var(--color-primary)] border-t-transparent",
-        success: "border-[var(--color-success)] border-t-transparent",
-        warning: "border-[var(--color-warning)] border-t-transparent",
-        danger: "border-[var(--color-danger)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

package/dist/components/core/Spinner/Spinner.types.d.ts

@@ -21,8 +21,9 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: SpinnerThemeOverrides;
 }
+import { SemanticColor } from "../../../utils/colorUtils";
 export type SpinnerSize = "sm" | "md" | "lg";
-export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type SpinnerColor = SemanticColor | "dark";
 export interface SpinnerThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<SpinnerSize, string>>;

package/dist/components/core/Tabs/Tabs.animations.d.ts

@@ -17,7 +17,7 @@ export interface UnderlinePosition {
  */
 export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-export declare const getTabsContentVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const getTabsBodyVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;