@loword/loword-design-system 0.0.7 → 0.0.9

package/src/styles/slider.css

@@ -1,65 +1,69 @@
-.ld-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  pointer-events: none;
-}
+@layer components {
+  .ld-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    pointer-events: none;
+  }
 
-.ld-slider-thumb::-webkit-slider-runnable-track {
-  background: transparent;
-}
+  .ld-slider-thumb::-webkit-slider-runnable-track {
+    background: transparent;
+  }
 
-.ld-slider-thumb::-moz-range-track {
-  background: transparent;
-}
+  .ld-slider-thumb::-moz-range-track {
+    background: transparent;
+  }
 
-.ld-slider-thumb::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: var(--color-lb500);
-  border: 2px solid white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
-  pointer-events: auto;
-}
+  .ld-slider-thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-lb500);
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    transition:
+      transform 150ms ease-out,
+      box-shadow 150ms ease-out;
+    pointer-events: auto;
+  }
 
-.ld-slider-thumb::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 2px 8px rgba(104, 145, 248, 0.4);
-}
+  .ld-slider-thumb::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 2px 8px rgba(104, 145, 248, 0.4);
+  }
 
-.ld-slider-thumb::-webkit-slider-thumb:active {
-  transform: scale(1.25);
-}
+  .ld-slider-thumb::-webkit-slider-thumb:active {
+    transform: scale(1.25);
+  }
 
-.ld-slider-thumb::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: var(--color-lb500);
-  border: 2px solid white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  pointer-events: auto;
-}
+  .ld-slider-thumb::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-lb500);
+    border: 2px solid white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    pointer-events: auto;
+  }
 
-.ld-slider-thumb:disabled::-webkit-slider-thumb {
-  background-color: var(--color-mono300);
-  cursor: not-allowed;
-}
+  .ld-slider-thumb:disabled::-webkit-slider-thumb {
+    background-color: var(--color-mono300);
+    cursor: not-allowed;
+  }
 
-.ld-slider-thumb:disabled::-moz-range-thumb {
-  background-color: var(--color-mono300);
-  cursor: not-allowed;
-}
+  .ld-slider-thumb:disabled::-moz-range-thumb {
+    background-color: var(--color-mono300);
+    cursor: not-allowed;
+  }
 
-.ld-slider-thumb-active::-webkit-slider-thumb {
-  pointer-events: auto;
-}
+  .ld-slider-thumb-active::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
 
-.ld-slider-thumb-inactive::-webkit-slider-thumb {
-  pointer-events: none;
+  .ld-slider-thumb-inactive::-webkit-slider-thumb {
+    pointer-events: none;
+  }
 }

package/dist/components/Form/Form.d.ts

@@ -1,21 +0,0 @@
-import { type ReactNode } from 'react';
-import { type FieldValues, type SubmitHandler, type SubmitErrorHandler, type UseFormReturn } from 'react-hook-form';
-interface FormCommonProps<T extends FieldValues> {
-    methods: UseFormReturn<T>;
-    children: ReactNode;
-    className?: string;
-    id?: string;
-    onError?: SubmitErrorHandler<T>;
-}
-interface FormProps<T extends FieldValues> extends FormCommonProps<T> {
-    onSubmit: SubmitHandler<T>;
-}
-interface NativeFormProps<T extends FieldValues> extends FormCommonProps<T> {
-    action?: string;
-    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
-    onSubmit: (data: T) => Promise<void> | void;
-}
-declare const Form: <T extends FieldValues>({ methods, onSubmit, onError, className, children, id, }: FormProps<T>) => import("react/jsx-runtime").JSX.Element;
-declare const NativeForm: <T extends FieldValues>({ methods, method, action, onSubmit, className, children, id, }: NativeFormProps<T>) => import("react/jsx-runtime").JSX.Element;
-export { Form, NativeForm };
-//# sourceMappingURL=Form.d.ts.map

