@class101/cdn-ui-system 0.0.7 → 0.0.11

package/lib/Tab/ScrollTabs/ScrollTabs.js

@@ -1,55 +1,68 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ScrollTabs/ScrollTabs.tsx
-import {Children, isValidElement, useCallback, useMemo, useState} from "react";
-import {Background} from "../../Background/index.js";
-import {HStack} from "../../Layout/HStack/index.js";
-import {Position} from "../../Layout/Position/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Link} from "../../Link/index.js";
-import {ScrollTabPanelWithObserver} from "../ScrollTabPanelWithObserver/index.js";
-import {Tab} from "../Tab/index.js";
-var ScrollTabs = ({
-  children,
-  TabsWrapperComponent = (props) => /* @__PURE__ */ React.createElement(Background, {
-    color: "white"
-  }, /* @__PURE__ */ React.createElement(VStack, null, props.children)),
-  size,
-  spacing = 30
-}) => {
-  const tabs = useMemo(() => Children.map(children, (child) => {
-    if (!isValidElement(child) || !child.props.id || !child.props.title) {
-      return void 0;
-    }
-    const {id, title, caption} = child.props;
-    return {id, title, caption};
-  })?.filter((content) => content !== void 0) ?? [], [children]);
+init_react_shim();
+import { Children, isValidElement, useCallback, useMemo, useState } from "react";
+import { propsVariant, system } from "../../../core/index.js";
+import { HStack } from "../../Layout/HStack/index.js";
+import { Position } from "../../Layout/Position/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
+import { Link } from "../../Link/index.js";
+import { Paper } from "../../Paper/index.js";
+import { ScrollTabPanelWithObserver } from "../ScrollTabPanelWithObserver/index.js";
+import { Tab } from "../Tab/index.js";
+var ScrollTabs = system()(propsVariant({
+  props: [{ name: "offsetX", responsive: true, skipForward: true }],
+  variants: ({ offsetX }) => ({
+    offsetPaddingX: offsetX,
+    offsetMarginX: offsetX == null ? void 0 : offsetX.map((value) => value * -1)
+  })
+}))(({ top = 0, children, onMoveTab, size, spacing = 30, offsetPaddingX, offsetMarginX }) => {
+  const tabs = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = Children.map(children, (child) => {
+      if (!isValidElement(child) || !child.props.id || !child.props.title) {
+        return void 0;
+      }
+      const { id, title, caption } = child.props;
+      return { id, title, caption };
+    })) == null ? void 0 : _a.filter((content) => content !== void 0)) != null ? _b : [];
+  }, [children]);
   const [tabStates, setTabStates] = useState(new Array(tabs.length).fill(false));
   const activeTab = useMemo(() => tabStates.findIndex((state) => state === true), [tabStates]);
   const handleStateChange = useCallback((index, isActive) => {
     setTabStates((value) => [...value.slice(0, index), isActive, ...value.slice(index + 1)]);
   }, []);
   const renderChildren = useMemo(() => Children.toArray(children).filter((child) => isValidElement(child)), [children]);
