@class101/cdn-ui-system 0.0.9 → 0.0.13

package/lib/Layout/VStack/VStack.js

@@ -1,17 +1,23 @@
 import {
   React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Layout/VStack/VStack.tsx
 init_react_shim();
-import {forwardRef} from "react";
-import {Stack} from "../../../private/Stack/Stack.js";
-var VStack = forwardRef(({children, ...props}, ref) => /* @__PURE__ */ React.createElement(Stack, {
-  ref,
-  ...props,
-  direction: "vertical"
-}, children));
+import { forwardRef } from "react";
+import { Stack } from "../../../private/Stack/index.js";
+var VStack = forwardRef((_a, ref) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    direction: "vertical"
+  }), children);
+});
 VStack.forwardStyle = true;
 export {
   VStack

package/lib/Layout/VStack/index.js

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

package/lib/Layout/ZStack/ZStack.js

@@ -1,13 +1,16 @@
 import {
   React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Layout/ZStack/ZStack.tsx
 init_react_shim();
-import {Children, isValidElement} from "react";
-import {Box} from "../../../private/Box/index.js";
-import {ForwardStyle} from "../../../private/ForwardStyle/index.js";
+import { Children, isValidElement } from "react";
+import { Box } from "../../../private/Box/index.js";
+import { ForwardStyle } from "../../../private/ForwardStyle/index.js";
 var JUSTIFY_CONTENT_MAP = {
   top: "flex-start",
   bottom: "flex-end",
@@ -18,26 +21,33 @@ var ALIGN_ITEMS_MAP = {
   trailing: "flex-end",
   center: "center"
 };
-var ZStack = ({
-  children,
-  verticalAlignment = "top",
-  horizontalAlignment = "leading",
-  ...props
-}) => /* @__PURE__ */ React.createElement(Box, {
-  ...props,
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: ALIGN_ITEMS_MAP[horizontalAlignment],
-  justifyContent: JUSTIFY_CONTENT_MAP[verticalAlignment]
-}, Children.map(children, (child, index) => {
-  if (!isValidElement(child) || index === 0) {
-    return child;
-  }
-  return /* @__PURE__ */ React.createElement(ForwardStyle, {
-    position: "absolute"
-  }, child);
-}));
+var ZStack = (_a) => {
+  var _b = _a, {
+    children,
+    verticalAlignment = "top",
+    horizontalAlignment = "leading"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "verticalAlignment",
+    "horizontalAlignment"
+  ]);
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGN_ITEMS_MAP[horizontalAlignment],
+    justifyContent: JUSTIFY_CONTENT_MAP[verticalAlignment]
+  }), Children.map(children, (child, index) => {
+    if (!isValidElement(child) || index === 0) {
+      return child;
+    }
+    return /* @__PURE__ */ React.createElement(ForwardStyle, {
+      position: "absolute",
+      zIndex: 1
+    }, child);
+  }));
+};
+ZStack.forwardStyle = true;
 export {
   ZStack
 };

package/lib/Layout/ZStack/index.js

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

package/lib/LinearGradient/LinearGradient.js

@@ -0,0 +1,52 @@
+import {
+  themeGet
+} from "../../chunk-SFWBAQL4.js";
+import "../../chunk-RYCV4KQR.js";
+import "../../chunk-R4HM35UZ.js";
+import {
+  useTheme
+} from "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/LinearGradient/LinearGradient.tsx
+init_react_shim();
+import { propVariant, system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
+var LinearGradient = system()(propVariant({
+  prop: "horizontal",
+  variants: {
+    true: {
+      radian: "0deg"
+    },
+    false: {
+      radian: "90deg"
+    }
+  },
+  defaultValue: false
+}))((_a) => {
+  var _b = _a, { colors, locations, radian, children } = _b, props = __objRest(_b, ["colors", "locations", "radian", "children"]);
+  const theme = useTheme();
+  if (locations && colors.length !== locations.length) {
+    throw new Error("locations length should be colors length.");
+  }
+  const themeColors = colors.map((color) => themeGet(`colors.${color}`)({ theme }));
+  const gradientOption = `linear-gradient(${radian}, ${themeColors.map((color, index) => {
+    var _a2;
+    return `${color} ${(_a2 = locations == null ? void 0 : locations[index]) != null ? _a2 : 100 / Math.min(themeColors.length - 1, 1) * index}%`;
+  }).join(", ")})`;
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    background: gradientOption
+  }, props), children);
+});
+LinearGradient.forwardStyle = true;
+export {
+  LinearGradient
+};