package/dist/components/Form/Form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AAEzB,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW;IAC7C,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CACjC;AAED,UAAU,SAAS,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5B;AAED,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,EAAE,0DAOlC,SAAS,CAAC,CAAC,CAAC,4CAYd,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAAE,iEAQxC,eAAe,CAAC,CAAC,CAAC,4CAwBpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Form/FormErrorMessage.d.ts

@@ -1,9 +0,0 @@
-interface FormErrorMessageProps {
-    id?: string;
-    error: string;
-    disabled?: boolean;
-    className?: string;
-}
-declare const FormErrorMessage: ({ id, error, disabled, className, }: FormErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
-export default FormErrorMessage;
-//# sourceMappingURL=FormErrorMessage.d.ts.map

package/dist/components/Form/FormErrorMessage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormErrorMessage.tsx"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,qCAKvB,qBAAqB,4CAcvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/Form/FormErrorMessage.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import cn from '../../utils/cn.js';
-const FormErrorMessage = ({ id, error, disabled = false, className, }) => {
-    return (_jsx("div", { id: id, role: "alert", className: cn('text-red500 display12 bold absolute bottom-1 right-2', error && !disabled ? 'error-show' : 'error-hide', className), children: error && `*${error}` }));
-};
-export default FormErrorMessage;

package/dist/components/Form/FormField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,iBAAiB,CAAC;AAEzB,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,UAAU,oBAAoB,CAAC,MAAM,GAAG,GAAG;IACzC,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;QAC5B;;;WAGG;QACH,QAAQ,EAAE,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,+BAA+B;QAC/B,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;QAC5C,iDAAiD;QACjD,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,cAAc,CAAC,MAAM,GAAG,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,GAAI,MAAM,GAAG,GAAG,EAAG,iEAO/B,cAAc,CAAC,MAAM,CAAC,cAyCxB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDAnchor/AnchorBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnchorBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAnchor/AnchorBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAmBf,UAAU,SAAS;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAsDD,eAAO,MAAM,UAAU;kBA5HF,SAAS;iCAwEM;QAAE,UAAU,CAAC,EAAE,oBAAoB,CAAA;KAAE;qCAgCjC;QAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAAE;CAwBpE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDAnchor/AnchorBase.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState, } from 'react';
-const AnchorContext = createContext(null);
-const useAnchorContext = () => {
-    const anchorContext = useContext(AnchorContext);
-    if (!anchorContext)
-        throw new Error('LDAnchor 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
-    return anchorContext;
-};
-const Root = (props) => {
-    const [index, setIndex] = useState(0);
-    const sectionRefs = useRef(Array(props.sections.length).fill(null));
-    const moveToSection = (targetIndex) => {
-        setIndex(targetIndex);
-        sectionRefs.current?.[targetIndex]?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-        });
-    };
-    useEffect(() => {
-        sectionRefs.current = Array.from({ length: props.sections.length }, (_, idx) => sectionRefs.current[idx] ?? null);
-    }, [props.sections.length]);
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    const index = sectionRefs.current.indexOf(entry.target);
-                    setIndex(index);
-                }
-            });
-        }, {
-            threshold: 0.5,
-        });
-        sectionRefs.current.forEach((ref) => {
-            if (ref) {
-                observer.observe(ref);
-            }
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, [props.sections.length]);
-    return (_jsx(AnchorContext.Provider, { value: {
-            targets: props.targets,
-            sections: props.sections,
-            index,
-            sectionRefs,
-            moveToSection,
-        }, children: props.children }));
-};
-const Navigation = ({ classNames }) => {
-    const { targets, index, moveToSection } = useAnchorContext();
-    return (_jsx("nav", { className: classNames?.root, children: targets.map((target, idx) => {
-            const isActive = idx === index;
-            return (_jsxs("div", { className: "flex flex-col items-end", children: [_jsxs("button", { className: classNames?.item, "aria-current": isActive ? 'true' : undefined, onClick: () => moveToSection(idx), children: [_jsx("span", { "data-active": isActive, className: classNames?.label, children: target }), _jsx("span", { "data-active": isActive, className: classNames?.dot })] }), idx < targets.length - 1 && (_jsx("span", { "data-active": idx + 1 === index, className: classNames?.line }))] }, `${target}_${idx}`));
-        }) }));
-};
-const Sections = ({ sectionClassName }) => {
-    const { sections, sectionRefs } = useAnchorContext();
-    return (_jsx(_Fragment, { children: sections.map((item, idx) => (_jsx("section", { ref: (el) => {
-                sectionRefs.current[idx] = el;
-            }, className: sectionClassName, children: item }, `section_content_${idx}`))) }));
-};
-export const AnchorBase = {
-    Root,
-    Navigation,
-    Sections,
-};
-export default AnchorBase;