+  const handleTabClick = (title) => () => onMoveTab == null ? void 0 : onMoveTab(title);
   return /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(Position, {
     position: "sticky",
-    top: 0,
+    top,
     zIndex: 1
   }, /* @__PURE__ */ React.createElement(VStack, {
     as: "nav"
-  }, /* @__PURE__ */ React.createElement(TabsWrapperComponent, null, /* @__PURE__ */ React.createElement(HStack, {
+  }, /* @__PURE__ */ React.createElement(Paper, {
+    kind: "background",
+    backgroundColor: "white"
+  }, /* @__PURE__ */ React.createElement(HStack, {
     as: "ul",
-    spacing: [20, 30],
+    spacing: 28,
     verticalAlign: "bottom",
     pt: 10,
+    px: offsetPaddingX,
+    mx: offsetMarginX,
     overflow: "auto",
     hideScroll: true
-  }, tabs?.map(({title, caption, id}, index) => /* @__PURE__ */ React.createElement(VStack, {
+  }, tabs == null ? void 0 : tabs.map(({ title, caption, id }, index) => /* @__PURE__ */ React.createElement(VStack, {
     as: "li",
     key: id,
     flex: "0 0 auto"
   }, /* @__PURE__ */ React.createElement(Link, {
-    to: `#${id}`
+    to: `#${id}`,
+    onClick: handleTabClick(title)
   }, /* @__PURE__ */ React.createElement(Tab, {
     title,
     caption,
@@ -63,7 +76,7 @@ var ScrollTabs = ({
     index,
     onStateChange: handleStateChange
   }, child))));
-};
+});
 export {
   ScrollTabs
 };

package/lib/Tab/ScrollTabs/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ScrollTabs/index.ts
-import {ScrollTabs} from "./ScrollTabs.js";
+init_react_shim();
+import { ScrollTabs } from "./ScrollTabs.js";
 export {
   ScrollTabs
 };

package/lib/Tab/Tab/Tab.js

@@ -1,75 +1,63 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/Tab/Tab.tsx
-import {useCallback} from "react";
-import {Title} from "../../Typography/Title/index.js";
-import {Underline} from "../../Underline/index.js";
-import {Caption} from "../../Typography/Caption/index.js";
-import {Background} from "../../Background/index.js";
-import {Box} from "../../../private/Box/index.js";
-import {Body} from "../../Typography/Body/index.js";
-import {HStack} from "../../Layout/HStack/index.js";
-import {Action} from "../../Action/index.js";
-import {propVariant, system} from "../../../core/index.js";
+init_react_shim();
+import { useCallback } from "react";
+import { propVariant, system } from "../../../core/index.js";
+import { Box } from "../../../private/Box/index.js";
+import { Action } from "../../Action/index.js";
+import { HStack } from "../../Layout/HStack/index.js";
+import { Body } from "../../Typography/Body/index.js";
+import { Title } from "../../Typography/Title/index.js";
+import { Underline } from "../../Underline/index.js";
 var Tab = system()(propVariant({
   prop: "size",
   variants: {
     md: {
-      TabTitleComponent: (props) => /* @__PURE__ */ React.createElement(Body, {
-        ...props,
-        level: 1,
-        weight: "bold"
-      }),
-      TabCaptionComponent: (props) => /* @__PURE__ */ React.createElement(Caption, {
-        ...props,
-        level: 2
-      }),
-      tabPadding: 10
+      titleLevel: 6,
+      captionLevel: 5,
+      tabPadding: 0
     },
     lg: {
-      TabTitleComponent: (props) => /* @__PURE__ */ React.createElement(Title, {
-        ...props,
-        level: 5,
-        weight: "bold"
-      }),
-      TabCaptionComponent: (props) => /* @__PURE__ */ React.createElement(Body, {
-        ...props,
-        level: 3
-      }),
+      titleLevel: 5,
+      captionLevel: 3,
       tabPadding: 14
     }
-  }
+  },
+  responsive: true
 }), propVariant({
   prop: "accent",
   variants: {
-    true: {color: "pinkRed.600"},
-    false: {color: "black"}
+    true: { color: "pinkRed.600" },
+    false: { color: "gray.1000" }
   },
   defaultValue: false
 }), propVariant({
   prop: "active",
   variants: {
     true: {
-      WrapperComponent: (props) => /* @__PURE__ */ React.createElement(Underline, {
-        ...props,
+      WrapperComponent: (props) => /* @__PURE__ */ React.createElement(Underline, __spreadProps(__spreadValues({}, props), {
         alwaysOn: true
-      })
+      }))
     },
-    false: {WrapperComponent: ({children}) => /* @__PURE__ */ React.createElement(React.Fragment, null, children)}
+    false: { WrapperComponent: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children) }
   }
 }), propVariant({
   prop: "update",
   variants: {
     true: {
-      UpdateComponent: /* @__PURE__ */ React.createElement(Background, {
-        color: "pinkRed.500",
-        borderRadius: "50%"
-      }, /* @__PURE__ */ React.createElement(Box, {
+      UpdateComponent: /* @__PURE__ */ React.createElement(Box, {
         width: 4,
         height: 4,
-        overflow: "hidden"
-      }))
+        overflow: "hidden",
+        backgroundColor: "pinkRed.500",
+        borderRadius: "50%"
+      })
     },
     false: null
   },
@@ -79,8 +67,8 @@ var Tab = system()(propVariant({
   WrapperComponent,
   caption,
   color,
-  TabTitleComponent,
-  TabCaptionComponent,
+  titleLevel,
+  captionLevel,
   tabPadding,
   UpdateComponent,
   id,
@@ -88,7 +76,7 @@ var Tab = system()(propVariant({
 }) => {
   const handleActionClick = useCallback(() => {
     if (id) {
-      onChange?.(id);
+      onChange == null ? void 0 : onChange(id);
     }
   }, [id, onChange]);
   return /* @__PURE__ */ React.createElement(WrapperComponent, {
@@ -102,9 +90,12 @@ var Tab = system()(propVariant({
   }, /* @__PURE__ */ React.createElement(HStack, {
     alignment: "top",
     spacing: 4
-  }, /* @__PURE__ */ React.createElement(TabTitleComponent, {
-    color
-  }, title), UpdateComponent), caption && /* @__PURE__ */ React.createElement(TabCaptionComponent, {
+  }, /* @__PURE__ */ React.createElement(Title, {
+    level: titleLevel,
+    color,
+    whiteSpace: "nowrap"
+  }, title), UpdateComponent), caption && /* @__PURE__ */ React.createElement(Body, {
+    level: captionLevel,
     color
   }, caption))));
 });

package/lib/Tab/Tab/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/Tab/index.ts
-import {Tab} from "./Tab.js";
+init_react_shim();
+import { Tab } from "./Tab.js";
 export {
   Tab
 };

package/lib/Tab/ViewPagerTabPanel/ViewPagerTabPanel.js

@@ -1,11 +1,17 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ViewPagerTabPanel/ViewPagerTabPanel.tsx
-import {ViewPagerItem} from "../../ViewPagerItem/index.js";
-var ViewPagerTabPanel = ({children, ...restProps}) => /* @__PURE__ */ React.createElement(ViewPagerItem, {
-  ...restProps
-}, children);
+init_react_shim();
+import { ViewPagerItem } from "../../ViewPagerItem/index.js";
+var ViewPagerTabPanel = (_a) => {
+  var _b = _a, { children } = _b, restProps = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(ViewPagerItem, __spreadValues({}, restProps), children);
+};
 export {
   ViewPagerTabPanel
 };

package/lib/Tab/ViewPagerTabPanel/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ViewPagerTabPanel/index.ts
-import {ViewPagerTabPanel} from "./ViewPagerTabPanel.js";
+init_react_shim();
+import { ViewPagerTabPanel } from "./ViewPagerTabPanel.js";
 export {
   ViewPagerTabPanel
 };

package/lib/Tab/ViewPagerTabs/ViewPagerTabs.js

@@ -1,39 +1,67 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ViewPagerTabs/ViewPagerTabs.tsx
-import {isValidElement, useCallback, useState} from "react";
-import {HStack} from "../../Layout/HStack/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {ViewPager} from "../../ViewPager/index.js";
-import {Tab} from "../Tab/index.js";
-var ViewPagerTabs = ({children, value, onChange, size}) => {
-  const [currentTabId, setCurrentTabId] = useState(value ?? children[0].props.pageId);
+init_react_shim();
+import { isValidElement, useCallback, useEffect, useState } from "react";
+import { propsVariant, system } from "../../../core/index.js";
+import { useResponsiveValue } from "../../../hooks/useResponsiveValue/index.js";
+import { Box } from "../../../private/Box/index.js";
+import { HStack } from "../../Layout/HStack/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
+import { Space } from "../../Space/index.js";
+import { ViewPager } from "../../ViewPager/index.js";
+import { Tab } from "../Tab/index.js";
+var ViewPagerTabs = system()(propsVariant({
+  props: [{ name: "offsetX", responsive: true, skipForward: true }],
+  variants: ({ offsetX }) => ({
+    offsetPaddingX: offsetX,
+    offsetMarginX: offsetX == null ? void 0 : offsetX.map((value) => value * -1)
+  })
+}))(({ children, onMoveTab, initialPageId, onChange, size, offsetPaddingX, offsetMarginX }) => {
+  const currentInitialPageId = useResponsiveValue(initialPageId, false);
+  const [currentPageId, setCurrentPageId] = useState(currentInitialPageId != null ? currentInitialPageId : children[0].props.pageId);
+  useEffect(() => {
+    setCurrentPageId(currentInitialPageId);
+  }, [currentInitialPageId]);
   const handleViewPagerChange = useCallback((id) => {
-    setCurrentTabId(id);
-    onChange?.(id);
+    setCurrentPageId(id);
+    onChange == null ? void 0 : onChange(id);
   }, [onChange]);
+  const handleTabChange = useCallback((id) => {
+    setCurrentPageId(id);
+    onChange == null ? void 0 : onChange(id);
+    onMoveTab == null ? void 0 : onMoveTab(id);
+  }, [onChange, onMoveTab]);
   return /* @__PURE__ */ React.createElement(VStack, {
     spacing: 30
   }, /* @__PURE__ */ React.createElement(HStack, {
     as: "ul",
-    spacing: [30, 24]
-  }, children.filter((child) => isValidElement(child)).map(({props: {pageId, display, title, caption}}) => /* @__PURE__ */ React.createElement(VStack, {
-    as: "li",
+    px: offsetPaddingX,
+    mx: offsetMarginX,
+    overflow: "auto",
+    hideScroll: true
+  }, children.filter((child) => isValidElement(child)).map(({ props: { pageId, display, title, caption } }, index) => /* @__PURE__ */ React.createElement(Box, {
     key: pageId,
-    display
+    as: "li",
+    display,
+    flex: "none"
   }, /* @__PURE__ */ React.createElement(Tab, {
     id: pageId,
-    onChange: handleViewPagerChange,
+    onChange: handleTabChange,
     title,
     caption,
-    active: pageId === currentTabId,
+    active: pageId === currentPageId,
     size
+  }), index !== children.length - 1 && /* @__PURE__ */ React.createElement(Space, {
+    width: 28
   })))), /* @__PURE__ */ React.createElement(ViewPager, {
-    pageId: currentTabId,
+    pageId: currentPageId,
     onPageIdChange: handleViewPagerChange
   }, children));
-};
+});
 export {
   ViewPagerTabs
 };

package/lib/Tab/ViewPagerTabs/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Tab/ViewPagerTabs/index.ts
-import {ViewPagerTabs} from "./ViewPagerTabs.js";
+init_react_shim();
+import { ViewPagerTabs } from "./ViewPagerTabs.js";
 export {
   ViewPagerTabs
 };