@pathscale/ui 0.0.36 → 0.0.38

package/dist/index.js

@@ -7806,163 +7806,139 @@ const Table = Object.assign(TableComponent, {
 });
 const table_Table = Table;
 const table = table_Table;
-const tabsNavVariants = cva("flex text-sm font-medium text-[var(--color-base-content)]", {
-    variants: {
-        type: {
-            basic: "",
-            boxed: "flex gap-2",
-            toggle: "inline-flex rounded-md p-1",
-            "toggle-rounded": "inline-flex rounded-full p-1"
-        },
-        size: {
-            sm: "text-xs gap-1",
-            md: "text-sm gap-2",
-            lg: "text-base gap-3"
-        },
-        alignment: {
-            left: "justify-start",
-            center: "justify-center",
-            right: "justify-end"
-        },
-        expanded: {
-            true: "w-full",
-            false: ""
-        }
-    },
-    defaultVariants: {
-        type: "basic",
-        size: "md",
-        alignment: "left",
-        expanded: false
-    }
-});
-const tabTriggerVariants = cva("inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors", {
-    variants: {
-        size: {
-            sm: "text-xs px-2 py-1",
-            md: "text-sm px-3 py-2",
-            lg: "text-base px-4 py-3"
-        },
-        type: {
-            basic: "border-b-2 transition-colors hover:text-[var(--color-primary)]",
-            boxed: "rounded-t px-4 py-2 hover:text-[var(--color-primary)]",
-            toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
-            "toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
-        },
-        active: {
-            true: "",
-            false: ""
-        },
-        disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none",
-            false: ""
-        }
-    },
-    compoundVariants: [
-        {
-            type: "basic",
-            active: true,
-            class: "border-[var(--color-primary)] text-[var(--color-primary)]"
-        },
-        {
-            type: "basic",
-            active: false,
-            class: "border-transparent text-[var(--color-base-content)]/60"
-        },
-        {
-            type: "boxed",
-            active: true,
-            class: "border-x border-t border-b-0 border-[var(--color-base-300)] text-[var(--color-primary)]"
-        },
-        {
-            type: "boxed",
-            active: false,
-            class: "border-b border-transparent text-[var(--color-base-content)]/60 hover:text-[var(--color-primary)]"
-        },
-        {
-            type: "toggle",
-            active: true,
-            class: "bg-[var(--color-primary)] text-[var(--color-primary-content)] border-[var(--color-primary)]"
-        },
-        {
-            type: "toggle",
-            active: false,
-            class: "bg-transparent text-[var(--color-base-content)]/60 border-[var(--color-base-300)]"
-        },
-        {
-            type: "toggle-rounded",
-            active: true,
-            class: "bg-[var(--color-primary)] text-[var(--color-primary-content)] border-[var(--color-primary)]"
-        },
-        {
-            type: "toggle-rounded",
-            active: false,
-            class: "bg-transparent text-[var(--color-base-content)]/60 border-[var(--color-base-300)]"
-        }
-    ],
-    defaultVariants: {
-        active: false,
-        disabled: false
-    }
-});
-var Tabs_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><nav><ul class="flex gap-0"></ul></nav><div class=pt-4>'), Tabs_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li><button>");
-const Tabs_Tabs = (props)=>{
-    const [local, variantProps, otherProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "items",
-        "value",
-        "onChange"
-    ], [
-        "size",
-        "type",
-        "alignment",
-        "expanded"
+var Tab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a role=tab>");
+const Tab = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "color",
+        "bgColor",
+        "borderColor",
+        "active",
+        "disabled"
     ]);
