@shiflo/ui 0.0.0

package/dist/components/Typography/Typography.mjs

@@ -0,0 +1,45 @@
+import { jsx as c } from "react/jsx-runtime";
+import p from "basic-styled";
+import f from "../../utils/getUtilityProps.mjs";
+import n from "../../utils/getValueByPath.mjs";
+const y = 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;
+
+  ${({ theme: { typography: o, palette: t }, variant: i, color: r, fontWeight: l, borderColor: s, ...d }) => {
+  const { fontSize: a, lineHeight: b } = o[i || "body2"], e = {
+    fontSize: a,
+    lineHeight: b,
+    fontWeight: l
+  };
+  return Object.assign(e, f(d)), s && Object.assign(e, {
+    borderColor: n(t, s)
+  }), Object.assign(e, {
+    color: n(t, r)
+  }), e;
+}};
+
+  ${({ noWrap: o }) => o ? {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+} : {}};
+
+  ${({ lineClamp: o }) => o ? {
+  display: "-webkit-box",
+  overflow: "hidden",
+  "-webkit-line-clamp": o,
+  "-webkit-box-orient": "vertical"
+} : {}};
+`;
+function u({ ref: o, variant: t = "body2", fontWeight: i = 400, ...r }) {
+  return /* @__PURE__ */ c(y, { ref: o, variant: t, fontWeight: i, ...r });
+}
+export {
+  u as default
+};

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

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

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

@@ -0,0 +1,4 @@
+import { default as Typography } from './Typography';
+import { TypographyProps } from './Typography.typing';
+export type { TypographyProps };
+export default Typography;

package/dist/components/Typography/index.mjs

@@ -0,0 +1,4 @@
+import p from "./Typography.mjs";
+export {
+  p as default
+};

package/dist/theme/GlobalStyle.d.ts

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

package/dist/theme/GlobalStyle.mjs

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "basic-styled";
+function r() {
+  return /* @__PURE__ */ t(a, { globalStyle: !0 });
+}
+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
+};

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+interface ThemeProviderProps {
+    theme: "light" | "dark";
+}
+declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
+export default ThemeProvider;

package/dist/theme/ThemeProvider.mjs

@@ -0,0 +1,20 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import m from "basic-styled/setup/createBuilder";
+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 j({ children: e, theme: o }) {
+  return /* @__PURE__ */ t(f, { theme: o === "dark" ? l : h, children: [
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(p, {}),
+    e
+  ] });
+}
+export {
+  j as default
+};

package/dist/theme/dark.d.ts

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

package/dist/theme/dark.mjs

@@ -0,0 +1,85 @@
+import a from "./radius.mjs";
+import r from "./spacing.mjs";
+import i from "./typography.mjs";
+const t = {
+  mode: "dark",
+  palette: {
+    primary: {
+      main: "#5A8BFF",
+      light: "#A5C0FF",
+      dark: "#004ECC",
+      hover: "#7EAFFF",
+      active: "#336DFF",
+      alpha: {
+        5: "rgba(90, 139, 255, 0.05)",
+        10: "rgba(90, 139, 255, 0.1)",
+        20: "rgba(90, 139, 255, 0.2)",
+        30: "rgba(90, 139, 255, 0.3)"
+      }
+    },
+    secondary: {
+      main: "#2D2F36",
+      light: "#40434A",
+      dark: "#1F2024",
+      alpha: {
+        5: "rgba(45, 47, 54, 0.05)",
+        10: "rgba(45, 47, 54, 0.1)",
+        20: "rgba(45, 47, 54, 0.2)",
+        30: "rgba(45, 47, 54, 0.3)"
+      }
+    },
+    neutral: {
+      100: "#2D2F36",
+      200: "#40434A",
+      300: "#52565D",
+      400: "#6C757D",
+      500: "#889096",
+      600: "#A5ACB3",
+      700: "#C0C7CE",
+      800: "#D5DBE0",
+      900: "#EAECEF"
+    },
+    feedback: {
+      success: {
+        light: "#508A5A",
+        main: "#6CBF73",
+        dark: "#9FD8A1"
+      },
+      warning: {
+        light: "#A47B14",
+        main: "#E5C67C",
+        dark: "#FFE59A"
+      },
+      error: {
+        light: "#8C4F4F",
+        main: "#D67C7C",
+        dark: "#F5A3A3"
+      },
+      info: {
+        light: "#446E9E",
+        main: "#74A8DD",
+        dark: "#A3CFF5"
+      }
+    },
+    common: {
+      background: "#22252A",
+      surface: "#30333A"
+    },
+    text: {
+      primary: "#EAECEF",
+      secondary: "#C0C7CE",
+      disabled: "#6C757D"
+    },
+    border: {
+      light: "#52565D",
+      main: "#6C757D",
+      dark: "#A5ACB3"
+    }
+  },
+  typography: i,
+  spacing: r,
+  radius: a
+};
+export {
+  t as default
+};

package/dist/theme/light.d.ts

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

package/dist/theme/light.mjs

@@ -0,0 +1,85 @@
+import a from "./radius.mjs";
+import F from "./spacing.mjs";
+import r from "./typography.mjs";
+const C = {
+  mode: "light",
+  palette: {
+    primary: {
+      main: "#004ECC",
+      light: "#5A8BFF",
+      dark: "#003699",
+      hover: "#336DFF",
+      active: "#003699",
+      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)"
+      }
+    },
+    secondary: {
+      main: "#F8F9FA",
+      light: "#FFFFFF",
+      dark: "#CED4DA",
+      alpha: {
+        5: "rgba(248, 249, 250, 0.05)",
+        10: "rgba(248, 249, 250, 0.1)",
+        20: "rgba(248, 249, 250, 0.2)",
+        30: "rgba(248, 249, 250, 0.3)"
+      }
+    },
+    neutral: {
+      100: "#F8F9FA",
+      200: "#E9ECEF",
+      300: "#DEE2E6",
+      400: "#BCC0C4",
+      500: "#ADB5BD",
+      600: "#6C757D",
+      700: "#495057",
+      800: "#343A40",
+      900: "#212529"
+    },
+    feedback: {
+      success: {
+        light: "#C7EFC8",
+        main: "#A3D9A5",
+        dark: "#6CBF73"
+      },
+      warning: {
+        light: "#FFF2C2",
+        main: "#FFE59A",
+        dark: "#E5C67C"
+      },
+      error: {
+        light: "#FBC7C7",
+        main: "#F5A3A3",
+        dark: "#D67C7C"
+      },
+      info: {
+        light: "#C7E0FA",
+        main: "#A3CFF5",
+        dark: "#74A8DD"
+      }
+    },
+    common: {
+      background: "#FFFFFF",
+      surface: "#FFFFFF"
+    },
+    text: {
+      primary: "#212529",
+      secondary: "#495057",
+      disabled: "#ADB5BD"
+    },
+    border: {
+      light: "#DEE2E6",
+      main: "#ADB5BD",
+      dark: "#6C757D"
+    }
+  },
+  typography: r,
+  spacing: F,
+  radius: a
+};
+export {
+  C as default
+};

package/dist/theme/radius.d.ts

@@ -0,0 +1,18 @@
+declare const radius: {
+    "100": string;
+    "150": string;
+    "200": string;
+    "250": string;
+    "300": string;
+    "350": string;
+    "400": string;
+    "450": string;
+    "500": string;
+    "550": string;
+    "600": string;
+    "650": string;
+    "700": string;
+    "750": string;
+    "800": string;
+};
+export default radius;

package/dist/theme/radius.mjs

@@ -0,0 +1,20 @@
+const p = {
+  100: "4px",
+  150: "6px",
+  200: "8px",
+  250: "10px",
+  300: "12px",
+  350: "14px",
+  400: "16px",
+  450: "18px",
+  500: "20px",
+  550: "22px",
+  600: "24px",
+  650: "26px",
+  700: "28px",
+  750: "30px",
+  800: "32px"
+};
+export {
+  p as default
+};

package/dist/theme/spacing.d.ts

@@ -0,0 +1,19 @@
+declare const spacing: {
+    "50": string;
+    "100": string;
+    "150": string;
+    "200": string;
+    "250": string;
+    "300": string;
+    "350": string;
+    "400": string;
+    "450": string;
+    "500": string;
+    "550": string;
+    "600": string;
+    "650": string;
+    "700": string;
+    "750": string;
+    "800": string;
+};
+export default spacing;

package/dist/theme/spacing.mjs

@@ -0,0 +1,21 @@
+const p = {
+  50: "2px",
+  100: "4px",
+  150: "6px",
+  200: "8px",
+  250: "10px",
+  300: "12px",
+  350: "14px",
+  400: "16px",
+  450: "18px",
+  500: "20px",
+  550: "22px",
+  600: "24px",
+  650: "26px",
+  700: "28px",
+  750: "30px",
+  800: "32px"
+};
+export {
+  p as default
+};

package/dist/theme/typing.d.ts

@@ -0,0 +1,84 @@
+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;
+                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;
+                };
+                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;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                disabled: string;
+            };
+            border: {
+                light: string;
+                main: string;
+                dark: string;
+            };
+        };
+        typography: typeof typography;
+        spacing: typeof spacing;
+        radius: typeof radius;
+    }
+}

package/dist/theme/typography.d.ts

@@ -0,0 +1,43 @@
+declare const typography: {
+    heading1: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    heading2: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    heading3: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    body1: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    body2: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    small1: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    small2: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    small3: {
+        tag: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+export default typography;

package/dist/theme/typography.mjs

@@ -0,0 +1,45 @@
+const e = {
+  heading1: {
+    tag: "h1",
+    fontSize: "24px",
+    lineHeight: "32px"
+  },
+  heading2: {
+    tag: "h2",
+    fontSize: "22px",
+    lineHeight: "30px"
+  },
+  heading3: {
+    tag: "h3",
+    fontSize: "18px",
+    lineHeight: "24px"
+  },
+  body1: {
+    tag: "div",
+    fontSize: "16px",
+    lineHeight: "20px"
+  },
+  body2: {
+    tag: "div",
+    fontSize: "14px",
+    lineHeight: "18px"
+  },
+  small1: {
+    tag: "p",
+    fontSize: "12px",
+    lineHeight: "16px"
+  },
+  small2: {
+    tag: "p",
+    fontSize: "10.5px",
+    lineHeight: "14px"
+  },
+  small3: {
+    tag: "p",
+    fontSize: "8px",
+    lineHeight: "12px"
+  }
+};
+export {
+  e as default
+};

package/dist/typings/utility.d.ts

@@ -0,0 +1,7 @@
+import { default as radius } from '../theme/radius';
+import { default as spacing } from '../theme/spacing';
+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", keyof typeof spacing> & Record<"br" | "brtl" | "brtr" | "brml" | "brmr", keyof typeof radius>>;
+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}`;
+}[keyof T & (string | number)], "primary" | "secondary">;