package/lib/LinearGradient/index.js

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

package/lib/Link/Link.js

@@ -1,36 +1,32 @@
 import {
   isExternalUrl
-} from "../../chunk-BT7THJEN.js";
+} from "../../chunk-LN36XQS3.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-FU5YH2ZU.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Link/Link.tsx
 init_react_shim();
-import {useLinkContext} from "../../contexts/LinkContext/index.js";
+import { useLinkContext } from "../../contexts/LinkContext/index.js";
 var Link = (props) => {
-  const {LinkComponent} = useLinkContext();
-  const {to, children, innerRef, ...restProps} = props;
-  const url = to ?? "";
+  const { LinkComponent } = useLinkContext();
+  const _a = props, { to, children, innerRef } = _a, restProps = __objRest(_a, ["to", "children", "innerRef"]);
+  const url = to != null ? to : "";
   const shouldOpenInNewTab = isExternalUrl(url);
-  const externalProps = {
-    ...shouldOpenInNewTab && {target: "_blank", rel: "noreferrer"}
-  };
+  const externalProps = __spreadValues({}, shouldOpenInNewTab && { target: "_blank", rel: "noreferrer" });
   if (LinkComponent) {
-    return /* @__PURE__ */ React.createElement(LinkComponent, {
+    return /* @__PURE__ */ React.createElement(LinkComponent, __spreadValues(__spreadValues({
       ref: innerRef,
-      href: url,
-      ...externalProps,
-      ...restProps
-    }, children);
+      href: url
+    }, externalProps), restProps), children);
   }
-  return /* @__PURE__ */ React.createElement("a", {
+  return /* @__PURE__ */ React.createElement("a", __spreadValues(__spreadValues({
     ref: innerRef,
-    href: url,
-    ...externalProps,
-    ...restProps
-  }, children);
+    href: url
+  }, externalProps), restProps), children);
 };
 Link.forwardStyle = true;
 export {

package/lib/Link/index.js

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

package/lib/Linkify/Linkify.js

@@ -0,0 +1,74 @@
+import {
+  convertToSecureUrl
+} from "../../chunk-WVIP3U54.js";
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Linkify/Linkify.tsx
+init_react_shim();
+
+// node_modules/react-linkify-it/dist/react-linkify-it.esm.js
+init_react_shim();
+import React2, { Fragment, isValidElement, cloneElement } from "react";
+var key = 0;
+var getKey = () => ++key;
+var ctrlCharactersRegex = /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
+function linkIt(text, linkComponent, linkRegex) {
+  const elements = [];
+  let rest = text;
+  while (true) {
+    const match = linkRegex.exec(rest);
+    if (!match || match[0] === void 0)
+      break;
+    const urlStartIndex = match.index;
+    const urlEndIndex = match.index + match[0].length;
+    const textBeforeMatch = rest.slice(0, urlStartIndex);
+    const url = rest.slice(urlStartIndex, urlEndIndex).replace(ctrlCharactersRegex, "");
+    rest = rest.slice(urlEndIndex);
+    textBeforeMatch && elements.push(textBeforeMatch);
+    elements.push(linkComponent(url, getKey()));
+  }
+  rest && elements.push(React2.createElement(Fragment, {
+    key: getKey()
+  }, rest));
+  if (elements.length === 0) {
+    return text;
+  }
+  return elements;
+}
+function findText(children, component, regex) {
+  if (typeof children === "string") {
+    return linkIt(children, component, regex);
+  }
+  if (Array.isArray(children)) {
+    return children.map((c) => findText(c, component, regex));
+  }
+  if (isValidElement(children) && children.props.children && children.type !== "a" && children.type !== "button") {
+    return cloneElement(children, {
+      ...children.props,
+      key: getKey()
+    }, findText(children.props.children, component, regex));
+  }
+  return children;
+}
+var LinkIt = (props) => {
+  return React2.createElement(Fragment, null, findText(props.children, props.component, props.regex));
+};
+
+// libs/shared/ui-system/src/lib/Linkify/Linkify.tsx
+import { system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
+var urlRegex = /((https?):\/\/|www\.)?([-\w.]+\/[\p{L}!#$%&'"()*+,./\\:;=_?@[\]~-]*[^\s'",.;:\b)\]}?]|(([\w-]+\.)+[\w-]+[\w/-]))/u;
+var Linkify = system()()(({ children }) => /* @__PURE__ */ React.createElement(LinkIt, {
+  regex: urlRegex,
+  component: (decoratedHref) => /* @__PURE__ */ React.createElement(Box, {
+    as: "a",
+    href: convertToSecureUrl(decoratedHref),
+    color: "blue.500"
+  }, decoratedHref)
+}, children));
+export {
+  Linkify
+};

package/lib/Linkify/index.js

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

package/lib/List/List.js

@@ -0,0 +1,51 @@
+import {
+  Body,
+  VStack
+} from "../../chunk-SU3NURQK.js";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/List/List.tsx
+init_react_shim();
+import { propVariant, styleVariant, system } from "../../core/index.js";
+var List = system()(propVariant({
+  prop: "kind",
+  variants: {
+    number: {
+      as: "ol"
+    },
+    dot: {
+      as: "ul"
+    }
+  }
+}), styleVariant({
+  prop: "kind",
+  variants: {
+    number: {
+      listStyle: "decimal"
+    },
+    dot: {
+      listStyle: "disc"
+    }
+  },
+  skipForward: true
+}))((_a) => {
+  var _b = _a, { children, as } = _b, props = __objRest(_b, ["children", "as"]);
+  return /* @__PURE__ */ React.createElement(VStack, __spreadValues({
+    as,
+    pl: 18,
+    spacing: 4
+  }, props), children);
+});
+var ListItem = ({ children }) => /* @__PURE__ */ React.createElement(Body, {
+  level: 2,
+  as: "li"
+}, children);
+List.Item = ListItem;
+export {
+  List
+};

package/lib/List/index.js

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

package/lib/Media/Image/Image.js

@@ -1,37 +1,53 @@
 import {
   React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Image/Image.tsx
 init_react_shim();
-import {useImageContext} from "../../../contexts/ImageContext/index.js";
-import {Box} from "../../../private/Box/index.js";
-import {useActualSizes} from "./useActualSizes.js";
-var Image = (props) => {
-  const {
+import { forwardRef } from "react";
+import { useImageContext } from "../../../contexts/ImageContext/index.js";
+import { Box } from "../../../private/Box/index.js";
+import { useActualSizes } from "./useActualSizes.js";
+var Image = forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
     className,
     alt,
+    aspectRatio,
     src,
     sizes,
     width = "100%",
     maxWidth,
+    maxHeight,
     height = "100%",
-    objectFit = "cover",
-    ...restProps
-  } = props;
-  const {imageLoader, ImageComponent} = useImageContext();
-  const {actualSizes} = useActualSizes({sizes, width, maxWidth});
+    objectFit = "cover"
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "alt",
+    "aspectRatio",
+    "src",
+    "sizes",
+    "width",
+    "maxWidth",
+    "maxHeight",
+    "height",
+    "objectFit"
+  ]);
+  const { imageLoader, ImageComponent } = useImageContext();
+  const { actualSizes } = useActualSizes({ sizes, width, maxWidth });
   if (ImageComponent) {
-    return /* @__PURE__ */ React.createElement(ImageComponent, {
-      ...props,
+    return /* @__PURE__ */ React.createElement(ImageComponent, __spreadProps(__spreadValues({}, props), {
       imageLoader
-    });
+    }));
   }
   if (!src) {
     return null;
   }
-  const {defaultSrcSet, webpSrcSet} = imageLoader?.(src) ?? {};
+  const { defaultSrcSet, webpSrcSet } = (_b = imageLoader == null ? void 0 : imageLoader(src)) != null ? _b : {};
   return /* @__PURE__ */ React.createElement(Box, {
     as: "picture",
     className,
@@ -42,20 +58,23 @@ var Image = (props) => {
     type: "image/webp",
     srcSet: webpSrcSet,
     sizes: actualSizes
-  }), /* @__PURE__ */ React.createElement(Box, {
-    as: "img",
-    ...restProps,
+  }), /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({
+    ref,
+    as: "img"
+  }, restProps), {
+    aspectRatio,
     alt,
     srcSet: defaultSrcSet,
     src,
     sizes: actualSizes,
     width: "100%",
     maxWidth,
+    maxHeight,
     height: "100%",
     objectFit,
     verticalAlign: "top"
-  }));
-};
+  })));
+});
 Image.forwardStyle = true;
 export {
   Image

package/lib/Media/Image/index.js

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

package/lib/Media/Image/useActualSizes.js

@@ -1,23 +1,41 @@
 import {
   useDeepCompareMemo
-} from "../../../chunk-Z3JA2F2K.js";
-import "../../../chunk-BT7THJEN.js";
+} from "../../../chunk-O6RRFC57.js";
 import {
   isDefined
-} from "../../../chunk-KH2Z52PX.js";
+} from "../../../chunk-MBYCGPJ2.js";
+import "../../../chunk-LN36XQS3.js";
 import {
   useTheme
-} from "../../../chunk-ZNFXXXHP.js";
-import "../../../chunk-FBWP7GA4.js";
+} from "../../../chunk-T7TBQTBE.js";
+import "../../../chunk-LE44IRCL.js";
+import "../../../chunk-CGEEKALF.js";
+import "../../../chunk-J3Q2BPOW.js";
 import {
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Image/useActualSizes.ts
 init_react_shim();
-import {appendCssUnit} from "../../../utils/index.js";
-function useActualSizes({sizes, width, maxWidth}) {
-  const {breakpoints} = useTheme();
+
+// libs/shared/utils-css/src/index.ts
+init_react_shim();
+
+// libs/shared/utils-css/src/lib/appendCssUnit/index.ts
+init_react_shim();
+
+// libs/shared/utils-css/src/lib/appendCssUnit/appendCssUnit.ts
+init_react_shim();
+function appendCssUnit(value, cssUnit) {
+  if (typeof value === "number" || !Number.isNaN(Number(value))) {
+    return `${value}${cssUnit}`;
+  }
+  return value;
+}
+
+// libs/shared/ui-system/src/lib/Media/Image/useActualSizes.ts
+function useActualSizes({ sizes, width, maxWidth }) {
+  const { breakpoints } = useTheme();
   const actualSizes = useDeepCompareMemo(() => {
     if (Array.isArray(sizes)) {
       return sizes.map((size, index) => {
@@ -29,11 +47,20 @@ function useActualSizes({sizes, width, maxWidth}) {
     if (isDefined(sizes)) {
       return appendCssUnit(sizes, "px");
     }
-    if (typeof maxWidth === "number" || maxWidth?.slice(-2) === "px") {
+    if (Array.isArray(maxWidth)) {
+      return maxWidth.map((maxWidthItem, index) => {
+        const condition = breakpoints[Math.min(index, breakpoints.length - 1)];
+        if (typeof maxWidthItem === "number" || (maxWidthItem == null ? void 0 : maxWidthItem.slice(-2)) === "px") {
+          const result = appendCssUnit(maxWidthItem, "px");
+          return index < maxWidth.length - 1 ? `(min-width: ${condition}) ${result}` : result;
+        }
+      }).join(",");
+    }
+    if (typeof maxWidth === "number" || (maxWidth == null ? void 0 : maxWidth.slice(-2)) === "px") {
       const result = appendCssUnit(maxWidth, "px");
       return `(min-width: ${result}) ${result}`;
     }
-    if (typeof width === "number" || width?.slice(-2) === "px") {
+    if (typeof width === "number" || (width == null ? void 0 : width.slice(-2)) === "px") {
       return appendCssUnit(width, "px");
     }
     return void 0;

package/lib/Media/SeekBar/SeekBar.js

@@ -1,15 +1,15 @@
 import {
   React,
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/SeekBar/SeekBar.tsx
 init_react_shim();
-import {useState} from "react";
-import {Range} from "../../Form/Range/index.js";
-import {Bar} from "../../../private/Bar/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Action} from "../../Action/index.js";
+import { useState } from "react";
+import { Bar } from "../../../private/Bar/index.js";
+import { Action } from "../../Action/index.js";
+import { Range } from "../../Form/Range/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
 var SeekBar = (props) => {
   const {
     currentTime,

package/lib/Media/SeekBar/index.js

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

package/lib/Media/Video/Video.js

@@ -1,21 +1,21 @@
 import {
   React,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-FU5YH2ZU.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Media/Video/Video.tsx
 init_react_shim();
-import {forwardRef} from "react";
-import {Box} from "../../../private/Box/index.js";
+import { forwardRef } from "react";
+import { Box } from "../../../private/Box/index.js";
 var VideoBox = Box;
-var Video = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(VideoBox, {
+var Video = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(VideoBox, __spreadValues({
   ref,
   as: "video",
   width: "100%",
   height: "100%",
-  playsInline: true,
-  ...props
-}));
+  playsInline: true
+}, props)));
 export {
   Video
 };