slick-address-kr 1.0.4 → 2.0.0

package/dist/react/index.d.cts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { d as AddressFinderOptions, e as AddressResult, K as KoreanAddressFinder } from '../address-finder-DIU0lay6.cjs';
+export { f as AddressSelectMeta } from '../address-finder-DIU0lay6.cjs';
+
+interface UseKoreanAddressResult {
+    /** 검색 UI가 그려질 요소에 연결한다 */
+    containerRef: (node: HTMLElement | null) => void;
+    /** 현재 선택된 주소. 상세주소 입력도 반영된다 */
+    address: AddressResult | null;
+    /** 필요할 때 직접 조작하기 위한 인스턴스 */
+    finder: KoreanAddressFinder | null;
+}
+/**
+ * KoreanAddressFinder를 React 생명주기에 맞춰 붙인다.
+ * 로직은 코어에 그대로 두고 마운트·언마운트와 상태 노출만 담당한다.
+ */
+declare function useKoreanAddress(options?: AddressFinderOptions): UseKoreanAddressResult;
+interface KoreanAddressFinderViewProps extends AddressFinderOptions {
+    className?: string;
+}
+/**
+ * 훅을 직접 다루지 않아도 되는 기본 컴포넌트.
+ */
+declare function KoreanAddressFinderView({ className, ...options }: KoreanAddressFinderViewProps): react.JSX.Element;
+
+export { AddressFinderOptions, AddressResult, KoreanAddressFinderView, type KoreanAddressFinderViewProps, type UseKoreanAddressResult, useKoreanAddress };

package/dist/react/index.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { d as AddressFinderOptions, e as AddressResult, K as KoreanAddressFinder } from '../address-finder-DIU0lay6.js';
+export { f as AddressSelectMeta } from '../address-finder-DIU0lay6.js';
+
+interface UseKoreanAddressResult {
+    /** 검색 UI가 그려질 요소에 연결한다 */
+    containerRef: (node: HTMLElement | null) => void;
+    /** 현재 선택된 주소. 상세주소 입력도 반영된다 */
+    address: AddressResult | null;
+    /** 필요할 때 직접 조작하기 위한 인스턴스 */
+    finder: KoreanAddressFinder | null;
+}
+/**
+ * KoreanAddressFinder를 React 생명주기에 맞춰 붙인다.
+ * 로직은 코어에 그대로 두고 마운트·언마운트와 상태 노출만 담당한다.
+ */
+declare function useKoreanAddress(options?: AddressFinderOptions): UseKoreanAddressResult;
+interface KoreanAddressFinderViewProps extends AddressFinderOptions {
+    className?: string;
+}
+/**
+ * 훅을 직접 다루지 않아도 되는 기본 컴포넌트.
+ */
+declare function KoreanAddressFinderView({ className, ...options }: KoreanAddressFinderViewProps): react.JSX.Element;
+
+export { AddressFinderOptions, AddressResult, KoreanAddressFinderView, type KoreanAddressFinderViewProps, type UseKoreanAddressResult, useKoreanAddress };

package/dist/react/index.js

