@edu-tosel/design 1.0.60 → 1.0.62

package/widget/template/Input/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../../util";
+import Obstacle from "../Obstacle";
+import Form from "./Form";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+function Input({ state, onKeyDown, placeholder, option }) {
+    const { width, disabled } = option ?? {};
+    const [value, setValue] = state;
+    const id = useId();
+    const container = {
+        positions: "relative",
+        width: `${widthSize[width ?? "xs"]} h-8`,
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 text-xs",
+        sizes: "w-full h-full",
+        paddings: "pl-4",
+        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
+        effect: `transition-all`,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+}
+Input.Form = Form;
+export default Input;

package/widget/template/Label.d.ts

@@ -1,7 +1,7 @@
-import { HTMLLabelElement } from "../../interface";
-declare function Label({ title, options }: Omit<HTMLLabelElement, "onClick">): import("react/jsx-runtime").JSX.Element;
+import { LabelWidget } from "../../interface";
+declare function Label({ title, option }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, hoverTitle, onClick, options, }: Omit<HTMLLabelElement, "hoverState"> & {
+    var Button: ({ title, hoverTitle, onClick, option, }: Omit<LabelWidget, "hoverState"> & {
         hoverTitle?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 }

package/widget/template/Label.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import LabelDesign from "../design/Label.design";
-function Label({ title, options }) {
+function Label({ title, option }) {
     const [hover, setHover] = useState(false);
-    return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], options: { ...options, width: "sm", height: "xs" } }));
+    return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], option: { ...option, width: "sm", height: "xs" } }));
 }
-function Button({ title, hoverTitle, onClick, options, }) {
+function Button({ title, hoverTitle, onClick, option, }) {
     const [hover, setHover] = useState(false);
-    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], options: {
-            ...options,
-            width: options?.width ?? "md",
-            height: options?.height ?? "sm",
+    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], option: {
+            ...option,
+            width: option?.width ?? "md",
+            height: option?.height ?? "sm",
         } }));
 }
 Label.Button = Button;

package/widget/{Obstacle.d.ts → template/Obstacle.d.ts}

