@class101/cdn-ui-system 0.0.8 → 0.0.12

package/hooks/useResponsiveValue/useResponsiveValue.js

@@ -1,34 +1,39 @@
 import {
   useTheme
-} from "../../chunk-UAWCTQGC.js";
-import "../../chunk-QN5Q5NTF.js";
+} from "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/hooks/useResponsiveValue/useResponsiveValue.ts
 init_react_shim();
-import {useCallback, useEffect, useState} from "react";
-function useResponsiveValue(responsiveValue) {
+import { useCallback, useEffect, useState } from "react";
+function useResponsiveValue(responsiveValue, watch = true) {
   const arrayValue = Array.isArray(responsiveValue) ? responsiveValue : [responsiveValue];
   const [value, setValue] = useState(arrayValue[0]);
-  const {breakpoints} = useTheme();
+  const { breakpoints } = useTheme();
   const setResponsiveValue = useCallback(() => {
     if (typeof window === "undefined") {
       return;
     }
     const windowWidth = window.innerWidth;
-    const breakpointIndex = breakpoints.findIndex((breakpoint) => parseInt(breakpoint, 10) > windowWidth);
+    const breakpointIndex = [...breakpoints, `${windowWidth + 1}px`].findIndex((breakpoint) => parseInt(breakpoint, 10) > windowWidth);
     const currentValue = arrayValue[Math.min(breakpointIndex < 0 ? breakpoints.length - 1 : breakpointIndex, arrayValue.length - 1)];
     setValue(currentValue);
   }, [...breakpoints, ...arrayValue]);
   useEffect(() => {
     setResponsiveValue();
+    if (!watch) {
+      return;
+    }
     window.addEventListener("resize", setResponsiveValue);
     return () => {
       window.removeEventListener("resize", setResponsiveValue);
     };
-  }, [setResponsiveValue]);
+  }, [setResponsiveValue, watch]);
   return value;
 }
 export {

package/hooks/useWindowResizeEvent/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/hooks/useWindowResizeEvent/index.ts
+init_react_shim();
+import { useWindowResizeEvent } from "./useWindowResizeEvent.js";
+export {
+  useWindowResizeEvent
+};

package/hooks/useWindowResizeEvent/useWindowResizeEvent.js

@@ -0,0 +1,27 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/hooks/useWindowResizeEvent/useWindowResizeEvent.ts
+init_react_shim();
+import { useEffect } from "react";
+var WINDOW_RESIZE_DEBOUNCE_WAIT = 300;
+function useWindowResizeEvent(eventListener) {
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    let debounceTimerId;
+    const handleResize = () => {
+      window.clearTimeout(debounceTimerId);
+      debounceTimerId = window.setTimeout(eventListener, WINDOW_RESIZE_DEBOUNCE_WAIT);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [eventListener]);
+}
+export {
+  useWindowResizeEvent
+};

package/index.js

@@ -1,101 +1,130 @@
 import {
-  init_react_shim
-} from "./chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/index.ts
-init_react_shim();
-import {UiSystemProvider} from "./contexts/UiSystemProvider.js";
-import {defaultTheme, signatureTheme} from "./core/index.js";
-import {useResponsiveValue} from "./hooks/useResponsiveValue/index.js";
-import {Accordion} from "./lib/Accordion/index.js";
-import {Action} from "./lib/Action/index.js";
-import {Alert} from "./lib/Alert/index.js";
-import {FadeAnimation} from "./lib/Animation/FadeAnimation/index.js";
-import {SlideAnimation} from "./lib/Animation/SlideAnimation/index.js";
-import {Transition} from "./lib/Animation/Transition/index.js";
-import {Avatar} from "./lib/Avatar/index.js";
-import {Backdrop} from "./lib/Backdrop/index.js";
-import {Background} from "./lib/Background/index.js";
-import {BreadCrumb} from "./lib/BreadCrumb/index.js";
-import {ButtonIcon} from "./lib/Button/ButtonIcon/index.js";
-import {ContainedButton} from "./lib/Button/ContainedButton/index.js";
-import {TextButton} from "./lib/Button/TextButton/index.js";
-import {ConditionalWrapper} from "./lib/ConditionalWrapper/index.js";
-import {Slide} from "./lib/deprecated/Slide/index.js";
-import {Swiper} from "./lib/deprecated/Swiper/index.js";
-import {Divider} from "./lib/Divider/index.js";
-import {Elevation} from "./lib/Elevation/index.js";
-import {CheckBoxField} from "./lib/Form/CheckBoxField/index.js";
-import {Description} from "./lib/Form/Description/index.js";
-import {HiddenInput} from "./lib/Form/HiddenInput/index.js";
-import {Input} from "./lib/Form/Input/index.js";
-import {Label} from "./lib/Form/Label/index.js";
-import {Range} from "./lib/Form/Range/index.js";
-import {Select} from "./lib/Form/Select/index.js";
-import {SelectField} from "./lib/Form/SelectField/index.js";
-import {TextArea} from "./lib/Form/TextArea/index.js";
-import {TextField} from "./lib/Form/TextField/index.js";
-import {TextLabel} from "./lib/Form/TextLabel/index.js";
-import {Frame} from "./lib/Frame/index.js";
-import {GlobalStyle} from "./lib/GlobalStyle/index.js";
-import {GridList} from "./lib/GridList/index.js";
-import {Highlight} from "./lib/Highlight/index.js";
-import {HtmlContentStyle} from "./lib/HtmlContentStyle/index.js";
-import {Icon} from "./lib/Icon/index.js";
-import {Center} from "./lib/Layout/Center/index.js";
-import {HStack} from "./lib/Layout/HStack/index.js";
-import {Position} from "./lib/Layout/Position/index.js";
-import {ResponsiveStack} from "./lib/Layout/ResponsiveStack/index.js";
-import {VStack} from "./lib/Layout/VStack/index.js";
-import {ZStack} from "./lib/Layout/ZStack/index.js";
-import {Link} from "./lib/Link/index.js";
-import {Image} from "./lib/Media/Image/index.js";
-import {SeekBar} from "./lib/Media/SeekBar/index.js";
-import {Video} from "./lib/Media/Video/index.js";
-import {VideoCaption} from "./lib/Media/VideoCaption/index.js";
-import {VideoOverlay} from "./lib/Media/VideoOverlay/index.js";
-import {VolumeBar} from "./lib/Media/VolumeBar/index.js";
-import {Menu} from "./lib/Menu/Menu/index.js";
-import {MenuIcon} from "./lib/Menu/MenuIcon/index.js";
-import {MenuItem} from "./lib/Menu/MenuItem/index.js";
-import {MenuText} from "./lib/Menu/MenuText/index.js";
-import {MenuTextButton} from "./lib/Menu/MenuTextButton/index.js";
-import {MenuTextButtonItem} from "./lib/Menu/MenuTextButtonItem/index.js";
-import {MenuTextItem} from "./lib/Menu/MenuTextItem/index.js";
-import {ModalBottomSheet, useModalBottomSheet} from "./lib/ModalBottomSheet/index.js";
-import {NewLine} from "./lib/NewLine/index.js";
-import {Opacity} from "./lib/Opacity/index.js";
-import {Overlay} from "./lib/Overlay/index.js";
-import {Pagination} from "./lib/Pagination/index.js";
-import {Portal} from "./lib/Portal/index.js";
-import {Profile} from "./lib/Profile/index.js";
-import {ProfileLabel} from "./lib/ProfileLabel/index.js";
-import {ProgressBar} from "./lib/Progress/ProgressBar/index.js";
-import {ProgressStep} from "./lib/Progress/ProgressStep/index.js";
-import {Rank} from "./lib/Rank/index.js";
-import {Ratio} from "./lib/Ratio/index.js";
-import {Section} from "./lib/Section/index.js";
-import {SectionHeader} from "./lib/SectionHeader/index.js";
-import {Skeleton} from "./lib/Skeleton/index.js";
-import {SlideList} from "./lib/SlideList/index.js";
-import {Slider, useSlider} from "./lib/Slider/index.js";
-import {SliderSection} from "./lib/SliderSection/index.js";
-import {Spinner} from "./lib/Spinner/index.js";
-import {ScrollTabPanel} from "./lib/Tab/ScrollTabPanel/index.js";
-import {ScrollTabs} from "./lib/Tab/ScrollTabs/index.js";
-import {ViewPagerTabPanel} from "./lib/Tab/ViewPagerTabPanel/index.js";
-import {ViewPagerTabs} from "./lib/Tab/ViewPagerTabs/index.js";
-import {Chip} from "./lib/Tag/Chip/index.js";
-import {IconBadge} from "./lib/Tag/IconBadge/index.js";
-import {StateTag} from "./lib/Tag/StateTag/index.js";
-import {Tag} from "./lib/Tag/Tag/index.js";
-import {Body} from "./lib/Typography/Body/index.js";
-import {Caption} from "./lib/Typography/Caption/index.js";
-import {Paragraph} from "./lib/Typography/Paragraph/index.js";
-import {Title} from "./lib/Typography/Title/index.js";
-import {Underline} from "./lib/Underline/index.js";
-import {ViewPager} from "./lib/ViewPager/index.js";
-import {ViewPagerItem} from "./lib/ViewPagerItem/index.js";
+  Accordion,
+  Action,
+  Alert,
+  Avatar,
+  Backdrop,
+  Background,
+  BackgroundImage,
+  Body,
+  BreadCrumb,
+  BulletPagination,
+  Callout,
+  CardNumberField,
+  Center,
+  CheckBoxField,
+  Chip,
+  ConditionalWrapper,
+  ContainedButton,
+  ContentArea,
+  Description,
+  Divider,
+  Dot,
+  Drawer,
+  Elevation,
+  FadeAnimation,
+  FilterChip,
+  GhostButton,
+  GlobalStyle,
+  GridList,
+  HStack,
+  HiddenInput,
+  Highlight,
+  HtmlContentStyle,
+  Icon,
+  IconBadge,
+  Image,
+  ImageThumbnail,
+  Input,
+  InputChip,
+  Label,
+  LinearGradient,
+  Link,
+  Linkify,
+  List,
+  Menu,
+  MenuIcon,
+  MenuItem,
+  MenuText,
+  MenuTextButton,
+  MenuTextButtonItem,
+  MenuTextItem,
+  ModalBottomSheet,
+  NewLine,
+  Opacity,
+  Overlay,
+  Pagination,
+  Paper,
+  Paragraph,
+  PopoverBottomSheet,
+  Portal,
+  Position,
+  Profile,
+  ProfileLabel,
+  ProgressBar,
+  ProgressStep,
+  Radio,
+  RadioField,
+  RadioGroupField,
+  Range,
+  Rank,
+  Ratio,
+  ResponsiveStack,
+  SafeAreaContent,
+  Scroll,
+  ScrollTabPanel,
+  ScrollTabs,
+  ScrollTarget,
+  SearchInput,
+  Section,
+  SectionHeader,
+  SeekBar,
+  Select,
+  SelectField,
+  Skeleton,
+  Slide,
+  SlideAnimation,
+  SlideList,
+  Slider,
+  SliderSection,
+  Space,
+  Spinner,
+  StateTag,
+  Svg,
+  Swiper,
+  Tab,
+  Table,
+  Tag,
+  TextArea,
+  TextAreaField,
+  TextButton,
+  TextField,
+  TextInput,
+  TextLabel,
+  Title,
+  Tooltip,
+  Transition,
+  UiSystemProvider,
+  Underline,
+  VStack,
+  Video,
+  VideoCaption,
+  VideoOverlay,
+  ViewPager,
+  ViewPagerItem,
+  ViewPagerTabPanel,
+  ViewPagerTabs,
+  VirtualizedList,
+  VolumeBar,
+  ZStack,
+  defaultTheme,
+  signatureTheme,
+  useIsMobile,
+  useModalBottomSheet,
+  useResponsiveValue,
+  useSliderState
+} from "./chunk-SU3NURQK.js";
+import "./chunk-VIIHQGZ3.js";
 export {
   Accordion,
   Action,
@@ -103,20 +132,26 @@ export {
   Avatar,
   Backdrop,
   Background,
+  BackgroundImage,
   Body,
   BreadCrumb,
-  ButtonIcon,
-  Caption,
+  BulletPagination,
+  Callout,
+  CardNumberField,
   Center,
   CheckBoxField,
   Chip,
   ConditionalWrapper,
   ContainedButton,
+  ContentArea,
   Description,
   Divider,
+  Dot,
+  Drawer,
   Elevation,
   FadeAnimation,
-  Frame,
+  FilterChip,
+  GhostButton,
   GlobalStyle,
   GridList,
   HStack,
@@ -126,9 +161,14 @@ export {
   Icon,
   IconBadge,
   Image,
+  ImageThumbnail,
   Input,
+  InputChip,
   Label,
+  LinearGradient,
   Link,
+  Linkify,
+  List,
   Menu,
   MenuIcon,
   MenuItem,
@@ -141,19 +181,28 @@ export {
   Opacity,
   Overlay,
   Pagination,
+  Paper,
   Paragraph,
+  PopoverBottomSheet,
   Portal,
   Position,
   Profile,
   ProfileLabel,
   ProgressBar,
   ProgressStep,
+  Radio,
+  RadioField,
+  RadioGroupField,
   Range,
   Rank,
   Ratio,
   ResponsiveStack,
+  SafeAreaContent,
+  Scroll,
   ScrollTabPanel,
   ScrollTabs,
+  ScrollTarget,
+  SearchInput,
   Section,
   SectionHeader,
   SeekBar,
@@ -165,15 +214,22 @@ export {
   SlideList,
   Slider,
   SliderSection,
+  Space,
   Spinner,
   StateTag,
+  Svg,
   Swiper,
+  Tab,
+  Table,
   Tag,
   TextArea,
+  TextAreaField,
   TextButton,
   TextField,
+  TextInput,
   TextLabel,
   Title,
+  Tooltip,
   Transition,
   UiSystemProvider,
   Underline,
@@ -185,11 +241,13 @@ export {
   ViewPagerItem,
   ViewPagerTabPanel,
   ViewPagerTabs,
+  VirtualizedList,
   VolumeBar,
   ZStack,
   defaultTheme,
   signatureTheme,
+  useIsMobile,
   useModalBottomSheet,
   useResponsiveValue,
-  useSlider
+  useSliderState
 };

package/lib/Accordion/Accordion.js

@@ -1,36 +1,43 @@
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Accordion/Accordion.tsx
 init_react_shim();
-import {useCallback, useState} from "react";
-import {Action} from "../Action/index.js";
-import {Icon} from "../Icon/index.js";
-import {HStack} from "../Layout/HStack/index.js";
-import {VStack} from "../Layout/VStack/index.js";
-import {Body} from "../Typography/Body/index.js";
-var Accordion = ({title, content, defaultOpened, ...props}) => {
+import { useCallback, useState } from "react";
+import { Box } from "../../private/Box/index.js";
+import { Action } from "../Action/index.js";
+import { Icon } from "../Icon/index.js";
+import { HStack } from "../Layout/HStack/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+import { Body } from "../Typography/Body/index.js";
+var Accordion = (_a) => {
+  var _b = _a, { title, content, defaultOpened } = _b, props = __objRest(_b, ["title", "content", "defaultOpened"]);
   const [isOpened, setIsOpened] = useState(defaultOpened);
   const handleClick = useCallback(() => setIsOpened((prev) => !prev), []);
-  return /* @__PURE__ */ React.createElement(VStack, {
-    ...props
+  return /* @__PURE__ */ React.createElement(VStack, __spreadValues({}, props), /* @__PURE__ */ React.createElement(Action, {
+    onClick: handleClick
   }, /* @__PURE__ */ React.createElement(HStack, {
+    as: "button",
     py: [10, 10, 20],
-    spacing: "between"
+    spacing: "between",
+    alignment: "center"
   }, /* @__PURE__ */ React.createElement(Body, {
-    level: 1,
-    weight: "bold"
-  }, title), /* @__PURE__ */ React.createElement(Action, {
-    onClick: handleClick
+    level: [2, 2, 1],
+    weight: "bold",
+    textAlign: "left"
+  }, title), /* @__PURE__ */ React.createElement(Box, {
+    ml: 16
   }, isOpened ? /* @__PURE__ */ React.createElement(Icon.Fill.ChevronUp, {
     size: 16,
     fill: "gray.600"
   }) : /* @__PURE__ */ React.createElement(Icon.Fill.ChevronDown, {
     size: 16,
     fill: "gray.600"
-  }))), isOpened && (typeof content === "string" ? /* @__PURE__ */ React.createElement(VStack, {
+  })))), isOpened && (typeof content === "string" ? /* @__PURE__ */ React.createElement(VStack, {
     py: 8
   }, /* @__PURE__ */ React.createElement(Body, {
     level: 2

package/lib/Accordion/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Accordion/index.ts
 init_react_shim();
-import {Accordion} from "./Accordion.js";
+import { Accordion } from "./Accordion.js";
 export {
   Accordion
 };

package/lib/Action/Action.js

@@ -1,16 +1,19 @@
 import {
   isDefined
-} from "../../chunk-AY54FCVA.js";
+} from "../../chunk-MBYCGPJ2.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Action/Action.tsx
 init_react_shim();
-import {useMemo} from "react";
-import {ForwardStyle} from "../../private/ForwardStyle/index.js";
-var Action = ({cursor, ...restProps}) => {
+import { useMemo } from "react";
+import { ForwardStyle } from "../../private/ForwardStyle/index.js";
+var Action = (_a) => {
+  var _b = _a, { cursor } = _b, restProps = __objRest(_b, ["cursor"]);
   const cursorProp = useMemo(() => {
     if (isDefined(cursor)) {
       return cursor;
@@ -20,7 +23,7 @@ var Action = ({cursor, ...restProps}) => {
     }
     return "default";
   }, [cursor, restProps.disabled, restProps.onClick]);
-  const nextProps = {...restProps};
+  const nextProps = __spreadValues({}, restProps);
   for (const key of Object.keys(nextProps)) {
     const value = nextProps[key];
     if (key.startsWith("on") && typeof value === "string") {
@@ -39,10 +42,9 @@ var Action = ({cursor, ...restProps}) => {
       };
     }
   }
-  return /* @__PURE__ */ React.createElement(ForwardStyle, {
-    cursor: cursorProp,
-    ...nextProps
-  });
+  return /* @__PURE__ */ React.createElement(ForwardStyle, __spreadValues({
+    cursor: cursorProp
+  }, nextProps));
 };
 Action.forwardStyle = true;
 export {

package/lib/Action/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Action/index.ts
 init_react_shim();
-import {Action} from "./Action.js";
+import { Action } from "./Action.js";
 export {
   Action
 };

package/lib/Alert/Alert.js

@@ -1,16 +1,16 @@
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Alert/Alert.tsx
 init_react_shim();
-import {HStack} from "../Layout/HStack/index.js";
-import {Frame} from "../Frame/index.js";
-import {Icon} from "../Icon/index.js";
-import {Body} from "../Typography/Body/index.js";
-import {TextButton} from "../Button/TextButton/index.js";
-import {propVariant, system} from "../../core/index.js";
+import { propVariant, system } from "../../core/index.js";
+import { TextButton } from "../Button/TextButton/index.js";
+import { Icon } from "../Icon/index.js";
+import { HStack } from "../Layout/HStack/index.js";
+import { Paper } from "../Paper/index.js";
+import { Body } from "../Typography/Body/index.js";
 var Alert = system()(propVariant({
   prop: "kind",
   variants: {
@@ -35,7 +35,7 @@ var Alert = system()(propVariant({
       textColor: "black"
     }
   }
-}))(({message, closeText, onCloseClick, textColor, IconComponent, iconColor}) => /* @__PURE__ */ React.createElement(Frame, {
+}))(({ message, closeText, onCloseClick, textColor, IconComponent, iconColor }) => /* @__PURE__ */ React.createElement(Paper, {
   kind: "background",
   borderRadiusLevel: 1,
   elevationLevel: 2,
@@ -48,10 +48,12 @@ var Alert = system()(propVariant({
 }, /* @__PURE__ */ React.createElement(HStack, {
   alignment: "center",
   spacing: 6
-}, IconComponent && /* @__PURE__ */ React.createElement(IconComponent, {
+}, IconComponent && /* @__PURE__ */ React.createElement(HStack, {
+  flex: "none"
+}, /* @__PURE__ */ React.createElement(IconComponent, {
   size: 14,
   fill: iconColor
-}), /* @__PURE__ */ React.createElement(Body, {
+})), /* @__PURE__ */ React.createElement(Body, {
   level: 2,
   color: textColor
 }, message)), closeText && /* @__PURE__ */ React.createElement(TextButton, {

package/lib/Alert/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Alert/index.ts
 init_react_shim();
-import {Alert} from "./Alert.js";
+import { Alert } from "./Alert.js";
 export {
   Alert
 };