@@ -0,0 +1,51 @@
+import {
+  KoreanAddressFinder
+} from "../chunk-2OLEGOFJ.js";
+
+// src/react/index.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function useKoreanAddress(options = {}) {
+  const [address, setAddress] = useState(null);
+  const [finder, setFinder] = useState(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const instanceRef = useRef(null);
+  const containerRef = useCallback((node) => {
+    if (instanceRef.current) {
+      instanceRef.current.destroy();
+      instanceRef.current = null;
+      setFinder(null);
+    }
+    if (!node) return;
+    const instance = new KoreanAddressFinder({
+      ...optionsRef.current,
+      onSelect: (selected, meta) => {
+        setAddress(selected);
+        optionsRef.current.onSelect?.(selected, meta);
+      }
+    });
+    instance.init(node);
+    instanceRef.current = instance;
+    setFinder(instance);
+  }, []);
+  useEffect(() => {
+    return () => {
+      instanceRef.current?.destroy();
+      instanceRef.current = null;
+    };
+  }, []);
+  return { containerRef, address, finder };
+}
+function KoreanAddressFinderView({
+  className,
+  ...options
+}) {
+  const { containerRef } = useKoreanAddress(options);
+  return /* @__PURE__ */ jsx("div", { className, ref: containerRef });
+}
+export {
+  KoreanAddressFinderView,
+  useKoreanAddress
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { KoreanAddressFinder } from '../address-finder';\nimport type {\n  AddressFinderOptions,\n  AddressResult,\n  AddressSelectMeta,\n} from '../types';\n\nexport interface UseKoreanAddressResult {\n  /** 검색 UI가 그려질 요소에 연결한다 */\n  containerRef: (node: HTMLElement | null) => void;\n  /** 현재 선택된 주소. 상세주소 입력도 반영된다 */\n  address: AddressResult | null;\n  /** 필요할 때 직접 조작하기 위한 인스턴스 */\n  finder: KoreanAddressFinder | null;\n}\n\n/**\n * KoreanAddressFinder를 React 생명주기에 맞춰 붙인다.\n * 로직은 코어에 그대로 두고 마운트·언마운트와 상태 노출만 담당한다.\n */\nexport function useKoreanAddress(\n  options: AddressFinderOptions = {}\n): UseKoreanAddressResult {\n  const [address, setAddress] = useState<AddressResult | null>(null);\n  const [finder, setFinder] = useState<KoreanAddressFinder | null>(null);\n\n  // 옵션이 매 렌더 새 객체로 와도 재마운트하지 않도록 최신 값만 참조한다\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // finder 상태에만 의존하면 ref가 null로 분리될 때(요소는 사라지고\n  // 컴포넌트는 유지되는 흔한 조건부 렌더 패턴) state 갱신 타이밍에\n  // 기대지 않고는 정리할 방법이 없다. 그래서 살아있는 인스턴스를\n  // ref로도 따로 들고, 콜백 ref 안에서 직접 파괴한다.\n  const instanceRef = useRef<KoreanAddressFinder | null>(null);\n\n  const containerRef = useCallback((node: HTMLElement | null) => {\n    // 이전 인스턴스를 먼저 정리한다. ref가 null로 분리될 때도 여기로 들어온다.\n    if (instanceRef.current) {\n      instanceRef.current.destroy();\n      instanceRef.current = null;\n      setFinder(null);\n    }\n\n    if (!node) return;\n\n    const instance = new KoreanAddressFinder({\n      ...optionsRef.current,\n      onSelect: (selected: AddressResult, meta: AddressSelectMeta) => {\n        setAddress(selected);\n        optionsRef.current.onSelect?.(selected, meta);\n      },\n    });\n    instance.init(node);\n    instanceRef.current = instance;\n    setFinder(instance);\n  }, []);\n\n  // 컴포넌트 언마운트 시의 마지막 방어선.\n  useEffect(() => {\n    return () => {\n      instanceRef.current?.destroy();\n      instanceRef.current = null;\n    };\n  }, []);\n\n  return { containerRef, address, finder };\n}\n\nexport interface KoreanAddressFinderViewProps extends AddressFinderOptions {\n  className?: string;\n}\n\n/**\n * 훅을 직접 다루지 않아도 되는 기본 컴포넌트.\n */\nexport function KoreanAddressFinderView({\n  className,\n  ...options\n}: KoreanAddressFinderViewProps) {\n  const { containerRef } = useKoreanAddress(options);\n  return <div className={className} ref={containerRef} />;\n}\n\nexport type { AddressResult, AddressSelectMeta, AddressFinderOptions };\n"],"mappings":";;;;;AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAkFhD;AA7DF,SAAS,iBACd,UAAgC,CAAC,GACT;AACxB,QAAM,CAAC,SAAS,UAAU,IAAI,SAA+B,IAAI;AACjE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAqC,IAAI;AAGrE,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAMrB,QAAM,cAAc,OAAmC,IAAI;AAE3D,QAAM,eAAe,YAAY,CAAC,SAA6B;AAE7D,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ;AAC5B,kBAAY,UAAU;AACtB,gBAAU,IAAI;AAAA,IAChB;AAEA,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,IAAI,oBAAoB;AAAA,MACvC,GAAG,WAAW;AAAA,MACd,UAAU,CAAC,UAAyB,SAA4B;AAC9D,mBAAW,QAAQ;AACnB,mBAAW,QAAQ,WAAW,UAAU,IAAI;AAAA,MAC9C;AAAA,IACF,CAAC;AACD,aAAS,KAAK,IAAI;AAClB,gBAAY,UAAU;AACtB,cAAU,QAAQ;AAAA,EACpB,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,WAAO,MAAM;AACX,kBAAY,SAAS,QAAQ;AAC7B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,cAAc,SAAS,OAAO;AACzC;AASO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,QAAM,EAAE,aAAa,IAAI,iBAAiB,OAAO;AACjD,SAAO,oBAAC,SAAI,WAAsB,KAAK,cAAc;AACvD;","names":[]}

package/dist/styles.css

@@ -4,6 +4,25 @@
  */
 
 .kaf-wrapper {
+  --kaf-accent: #4a90e2;
+  --kaf-accent-hover: #357abd;
+  --kaf-accent-active: #2a6299;
+  --kaf-accent-soft: #f0f8ff;
+  --kaf-bg: #ffffff;
+  --kaf-surface: #f8f9fa;
+  --kaf-surface-strong: #e0e0e0;
+  --kaf-text: #333333;
+  --kaf-text-muted: #666666;
+  --kaf-text-subtle: #999999;
+  --kaf-border: #e0e0e0;
+  --kaf-border-soft: #f0f0f0;
+  --kaf-error: #e74c3c;
+  --kaf-on-accent: #ffffff;
+  --kaf-scrollbar-track: #f1f1f1;
+  --kaf-scrollbar-thumb: #888888;
+  --kaf-scrollbar-thumb-hover: #555555;
+  --kaf-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -13,6 +32,7 @@
   max-width: 600px;
   margin: 0 auto;
   position: relative;
+  color: var(--kaf-text);
 }
 
 /* 검색 박스 */
@@ -26,26 +46,26 @@
   flex: 1;
   padding: 12px 16px;
   font-size: 14px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--kaf-border);
   border-radius: 8px;
   outline: none;
   transition: border-color 0.2s;
 }
 
 .kaf-search-input:focus {
-  border-color: #4a90e2;
+  border-color: var(--kaf-accent);
 }
 
 .kaf-search-input::placeholder {
-  color: #999;
+  color: var(--kaf-text-subtle);
 }
 
 .kaf-search-btn {
   padding: 12px 24px;
   font-size: 14px;
   font-weight: 600;
-  color: white;
-  background-color: #4a90e2;
+  color: var(--kaf-on-accent);
+  background-color: var(--kaf-accent);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -54,11 +74,11 @@
 }
 
 .kaf-search-btn:hover {
-  background-color: #357abd;
+  background-color: var(--kaf-accent-hover);
 }
 
 .kaf-search-btn:active {
-  background-color: #2a6299;
+  background-color: var(--kaf-accent-active);
 }
 
 /* 검색 결과 컨테이너 */