@@ -1,4 +1,4 @@
-import { Disabled } from "../interface";
+import { Disabled } from "../../interface";
 export default function Obstacle({ disabled }: {
     disabled?: Disabled;
 }): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/{Obstacle.js → template/Obstacle.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
+import { cn } from "../../util";
 export default function Obstacle({ disabled }) {
     const obstacle = {
         positions: "absolute",

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
-import { HTMLSelectElement } from "../../../interface";
-export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+import { SelectWidget } from "../../../interface";
+export default function SelectLG<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -14,7 +14,7 @@ const heightSize = {
     xs: "h-6.5",
     sm: "h-9",
 };
-export default function SelectLG({ state, selectOptions, placeholder, options, }) {
+export default function SelectLG({ state, selectOptions, placeholder, option, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -58,7 +58,7 @@ export default function SelectLG({ state, selectOptions, placeholder, options, }
     };
     const button = {
         displays: "flex items-center",
-        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "sm"]}`,
+        sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
         styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
         shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
@@ -70,7 +70,7 @@ export default function SelectLG({ state, selectOptions, placeholder, options, }
     const body = {
         positions: "absolute z-30",
         displays: "flex flex-col gap-1",
-        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-40`,
+        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-40`,
         paddings: "p-2",
         styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
     };

package/widget/template/Select/Select.d.ts

@@ -1,2 +1,2 @@
-import { HTMLSelectElement } from "../../../interface";
-export default function Select<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+import { SelectWidget } from "../../../interface";
+export default function Select<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.js

@@ -13,7 +13,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-export default function Select({ state, selectOptions, placeholder, options, }) {
+export default function Select({ state, selectOptions, placeholder, option, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -56,7 +56,7 @@ export default function Select({ state, selectOptions, placeholder, options, })
     };
     const button = {
         displays: "flex items-center",
-        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "xs"]}`,
+        sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "xs"]}`,
         styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
         shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
@@ -68,7 +68,7 @@ export default function Select({ state, selectOptions, placeholder, options, })
     const body = {
         positions: "absolute z-30",
         displays: "flex flex-col gap-1",
-        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-23.75`,
+        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-23.75`,
         paddings: "pl-1 py-1",
         styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
     };

package/widget/template/Switch/Handle.d.ts

@@ -1,2 +1,2 @@
 import { SwitchProps } from "../../../interface";
-export default function Handle<T>({ state, values, options, }: Omit<SwitchProps<T>, "display">): import("react/jsx-runtime").JSX.Element;
+export default function Handle<T>({ state, values, option, }: Omit<SwitchProps<T>, "display">): import("react/jsx-runtime").JSX.Element;

package/widget/template/Switch/Handle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, gradient } from "../../../util";
-export default function Handle({ state, values, options, }) {
-    const { className } = options ?? {};
+export default function Handle({ state, values, option, }) {
+    const { className } = option ?? {};
     const valueIndex = values?.indexOf(state?.[0]);
     const container = {
         positions: "relative",

package/widget/template/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
-import { SwitchProps } from "../../../interface/widget";
-declare function Switch<T>({ state, values, display, options }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
+import { SwitchProps } from "../../../interface";
+declare function Switch<T>({ state, values, display, option }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Switch;

package/widget/template/Switch/Switch.js

@@ -20,8 +20,8 @@ const textSize = {
     md: "text-sm",
     lg: "text-base",
 };
-function Switch({ state, values, display, options }) {
-    const { text, size, className } = options ?? {};
+function Switch({ state, values, display, option }) {
+    const { text, size, className } = option ?? {};
     const container = {
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],

package/widget/template/Toggle.d.ts

@@ -0,0 +1,6 @@
+import { Widget, State } from "../../interface";
+export interface HTMLToggleElement extends Widget {
+    state: State<boolean>;
+    labels?: [[true, string], [false, string]];
+}
+export default function Toggle({ state: [chekced, setChecked], labels, option, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/widget/{Toggle.js → template/Toggle.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../util";
-export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
-    const { disabled, className } = options ?? {};
+import { cn } from "../../util";
+export default function Toggle({ state: [chekced, setChecked], labels, option, }) {
+    const { disabled, className } = option ?? {};
     const container = {
         displays: "flex items-center",
         sizes: "h-6",

package/card/template/ProgressCard.d.ts

@@ -1,10 +0,0 @@
-import { Titles } from "../../interface";
-import { Theme } from "../../interface";
-type Step = [string, boolean];
-interface ProgressCardProps {
-    titles: Titles;
-    steps: Step[];
-    theme?: Theme;
-}
-export default function ProgressCard({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/interface/HTMLElement.d.ts

@@ -1,56 +0,0 @@
-import { Disabled, OnClick, Size, State } from "./Property";
-export declare const HTMLElementType: {
-    readonly TEXT: "text";
-    readonly BUTTON: "button";
-    readonly INPUT: "input";
-    readonly SELECT: "select";
-    readonly TOGGLE: "toggle";
-};
-export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
-export interface HTMLElement {
-    options?: {
-        className?: string;
-        width?: Size;
-        height?: Size;
-        background?: string;
-        text?: string;
-        disabled?: Disabled;
-        rounded?: string;
-    };
-}
-export interface HTMLLabelElement extends HTMLElement {
-    title: string;
-    hoverState?: State<boolean>;
-    onClick?: OnClick;
-}
-export type SelectOption<T> = [T, string];
-export interface HTMLSelectElement<T> extends HTMLElement {
-    state: State<T>;
-    selectOptions?: SelectOption<T>[];
-    placeholder?: string;
-}
-type HTMLInputType = "text" | "password" | "date" | "email" | "phone" | "number";
-export interface HTMLInput extends HTMLElement {
-    state: State<string> | State<string | undefined>;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    placeholder?: string;
-    flag?: boolean;
-    type?: HTMLInputType;
-    label?: HTMLLabelElement;
-}
-export type ColorType = "red" | "blue" | "green";
-export interface HTMLCheckBoxElement extends HTMLElement {
-    state: State<boolean>;
-    labels: string;
-    color: ColorType;
-}
-export interface HTMLElementFrame {
-    title: string;
-    type: HTMLElementType;
-    state: State<any>;
-    selectOptions?: SelectOption<string | number>[];
-    labels?: [string | boolean, string][];
-    disabled?: Disabled;
-    onClick?: OnClick;
-}
-export {};

package/interface/HTMLElement.js

@@ -1,7 +0,0 @@
-export const HTMLElementType = {
-    TEXT: "text",
-    BUTTON: "button",
-    INPUT: "input",
-    SELECT: "select",
-    TOGGLE: "toggle",
-};

package/layout/template/Dashboard.d.ts

@@ -1,22 +0,0 @@
-import Layout from "../widget/dashboard/Layout";
-import MyPageLayout from "../widget/dashboard/mypage/Layout";
-import Profile from "../widget/dashboard/mypage/Profile";
-declare const Dashboard: {
-    Layout: typeof Layout;
-};
-declare const MyPage: {
-    Layout: typeof MyPageLayout;
-    Card: {
-        Profile: typeof Profile;
-        Navigate: {
-            Academy: ({ onClick }: {
-                onClick: import("../../interface").OnClick;
-            }) => import("react/jsx-runtime").JSX.Element;
-            Payment: ({ onClick }: {
-                onClick: import("../../interface").OnClick;
-            }) => import("react/jsx-runtime").JSX.Element;
-        };
-    };
-};
-export { default as buttonClassNames } from "./../widget/dashboard/buttonClassNames";
-export { Dashboard, MyPage };

package/layout/template/Dashboard.js

@@ -1,13 +0,0 @@
-import Layout from "../widget/dashboard/Layout";
-import MyPageLayout from "../widget/dashboard/mypage/Layout";
-import Navigate from "../widget/dashboard/mypage/Navigate";
-import Profile from "../widget/dashboard/mypage/Profile";
-const Dashboard = {
-    Layout,
-};
-const MyPage = {
-    Layout: MyPageLayout,
-    Card: { Profile, Navigate },
-};
-export { default as buttonClassNames } from "./../widget/dashboard/buttonClassNames";
-export { Dashboard, MyPage };

package/layout/widget/dashboard/Navigation.d.ts

@@ -1,3 +0,0 @@
-export declare function NavigationContainer({ children, }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/widget/CheckBox.d.ts

@@ -1,2 +0,0 @@
-import { HTMLCheckBoxElement } from "../interface";
-export default function Checkbox({ state: [checked, setChecked], labels, options, color, }: HTMLCheckBoxElement): import("react/jsx-runtime").JSX.Element;

package/widget/DatePicker.d.ts

@@ -1,3 +0,0 @@
-import { HTMLInput } from "../interface";
-import "react-datepicker/dist/react-datepicker.css";
-export default function DatePicker({ options }: HTMLInput): import("react/jsx-runtime").JSX.Element;

package/widget/EmailInput.d.ts

@@ -1,2 +0,0 @@
-import { HTMLInput } from "../interface";
-export default function EmailInput({ state, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;

package/widget/Toggle.d.ts

@@ -1,6 +0,0 @@
-import { HTMLElement, State } from "../interface";
-export interface HTMLToggleElement extends HTMLElement {
-    state: State<boolean>;
-    labels?: [[true, string], [false, string]];
-}
-export default function Toggle({ state: [chekced, setChecked], labels, options, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/widget/design/Tag.design.js

@@ -1 +0,0 @@
-"use strict";

package/widget/template/Input.d.ts

@@ -1,6 +0,0 @@
-import { HTMLInput } from "../../interface";
-declare function Input({ state, onKeyDown, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
-declare namespace Input {
-    var LG: ({ state, placeholder, flag, type, label }: HTMLInput) => import("react/jsx-runtime").JSX.Element;
-}
-export default Input;

package/widget/template/Input.js

@@ -1,68 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState, useRef } from "react";
-import { cn, gradient } from "../../util";
-import Obstacle from "../Obstacle";
-import Label from "./Label";
-const widthSize = {
-    xs: "w-28",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-};
-function Input({ state, onKeyDown, placeholder, options }) {
-    const { width, disabled } = options ?? {};
-    const [value, setValue] = state;
-    const id = useId();
-    const container = {
-        positions: "relative",
-        width: `${widthSize[width ?? "xs"]} h-8`,
-        displays: "flex items-center",
-    };
-    const body = {
-        styles: "rounded-md bg-slate-200 text-xs",
-        sizes: "w-full h-full",
-        paddings: "pl-4",
-        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
-        effect: `transition-all`,
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
-}
-function LG({ state, placeholder, flag, type, label }) {
-    const [value, setValue] = state;
-    const [onFocus, setOnFocus] = useState(false);
-    const ref = useRef(null);
-    const container = {
-        positions: "relative",
-    };
-    const placeholderBox = {
-        positions: "absolute left-5",
-        styles: "duration-300",
-        fonts: "leading-none text-gray-medium",
-        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
-    };
-    const inputBox = {
-        sizes: "w-102.5 h-13.5",
-        paddings: `${placeholder && "pt-3"} pl-5`,
-        fonts: "text-sm",
-        background: flag === true
-            ? "bg-green-dark/10"
-            : flag === false
-                ? "bg-crimson-burgundy/10 text-crimson-burgundy"
-                : "bg-gray-light",
-        styles: "bg-gray-light rounded-md outline-none",
-        animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, options: {
-                    width: "sm",
-                    height: "xs",
-                    className: "absolute top-3.5 right-3.75",
-                    background: label.options?.background ?? gradient.bg.greenToRed,
-                    text: label.options?.text ?? "text-white",
-                    ...label.options,
-                } }))] }));
-}
-Input.LG = LG;
-export default Input;