package/dist/components/LDAnchor/LDAnchor.d.ts

@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react';
-export interface LDAnchorProps {
-    targets: string[];
-    sections: ReactNode[];
-    className?: string;
-    navigationClassName?: string;
-}
-declare const LDAnchor: (props: LDAnchorProps) => import("react/jsx-runtime").JSX.Element;
-export default LDAnchor;
-//# sourceMappingURL=LDAnchor.d.ts.map

package/dist/components/LDAnchor/LDAnchor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LDAnchor.d.ts","sourceRoot":"","sources":["../../../src/components/LDAnchor/LDAnchor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAqBrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDAnchor/LDAnchor.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from '../../utils/cn.js';
-import AnchorBase from './AnchorBase.js';
-const LDAnchor = (props) => {
-    return (_jsx(AnchorBase.Root, { targets: props.targets, sections: props.sections, children: _jsxs("div", { className: cn('relative flex flex-col gap-sm', props.className), children: [_jsx(AnchorBase.Navigation, { classNames: {
-                        root: cn('fixed left-0 top-1/2 -translate-y-1/2 flex flex-col', props.navigationClassName),
-                        item: 'flex flex-row items-center justify-between cursor-pointer w-full',
-                        label: 'flex items-center px-md text-lb100 ld-transition data-[active=true]:text-lb500',
-                        dot: 'size-2 rounded-full bg-lb100 outline-lb500 ld-transition data-[active=true]:bg-transparent data-[active=true]:outline-3',
-                        line: 'h-20 w-0.5 mr-0.75 bg-lb100 ld-transition data-[active=true]:bg-lb500',
-                    } }), _jsx(AnchorBase.Sections, { sectionClassName: "flex flex-col rounded-md px-md py-sm" })] }) }));
-};
-export default LDAnchor;

package/dist/components/LDInput/FormInput.d.ts

@@ -1,15 +0,0 @@
-import { type Ref } from 'react';
-import { type RegisterOptions } from 'react-hook-form';
-import { type LDInputProps } from './LDInput.js';
-interface FormInputProps extends Omit<LDInputProps, 'name' | 'color' | 'onChange' | 'value' | 'onBlur'> {
-    name: string;
-    options?: RegisterOptions;
-    ref?: Ref<HTMLInputElement>;
-    customErrorMessage?: string;
-    isHiddenErrorMessage?: boolean;
-    errorClassName?: string;
-    showEditIcon?: boolean;
-}
-declare const FormInput: ({ name, options, variant, size, block, disabled, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, showEditIcon, rightAddon, ...props }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
-export default FormInput;
-//# sourceMappingURL=FormInput.d.ts.map

package/dist/components/LDInput/FormInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/FormInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAgB,EAAE,KAAK,YAAY,EAAa,MAAM,WAAW,CAAC;AAMlE,UAAU,cAAe,SAAQ,IAAI,CACnC,YAAY,EACZ,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CACnD;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,sJAchB,cAAc,4CA6EhB,CAAC;AAEF,eAAe,SAAS,CAAC"}