@bichon/ds 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -7,10 +7,10 @@ var styled18 = require('@emotion/styled');
 var isPropValid8 = require('@emotion/is-prop-valid');
 var RadixAvatar = require('@radix-ui/react-avatar');
 var RadixProgress = require('@radix-ui/react-progress');
+var lucideReact = require('lucide-react');
 var TextareaAutosize = require('react-textarea-autosize');
 var ToastPrimitive = require('@radix-ui/react-toast');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var lucideReact = require('lucide-react');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
@@ -845,9 +845,24 @@ var Flex = react$1.forwardRef(
   }
 );
 Flex.displayName = "Flex";
+var StyledTextFieldInputWrapper = styled18__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+var StyledLeadingIconWrapper = styled18__default.default.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__default.default.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;
@@ -881,7 +896,7 @@ var StyledTextFieldTextarea = styled18__default.default(TextareaAutosize__defaul
   shouldForwardProp: (prop) => isPropValid8__default.default(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;
@@ -927,6 +942,7 @@ var TextField = react$1.forwardRef(
     multiline = false,
     variant = "default",
     width = "375px",
+    searchField = false,
     minRows = 2,
     maxRows,
     helperText,
@@ -934,6 +950,7 @@ var TextField = react$1.forwardRef(
     disabled,
     ...props
   }, ref) => {
+    const enableSearch = !multiline && searchField;
     const effectiveVariant = react$1.useMemo(() => {
       if (disabled) return "disabled";
       return variant;
@@ -948,6 +965,7 @@ var TextField = react$1.forwardRef(
         $variant: effectiveVariant,
         $width: "100%",
         $multiline: multiline,
+        $hasLeadingIcon: enableSearch,
         disabled: effectiveVariant === "disabled" || disabled
       };
       if (multiline) {
@@ -958,21 +976,32 @@ var TextField = react$1.forwardRef(
         };
       }
       return baseProps;
-    }, [props, effectiveVariant, multiline, minRows, maxRows, disabled]);
+    }, [
+      props,
+      effectiveVariant,
+      multiline,
+      minRows,
+      maxRows,
+      disabled,
+      enableSearch
+    ]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", width, children: [
-      multiline ? /* @__PURE__ */ jsxRuntime.jsx(
-        StyledTextFieldTextarea,
-        {
-          ref,
-          ...inputProps
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        StyledTextFieldInput,
-        {
-          ref,
-          ...inputProps
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledTextFieldInputWrapper, { children: [
+        enableSearch && /* @__PURE__ */ jsxRuntime.jsx(StyledLeadingIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 20 }) }),
+        multiline ? /* @__PURE__ */ jsxRuntime.jsx(
+          StyledTextFieldTextarea,
+          {
+            ref,
+            ...inputProps
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          StyledTextFieldInput,
+          {
+            ref,
+            ...inputProps
+          }
+        )
+      ] }),
       shouldShowHelperText && /* @__PURE__ */ jsxRuntime.jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
     ] });
   }

package/dist/index.d.cts

@@ -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.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';
@@ -809,9 +809,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 +860,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 +906,7 @@ var TextField = forwardRef(
     multiline = false,
     variant = "default",
     width = "375px",
+    searchField = false,
     minRows = 2,
     maxRows,
     helperText,
@@ -898,6 +914,7 @@ var TextField = forwardRef(
     disabled,
     ...props
   }, ref) => {
+    const enableSearch = !multiline && searchField;
     const effectiveVariant = useMemo(() => {
       if (disabled) return "disabled";
       return variant;
@@ -912,6 +929,7 @@ var TextField = forwardRef(
         $variant: effectiveVariant,
         $width: "100%",
         $multiline: multiline,
+        $hasLeadingIcon: enableSearch,
         disabled: effectiveVariant === "disabled" || disabled
       };
       if (multiline) {
@@ -922,21 +940,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,6 +1,6 @@
 {
   "name": "@bichon/ds",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Bichon Design System - Design tokens & React components",
   "type": "module",
   "main": "./dist/index.cjs",