@@ -67,10 +87,10 @@
   top: 100%;
   left: 0;
   right: 0;
-  background: white;
-  border: 1px solid #e0e0e0;
+  background: var(--kaf-bg);
+  border: 1px solid var(--kaf-border);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--kaf-shadow);
   z-index: 1000;
   max-height: 400px;
   overflow: hidden;
@@ -83,21 +103,21 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid #e0e0e0;
-  background-color: #f8f9fa;
+  border-bottom: 1px solid var(--kaf-border);
+  background-color: var(--kaf-surface);
 }
 
 .kaf-results-count {
   font-size: 14px;
   font-weight: 600;
-  color: #333;
+  color: var(--kaf-text);
 }
 
 .kaf-close-btn {
   background: none;
   border: none;
   font-size: 24px;
-  color: #666;
+  color: var(--kaf-text-muted);
   cursor: pointer;
   padding: 0;
   width: 28px;
@@ -110,7 +130,7 @@
 }
 
 .kaf-close-btn:hover {
-  background-color: #e0e0e0;
+  background-color: var(--kaf-surface-strong);
 }
 
 .kaf-results-list {
@@ -121,13 +141,14 @@
 /* 검색 결과 항목 */
 .kaf-result-item {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--kaf-border-soft);
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
-.kaf-result-item:hover {
-  background-color: #f8f9fa;
+.kaf-result-item:hover,
+.kaf-result-item--active {
+  background-color: var(--kaf-surface);
 }
 
 .kaf-result-item:last-child {
@@ -146,34 +167,34 @@
   padding: 2px 8px;
   font-size: 11px;
   font-weight: 600;
-  color: white;
+  color: var(--kaf-on-accent);
   border-radius: 4px;
   flex-shrink: 0;
 }
 
 .kaf-result-main .kaf-result-type {
-  background-color: #4a90e2;
+  background-color: var(--kaf-accent);
 }
 
 .kaf-result-sub .kaf-result-type {
-  background-color: #999;
+  background-color: var(--kaf-text-subtle);
 }
 
 .kaf-result-address {
   font-size: 14px;
-  color: #333;
+  color: var(--kaf-text);
   line-height: 1.5;
 }
 
 .kaf-result-zipcode {
   font-size: 12px;
-  color: #666;
+  color: var(--kaf-text-muted);
   margin-top: 4px;
 }
 
 .kaf-result-building {
   font-size: 12px;
-  color: #4a90e2;
+  color: var(--kaf-accent);
   margin-top: 4px;
   font-weight: 500;
 }
@@ -183,12 +204,12 @@
 .kaf-error {
   padding: 32px 16px;
   text-align: center;
-  color: #999;
+  color: var(--kaf-text-subtle);
   font-size: 14px;
 }
 
 .kaf-error {
-  color: #e74c3c;
+  color: var(--kaf-error);
 }
 
 /* 상세주소 입력 */
@@ -200,7 +221,7 @@
   width: 100%;
   padding: 12px 16px;
   font-size: 14px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--kaf-border);
   border-radius: 8px;
   outline: none;
   transition: border-color 0.2s;
@@ -208,15 +229,15 @@
 }
 
 .kaf-detail-input:focus {
-  border-color: #4a90e2;
+  border-color: var(--kaf-accent);
 }
 
 /* 선택된 주소 */
 .kaf-selected-address {
   margin-top: 12px;
   padding: 16px;
-  background-color: #f0f8ff;
-  border: 1px solid #4a90e2;
+  background-color: var(--kaf-accent-soft);
+  border: 1px solid var(--kaf-accent);
   border-radius: 8px;
 }
 
