@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/components/core/Modal/Modal.js

@@ -6,7 +6,7 @@ import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
-import { ModalDescription } from './ModalDescription.js';
+import { ModalSubtitle } from './ModalSubtitle.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 
@@ -23,7 +23,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     // State for tracking if modal body is scrollable
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     // Reset scroll state when modal closes
@@ -53,9 +53,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
@@ -65,7 +65,7 @@ ModalRoot.displayName = "Modal";
 const Modal = Object.assign(ModalRoot, {
     Header: ModalHeader,
     Title: ModalTitle,
-    Description: ModalDescription,
+    Subtitle: ModalSubtitle,
     Body: ModalBody,
     Footer: ModalFooter,
 });

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

@@ -9,16 +9,16 @@ const modalTheme = {
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
     title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-sm mx-4 sm:mx-0",
+    md: "max-w-md mx-4 sm:mx-0",
+    lg: "max-w-lg mx-4 sm:mx-0",
+    xl: "max-w-xl mx-4 sm:mx-0",
     full: "max-w-full mx-4",
 };
 

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

@@ -8,7 +8,7 @@ export interface ModalTheme {
     header: string;
     headerContent: string;
     title: string;
-    description: string;
+    subtitle: string;
     body: string;
     footer: string;
 }
@@ -19,7 +19,7 @@ export interface ModalThemeOverrides {
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
+    subtitle?: string;
     body?: string;
     footer?: string;
 }
@@ -34,7 +34,7 @@ export interface ModalContextValue {
     isBodyScrollable: boolean;
     setIsBodyScrollable: (scrollable: boolean) => void;
     titleId: string;
-    descriptionId: string;
+    subtitleId: string;
 }
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
     isOpen: boolean;
@@ -87,7 +87,7 @@ export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement
     children: React.ReactNode;
     className?: string;
 }
-export interface ModalDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;
     className?: string;
 }

package/dist/components/core/Modal/ModalSubtitle.d.ts

@@ -0,0 +1,5 @@
+import { ModalSubtitleProps } from "./Modal.types";
+export declare const ModalSubtitle: {
+    ({ children, className, ...props }: ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalSubtitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalSubtitle = ({ children, className, ...props }) => {
+    const { theme, subtitleId } = useModalContext();
+    return (jsx("p", { id: subtitleId, className: cn(theme.subtitle, className), ...props, children: children }));
+};
+ModalSubtitle.displayName = "Modal.Subtitle";
+
+export { ModalSubtitle };

package/dist/components/core/ModalStack/ModalStack.animations.js

@@ -17,11 +17,11 @@ const backModalAnimations = {
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },
     stacked: {
-        opacity: 1,
+        opacity: 0.5,
         scale: 0.9,
-        y: -4,
+        y: 4,
         borderRadius: "var(--modal-radius)",
-        filter: "brightness(0.94) blur(2px)",
+        filter: "brightness(0.94) blur(0px)",
         clipPath: "inset(0% 0% 88% 0%)",
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -11,7 +11,7 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
     var _a;
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     const closeHandler = onClose || _stackOnClose || (() => { });
     const backHandler = onBack || onClose || (() => { });
@@ -41,9 +41,9 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descriptionId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

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

@@ -0,0 +1,8 @@
+import { PageHeadingComponent } from "./PageHeading.types";
+import { PageHeadingBackButton } from "./PageHeadingBackButton";
+import { PageHeadingIcon } from "./PageHeadingIcon";
+import { PageHeadingTitle } from "./PageHeadingTitle";
+import { PageHeadingSubtitle } from "./PageHeadingSubtitle";
+import { PageHeadingActions } from "./PageHeadingActions";
+export { PageHeadingBackButton, PageHeadingIcon, PageHeadingTitle, PageHeadingSubtitle, PageHeadingActions, };
+export declare const PageHeading: PageHeadingComponent;

package/dist/components/core/PageHeading/PageHeading.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+import { PageHeadingBackButton } from './PageHeadingBackButton.js';
+import { PageHeadingIcon } from './PageHeadingIcon.js';
+import { PageHeadingTitle } from './PageHeadingTitle.js';
+import { PageHeadingSubtitle } from './PageHeadingSubtitle.js';
+import { PageHeadingActions } from './PageHeadingActions.js';
+
+const PageHeadingRoot = React__default.forwardRef(({ children, className, separator = true, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...pageHeadingTheme,
+        ...customTheme,
+    }), [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, separator && theme.separatorStyle, className), ...props, children: children }));
+});
+PageHeadingRoot.displayName = "PageHeading";
+// Create compound component with proper typing
+const PageHeading = Object.assign(PageHeadingRoot, {
+    BackButton: PageHeadingBackButton,
+    Icon: PageHeadingIcon,
+    Title: PageHeadingTitle,
+    Subtitle: PageHeadingSubtitle,
+    Actions: PageHeadingActions,
+});
+
+export { PageHeading, PageHeadingActions, PageHeadingBackButton, PageHeadingIcon, PageHeadingSubtitle, PageHeadingTitle };

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

