@ceed/cds 0.0.185 → 0.0.187-treeshaking.0

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,240 @@
+import React__default from 'react';
+import { extendTheme, inputClasses, checkboxClasses, CssVarsProvider, CssBaseline } from '@mui/joy';
+export { CssBaseline, extendTheme } from '@mui/joy';
+
+const colorScheme = {
+    palette: {
+        danger: {
+            "50": "#FEF3F2",
+            "100": "#FDE6E5",
+            "200": "#FBC7C4",
+            "300": "#F89E99",
+            "400": "#F46E66",
+            "500": "#DC0D00",
+            "600": "#AB0F00",
+            "700": "#791000",
+            "800": "#430A0A",
+            "900": "#240505",
+        },
+        neutral: {
+            "50": "#FAFBFC",
+            "100": "#F3F5F7",
+            "200": "#EBECF0",
+            "300": "#D1D5DB",
+            "400": "#A2AAB8",
+            "500": "#5E6C83",
+            "600": "#505E79",
+            "700": "#253858",
+            "800": "#071B36",
+            "900": "#0B0D0E",
+        },
+        primary: {
+            "50": "#F2F7FE",
+            "100": "#E8F0FD",
+            "200": "#CCDFFC",
+            "300": "#9DC1F9",
+            "400": "#4D8EF3",
+            "500": "#015DEE",
+            "600": "#0154D6",
+            "700": "#0141A7",
+            "800": "#00255F",
+            "900": "#000F26",
+        },
+        warning: {
+            "50": "#FEF8F2",
+            "100": "#FEF1E5",
+            "200": "#FCE1C4",
+            "300": "#FABD7F",
+            "400": "#F57C00",
+            "500": "#AF5100",
+            "600": "#843600",
+            "700": "#672600",
+            "800": "#421400",
+            "900": "#1d1002",
+        },
+    },
+};
+const defaultTheme = extendTheme({
+    cssVarPrefix: "ceed",
+    spacing: 4,
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1280,
+            xl: 1920,
+        },
+    },
+    fontFamily: {
+        display: '"Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")',
+    },
+    typography: {
+        "marketing-lg": {
+            color: "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
+            fontFamily: 'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
+            fontSize: "var(--ceed-fontSize-marketing-lg, 2.625rem)",
+            fontWeight: "var(--ceed-fontWeight-lg, 600)",
+            letterSpacing: "-0.025em",
+            lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
+        },
+        "marketing-md": {
+            color: "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
+            fontFamily: 'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
+            fontSize: "var(--ceed-fontSize-marketing-md, 2rem)",
+            fontWeight: "var(--ceed-fontWeight-lg, 600)",
+            letterSpacing: "-0.025em",
+            lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
+        },
+        "marketing-sm": {
+            color: "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
+            fontFamily: 'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
+            fontSize: "var(--ceed-fontSize-marketing-sm, 1.5rem)",
+            fontWeight: "var(--ceed-fontWeight-md, 500)",
+            letterSpacing: "-0.025em",
+            lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
+        },
+    },
+    colorSchemes: {
+        light: colorScheme,
+        dark: colorScheme,
+    },
+    components: {
+        DatePicker: {
+            defaultProps: {
+                size: "md",
+            },
+            styleOverrides: {
+                root: {
+                    [`.${inputClasses.root}`]: {
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        "font-family": "monospace",
+                    },
+                },
+            },
+        },
+        DateRangePicker: {
+            defaultProps: {
+                size: "md",
+            },
+            styleOverrides: {
+                root: {
+                    [`.${inputClasses.root}`]: {
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        "font-family": "monospace",
+                    },
+                },
+            },
+        },
+        MonthPicker: {
+            defaultProps: {
+                size: "md",
+            },
+            styleOverrides: {
+                root: {
+                    [`.${inputClasses.root}`]: {
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        "font-family": "monospace",
+                    },
+                },
+            },
+        },
+        MonthRangePicker: {
+            defaultProps: {
+                size: "md",
+            },
+            styleOverrides: {
+                root: {
+                    [`.${inputClasses.root}`]: {
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        "font-family": "monospace",
+                    },
+                },
+            },
+        },
+        PercentageInput: {
+            defaultProps: {
+                size: "md",
+            },
+            styleOverrides: {
+                root: {
+                    [`.${inputClasses.root}`]: {
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        "font-family": "monospace",
+                    },
+                },
+            },
+        },
+        JoyTypography: {
+            defaultProps: {
+                levelMapping: {
+                    "marketing-lg": "div",
+                    "marketing-md": "div",
+                    "marketing-sm": "div",
+                },
+            },
+        },
+        JoyTable: {
+            defaultProps: {
+                size: "sm",
+                borderAxis: "bothBetween",
+            },
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    "--TableRow-stripeBackground": theme.palette.background.level1,
+                    "--TableCell-selectedBackground": theme.palette.background.level2,
+                    "--TableRow-hoverBackground": theme.palette.background.level3,
+                    "& tbody tr:has([type=checkbox]:not(:checked)) th": {
+                        "--TableCell-headBackground": "transparent",
+                    },
+                    "& tbody tr:has([type=checkbox]:checked):hover th": {
+                        "--TableCell-headBackground": "var(--TableRow-hoverBackground)",
+                    },
+                    [`& tbody tr:has([type=checkbox]:checked):not(:hover) th`]: {
+                        "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
+                    },
+                    [`& tbody tr:has([type=checkbox]:checked):not(:hover) td`]: {
+                        "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
+                    },
+                    [`& .${checkboxClasses.root}`]: {
+                        verticalAlign: "middle",
+                    },
+                }),
+            },
+        },
+        JoyTooltip: {
+            defaultProps: {
+                size: "sm",
+                placement: "top",
+            },
+        },
+        JoyAvatar: {
+            styleOverrides: {
+                root: ({ ownerState }) => ({
+                    ...(ownerState.size === "xs" && {
+                        width: "24px",
+                        height: "24px",
+                        fontSize: "12px",
+                    }),
+                }),
+            },
+        },
+        JoyDialogTitle: {
+            styleOverrides: {
+                root: {
+                    fontWeight: "var(--ceed-fontWeight-xl, 700)",
+                },
+            },
+        },
+    },
+});
+function ThemeProvider(props) {
+    const theme = props.theme || defaultTheme;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(CssVarsProvider, { theme: theme },
+            React__default.createElement(CssBaseline, null),
+            props.children)));
+}
+ThemeProvider.displayName = "ThemeProvider";
+
+export { ThemeProvider, defaultTheme as theme };

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