@@ -231,7 +252,7 @@
 
 .kaf-selected-main strong,
 .kaf-selected-sub strong {
-  color: #4a90e2;
+  color: var(--kaf-accent);
   margin-right: 8px;
 }
 
@@ -241,16 +262,40 @@
 }
 
 .kaf-results-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--kaf-scrollbar-track);
 }
 
 .kaf-results-list::-webkit-scrollbar-thumb {
-  background: #888;
+  background: var(--kaf-scrollbar-thumb);
   border-radius: 4px;
 }
 
 .kaf-results-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: var(--kaf-scrollbar-thumb-hover);
+}
+
+/* 다크모드 — 토큰만 덮어쓴다.
+   명시적으로 밝은 테마를 지정한 경우(.kaf-wrapper--light)는 제외한다. */
+@media (prefers-color-scheme: dark) {
+  .kaf-wrapper:not(.kaf-wrapper--light) {
+    --kaf-accent: #6aa9ea;
+    --kaf-accent-hover: #85bbf0;
+    --kaf-accent-active: #4a90e2;
+    --kaf-accent-soft: #1c2b3a;
+    --kaf-bg: #1e1e1e;
+    --kaf-surface: #262626;
+    --kaf-surface-strong: #3a3a3a;
+    --kaf-text: #e8e8e8;
+    --kaf-text-muted: #b0b0b0;
+    --kaf-text-subtle: #a0a0a0;
+    --kaf-border: #3a3a3a;
+    --kaf-border-soft: #2e2e2e;
+    --kaf-error: #ff6b5b;
+    --kaf-on-accent: #10161d;
+    --kaf-scrollbar-track: #262626;
+    --kaf-scrollbar-thumb: #555555;
+    --kaf-scrollbar-thumb-hover: #777777;
+  }
 }
 
 /* 반응형 */