@@ -0,0 +1,2 @@
+import { PageHeadingTheme } from "./PageHeading.types";
+export declare const pageHeadingTheme: PageHeadingTheme;

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

@@ -0,0 +1,11 @@
+const pageHeadingTheme = {
+    baseStyle: "flex flex-col pb-6 mb-6",
+    headerStyle: "flex items-center gap-4",
+    titleStyle: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
+    iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
+    separatorStyle: "border-b border-[var(--color-border)] mt-4",
+};
+
+export { pageHeadingTheme };

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

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
+export interface PageHeadingTheme {
+    baseStyle: string;
+    headerStyle: string;
+    titleStyle: string;
+    subtitleStyle: string;
+    actionsStyle: string;
+    iconStyle: string;
+    separatorStyle: string;
+}
+export interface PageHeadingThemeOverrides {
+    baseStyle?: string;
+    headerStyle?: string;
+    titleStyle?: string;
+    subtitleStyle?: string;
+    actionsStyle?: string;
+    iconStyle?: string;
+    separatorStyle?: string;
+}
+export interface PageHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    /** Show bottom separator. @default true */
+    separator?: boolean;
+    theme?: PageHeadingThemeOverrides;
+}
+export interface PageHeadingTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingIconProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingBackButtonProps {
+    /** Text label next to the back arrow. @default "Back" */
+    label?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export interface PageHeadingComponent extends ForwardRefExoticComponent<PageHeadingProps & RefAttributes<HTMLDivElement>> {
+    Title: ForwardRefExoticComponent<PageHeadingTitleProps & RefAttributes<HTMLHeadingElement>>;
+    Subtitle: ForwardRefExoticComponent<PageHeadingSubtitleProps & RefAttributes<HTMLParagraphElement>>;
+    Actions: ForwardRefExoticComponent<PageHeadingActionsProps & RefAttributes<HTMLDivElement>>;
+    Icon: ForwardRefExoticComponent<PageHeadingIconProps & RefAttributes<HTMLDivElement>>;
+    BackButton: ForwardRefExoticComponent<PageHeadingBackButtonProps & RefAttributes<HTMLButtonElement>>;
+}

package/dist/components/core/PageHeading/PageHeadingActions.d.ts

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

package/dist/components/core/PageHeading/PageHeadingActions.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingActions = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(pageHeadingTheme.actionsStyle, className), ...props, children: children }));
+});
+PageHeadingActions.displayName = "PageHeadingActions";
+
+export { PageHeadingActions };

package/dist/components/core/PageHeading/PageHeadingBackButton.d.ts

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

