infinity-ui-elements 1.4.1-beta.0 → 1.4.1-beta.2

package/dist/index.js

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var reactSpinners = require('react-spinners');
+var lucideReact = require('lucide-react');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -1264,6 +1265,136 @@ const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOpti
 });
 FormHeader.displayName = "FormHeader";
 
+const linkVariants = classVarianceAuthority.cva("inline-flex items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none underline decoration-1 underline-offset-4", {
+    variants: {
+        type: {
+            anchor: "",
+            action: "cursor-pointer",
+        },
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+        size: {
+            xsmall: "text-body-xsmall-medium gap-1",
+            small: "text-body-small-medium gap-1",
+            medium: "text-body-medium-medium gap-1.5",
+            large: "text-body-large-medium gap-1.5",
+        },
+        isIconOnly: {
+            true: "no-underline",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: "cursor-pointer",
+        },
+    },
+    compoundVariants: [
+        // Primary color variants
+        {
+            color: "primary",
+            class: `text-action-ink-primary-normal 
+          hover:text-action-ink-primary-hover 
+          disabled:text-action-ink-primary-disabled
+          active:text-action-ink-primary-activated
+          focus:text-action-ink-primary-hover
+          `,
+        },
+        // Positive color variants
+        {
+            color: "positive",
+            class: `text-action-ink-positive-normal 
+          hover:text-action-ink-positive-hover 
+          disabled:text-action-ink-positive-disabled
+          active:text-action-ink-positive-activated
+          focus:text-action-ink-positive-hover
+          `,
+        },
+        // Negative color variants
+        {
+            color: "negative",
+            class: `text-action-ink-negative-normal 
+          hover:text-action-ink-negative-hover 
+          disabled:text-action-ink-negative-disabled
+          active:text-action-ink-negative-activated
+          focus:text-action-ink-negative-hover
+          `,
+        },
+        // Notice color variants
+        {
+            color: "notice",
+            class: `text-action-ink-notice-normal 
+          hover:text-action-ink-notice-hover 
+          disabled:text-action-ink-notice-disabled
+          active:text-action-ink-notice-activated
+          focus:text-action-ink-notice-hover
+          `,
+        },
+        // Info color variants
+        {
+            color: "info",
+            class: `text-action-ink-info-normal 
+          hover:text-action-ink-info-hover 
+          disabled:text-action-ink-info-disabled
+          active:text-action-ink-info-activated
+          focus:text-action-ink-info-hover
+          `,
+        },
+        // Neutral color variants
+        {
+            color: "neutral",
+            class: `text-action-ink-neutral-normal 
+          hover:text-action-ink-neutral-hover 
+          disabled:text-action-ink-neutral-disabled
+          active:text-action-ink-neutral-activated
+          focus:text-action-ink-neutral-hover
+          `,
+        },
+    ],
+    defaultVariants: {
+        type: "anchor",
+        color: "primary",
+        size: "medium",
+        isIconOnly: false,
+        isDisabled: false,
+    },
+});
+const Link = React__namespace.forwardRef(({ className, type = "anchor", color = "primary", size = "medium", isIconOnly = false, isDisabled = false, asChild = false, showIcon = false, icon, leadingIcon, trailingIcon, children, onClick, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "a";
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // Icon size based on link size
+    const iconSize = {
+        xsmall: 12,
+        small: 14,
+        medium: 16,
+        large: 18,
+    }[size];
+    // Determine what to show as trailing icon
+    // Priority: trailingIcon > (showIcon && icon) > (showIcon && default ExternalLink)
+    const finalTrailingIcon = trailingIcon || (showIcon && (icon || jsxRuntime.jsx(lucideReact.ExternalLink, { size: iconSize })));
+    const linkContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && !isIconOnly && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leadingIcon })), !isIconOnly && children, isIconOnly && children, finalTrailingIcon && !isIconOnly && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: finalTrailingIcon })), isIconOnly &&
+                (leadingIcon || finalTrailingIcon || (jsxRuntime.jsx(lucideReact.ExternalLink, { size: iconSize })))] }));
+    return (jsxRuntime.jsx(Comp, { className: cn(linkVariants({
+            type,
+            color,
+            size,
+            isIconOnly,
+            isDisabled,
+        }), className), ref: ref, onClick: handleClick, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, ...props, children: linkContent }));
+});
+Link.displayName = "Link";
+
 const listItemVariants = classVarianceAuthority.cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
     variants: {
         variant: {
@@ -1647,6 +1778,117 @@ const Switch = React__namespace.forwardRef(({ label, size = "medium", isDisabled
 });
 Switch.displayName = "Switch";
 
+const tabItemVariants = classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer", {
+    variants: {
+        variant: {
+            bordered: "border-b-2",
+            filled: "rounded-medium",
+        },
+        size: {
+            small: "px-4 h-10 text-body-small-medium",
+            large: "px-6 h-12 text-body-large-medium",
+        },
+        isSelected: {
+            true: "",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: "",
+        },
+        isFullWidth: {
+            true: "flex-1",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Bordered variant - not selected
+        {
+            variant: "bordered",
+            isSelected: false,
+            isDisabled: false,
+            class: `text-text-body-secondary 
+          border-b-transparent
+          text-action-ink-neutral-muted
+          hover:text-action-ink-neutral-subtle
+          hover:border-b-action-outline-neutral-faded-hover`,
+        },
+        // Bordered variant - selected
+        {
+            variant: "bordered",
+            isSelected: true,
+            isDisabled: false,
+            class: "text-text-body-primary border-b-action-fill-primary-default text-action-ink-primary-normal hover:border-b-action-fill-primary-hover",
+        },
+        // Bordered variant - disabled
+        {
+            variant: "bordered",
+            isDisabled: true,
+            class: "text-text-body-disabled border-b-transparent",
+        },
+        // Filled variant - not selected
+        {
+            variant: "filled",
+            isSelected: false,
+            isDisabled: false,
+            class: "text-text-body-secondary hover:text-text-body-primary hover:bg-surface-layer-3",
+        },
+        // Filled variant - selected
+        {
+            variant: "filled",
+            isSelected: true,
+            isDisabled: false,
+            class: "text-text-body-primary bg-surface-layer-3",
+        },
+        // Filled variant - disabled
+        {
+            variant: "filled",
+            isDisabled: true,
+            class: "text-text-body-disabled",
+        },
+    ],
+    defaultVariants: {
+        variant: "bordered",
+        size: "large",
+        isSelected: false,
+        isDisabled: false,
+        isFullWidth: false,
+    },
+});
+const TabItem = React__namespace.forwardRef(({ leadingComponent, title, trailingComponent, isSelected = false, isDisabled = false, size = "large", variant = "bordered", isFullWidth = false, className, onClick, ...props }, ref) => {
+    return (jsxRuntime.jsxs("button", { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(tabItemVariants({
+            variant,
+            size,
+            isSelected,
+            isDisabled,
+            isFullWidth,
+        }), className), onClick: onClick, ...props, children: [leadingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leadingComponent })), jsxRuntime.jsx("span", { className: "inline-flex items-center", children: title }), trailingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: trailingComponent }))] }));
+});
+TabItem.displayName = "TabItem";
+
+const Tabs = React__namespace.forwardRef(({ tabs, selectedTabId, defaultSelectedTabId, onTabChange, variant = "bordered", size = "large", isFullWidth = false, className, tabListClassName, contentClassName, renderContent = true, ...props }, ref) => {
+    // Internal state for uncontrolled mode
+    const [internalSelectedId, setInternalSelectedId] = React__namespace.useState(defaultSelectedTabId || tabs[0]?.id || "");
+    // Determine if component is controlled
+    const isControlled = selectedTabId !== undefined;
+    const activeTabId = isControlled ? selectedTabId : internalSelectedId;
+    // Handle tab selection
+    const handleTabClick = (tabId) => {
+        if (!isControlled) {
+            setInternalSelectedId(tabId);
+        }
+        onTabChange?.(tabId);
+    };
+    // Get the active tab content
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxRuntime.jsx("div", { role: "tablist", className: cn("inline-flex items-center", {
+                    "w-full": isFullWidth,
+                    "border-b border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
+                    "bg-surface-layer-2 rounded-medium p-1 gap-1": variant === "filled",
+                }, tabListClassName), children: tabs.map((tab) => (jsxRuntime.jsx(TabItem, { leadingComponent: tab.leadingComponent, title: tab.title, trailingComponent: tab.trailingComponent, isSelected: tab.id === activeTabId, isDisabled: tab.isDisabled, variant: variant, size: size, isFullWidth: isFullWidth, onClick: () => !tab.isDisabled && handleTabClick(tab.id) }, tab.id))) }), renderContent && activeTab?.content && (jsxRuntime.jsx("div", { role: "tabpanel", className: cn("mt-4", contentClassName), "aria-labelledby": activeTabId, children: activeTab.content }))] }));
+});
+Tabs.displayName = "Tabs";
+
 const textAreaVariants = classVarianceAuthority.cva("relative flex flex-col border rounded-medium transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
@@ -1850,9 +2092,12 @@ exports.Divider = Divider;
 exports.FormFooter = FormFooter;
 exports.FormHeader = FormHeader;
 exports.Icon = Icon;
+exports.Link = Link;
 exports.ListItem = ListItem;
 exports.Radio = Radio;
 exports.Switch = Switch;
+exports.TabItem = TabItem;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
@@ -1865,6 +2110,7 @@ exports.counterVariants = counterVariants;
 exports.getAvailableIcons = getAvailableIcons;
 exports.hasIcon = hasIcon;
 exports.iconRegistry = iconRegistry;
+exports.linkVariants = linkVariants;
 exports.listItemVariants = listItemVariants;
 exports.radioVariants = radioVariants;
 exports.switchVariants = switchVariants;