@class101/cdn-ui-system 0.0.7 → 0.0.11

package/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@class101/cdn-ui-system",
-  "version": "0.0.7",
-  "module": "index.js"
+  "version": "0.0.11",
+  "sideEffects": false,
+  "main": "src/index.ts"
 }

package/private/Bar/Bar.js

@@ -1,11 +1,14 @@
-// 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/private/Bar/Bar.tsx
-import {useEffect, useRef} from "react";
-import {Box} from "../Box/index.js";
+init_react_shim();
+import { useEffect, useRef } from "react";
+import { Box } from "../Box/index.js";
 var Bar = (props) => {
-  const {height, color, width, className, opacity} = props;
+  const { height, color, width, className, opacity } = props;
   const boxRef = useRef(null);
   useEffect(() => {
     if (!boxRef.current) {

package/private/Bar/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/private/Bar/index.ts
-import {Bar} from "./Bar.js";
+init_react_shim();
+import { Bar } from "./Bar.js";
 export {
   Bar
 };

package/private/Box/Box.js

@@ -1,10 +1,18 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  emotion_styled_browser_esm_default
+} from "../../chunk-SFQY5CLW.js";
+import "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/private/Box/Box.tsx
-import styled from "https://jspm.dev/@emotion/styled@11.3.0";
-import {shouldForwardProp, styledSystem} from "../../core/index.js";
-var Box = styled("div", {
+init_react_shim();
+import { shouldForwardProp, styledSystem } from "../../core/index.js";
+var Box = emotion_styled_browser_esm_default("div", {
   shouldForwardProp
 })(styledSystem);
 Box.forwardStyle = true;

package/private/Box/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/private/Box/index.ts
-import {Box} from "./Box.js";
+init_react_shim();
+import { Box } from "./Box.js";
 export {
   Box
 };

package/private/Box/variants.js

@@ -0,0 +1,6 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/private/Box/variants.ts
+init_react_shim();

package/private/ForwardStyle/ForwardStyle.js

@@ -1,16 +1,17 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/private/ForwardStyle/ForwardStyle.tsx
-import styled from "https://jspm.dev/@emotion/styled@11.3.0";
-import shouldForwardProp from "https://jspm.dev/@styled-system/should-forward-prop@5.1.5";
-import {cloneElement, forwardRef, isValidElement, useCallback} from "react";
-import {styledSystem} from "../../core/index.js";
-var StyledChildren = styled(({children, className, ...restProps}) => cloneElement(children, {
-  ...restProps,
-  className: [children.props.className ?? "", className].join(" ").trim()
-}), {shouldForwardProp})(styledSystem);
-var ForwardStyle = forwardRef(({children, ...props}, ref) => {
+init_react_shim();
+import { forwardRef, isValidElement, useCallback } from "react";
+import { StyledChildren } from "./StyledChildren.js";
+var ForwardStyle = forwardRef((_a, ref) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const canForwardStyleTo = useCallback((element) => isValidElement(element) && element.type.forwardStyle === true, []);
   if (!canForwardStyleTo(children)) {
     const errorMessage = ["`ForwardStyle`\uC744 \uC801\uC6A9\uD560 \uC218 \uC5C6\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4."];
@@ -19,10 +20,9 @@ var ForwardStyle = forwardRef(({children, ...props}, ref) => {
     }
     throw new Error(errorMessage.join("\n"));
   }
-  return /* @__PURE__ */ React.createElement(StyledChildren, {
-    ...props,
+  return /* @__PURE__ */ React.createElement(StyledChildren, __spreadProps(__spreadValues({}, props), {
     ref
-  }, children);
+  }), children);
 });
 export {
   ForwardStyle

package/private/ForwardStyle/StyledChildren.js

@@ -0,0 +1,35 @@
+import {
+  emotion_styled_browser_esm_default
+} from "../../chunk-SFQY5CLW.js";
+import {
+  index_esm_default
+} from "../../chunk-ESGHR2XF.js";
+import "../../chunk-SPRM5WZD.js";
+import "../../chunk-37VQUPZR.js";
+import "../../chunk-RYCV4KQR.js";
+import "../../chunk-R4HM35UZ.js";
+import "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/private/ForwardStyle/StyledChildren.tsx
+init_react_shim();
+import { cloneElement } from "react";
+import { styledSystem } from "../../core/index.js";
+var StyledChildren = emotion_styled_browser_esm_default((_a) => {
+  var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
+  var _a2;
+  return cloneElement(children, __spreadProps(__spreadValues({}, restProps), {
+    className: [(_a2 = children.props.className) != null ? _a2 : "", className].join(" ").trim()
+  }));
+}, { shouldForwardProp: index_esm_default })(styledSystem);
+export {
+  StyledChildren
+};

package/private/ForwardStyle/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/private/ForwardStyle/index.ts
-import {ForwardStyle} from "./ForwardStyle.js";
+init_react_shim();
+import { ForwardStyle } from "./ForwardStyle.js";
 export {
   ForwardStyle
 };

package/private/Stack/Stack.js

@@ -1,11 +1,16 @@
-// 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/private/Stack/Stack.tsx
-import {useTheme} from "https://jspm.dev/@emotion/react@11.1.5";
-import {Children, forwardRef, isValidElement} from "react";
-import {getPaddedResponsiveArray} from "../../core/index.js";
-import {Box} from "../Box/index.js";
+init_react_shim();
+import { Children, forwardRef, Fragment, isValidElement } from "react";
+import { propsVariant, propVariant, system } from "../../core/index.js";
+import { calculateResponsiveValues } from "../../core/props/utils/calculateResponsiveValues.js";
+import { Box } from "../Box/index.js";
 var JUSTIFY_CONTENT_MAP = {
   unset: "unset",
   around: "space-around",
@@ -20,71 +25,77 @@ var ALIGN_ITEMS_MAP = {
   center: "center",
   baseline: "baseline"
 };
-var getFlexDirection = (direction, reverse) => {
-  if (direction === "horizontal") {
-    return reverse ? "row-reverse" : "row";
-  }
-  return reverse ? "column-reverse" : "column";
-};
-var Stack = forwardRef(({children, direction, spacing, alignment = "stretch", reverse = false, ...props}, ref) => {
-  const {breakpoints} = useTheme();
-  const responsiveDirection = getPaddedResponsiveArray(breakpoints, direction);
-  const responsiveReverse = getPaddedResponsiveArray(breakpoints, reverse);
-  const responsiveSpacing = getPaddedResponsiveArray(breakpoints, spacing);
-  const responsiveAlignment = getPaddedResponsiveArray(breakpoints, alignment);
-  const responsiveAlignItemsStyle = [];
-  const responsiveFlexDirectionStyle = [];
-  const responsiveJustifyContentStyle = [];
-  const responsiveChildrenSpacingStyle = [];
-  let prevReverseValue = responsiveReverse[0];
-  let prevDirectionValue = responsiveDirection[0];
-  const addStackResponsiveStyle = (index) => {
-    const reverseValue = responsiveReverse[index];
-    const directionValue = responsiveDirection[index];
-    const alignmentValue = responsiveAlignment[index];
-    const spacingValue = responsiveSpacing[index];
-    if (reverseValue !== void 0) {
-      prevReverseValue = reverseValue;
-    }
-    if (directionValue !== void 0) {
-      prevDirectionValue = directionValue;
-      responsiveFlexDirectionStyle.push(getFlexDirection(directionValue, reverseValue ?? false));
+var Stack = system()(propVariant({
+  prop: "alignment",
+  variants: (alignment) => ({ alignItems: ALIGN_ITEMS_MAP[alignment] }),
+  defaultValue: "stretch",
+  responsive: true
+}), propsVariant({
+  variants({ direction, spacing }) {
+    if (spacing === void 0) {
+      return {
+        spacingWidth: 0,
+        spacingHeight: 0
+      };
     }
-    if (alignmentValue !== void 0) {
-      responsiveAlignItemsStyle.push(ALIGN_ITEMS_MAP[alignmentValue]);
-    }
-    if (spacingValue !== void 0) {
-      if (typeof spacingValue === "number") {
-        responsiveChildrenSpacingStyle.push({
-          width: prevDirectionValue === "horizontal" ? spacingValue : 0,
-          height: prevDirectionValue === "vertical" ? spacingValue : 0
-        });
-        responsiveJustifyContentStyle.push(JUSTIFY_CONTENT_MAP["unset"]);
-        return;
+    return calculateResponsiveValues(direction, spacing, (directionValue, spacingValue) => {
+      if (typeof spacingValue === "string") {
+        return {
+          spacingWidth: 0,
+          spacingHeight: 0
+        };
       }
-      responsiveChildrenSpacingStyle.push({width: 0, height: 0});
-      responsiveJustifyContentStyle.push(JUSTIFY_CONTENT_MAP[spacingValue]);
-    }
-  };
-  for (let index = 0; index <= breakpoints.length; index += 1) {
-    addStackResponsiveStyle(index);
+      if (directionValue === "horizontal") {
+        return {
+          spacingWidth: spacingValue,
+          spacingHeight: 0
+        };
+      }
+      return {
+        spacingWidth: 0,
+        spacingHeight: spacingValue
+      };
+    });
+  }
+}), propsVariant({
+  variants({ direction, reverse }) {
+    return calculateResponsiveValues(direction, reverse, (directionValue, reverseValue) => ({
+      flexDirection: `${directionValue === "vertical" ? "column" : "row"}${reverseValue ? "-reverse" : ""}`
+    }));
   }
-  const spacingWidth = responsiveChildrenSpacingStyle.map((space) => space.width);
-  const spacingHeight = responsiveChildrenSpacingStyle.map((space) => space.height);
-  const spacingDisplay = responsiveChildrenSpacingStyle.map((space) => space.width === 0 && space.height === 0 ? "none" : "inline");
-  return /* @__PURE__ */ React.createElement(Box, {
+}), propsVariant({
+  props: [
+    {
+      name: "justifyContent",
+      responsive: true
+    },
+    {
+      name: "spacing",
+      responsive: true
+    }
+  ],
+  variants: ({ spacing, justifyContent }) => calculateResponsiveValues(spacing, justifyContent, (spacingValue, justifyContentValue) => {
+    if (typeof spacingValue === "string") {
+      return {
+        justifyContent: JUSTIFY_CONTENT_MAP[spacingValue]
+      };
+    }
+    return { justifyContent: justifyContentValue };
+  })
+}))(forwardRef((_a, ref) => {
+  var _b = _a, { children, direction: _, spacingHeight, spacingWidth } = _b, props = __objRest(_b, ["children", "direction", "spacingHeight", "spacingWidth"]);
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     ref,
-    display: "flex",
-    ...props,
-    flexDirection: responsiveFlexDirectionStyle,
-    justifyContent: responsiveJustifyContentStyle,
-    alignItems: responsiveAlignItemsStyle
-  }, responsiveChildrenSpacingStyle.length > 0 ? Children.toArray(children).filter((child) => isValidElement(child)).map((child, index, items) => /* @__PURE__ */ React.createElement(React.Fragment, null, child, index < items.length - 1 && /* @__PURE__ */ React.createElement(Box, {
+    display: "flex"
+  }, props), spacingWidth || spacingHeight ? Children.toArray(children).filter((child) => isValidElement(child)).map((child, index, items) => /* @__PURE__ */ React.createElement(Fragment, {
+    key: index
+  }, child, index < items.length - 1 && /* @__PURE__ */ React.createElement(Box, {
     width: spacingWidth,
     height: spacingHeight,
-    display: spacingDisplay
+    flexGrow: 0,
+    flexShrink: 0
   }))) : children);
-});
+}));
 export {
   Stack
 };

package/private/Stack/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/private/Stack/index.ts
-import {Stack} from "./Stack.js";
+init_react_shim();
+import { Stack } from "./Stack.js";
 export {
   Stack
 };

package/private/Transform/Transform.js

@@ -1,11 +1,13 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/private/Transform/Transform.tsx
-import {ForwardStyle} from "../ForwardStyle/index.js";
-var Transform = (props) => /* @__PURE__ */ React.createElement(ForwardStyle, {
-  ...props
-});
+init_react_shim();
+import { ForwardStyle } from "../ForwardStyle/index.js";
+var Transform = (props) => /* @__PURE__ */ React.createElement(ForwardStyle, __spreadValues({}, props));
 Transform.forwardStyle = true;
 export {
   Transform

package/private/Transform/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/private/Transform/index.ts
-import {Transform} from "./Transform.js";
+init_react_shim();
+import { Transform } from "./Transform.js";
 export {
   Transform
 };

package/@types/image.d.js

@@ -1,2 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";

package/@types/theme.d.js

@@ -1,5 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/@types/theme.d.ts
-import "https://jspm.dev/@emotion/react@11.1.5";

package/lib/Animation/Animator/Animator.stories.js

@@ -1,63 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Animation/Animator/Animator.stories.tsx
-import {keyframes} from "https://jspm.dev/@emotion/react@11.1.5";
-import {Animator} from "./Animator.js";
-import {Body} from "../../Typography/Body/index.js";
-var slideLeftToRight = keyframes`
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-`;
-var Animator_stories_default = {
-  title: "ui-system/Animation/Animator",
-  component: Animator,
-  argTypes: {
-    name: {
-      defaultValue: slideLeftToRight,
-      control: false
-    },
-    delay: {
-      defaultValue: 0,
-      control: "number"
-    },
-    duration: {
-      defaultValue: 3e3,
-      control: "number"
-    },
-    iterationCount: {
-      defaultValue: 1,
-      control: "number"
-    },
-    timingFunction: {
-      defaultValue: "linear",
-      control: "text"
-    },
-    fillMode: {
-      defaultValue: "none",
-      control: "text"
-    },
-    playState: {
-      defaultValue: "running",
-      control: "text"
-    },
-    direction: {
-      defaultValue: "normal",
-      control: "text"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Animator, {
-  ...props
-}, /* @__PURE__ */ React.createElement(Body, {
-  level: 1
-}, "content"));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Animator_stories_default as default
-};

package/lib/Animation/FadeAnimation/FadeAnimation.stories.js

@@ -1,42 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Animation/FadeAnimation/FadeAnimation.stories.tsx
-import {FadeAnimation} from "./FadeAnimation.js";
-import {Body} from "../../Typography/Body/index.js";
-var FadeAnimation_stories_default = {
-  title: "ui-system/Animation/FadeAnimation",
-  component: FadeAnimation,
-  argTypes: {
-    animate: {
-      defaultValue: true,
-      control: "boolean"
-    },
-    type: {
-      defaultValue: "in",
-      control: {
-        type: "select",
-        options: ["in", "out"]
-      }
-    },
-    from: {
-      defaultValue: ["18%", 0],
-      control: "object"
-    },
-    to: {
-      defaultValue: [0, 0],
-      control: "object"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(FadeAnimation, {
-  ...props,
-  duration: 3e3
-}, /* @__PURE__ */ React.createElement(Body, {
-  level: 1
-}, "content"));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  FadeAnimation_stories_default as default
-};

package/lib/Animation/SlideAnimation/SlideAnimation.stories.js

@@ -1,35 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Animation/SlideAnimation/SlideAnimation.stories.tsx
-import {SlideAnimation} from "./SlideAnimation.js";
-import {Body} from "../../Typography/Body/index.js";
-var SlideAnimation_stories_default = {
-  title: "ui-system/Animation/SlideAnimation",
-  component: SlideAnimation,
-  argTypes: {
-    animate: {
-      defaultValue: true,
-      control: "boolean"
-    },
-    from: {
-      defaultValue: ["-100%", 0],
-      control: "object"
-    },
-    to: {
-      defaultValue: [0, 0],
-      control: "object"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(SlideAnimation, {
-  ...props,
-  duration: 3e3
-}, /* @__PURE__ */ React.createElement(Body, {
-  level: 1
-}, "content"));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  SlideAnimation_stories_default as default
-};

package/lib/Animation/Transition/Transition.stories.js

@@ -1,47 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Animation/Transition/Transition.stories.tsx
-import styled from "https://jspm.dev/@emotion/styled@11.3.0";
-import {Background} from "../../Background/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Transition} from "./Transition.js";
-var Transition_stories_default = {
-  title: "ui-system/Animation/Transition",
-  component: Transition,
-  argTypes: {
-    property: {defaultValue: "background-color", control: "text"},
-    delay: {
-      defaultValue: 0,
-      control: "number"
-    },
-    duration: {
-      defaultValue: 3e3,
-      control: "number"
-    },
-    timingFunction: {
-      defaultValue: "linear",
-      control: "text"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Transition, {
-  ...props
-}, /* @__PURE__ */ React.createElement(Background, {
-  color: "black"
-}, /* @__PURE__ */ React.createElement(StyledVStack, {
-  width: "100%",
-  height: "100%",
-  minHeight: "500px"
-})));
-var StyledVStack = styled(VStack)`
-  &:hover {
-    background-color: white;
-  }
-`;
-StyledVStack.forwardStyle = true;
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Transition_stories_default as default
-};

package/lib/Background/Background.stories.js

@@ -1,35 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Background/Background.stories.tsx
-import {VStack} from "../Layout/VStack/index.js";
-import {Background} from "./Background.js";
-var Background_stories_default = {
-  title: "ui-system/Background",
-  component: Background
-};
-var image = "https://cdn.class101.net/images/13aa7e1c-03ca-4a69-ba86-b0f8839303e3/750xauto";
-var Template = (props) => /* @__PURE__ */ React.createElement(Background, {
-  ...props
-}, /* @__PURE__ */ React.createElement(VStack, {
-  width: "100%",
-  height: "100%",
-  minHeight: "500px"
-}));
-var BasicUsage = Template.bind({});
-BasicUsage.args = {
-  color: "black"
-};
-var WithImage = Template.bind({});
-WithImage.args = {
-  color: "transparent",
-  image,
-  position: "center",
-  size: "contain",
-  repeat: "no-repeat"
-};
-export {
-  BasicUsage,
-  WithImage,
-  Background_stories_default as default
-};