@@ -1,3 +1,3 @@
-import { ThemeProvider } from "./ThemeProvider";
-export * from "./ThemeProvider";
+import { ThemeProvider } from "./ThemeProvider.js";
+export * from "./ThemeProvider.js";
 export default ThemeProvider;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Tooltip as Tooltip$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionTooltip = motion(Tooltip$1);
+const Tooltip = (props) => {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React__default.createElement(MotionTooltip, { ...props });
+};
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };

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

@@ -1,3 +1,3 @@
-import { Tooltip } from "./Tooltip";
-export * from "./Tooltip";
+import { Tooltip } from "./Tooltip.js";
+export * from "./Tooltip.js";
 export default Tooltip;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,5 @@
+import { Tooltip } from './Tooltip.js';
+
+
+
+export { Tooltip, Tooltip as default };

package/dist/components/Typography/Typography.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Typography as Typography$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionTypography = motion(Typography$1);
+const Typography = (props) => {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React__default.createElement(MotionTypography, { ...props });
+};
+Typography.displayName = "Typography";
+
+export { Typography };

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

@@ -1,3 +1,3 @@
-import { Typography } from "./Typography";
-export * from "./Typography";
+import { Typography } from "./Typography.js";
+export * from "./Typography.js";
 export default Typography;

package/dist/components/Typography/index.js

@@ -0,0 +1,5 @@
+import { Typography } from './Typography.js';
+
+
+
+export { Typography, Typography as default };

package/dist/components/Uploader/Uploader.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { ComponentProps } from "react";
 type UserUpload = {
     id: string | number;
     name: string;
     size?: number;
 };
-declare const Uploader: React.MemoExoticComponent<(props: {
+declare const _Uploader: React.MemoExoticComponent<(props: {
     onChange?: ((event: {
         target: {
-            name?: string | undefined;
+            name?: string;
             value: File[];
         };
     }) => void) | undefined;
@@ -30,4 +30,5 @@ declare const Uploader: React.MemoExoticComponent<(props: {
     maxFileTotalSize: number;
     uploaded?: UserUpload[] | undefined;
 }) => React.JSX.Element>;
+declare const Uploader: React.MemoExoticComponent<(props: ComponentProps<typeof _Uploader>) => React.JSX.Element>;
 export { Uploader };