@shiflo/ui 0.0.19 → 0.1.1

package/dist/components/Typography/Typography.mjs

@@ -1,46 +1,41 @@
-import { jsx as h } from "react/jsx-runtime";
-import p from "basic-styled";
-import b from "../../utils/getUtilityProps.mjs";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+import f from "@emotion/styled";
+import { motion as y } from "motion/react";
+import d from "../../utils/getUtilityProps.mjs";
 import r from "../../utils/getValueByPath.mjs";
-const f = p.div`
-  transition:
-    font-size 0.2s,
-    line-height 0.2s,
-    border-width 0.2s,
-    border-radius 0.2s,
-    border-color 0.2s,
-    color 0.2s;
+const h = f(y.div)`
+  transition: all 0.2s;
 
-  ${({ theme: { typography: o, palette: t }, variant: s, color: n, fontWeight: l, borderColor: i, ...d }) => {
-  const { fontSize: a, lineHeight: c } = o[s || "body2"], e = {
-    fontSize: a,
-    lineHeight: c,
+  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: l, borderColor: e, ...a }) => {
+  const { fontSize: p, lineHeight: m } = t[s || "body2"], o = {
+    fontSize: p,
+    lineHeight: m,
     fontWeight: l
   };
-  return Object.assign(e, b(d)), i && Object.assign(e, {
-    borderColor: r(t, i) || "inherit"
-  }), Object.assign(e, {
-    color: r(t, n) || "inherit"
-  }), e;
+  return Object.assign(o, d(a)), e && Object.assign(o, {
+    borderColor: r(i, e) || "inherit"
+  }), Object.assign(o, {
+    color: r(i, n) || "inherit"
+  }), o;
 }};
 
