@bichon/ds 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -320,15 +320,25 @@ declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttribu
 
 type TextFieldVariant = 'default' | 'focus' | 'warning' | 'disabled';
 
-interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> {
-    multiline?: boolean;
+interface BaseTextFieldProps {
     variant?: TextFieldVariant;
     width?: CSSProperties['width'];
-    minRows?: number;
-    maxRows?: number;
+    searchField?: boolean;
     helperText?: string;
     showHelperText?: boolean;
 }
+type SinglelineTextFieldProps = BaseTextFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
+    multiline?: false;
+    minRows?: never;
+    maxRows?: never;
+};
+type MultilineTextFieldProps = BaseTextFieldProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> & {
+    multiline: true;
+    minRows?: number;
+    maxRows?: number;
+    searchField?: never;
+};
+type TextFieldProps = SinglelineTextFieldProps | MultilineTextFieldProps;
 type TextFieldRef = HTMLInputElement | HTMLTextAreaElement;
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<TextFieldRef>>;
 

package/dist/index.js

@@ -5,10 +5,10 @@ import styled18 from '@emotion/styled';
 import isPropValid8 from '@emotion/is-prop-valid';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixProgress from '@radix-ui/react-progress';
+import { Search, Check, ChevronRight, ChevronLeft, Ellipsis, X } from 'lucide-react';
 import TextareaAutosize from 'react-textarea-autosize';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Check, ChevronRight, ChevronLeft, Ellipsis, X } from 'lucide-react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
@@ -255,95 +255,76 @@ var shadows = {
   xl: "0px 12px 24px 0px rgba(0, 27, 55, 0.18)",
   modal: "0px 4px 12px 0px rgba(0, 27, 55, 0.15)"
 };
-
-// src/assets/fonts/woff2/Pretendard-Thin.woff2
-var Pretendard_Thin_default = "./Pretendard-Thin-7QVSFVOF.woff2";
-
-// src/assets/fonts/woff2/Pretendard-ExtraLight.woff2
-var Pretendard_ExtraLight_default = "./Pretendard-ExtraLight-W2EFW6U4.woff2";
-
-// src/assets/fonts/woff2/Pretendard-Light.woff2
-var Pretendard_Light_default = "./Pretendard-Light-44S62PI7.woff2";
-
-// src/assets/fonts/woff2/Pretendard-Regular.woff2
-var Pretendard_Regular_default = "./Pretendard-Regular-CGOPAG2E.woff2";
-
-// src/assets/fonts/woff2/Pretendard-Medium.woff2
-var Pretendard_Medium_default = "./Pretendard-Medium-CLYKZXFO.woff2";
-
-// src/assets/fonts/woff2/Pretendard-SemiBold.woff2
-var Pretendard_SemiBold_default = "./Pretendard-SemiBold-Z6RJ4TYK.woff2";
-
-// src/assets/fonts/woff2/Pretendard-Bold.woff2
-var Pretendard_Bold_default = "./Pretendard-Bold-4AHBL5CN.woff2";
-
-// src/assets/fonts/woff2/Pretendard-ExtraBold.woff2
-var Pretendard_ExtraBold_default = "./Pretendard-ExtraBold-3U7HNRI4.woff2";
-
-// src/assets/fonts/woff2/Pretendard-Black.woff2
-var Pretendard_Black_default = "./Pretendard-Black-JLVK6ESK.woff2";
-
-// src/styles/globalStyles.ts
+var PRETENDARD_CDN_BASE = "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2";
 var globalStyles = css`
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Thin_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Thin.woff2')
+      format('woff2');
     font-weight: 100;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_ExtraLight_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-ExtraLight.woff2')
+      format('woff2');
     font-weight: 200;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Light_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Light.woff2')
+      format('woff2');
     font-weight: 300;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Regular_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Regular.woff2')
+      format('woff2');
     font-weight: 400;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Medium_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Medium.woff2')
+      format('woff2');
     font-weight: 500;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_SemiBold_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-SemiBold.woff2')
+      format('woff2');
     font-weight: 600;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Bold_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Bold.woff2')
+      format('woff2');
     font-weight: 700;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_ExtraBold_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-ExtraBold.woff2')
+      format('woff2');
     font-weight: 800;
     font-display: swap;
   }
 
   @font-face {
     font-family: 'Pretendard';
-    src: url(${Pretendard_Black_default}) format('woff2');
+    src: url('${PRETENDARD_CDN_BASE}/Pretendard-Black.woff2')
+      format('woff2');
     font-weight: 900;
     font-display: swap;
   }
@@ -809,9 +790,24 @@ var Flex = forwardRef(
   }
 );
 Flex.displayName = "Flex";
+var StyledTextFieldInputWrapper = styled18.div`
+  position: relative;
+  width: 100%;
+`;
+var StyledLeadingIconWrapper = styled18.div`
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+`;
 var StyledTextFieldInput = styled18.input`
   width: 100%;