-    const [internalActive, setInternalActive] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.value ?? 0);
-    const isControlled = ()=>void 0 !== local.value;
-    const active = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isControlled() ? local.value : internalActive());
-    const handleChange = (i)=>{
-        const item = local.items[i];
-        if (!item || item.disabled) return;
-        if (!isControlled()) setInternalActive(i);
-        local.onChange?.(i);
-    };
-    return (()=>{
-        var _el$ = Tabs_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, otherProps, false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-            get each () {
-                return local.items;
-            },
-            children: (tab, i)=>(()=>{
-                    var _el$5 = Tabs_tmpl$2(), _el$6 = _el$5.firstChild;
-                    _el$6.$$click = ()=>handleChange(i());
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>tab.label);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, tabTriggerVariants({
-                            type: variantProps.type ?? "basic",
-                            size: variantProps.size ?? "md",
-                            active: i() === active(),
-                            disabled: tab.disabled
-                        })));
-                    return _el$5;
-                })()
+    const classes = ()=>twMerge("tab", local.class, local.className, clsx({
+            [`[--tab-bg:${local.bgColor}]`]: local.bgColor,
+            [`[--tab-border-color:${local.borderColor}]`]: local.borderColor,
+            "text-neutral": "neutral" === local.color,
+            "text-primary": "primary" === local.color,
+            "text-secondary": "secondary" === local.color,
+            "text-accent": "accent" === local.color,
+            "text-info": "info" === local.color,
+            "text-success": "success" === local.color,
+            "text-warning": "warning" === local.color,
+            "text-error": "error" === local.color,
+            "tab-active": local.active,
+            "tab-disabled": local.disabled
         }));
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return local.items[active()];
-            },
-            get children () {
-                return local.items[active()]?.content;
+    return (()=>{
+        var _el$ = Tab_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
             }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const tabs_Tab = Tab;
+var RadioTab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input role=tab type=radio>"), RadioTab_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const RadioTab = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "color",
+        "bgColor",
+        "borderColor",
+        "active",
+        "disabled",
+        "label",
+        "name",
+        "contentClassName"
+    ]);
+    const classes = ()=>twMerge("tab", local.class, local.className, clsx({
+            [`[--tab-bg:${local.bgColor}]`]: local.bgColor,
+            [`[--tab-border-color:${local.borderColor}]`]: local.borderColor,
+            "text-neutral": "neutral" === local.color,
+            "text-primary": "primary" === local.color,
+            "text-secondary": "secondary" === local.color,
+            "text-accent": "accent" === local.color,
+            "text-info": "info" === local.color,
+            "text-success": "success" === local.color,
+            "text-warning": "warning" === local.color,
+            "text-error": "error" === local.color,
+            "tab-active": local.active,
+            "tab-disabled": local.disabled
+        }));
+    const contentClasses = ()=>twMerge("tab-content", local.contentClassName);
+    return [
+        (()=>{
+            var _el$ = RadioTab_tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return classes();
+                },
+                get name () {
+                    return local.name;
+                },
+                get ["aria-label"] () {
+                    return local.label;
+                },
+                get disabled () {
+                    return local.disabled;
+                }
+            }, others), false, false);
+            return _el$;
+        })(),
+        (()=>{
+            var _el$2 = RadioTab_tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, contentClasses()));
+            return _el$2;
+        })()
+    ];
+};
+const tabs_RadioTab = RadioTab;
+var Tabs_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=tablist>");
+const Tabs = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "variant",
+        "size",
+        "position"
+    ]);
+    const classes = ()=>twMerge("tabs", local.class, local.className, clsx({
+            "tabs-boxed": "boxed" === local.variant,
+            "tabs-bordered": "bordered" === local.variant,
+            "tabs-lift": "lift" === local.variant,
+            "tabs-xl": "xl" === local.size,
+            "tabs-lg": "lg" === local.size,
+            "tabs-md": "md" === local.size,
+            "tabs-sm": "sm" === local.size,
+            "tabs-xs": "xs" === local.size,
+            "tabs-top": "top" === local.position,
+            "tabs-bottom": "bottom" === local.position
         }));
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, tabsNavVariants(variantProps)));
+    return (()=>{
+        var _el$ = Tabs_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();
 };
-const Tabs = Tabs_Tabs;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
-]);
-const tabs = Tabs;
+const tabs_Tabs = Object.assign(Tabs, {
+    Tab: tabs_Tab,
+    RadioTab: tabs_RadioTab
+});
 var Textarea_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
 const Textarea = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -8414,4 +8390,4 @@ const Artboard = (props)=>{
     })();
 };
 const artboard_Artboard = Artboard;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, grid_Grid as Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, Sidenav, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, Swap, table as Table, tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, grid_Grid as Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, Sidenav, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, Swap, table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "author": "pathscale",
   "repository": {
     "type": "git",