-  ${({ textAlign: o }) => o ? {
-  textAlign: o
+  ${({ textAlign: t }) => t ? {
+  textAlign: t
 } : {}};
 
-  ${({ noWrap: o }) => o ? {
+  ${({ noWrap: t }) => t ? {
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis"
 } : {}};
 
-  ${({ lineClamp: o }) => o ? {
+  ${({ lineClamp: t }) => t ? {
   display: "-webkit-box",
   overflow: "hidden",
-  "-webkit-line-clamp": o,
+  "-webkit-line-clamp": t,
   "-webkit-box-orient": "vertical"
 } : {}};
-`, u = (o) => /* @__PURE__ */ h(f, { ...o });
+`, u = (t) => /* @__PURE__ */ c(h, { ...t });
 export {
   u as default
 };

package/dist/components/Typography/Typography.typing.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode, ElementType } from 'react';
+import { ShifloTheme } from '../../theme/typing';
 import { PolymorphicComponentProps } from '../../typings/component';
 import { UtilityProps, RecursionPath } from '../../typings/utility';
-import { BasicTheme } from 'basic-styled';
 export interface BaseTypographyProps extends UtilityProps {
-    variant?: keyof BasicTheme["typography"];
+    variant?: keyof ShifloTheme["typography"];
     fontWeight?: 400 | 500 | 700;
-    color?: RecursionPath<BasicTheme["palette"]> | "inherit";
-    borderColor?: RecursionPath<BasicTheme["palette"]>;
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
+    borderColor?: RecursionPath<ShifloTheme["palette"]>;
     textAlign?: "left" | "center" | "right";
     noWrap?: boolean;
     lineClamp?: number;

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+import { default as BottomSheet } from './BottomSheet';
+import { default as Box } from './Box';
+import { default as Button } from './Button';
+import { default as Dialog } from './Dialog';
+import { default as Icon } from './Icon';
+import { default as Overlay } from './Overlay';
+import { default as Snackbar } from './Snackbar';
+import { default as Switch } from './Switch';
+import { default as Tag } from './Tag';
+import { default as TextField } from './TextField';
+import { default as Typography } from './Typography';
+export * from './BottomSheet';
+export * from './Box';
+export * from './Button';
+export * from './Dialog';
+export * from './Icon';
+export * from './Overlay';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tag';
+export * from './TextField';
+export * from './Typography';
+export { Button, Box, Typography, TextField, Overlay, BottomSheet, Dialog, Icon, Snackbar, Switch, Tag };

package/dist/components/index.mjs

@@ -0,0 +1,24 @@
+import { default as a } from "./BottomSheet/BottomSheet.mjs";
+import { default as r } from "./Box/Box.mjs";
+import { default as l } from "./Button/Button.mjs";
+import { default as x } from "./Dialog/Dialog.mjs";
+import { default as m } from "./Icon/Icon.mjs";
+import { default as s } from "./Overlay/Overlay.mjs";
+import { default as g } from "./Snackbar/Snackbar.mjs";
+import { default as i } from "./Switch/Switch.mjs";
+import { default as y } from "./Tag/Tag.mjs";
+import { default as S } from "./TextField/TextField.mjs";
+import { default as b } from "./Typography/Typography.mjs";
+export {
+  a as BottomSheet,
+  r as Box,
+  l as Button,
+  x as Dialog,
+  m as Icon,
+  s as Overlay,
+  g as Snackbar,
+  i as Switch,
+  y as Tag,
+  S as TextField,
+  b as Typography
+};

package/dist/theme/GlobalStyle.d.ts

@@ -1,2 +1,2 @@
-declare function GlobalStyle(): import("react").JSX.Element;
+declare function GlobalStyle(): import("@emotion/react/jsx-runtime").JSX.Element;
 export default GlobalStyle;

package/dist/theme/GlobalStyle.mjs

@@ -1,41 +1,72 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "basic-styled";
-function r() {
-  return /* @__PURE__ */ t(a, { globalStyle: !0 });
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { useTheme as a, Global as r } from "@emotion/react";
+function l() {
+  const {
+    palette: { common: o, text: e }
+  } = a();
+  return /* @__PURE__ */ t(
+    r,
+    {
+      styles: {
+        "*": {
+          margin: 0,
+          padding: 0,
+          font: "inherit",
+          color: "inherit",
+          WebkitTapHighlightColor: "transparent",
+          userSelect: "none"
+        },
+        "*, :after, :before": {
+          boxSizing: "border-box",
+          MozOsxFontSmoothing: "grayscale",
+          WebkitFontSmoothing: "antialiased"
+        },
+        ":root": {
+          WebkitTextSizeAdjust: "100%",
+          textSizeAdjust: "100%",
+          cursor: "default",
+          overflowWrap: "break-word",
+          MozTabSize: 4,
+          tabSize: 4
+        },
+        "html, body": {
+          height: "100%",
+          color: e.primary,
+          backgroundColor: o.background,
+          transition: "background-color 0.2s, color 0.2s",
+          fontFamily: `Spoqa Han Sans Neo, -apple-system, BlinkMacSystemFont, Helvetica Neue,
+            Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 나눔고딕, Nanum Gothic,
+            Noto Sans KR, Noto Sans CJK KR, arial, 돋움, Dotum, Tahoma, Geneva, sans-serif`
+        },
+        "input, textarea": {
+          userSelect: "text"
+        },
+        "picture, video, canvas": {
+          display: "block",
+          maxWidth: "100%"
+        },
+        "svg, img, video": {
+          verticalAlign: "middle"
+        },
+        button: {
+          background: "none",
+          border: 0,
+          cursor: "pointer"
+        },
+        a: {
+          textDecoration: "none"
+        },
+        table: {
+          borderCollapse: "collapse",
+          borderSpacing: 0
+        },
+        ul: {
+          listStyle: "none"
+        }
+      }
+    }
+  );
 }
-const a = e.style`
-  html,
-  body {
-    background-color: ${({
-  theme: {
-    palette: { common: o }
-  }
-}) => o.background};
-    color: ${({
-  theme: {
-    palette: { text: o }
-  }
-}) => o.primary};
-    font-family:
-      Spoqa Han Sans Neo,
-      -apple-system-,
-      BlinkMacSystemFont,
-      Helvetica Neue,
-      Apple SD Gothic Neo,
-      Malgun Gothic,
-      Nanum Gothic,
-      Noto Sans KR,
-      Noto Sans CJK KR,
-      arial,
-      Dotum,
-      Tahoma,
-      Geneva,
-      sans-serif;
-    transition:
-      background-color 0.2s,
-      color 0.2s;
-  }
-`;
 export {
-  r as default
+  l as default
 };

package/dist/theme/ThemeProvider.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from 'react';
 interface ThemeProviderProps {
     theme: "light" | "dark";
 }
-declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
+declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/theme/ThemeProvider.mjs

@@ -1,20 +1,14 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import m from "basic-styled/setup/configureStyled";
-import i from "basic-styled/setup/ResetStyle";
-import f from "basic-styled/setup/ThemeProvider";
-import l from "./dark.mjs";
-import p from "./GlobalStyle.mjs";
-import h from "./light.mjs";
-m({
-  prefix: "shiflo-ui"
-});
-function y({ children: e, theme: o }) {
-  return /* @__PURE__ */ t(f, { theme: o === "dark" ? l : h, children: [
-    /* @__PURE__ */ r(i, {}),
-    /* @__PURE__ */ r(p, {}),
-    e
+import { jsxs as o, jsx as m } from "@emotion/react/jsx-runtime";
+import { ThemeProvider as t } from "@emotion/react";
+import i from "./dark.mjs";
+import h from "./GlobalStyle.mjs";
+import d from "./light.mjs";
+function c({ children: r, theme: e }) {
+  return /* @__PURE__ */ o(t, { theme: e === "dark" ? i : d, children: [
+    /* @__PURE__ */ m(h, {}),
+    r
   ] });
 }
 export {
-  y as default
+  c as default
 };

package/dist/theme/dark.d.ts

@@ -1,3 +1,3 @@
-import { BasicTheme } from 'basic-styled';
-declare const dark: BasicTheme;
+import { ShifloTheme } from './typing';
+declare const dark: ShifloTheme;
 export default dark;

package/dist/theme/dark.mjs

@@ -1,7 +1,7 @@
 import a from "./radius.mjs";
 import r from "./spacing.mjs";
 import i from "./typography.mjs";
-const g = {
+const C = {
   mode: "dark",
   palette: {
     primary: {
@@ -10,6 +10,7 @@ const g = {
       dark: "#004ECC",
       hover: "#7EAFFF",
       active: "#336DFF",
+      glow: "#1A80E6",
       alpha: {
         5: "rgba(90, 139, 255, 0.05)",
         10: "rgba(90, 139, 255, 0.1)",
@@ -17,6 +18,19 @@ const g = {
         30: "rgba(90, 139, 255, 0.3)"
       }
     },
+    accent: {
+      main: "#3399FF",
+      light: "#66B3FF",
+      dark: "#0066CC",
+      hover: "#4DA6FF",
+      active: "#0066CC",
+      alpha: {
+        5: "rgba(51, 153, 255, 0.05)",
+        10: "rgba(51, 153, 255, 0.1)",
+        20: "rgba(51, 153, 255, 0.2)",
+        30: "rgba(51, 153, 255, 0.3)"
+      }
+    },
     secondary: {
       main: "#2D2F36",
       light: "#40434A",
@@ -75,6 +89,9 @@ const g = {
       light: "#52565D",
       main: "#6C757D",
       dark: "#A5ACB3"
+    },
+    gradient: {
+      primaryToAccent: "linear-gradient(135deg, #5A8BFF 0%, hsl(225 100% 60%) 100%)"
     }
   },
   typography: i,
@@ -82,5 +99,5 @@ const g = {
   radius: a
 };
 export {
-  g as default
+  C as default
 };

package/dist/theme/light.d.ts

@@ -1,3 +1,3 @@
-import { BasicTheme } from 'basic-styled';
-declare const light: BasicTheme;
+import { ShifloTheme } from './typing';
+declare const light: ShifloTheme;
 export default light;

package/dist/theme/light.mjs

@@ -1,20 +1,34 @@
 import a from "./radius.mjs";
 import r from "./spacing.mjs";
 import F from "./typography.mjs";
-const C = {
+const e = {
   mode: "light",
   palette: {
     primary: {
-      main: "#004ECC",
-      light: "#5A8BFF",
-      dark: "#003699",
-      hover: "#336DFF",
-      active: "#003699",
+      main: "#0066CC",
+      light: "#3399FF",
+      dark: "#004499",
+      hover: "#1A80E6",
+      active: "#004499",
+      glow: "#1A80E6",
       alpha: {
-        5: "rgba(0, 78, 204, 0.05)",
-        10: "rgba(0, 78, 204, 0.1)",
-        20: "rgba(0, 78, 204, 0.2)",
-        30: "rgba(0, 78, 204, 0.3)"
+        5: "rgba(0, 102, 204, 0.05)",
+        10: "rgba(0, 102, 204, 0.1)",
+        20: "rgba(0, 102, 204, 0.2)",
+        30: "rgba(0, 102, 204, 0.3)"
+      }
+    },
+    accent: {
+      main: "#3399FF",
+      light: "#66B3FF",
+      dark: "#0066CC",
+      hover: "#4DA6FF",
+      active: "#0066CC",
+      alpha: {
+        5: "rgba(51, 153, 255, 0.05)",
+        10: "rgba(51, 153, 255, 0.1)",
+        20: "rgba(51, 153, 255, 0.2)",
+        30: "rgba(51, 153, 255, 0.3)"
       }
     },
     secondary: {
@@ -75,6 +89,9 @@ const C = {
       light: "#DEE2E6",
       main: "#ADB5BD",
       dark: "#6C757D"
+    },
+    gradient: {
+      primaryToAccent: "linear-gradient(135deg, hsl(225 100% 40%) 0%, hsl(225 100% 60%) 100%)"
     }
   },
   typography: F,
@@ -82,5 +99,5 @@ const C = {
   radius: a
 };
 export {
-  C as default
+  e as default
 };

package/dist/theme/typing.d.ts

@@ -1,85 +1,104 @@
 import { default as radius } from './radius';
 import { default as spacing } from './spacing';
 import { default as typography } from './typography';
-declare module "basic-styled" {
-    interface BasicTheme {
-        mode: "light" | "dark";
-        palette: {
-            primary: {
-                main: string;
+export interface ShifloTheme {
+    mode: "light" | "dark";
+    palette: {
+        primary: {
+            main: string;
+            light: string;
+            dark: string;
+            hover: string;
+            active: string;
+            glow: string;
+            alpha: {
+                5: string;
+                10: string;
+                20: string;
+                30: string;
+            };
+        };
+        accent: {
+            main: string;
+            light: string;
+            dark: string;
+            hover: string;
+            active: string;
+            alpha: {
+                5: string;
+                10: string;
+                20: string;
+                30: string;
+            };
+        };
+        secondary: {
+            main: string;
+            light: string;
+            dark: string;
+            alpha: {
+                5: string;
+                10: string;
+                20: string;
+                30: string;
+            };
+        };
+        neutral: {
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        feedback: {
+            success: {
                 light: string;
+                main: string;
                 dark: string;
-                hover: string;
-                active: string;
-                alpha: {
-                    5: string;
-                    10: string;
-                    20: string;
-                    30: string;
-                };
             };
-            secondary: {
-                main: string;
+            warning: {
                 light: string;
+                main: string;
                 dark: string;
-                alpha: {
-                    5: string;
-                    10: string;
-                    20: string;
-                    30: string;
-                };
             };
-            neutral: {
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            feedback: {
-                success: {
-                    light: string;
-                    main: string;
-                    dark: string;
-                };
-                warning: {
-                    light: string;
-                    main: string;
-                    dark: string;
-                };
-                error: {
-                    light: string;
-                    main: string;
-                    dark: string;
-                };
-                info: {
-                    light: string;
-                    main: string;
-                    dark: string;
-                };
-            };
-            common: {
-                background: string;
-                surface: string;
-                overlay: string;
-            };
-            text: {
-                primary: string;
-                secondary: string;
-                disabled: string;
+            error: {
+                light: string;
+                main: string;
+                dark: string;
             };
-            border: {
+            info: {
                 light: string;
                 main: string;
                 dark: string;
             };
         };
-        typography: typeof typography;
-        spacing: typeof spacing;
-        radius: typeof radius;
+        common: {
+            background: string;
+            surface: string;
+            overlay: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            light: string;
+            main: string;
+            dark: string;
+        };
+        gradient: {
+            primaryToAccent: string;
+        };
+    };
+    typography: typeof typography;
+    spacing: typeof spacing;
+    radius: typeof radius;
+}
+declare module "@emotion/react" {
+    interface Theme extends ShifloTheme {
     }
 }

package/dist/typings/utility.d.ts

@@ -1,9 +1,10 @@
-import { CSS } from 'basic-styled/core/typing';
+import { Interpolation } from '@emotion/serialize';
 import { default as radius } from '../theme/radius';
 import { default as spacing } from '../theme/spacing';
+import { ShifloTheme } from '../theme/typing';
 import { Properties } from 'csstype';
 export type UtilityProps = Partial<Pick<Properties, "display" | "alignItems" | "justifyContent" | "flex" | "flexWrap" | "flexDirection" | "flexGrow" | "flexFlow" | "flexBasis" | "flexShrink" | "border" | "borderTop" | "borderBottom" | "borderRight" | "borderLeft"> & Record<"m" | "mt" | "mb" | "mr" | "ml" | "p" | "pt" | "pb" | "pl" | "pr" | "gap", keyof typeof spacing> & Record<"br" | "brtl" | "brtr" | "brml" | "brmr", keyof typeof radius>> & {
-    css?: CSS;
+    css?: Interpolation<ShifloTheme>;
 };
 export type RecursionPath<T, Prefix extends string = ""> = Exclude<{
     [K in keyof T & (string | number)]: T[K] extends object ? `${Prefix}${K}` | RecursionPath<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;

package/dist/utils/getUtilityProps.mjs

@@ -12,15 +12,15 @@ function Q({
   justifyContent: b,
   alignItems: d,
   m: o,
-  mt: R,
-  mr: u,
+  mt: u,
+  mr: R,
   mb: p,
-  ml: h,
-  p: m,
-  pt: L,
-  pr: T,
-  pb: r,
-  pl: B,
+  ml: m,
+  p: L,
+  pt: T,
+  pr: h,
+  pb: B,
+  pl: r,
   border: P,
   borderTop: U,
   borderBottom: q,
@@ -34,7 +34,7 @@ function Q({
   gap: K
 }) {
   const i = {};
-  return g && Object.assign(i, { display: g }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), o && Object.assign(i, { margin: s[o] }), R && Object.assign(i, { marginTop: s[R] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), m && Object.assign(i, { padding: s[m] }), L && Object.assign(i, { paddingTop: s[L] }), r && Object.assign(i, { paddingBottom: s[r] }), B && Object.assign(i, { paddingLeft: s[B] }), T && Object.assign(i, { paddingRight: s[T] }), K && Object.assign(i, { gap: s[K] }), P && Object.assign(i, { border: P }), U && Object.assign(i, { borderTop: U }), q && Object.assign(i, { borderBottom: q }), v && Object.assign(i, { borderRight: v }), y && Object.assign(i, { borderLeft: y }), z && Object.assign(i, { borderRadius: a[z] }), A && Object.assign(i, { borderTopLeftRadius: a[A] }), E && Object.assign(i, { borderTopRightRadius: a[E] }), H && Object.assign(i, { borderBottomLeftRadius: a[H] }), J && Object.assign(i, { borderBottomRightRadius: a[J] }), i;
+  return g && Object.assign(i, { display: g }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), o && Object.assign(i, { margin: s[o] }), u && Object.assign(i, { marginTop: s[u] }), p && Object.assign(i, { marginBottom: s[p] }), m && Object.assign(i, { marginLeft: s[m] }), R && Object.assign(i, { marginRight: s[R] }), L && Object.assign(i, { padding: s[L] }), T && Object.assign(i, { paddingTop: s[T] }), B && Object.assign(i, { paddingBottom: s[B] }), r && Object.assign(i, { paddingLeft: s[r] }), h && Object.assign(i, { paddingRight: s[h] }), K && Object.assign(i, { gap: s[K] }), P && Object.assign(i, { border: P }), U && Object.assign(i, { borderTop: U }), q && Object.assign(i, { borderBottom: q }), v && Object.assign(i, { borderRight: v }), y && Object.assign(i, { borderLeft: y }), z && Object.assign(i, { borderRadius: a[z] }), A && Object.assign(i, { borderTopLeftRadius: a[A] }), E && Object.assign(i, { borderTopRightRadius: a[E] }), H && Object.assign(i, { borderBottomLeftRadius: a[H] }), J && Object.assign(i, { borderBottomRightRadius: a[J] }), i;
 }
 export {
   Q as default

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { default as getObjectPaths } from './getObjectPaths';
+export { default as getUtilityProps } from './getUtilityProps';
+export { default as getValueByPath } from './getValueByPath';

package/dist/utils/index.mjs

@@ -0,0 +1,8 @@
+import { default as a } from "./getObjectPaths.mjs";
+import { default as r } from "./getUtilityProps.mjs";
+import { default as l } from "./getValueByPath.mjs";
+export {
+  a as getObjectPaths,
+  r as getUtilityProps,
+  l as getValueByPath
+};