package/dist/typings/utility.mjs

@@ -0,0 +1 @@
+

package/dist/utils/getObjectPaths.d.ts

@@ -0,0 +1 @@
+export default function getObjectPaths<T extends object>(obj: T, prefix?: string): string[];

package/dist/utils/getObjectPaths.mjs

@@ -0,0 +1,9 @@
+function r(o, e = "") {
+  return Object.entries(o).flatMap(([n, t]) => {
+    const c = e ? `${e}.${n}` : n;
+    return t && typeof t == "object" ? r(t, c) : [c];
+  });
+}
+export {
+  r as default
+};

package/dist/utils/getUtilityProps.d.ts

@@ -0,0 +1,2 @@
+import { UtilityProps } from '../typings/utility';
+export default function getUtilityProps<T>({ display, flex, flexBasis, flexDirection, flexFlow, flexGrow, flexShrink, flexWrap, justifyContent, alignItems, m, mt, mr, mb, ml, p, pt, pr, pb, pl, border, borderTop, borderBottom, borderRight, borderLeft, br, brtl, brtr, brml, brmr }: T & UtilityProps): {};

package/dist/utils/getUtilityProps.mjs

@@ -0,0 +1,40 @@
+import g from "../theme/radius.mjs";
+import s from "../theme/spacing.mjs";
+function N({
+  display: a,
+  flex: t,
+  flexBasis: n,
+  flexDirection: c,
+  flexFlow: O,
+  flexGrow: f,
+  flexShrink: j,
+  flexWrap: e,
+  justifyContent: b,
+  alignItems: d,
+  m: R,
+  mt: o,
+  mr: u,
+  mb: p,
+  ml: h,
+  p: L,
+  pt: T,
+  pr: m,
+  pb: r,
+  pl: P,
+  border: U,
+  borderTop: q,
+  borderBottom: v,
+  borderRight: y,
+  borderLeft: z,
+  br: A,
+  brtl: B,
+  brtr: E,
+  brml: H,
+  brmr: J
+}) {
+  const i = {};
+  return a && Object.assign(i, { display: a }), 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 }), R && Object.assign(i, { margin: s[R] }), o && Object.assign(i, { marginTop: s[o] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), L && Object.assign(i, { padding: s[L] }), T && Object.assign(i, { paddingTop: s[T] }), r && Object.assign(i, { paddingRight: s[r] }), P && Object.assign(i, { paddingLeft: s[P] }), m && Object.assign(i, { paddingRight: s[m] }), U && Object.assign(i, { border: U }), q && Object.assign(i, { borderTop: q }), v && Object.assign(i, { borderBottom: v }), y && Object.assign(i, { borderRight: y }), z && Object.assign(i, { borderLeft: z }), A && Object.assign(i, { borderRadius: g[A] }), B && Object.assign(i, { borderTopLeftRadius: g[B] }), E && Object.assign(i, { borderTopRightRadius: g[E] }), H && Object.assign(i, { borderBottomLeftRadius: g[H] }), J && Object.assign(i, { borderBottomRightRadius: g[J] }), i;
+}
+export {
+  N as default
+};

package/dist/utils/getValueByPath.d.ts

@@ -0,0 +1 @@
+export default function getValueByPath<T extends object>(object: T, path?: string): string | undefined;

package/dist/utils/getValueByPath.mjs

@@ -0,0 +1,7 @@
+function i(t, e = "") {
+  if (e)
+    return e.split(".").reduce((r, u) => r && r[u], t) || e;
+}
+export {
+  i as default
+};