-  padding: 12.5px 16px;
+  padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
   border: 1px solid
     ${({ theme: theme2, $variant }) => {
   if ($variant === "focus") return theme2.colors.lineAccent;
@@ -845,7 +841,7 @@ var StyledTextFieldTextarea = styled18(TextareaAutosize, {
   shouldForwardProp: (prop) => isPropValid8(prop) || prop === "minRows" || prop === "maxRows"
 })`
   width: 100%;
-  padding: 12.5px 16px;
+  padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
   border: 1px solid
     ${({ theme: theme2, $variant }) => {
   if ($variant === "focus") return theme2.colors.lineAccent;
@@ -891,6 +887,7 @@ var TextField = forwardRef(
     multiline = false,
     variant = "default",
     width = "375px",
+    searchField = false,
     minRows = 2,
     maxRows,
     helperText,
@@ -898,6 +895,7 @@ var TextField = forwardRef(
     disabled,
     ...props
   }, ref) => {
+    const enableSearch = !multiline && searchField;
     const effectiveVariant = useMemo(() => {
       if (disabled) return "disabled";
       return variant;
@@ -912,6 +910,7 @@ var TextField = forwardRef(
         $variant: effectiveVariant,
         $width: "100%",
         $multiline: multiline,
+        $hasLeadingIcon: enableSearch,
         disabled: effectiveVariant === "disabled" || disabled
       };
       if (multiline) {
@@ -922,21 +921,32 @@ var TextField = forwardRef(
         };
       }
       return baseProps;
-    }, [props, effectiveVariant, multiline, minRows, maxRows, disabled]);
+    }, [
+      props,
+      effectiveVariant,
+      multiline,
+      minRows,
+      maxRows,
+      disabled,
+      enableSearch
+    ]);
     return /* @__PURE__ */ jsxs(Flex, { direction: "column", width, children: [
-      multiline ? /* @__PURE__ */ jsx(
-        StyledTextFieldTextarea,
-        {
-          ref,
-          ...inputProps
-        }
-      ) : /* @__PURE__ */ jsx(
-        StyledTextFieldInput,
-        {
-          ref,
-          ...inputProps
-        }
-      ),
+      /* @__PURE__ */ jsxs(StyledTextFieldInputWrapper, { children: [
+        enableSearch && /* @__PURE__ */ jsx(StyledLeadingIconWrapper, { children: /* @__PURE__ */ jsx(Search, { size: 20 }) }),
+        multiline ? /* @__PURE__ */ jsx(
+          StyledTextFieldTextarea,
+          {
+            ref,
+            ...inputProps
+          }
+        ) : /* @__PURE__ */ jsx(
+          StyledTextFieldInput,
+          {
+            ref,
+            ...inputProps
+          }
+        )
+      ] }),
       shouldShowHelperText && /* @__PURE__ */ jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
     ] });
   }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bichon/ds",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Bichon Design System - Design tokens & React components",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "imports": {
@@ -12,8 +12,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     }
   },
   "files": [