@class101/cdn-ui-system 0.0.7 → 0.0.11

package/lib/Typography/Caption/Caption.js

@@ -1,20 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Typography/Caption/Caption.tsx
-import {propVariant, system} from "../../../core/index.js";
-import {Text} from "../Text/index.js";
-var Caption = system()(propVariant({
-  prop: "level",
-  variants: {1: {kind: "caption1"}, 2: {kind: "caption2"}, 3: {kind: "caption3"}},
-  responsive: true,
-  skipForward: true
-}))(({kind, ...props}) => /* @__PURE__ */ React.createElement(Text, {
-  as: "small",
-  kind,
-  ...props
-}));
-Caption.forwardStyle = true;
-export {
-  Caption
-};

package/lib/Typography/Caption/Caption.stories.js

@@ -1,40 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Typography/Caption/Caption.stories.tsx
-import {Caption} from "./Caption.js";
-var Caption_stories_default = {
-  title: "ui-system/Typography/Caption",
-  component: Caption,
-  argTypes: {
-    level: {
-      defaultValue: 1,
-      control: {
-        type: "select",
-        options: [1, 2, 3]
-      }
-    },
-    weight: {
-      defaultValue: "regular",
-      control: {
-        type: "select",
-        options: ["regular", "medium", "bold"]
-      }
-    },
-    wordBreak: {
-      defaultValue: "keep-all",
-      control: {
-        type: "select",
-        options: ["break-all", "break-word", "inherit", "initial", "keep-all", "normal", "revert"]
-      }
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Caption, {
-  ...props
-}, "This is a Caption Component");
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Caption_stories_default as default
-};

package/lib/Typography/Caption/index.js

@@ -1,8 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Typography/Caption/index.ts
-import {Caption} from "./Caption.js";
-export {
-  Caption
-};

package/lib/Typography/Paragraph/Paragraph.stories.js

@@ -1,40 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Typography/Paragraph/Paragraph.stories.tsx
-import {Paragraph} from "./Paragraph.js";
-var Paragraph_stories_default = {
-  title: "ui-system/Typography/Paragraph",
-  component: Paragraph,
-  argTypes: {
-    level: {
-      defaultValue: 1,
-      control: {
-        type: "select",
-        options: [1, 2, 3]
-      }
-    },
-    weight: {
-      defaultValue: "regular",
-      control: {
-        type: "select",
-        options: ["regular", "bold"]
-      }
-    },
-    wordBreak: {
-      defaultValue: "keep-all",
-      control: {
-        type: "select",
-        options: ["break-all", "break-word", "inherit", "initial", "keep-all", "normal", "revert"]
-      }
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Paragraph, {
-  ...props
-}, "This is a Paragraph Component");
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Paragraph_stories_default as default
-};

package/lib/Typography/Title/Title.stories.js

@@ -1,38 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/Typography/Title/Title.stories.tsx
-import {Title} from "./Title.js";
-var Title_stories_default = {
-  title: "ui-system/Typography/Title",
-  component: Title,
-  argTypes: {
-    level: {
-      defaultValue: 1,
-      control: {
-        type: "select",
-        options: [1, 2, 3]
-      }
-    },
-    wordBreak: {
-      defaultValue: "keep-all",
-      control: {
-        type: "select",
-        options: ["break-all", "break-word", "inherit", "initial", "keep-all", "normal", "revert"]
-      }
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Title, {
-  ...props
-}, "This is a Title Component");
-var BasicUsage = Template.bind({});
-var ResponsiveUsage = Template.bind({});
-ResponsiveUsage.args = {
-  level: [1, 3, 1]
-};
-export {
-  BasicUsage,
-  ResponsiveUsage,
-  Title_stories_default as default
-};

package/lib/Underline/Underline.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/Underline/Underline.stories.tsx
-import {VStack} from "../Layout/VStack/index.js";
-import {Body} from "../Typography/Body/index.js";
-import {Underline} from "./Underline.js";
-var Underline_stories_default = {
-  title: "ui-system/Underline",
-  component: Underline,
-  args: {
-    color: "red",
-    width: 2,
-    alwaysOn: false
-  },
-  argTypes: {
-    children: {
-      control: false
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Underline, {
-  ...props
-});
-var BasicUsage = Template.bind({});
-BasicUsage.args = {
-  children: /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(Body, {
-    as: "span",
-    level: 1
-  }, "\uBA54\uB274"))
-};
-export {
-  BasicUsage,
-  Underline_stories_default as default
-};

package/lib/ViewPager/ViewPager.stories.js

@@ -1,74 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/ViewPager/ViewPager.stories.tsx
-import {useRef, useState} from "react";
-import {Background} from "../Background/index.js";
-import {ContainedButton} from "../Button/ContainedButton/index.js";
-import {Center} from "../Layout/Center/index.js";
-import {Title} from "../Typography/Title/index.js";
-import {ViewPagerItem} from "../ViewPagerItem/index.js";
-import {ViewPager} from "./ViewPager.js";
-var TOTAL_ITEMS = new Array(10).fill(0).map((_, i) => `${i}`);
-var ViewPager_stories_default = {
-  title: "ui-system/ViewPager",
-  component: ViewPager
-};
-var BasicUsage = (props) => {
-  const [pageId, setPageId] = useState(TOTAL_ITEMS[0]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ViewPager, {
-    ...props,
-    pageId,
-    onPageIdChange: setPageId
-  }, TOTAL_ITEMS.map((item, index) => /* @__PURE__ */ React.createElement(ViewPagerItem, {
-    key: item,
-    pageId: item
-  }, /* @__PURE__ */ React.createElement(Background, {
-    color: "seaGreen.400"
-  }, /* @__PURE__ */ React.createElement(Center, {
-    width: 300,
-    height: 300
-  }, /* @__PURE__ */ React.createElement(Title, {
-    level: 4,
-    color: "white"
-  }, "\uD398\uC774\uC9C0: ", index)))))), /* @__PURE__ */ React.createElement(ContainedButton, {
-    kind: "primary",
-    size: "md",
-    onClick: () => setPageId(TOTAL_ITEMS[TOTAL_ITEMS.findIndex((item) => item === pageId) - 1])
-  }, "\uC774\uC804"), /* @__PURE__ */ React.createElement(ContainedButton, {
-    kind: "primary",
-    size: "md",
-    onClick: () => setPageId(TOTAL_ITEMS[TOTAL_ITEMS.findIndex((item) => item === pageId) + 1])
-  }, "\uB2E4\uC74C"));
-};
-var WithRef = (props) => {
-  const pagerRef = useRef(null);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ViewPager, {
-    ...props,
-    ref: pagerRef
-  }, TOTAL_ITEMS.map((item, index) => /* @__PURE__ */ React.createElement(ViewPagerItem, {
-    key: item,
-    pageId: item
-  }, /* @__PURE__ */ React.createElement(Background, {
-    color: "seaGreen.400"
-  }, /* @__PURE__ */ React.createElement(Center, {
-    width: 300,
-    height: 300
-  }, /* @__PURE__ */ React.createElement(Title, {
-    level: 4,
-    color: "white"
-  }, "\uD398\uC774\uC9C0: ", index)))))), /* @__PURE__ */ React.createElement(ContainedButton, {
-    kind: "primary",
-    size: "md",
-    onClick: () => pagerRef.current?.moveToPrevPage()
-  }, "\uC774\uC804"), /* @__PURE__ */ React.createElement(ContainedButton, {
-    kind: "primary",
-    size: "md",
-    onClick: () => pagerRef.current?.moveToNextPage()
-  }, "\uB2E4\uC74C"));
-};
-export {
-  BasicUsage,
-  WithRef,
-  ViewPager_stories_default as default
-};

package/lib/deprecated/Swiper/Swiper.stories.js

@@ -1,177 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/lib/deprecated/Swiper/Swiper.stories.tsx
-import styled from "https://jspm.dev/@emotion/styled@11.3.0";
-import {Slide} from "../Slide/index.js";
-import {Swiper} from "./Swiper.js";
-var Swiper_stories_default = {
-  title: "ui-system/deprecated/Swiper",
-  component: Swiper
-};
-var BasicUsage = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var LoopMode = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var AutoPlay = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  autoPlay: true,
-  delay: 2e3,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var MultipleSlides = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  slidesPerView: 2,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var Spacing = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  slidesPerView: 3,
-  spacing: 12,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var FreeMode = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  slidesPerView: 3,
-  spacing: 12,
-  mode: "free",
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var CenteredSlides1 = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  slidesPerView: 2,
-  spacing: 12,
-  centered: true,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var CenteredSlides2 = (args) => /* @__PURE__ */ React.createElement(WithPaddingSwiper, {
-  spacing: 12,
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "orange.400"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "yellow.400"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.400"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.400"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.400"
-}, "5"));
-var BreakPoints = (args) => /* @__PURE__ */ React.createElement(Swiper, {
-  loop: true,
-  spacing: 12,
-  breakpoints: {
-    "(min-width: 1024px) and (max-width: 1440px)": {
-      slidesPerView: 2
-    },
-    "(max-width: 1023px)": {
-      slidesPerView: 3
-    }
-  },
-  ...args
-}, /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "green.900"
-}, "1"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "seaGreen.900"
-}, "2"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "aquaGreen.900"
-}, "3"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "blue.900"
-}, "4"), /* @__PURE__ */ React.createElement(Box, {
-  backgroundColor: "violetBlue.900"
-}, "5"));
-var Box = styled(Slide)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  height: 180px;
-`;
-var WithPaddingSwiper = styled(Swiper)`
-  padding: 0 32px;
-`;
-export {
-  AutoPlay,
-  BasicUsage,
-  BreakPoints,
-  CenteredSlides1,
-  CenteredSlides2,
-  FreeMode,
-  LoopMode,
-  MultipleSlides,
-  Spacing,
-  Swiper_stories_default as default
-};

package/private/Box/Box.stories.js

@@ -1,60 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/Box/Box.stories.tsx
-import {Box} from "./Box.js";
-var Box_stories_default = {
-  title: "ui-system/Private/Box",
-  component: Box,
-  argTypes: {
-    display: {
-      defaultValue: "flex",
-      control: {
-        type: "select",
-        options: ["flex", "block", "inline-block", "none"]
-      }
-    },
-    justifyContent: {
-      defaultValue: "center",
-      control: {
-        type: "select",
-        options: ["center", "start", "end", "flex-start", "flex-end", "left", "right"]
-      }
-    },
-    alignItems: {
-      defaultValue: "center",
-      control: {
-        type: "select",
-        options: ["center", "start", "end", "flex-start", "flex-end"]
-      }
-    },
-    width: {
-      defaultValue: "180px",
-      control: "text"
-    },
-    height: {
-      defaultValue: "120px",
-      control: "text"
-    },
-    color: {
-      defaultValue: "white",
-      control: {
-        type: "color"
-      }
-    },
-    backgroundColor: {
-      defaultValue: "blue.600",
-      control: {
-        type: "color"
-      }
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Box, {
-  ...props
-}, "Hello");
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Box_stories_default as default
-};

package/private/ForwardStyle/ForwardStyle.stories.js

@@ -1,23 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/ForwardStyle/ForwardStyle.stories.tsx
-import {ForwardStyle} from "./ForwardStyle.js";
-import {Box} from "../Box/Box.js";
-var ForwardStyle_stories_default = {
-  title: "ui-system/ForwardStyle",
-  component: ForwardStyle,
-  argTypes: {}
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(ForwardStyle, {
-  ...props
-}, /* @__PURE__ */ React.createElement(Box, {
-  width: 200,
-  height: 200,
-  bg: "gray.400"
-}));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  ForwardStyle_stories_default as default
-};

package/private/Space/Space.js

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

package/private/Space/Space.stories.js

@@ -1,36 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/Space/Space.stories.tsx
-import {Box} from "../Box/index.js";
-import {Space} from "./Space.js";
-var Space_stories_default = {
-  title: "ui-system/Private/Space",
-  component: Space,
-  argTypes: {
-    children: {
-      control: false
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Box, {
-  bg: "blue.100",
-  size: 48
-}), /* @__PURE__ */ React.createElement(Space, {
-  ...props
-}), /* @__PURE__ */ React.createElement(Box, {
-  bg: "blue.200",
-  size: 48
-}));
-var BasicUsage = Template.bind({});
-BasicUsage.args = {
-  m: 20,
-  children: /* @__PURE__ */ React.createElement(Box, {
-    bg: "pinkRed.100",
-    size: 48
-  })
-};
-export {
-  BasicUsage,
-  Space_stories_default as default
-};

package/private/Space/index.js

@@ -1,8 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/Space/index.ts
-import {Space} from "./Space.js";
-export {
-  Space
-};

package/private/Svg/Svg.js

@@ -1,34 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/Svg/Svg.tsx
-import {Box} from "../Box/index.js";
-var Path = (props) => /* @__PURE__ */ React.createElement(Box, {
-  as: "path",
-  ...props
-});
-Path.forwardStyle = true;
-var G = (props) => /* @__PURE__ */ React.createElement(Box, {
-  as: "g",
-  ...props
-});
-G.forwardStyle = true;
-var Svg = ({size, className, ...restProps}) => /* @__PURE__ */ React.createElement(Box, {
-  as: "span",
-  display: "block",
-  width: size,
-  height: size,
-  className
-}, /* @__PURE__ */ React.createElement(Box, {
-  as: "svg",
-  display: "block",
-  width: "100%",
-  height: "100%",
-  ...restProps
-}));
-Svg.forwardStyle = true;
-Svg.G = G;
-Svg.Path = Path;
-export {
-  Svg
-};

package/private/Svg/index.js

@@ -1,8 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/private/Svg/index.ts
-import {Svg} from "./Svg.js";
-export {
-  Svg
-};

package/utils/appendCssUnit/appendCssUnit.js

@@ -1,13 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/utils/appendCssUnit/appendCssUnit.ts
-function appendCssUnit(value, cssUnit) {
-  if (typeof value === "number" || !Number.isNaN(Number(value))) {
-    return `${value}${cssUnit}`;
-  }
-  return value;
-}
-export {
-  appendCssUnit
-};

package/utils/appendCssUnit/appendCssUnit.spec.js

@@ -1,31 +0,0 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-
-// libs/shared/ui-system/src/utils/appendCssUnit/appendCssUnit.spec.ts
-import {appendCssUnit} from "./appendCssUnit.js";
-describe("appendCssUnit", () => {
-  let value;
-  let cssUnit;
-  const subject = () => appendCssUnit(value, cssUnit);
-  describe.each(["px", "em", "rem", "vw", "vh", "%"])("if given `cssUnit` is %p", (givenCssUnit) => {
-    beforeEach(() => {
-      cssUnit = givenCssUnit;
-    });
-    describe.each([0, "0", 100.123456, "100.123456"])("if given `value` is %p", (cleanValue) => {
-      beforeEach(() => {
-        value = cleanValue;
-      });
-      it(`it should return '${cleanValue}${givenCssUnit}'`, () => {
-        expect(subject()).toBe(`${cleanValue}${givenCssUnit}`);
-      });
-    });
-    describe.each(["0px", "100vw", "33.333333%", "100%"])("if given `value` is %p", (dirtyValue) => {
-      beforeEach(() => {
-        value = dirtyValue;
-      });
-      it(`it should return '${dirtyValue}'`, () => {
-        expect(subject()).toBe(dirtyValue);
-      });
-    });
-  });
-});