@pathscale/ui 0.0.83 → 0.0.85

package/dist/components/form/Form.d.ts

@@ -2,7 +2,10 @@ import { type JSX, type ParentComponent } from "solid-js";
 import { IComponentBaseProps } from "../types";
 import ValidatedForm, { useFormValidation } from "./ValidatedForm";
 export { type ValidatedFormProps } from "./ValidatedForm";
-export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps;
+export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps & {
+    autoFocus?: boolean;
+    cycleOnEnter?: boolean;
+};
 export { useFormValidation };
 declare const _default: ParentComponent<FormProps> & {
     Label: ParentComponent<import("./Label").LabelProps>;

package/dist/components/stat-card/StatCard.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+export type StatCardProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    dataTheme?: string;
+};
+declare const _default: ((props: StatCardProps) => JSX.Element) & {
+    Figure: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+        copyable?: boolean;
+    }) => JSX.Element;
+    Title: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+        copyable?: boolean;
+    }) => JSX.Element;
+    Value: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+        copyable?: boolean;
+    }) => JSX.Element;
+    Desc: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+        copyable?: boolean;
+    }) => JSX.Element;
+    Actions: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+        copyable?: boolean;
+    }) => JSX.Element;
+};
+export default _default;

package/dist/components/stat-card/StatCardSection.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+export declare const StatCardSection: (section: string) => (props: JSX.HTMLAttributes<HTMLDivElement> & {
+    copyable?: boolean;
+}) => JSX.Element;
+export default StatCardSection;

package/dist/components/stat-card/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./StatCard";

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { default as ShowcaseBlock } from "./components/showcase/ShowcaseBlock";
 export { Sidenav, SidenavMenu, SidenavItem, SidenavGroup, SidenavLink, SidenavButton, } from "./components/sidenav";
 export { default as Skeleton } from "./components/skeleton";
 export { default as Stack } from "./components/stack";
+export { default as StatCard } from "./components/stat-card";
 export { default as Stats } from "./components/stats";
 export { Status } from "./components/status";
 export type { StatusProps } from "./components/status";

package/dist/index.js

@@ -7440,16 +7440,61 @@ function ValidatedForm(props) {
 const form_ValidatedForm = ValidatedForm;
 var Form_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form role=form>");
 const Form = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        autoFocus: true,
+        cycleOnEnter: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
         "children",
         "dataTheme",
         "class",
-        "className"
+        "className",
+        "autoFocus",
+        "cycleOnEnter"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const classes = ()=>twMerge("form-control", local.class, local.className);
+    let formRef;
+    const getFocusableElements = ()=>{
+        if (!formRef) return [];
+        return Array.from(formRef.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'));
+    };
+    const handleKeyDown = (e)=>{
+        if (!local.cycleOnEnter || "Enter" !== e.key) return;
+        const focusableElements = getFocusableElements();
+        const activeElement = document.activeElement;
+        if (!formRef?.contains(activeElement)) return;
+        const currentIndex = focusableElements.indexOf(activeElement);
+        if (-1 === currentIndex) return;
+        e.preventDefault();
+        if (currentIndex === focusableElements.length - 1) formRef?.dispatchEvent(new Event("submit", {
+            bubbles: true,
+            cancelable: true
+        }));
+        else {
+            const nextElement = focusableElements[currentIndex + 1];
+            nextElement?.focus();
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (local.autoFocus && formRef) {
+            const focusableElements = getFocusableElements();
+            if (focusableElements.length > 0) {
+                const firstElement = focusableElements[0];
+                firstElement.focus();
+            }
+        }
+        if (local.cycleOnEnter && formRef) {
+            formRef.addEventListener("keydown", handleKeyDown);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                formRef?.removeEventListener("keydown", handleKeyDown);
+            });
+        }
+    });
     return (()=>{
         var _el$ = Form_tmpl$();
+        var _ref$ = formRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : formRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -9471,6 +9516,79 @@ const Stack_Stack = (props)=>{
     }));
 };
 const Stack = Stack_Stack;
+var StatCardSection_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="p-3 bg-primary/10 rounded-lg"><div class="flex items-center justify-center w-6 h-6 text-primary">'), StatCardSection_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const StatCardSection = (section)=>(props)=>{
+        const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+            "class",
+            "children",
+            "copyable"
+        ]);
+        let content = local.children;
+        if ("figure" === section) content = (()=>{
+            var _el$ = StatCardSection_tmpl$(), _el$2 = _el$.firstChild;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            return _el$;
+        })();
+        if ("value" === section && local.copyable) content = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(CopyButton, {
+            get text () {
+                return String(local.children);
+            },
+            get children () {
+                return local.children;
+            }
+        });
+        const classes = "title" === section ? "text-sm text-base-content/60" : "value" === section ? "text-2xl font-bold text-base-content" : "desc" === section ? "text-sm text-base-content/50" : "actions" === section ? "flex items-center gap-2" : "";
+        return (()=>{
+            var _el$3 = StatCardSection_tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+                get ["class"] () {
+                    return twMerge(classes, local.class);
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, content);
+            return _el$3;
+        })();
+    };
+const stat_card_StatCardSection = StatCardSection;
+const StatCard = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "dataTheme",
+        "style"
+    ]);
+    const normalizedStyle = "object" == typeof local.style || void 0 === local.style ? local.style : void 0;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(card_Card, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+        style: normalizedStyle,
+        get ["class"] () {
+            return twMerge("border border-base-300 bg-base-100 rounded-lg p-6", local.class);
+        },
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(flex_Flex, {
+                align: "center",
+                gap: "md",
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    }));
+};
+const StatCardFigure = stat_card_StatCardSection("figure");
+const StatCardTitle = stat_card_StatCardSection("title");
+const StatCardValue = stat_card_StatCardSection("value");
+const StatCardDesc = stat_card_StatCardSection("desc");
+const StatCardActions = stat_card_StatCardSection("actions");
+const stat_card_StatCard = Object.assign(StatCard, {
+    Figure: StatCardFigure,
+    Title: StatCardTitle,
+    Value: StatCardValue,
+    Desc: StatCardDesc,
+    Actions: StatCardActions
+});
 var StatSection_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const StatSection_StatSection = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -11135,4 +11253,4 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = 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, Calendar, 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, 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, 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_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_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_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, useDesktop, useFormValidation };
+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, Calendar, 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, 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, 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_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_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_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, useDesktop, useFormValidation };

package/package.json

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