package/dist/components/core/PageHeading/PageHeadingBackButton.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ArrowLeftIcon } from '@heroicons/react/20/solid';
+import { Button } from '../Button/Button.js';
+
+const PageHeadingBackButton = React__default.forwardRef(({ label = "Back", onClick, className, ...props }, ref) => {
+    return (jsxs(Button, { ref: ref, variant: "link", color: "neutral", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeftIcon, { className: "size-4" }), label] }));
+});
+PageHeadingBackButton.displayName = "PageHeadingBackButton";
+
+export { PageHeadingBackButton };

package/dist/components/core/PageHeading/PageHeadingIcon.d.ts

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

package/dist/components/core/PageHeading/PageHeadingIcon.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingIcon = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(pageHeadingTheme.iconStyle, className), ...props, children: children }));
+});
+PageHeadingIcon.displayName = "PageHeadingIcon";
+
+export { PageHeadingIcon };

package/dist/components/core/PageHeading/PageHeadingSubtitle.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingSubtitleProps } from "./PageHeading.types";
+export declare const PageHeadingSubtitle: React.ForwardRefExoticComponent<PageHeadingSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/core/PageHeading/PageHeadingSubtitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingSubtitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("p", { ref: ref, className: cn(pageHeadingTheme.subtitleStyle, className), ...props, children: children }));
+});
+PageHeadingSubtitle.displayName = "PageHeadingSubtitle";
+
+export { PageHeadingSubtitle };

package/dist/components/core/PageHeading/PageHeadingTitle.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingTitleProps } from "./PageHeading.types";
+export declare const PageHeadingTitle: React.ForwardRefExoticComponent<PageHeadingTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/core/PageHeading/PageHeadingTitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingTitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("h1", { ref: ref, className: cn(pageHeadingTheme.titleStyle, className), ...props, children: children }));
+});
+PageHeadingTitle.displayName = "PageHeadingTitle";
+
+export { PageHeadingTitle };

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

@@ -0,0 +1,2 @@
+export { PageHeading, PageHeadingBackButton, PageHeadingIcon, PageHeadingTitle, PageHeadingSubtitle, PageHeadingActions, } from "./PageHeading";
+export type { PageHeadingProps, PageHeadingTitleProps, PageHeadingSubtitleProps, PageHeadingActionsProps, PageHeadingIconProps, PageHeadingBackButtonProps, PageHeadingTheme, PageHeadingThemeOverrides, PageHeadingComponent, } from "./PageHeading.types";

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

@@ -5,7 +5,7 @@ const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Content styles
-    contentStyle: "bg-[var(--color-white)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-sm dark:bg-[var(--color-background-secondary)] ",
+    contentStyle: "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-background-secondary)] ",
 };
 
 export { popoverTheme };

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

@@ -3,7 +3,7 @@
  */
 const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-radius)] p-[2px] bg-[var(--color-background-secondary)]",
+    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-background)] border border-[var(--color-border)] p-0",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,7 +15,7 @@ const segmentedTheme = {
     // Disabled style
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
     // Sliding background style with CSS variables
-    slidingBackgroundStyle: "absolute top-[2px] left-[2px] rounded-[calc(var(--segmented-radius)-1.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-background-secondary)] shadow-real-md glass-effect",
+    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[calc(var(--segmented-radius)-0.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-background-secondary)] shadow-real-md glass-effect",
 };
 /**
  * Default theme for the SegmentedItem component
@@ -25,7 +25,7 @@ const segmentedItemTheme = {
     baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables
     sizes: {
-        sm: "text-[length:var(--segmented-text-size-sm)] px-[var(--segmented-px-sm)]",
+        sm: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-sm)]",
         md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
         lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
     },

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

@@ -32,6 +32,7 @@ const SidebarContainer = React__default.forwardRef(({ side = "left", variant = "
     const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
     const animateValue = useMemo(() => ({
         width: collapsed ? collapsedWidth : expandedWidth,
+        maxWidth: "100vw",
     }), [collapsed, collapsedWidth, expandedWidth]);
     return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...props, children: children }));
 });

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: (_a = shape.fill) !== null && _a !== void 0 ? _a : 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>;