@bichon/ds 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +72 -97
  2. package/dist/index.d.cts +17 -6
  3. package/dist/index.d.ts +17 -6
  4. package/dist/index.js +72 -97
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -7,10 +7,10 @@ var styled18 = require('@emotion/styled');
7
7
  var isPropValid8 = require('@emotion/is-prop-valid');
8
8
  var RadixAvatar = require('@radix-ui/react-avatar');
9
9
  var RadixProgress = require('@radix-ui/react-progress');
10
+ var lucideReact = require('lucide-react');
10
11
  var TextareaAutosize = require('react-textarea-autosize');
11
12
  var ToastPrimitive = require('@radix-ui/react-toast');
12
13
  var DialogPrimitive = require('@radix-ui/react-dialog');
13
- var lucideReact = require('lucide-react');
14
14
  var CheckboxPrimitive = require('@radix-ui/react-checkbox');
15
15
  var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
16
16
  var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
@@ -702,75 +702,27 @@ var Progress = react$1.forwardRef(
702
702
  Progress.displayName = "Progress";
703
703
  var sizeStyles4 = {
704
704
  filled: {
705
- large: {
706
- borderRadius: "xl",
707
- typography: "Md_16",
708
- padding: "12px 16px"
709
- },
710
- medium: {
711
- borderRadius: "lg",
712
- typography: "Md_15",
713
- padding: "8.5px 16px"
714
- },
715
- small: {
716
- borderRadius: "lg",
717
- typography: "Md_14",
718
- padding: "5.5px 12px"
719
- }
705
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
706
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
707
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
720
708
  },
721
709
  warning: {
722
- large: {
723
- borderRadius: "xl",
724
- typography: "Md_16",
725
- padding: "12px 16px"
726
- },
727
- medium: {
728
- borderRadius: "lg",
729
- typography: "Md_15",
730
- padding: "8.5px 16px"
731
- },
732
- small: {
733
- borderRadius: "lg",
734
- typography: "Md_14",
735
- padding: "5.5px 12px"
736
- }
710
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
711
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
712
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
737
713
  },
738
714
  outlined: {
739
- large: {
740
- borderRadius: "xl",
741
- typography: "Md_16",
742
- padding: "12px 16px"
743
- },
744
- medium: {
745
- borderRadius: "lg",
746
- typography: "Md_15",
747
- padding: "8.5px 16px"
748
- },
749
- small: {
750
- borderRadius: "lg",
751
- typography: "Md_14",
752
- padding: "5.5px 12px"
753
- }
715
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
716
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
717
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
754
718
  },
755
719
  text: {
756
- large: {
757
- borderRadius: "xl",
758
- typography: "Md_16",
759
- padding: "12px 8px"
760
- },
761
- medium: {
762
- borderRadius: "lg",
763
- typography: "Md_15",
764
- padding: "8.5px 8px"
765
- },
766
- small: {
767
- borderRadius: "lg",
768
- typography: "Md_14",
769
- padding: "8px 6px"
770
- }
720
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 8px" },
721
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 8px" },
722
+ small: { borderRadius: "lg", typography: "Md_14", padding: "8px 6px" }
771
723
  }
772
724
  };
773
- var propFilter4 = (prop) => !["$variant", "$size", "$width"].includes(prop) && isPropValid8__default.default(prop);
725
+ var propFilter4 = (prop) => !["$variant", "$size", "$width", "$active"].includes(prop) && isPropValid8__default.default(prop);
774
726
  var StyledButton = styled18__default.default("button", {
775
727
  shouldForwardProp: propFilter4
776
728
  })`
@@ -800,15 +752,14 @@ var StyledButton = styled18__default.default("button", {
800
752
  `;
801
753
  }}
802
754
 
803
- ${({ $variant, theme: theme2 }) => {
755
+ ${({ $variant, $active, theme: theme2 }) => {
756
+ const activeSelector = $active ? `&, ` : "";
757
+ const hoverActive = `&:hover:not(:disabled), &:active:not(:disabled)`;
804
758
  if ($variant === "filled") {
805
759
  return `
806
- background-color: ${theme2.colors.bgAccent};
760
+ background-color: ${$active ? theme2.colors.bgAccentDark : theme2.colors.bgAccent};
807
761
  color: ${theme2.colors.bgWhite};
808
-
809
- /* Pressed & Hovered \uB3D9\uC77C \uCC98\uB9AC */
810
- &:hover:not(:disabled),
811
- &:active:not(:disabled) {
762
+ ${activeSelector}${hoverActive} {
812
763
  background-color: ${theme2.colors.bgAccentDark};
813
764
  color: ${theme2.colors.bgWhite};
814
765
  }
@@ -816,11 +767,9 @@ var StyledButton = styled18__default.default("button", {
816
767
  }
817
768
  if ($variant === "warning") {
818
769
  return `
819
- background-color: ${theme2.colors.bgWarning};
770
+ background-color: ${$active ? theme2.colors.bgWarningDark : theme2.colors.bgWarning};
820
771
  color: ${theme2.colors.bgWhite};
821
-
822
- &:hover:not(:disabled),
823
- &:active:not(:disabled) {
772
+ ${activeSelector}${hoverActive} {
824
773
  background-color: ${theme2.colors.bgWarningDark};
825
774
  color: ${theme2.colors.bgWhite};
826
775
  }
@@ -828,13 +777,10 @@ var StyledButton = styled18__default.default("button", {
828
777
  }
829
778
  if ($variant === "outlined") {
830
779
  return `
831
- background-color: ${theme2.colors.bgWhite};
780
+ background-color: ${$active ? theme2.colors.bgMediumGrey : theme2.colors.bgWhite};
832
781
  border: 1px solid ${theme2.colors.lineDefault};
833
782
  color: ${theme2.colors.textPrimary};
834
-
835
- /* Pressed & Hovered: bg-medium-gray */
836
- &:hover:not(:disabled),
837
- &:active:not(:disabled) {
783
+ ${activeSelector}${hoverActive} {
838
784
  background-color: ${theme2.colors.bgMediumGrey};
839
785
  border: 1px solid ${theme2.colors.lineDefault};
840
786
  color: ${theme2.colors.textPrimary};
@@ -842,11 +788,9 @@ var StyledButton = styled18__default.default("button", {
842
788
  `;
843
789
  }
844
790
  return `
845
- background-color: transparent;
791
+ background-color: ${$active ? theme2.colors.bgMediumGrey : "transparent"};
846
792
  color: ${theme2.colors.textPrimary};
847
-
848
- &:hover:not(:disabled),
849
- &:active:not(:disabled) {
793
+ ${activeSelector}${hoverActive} {
850
794
  background-color: ${theme2.colors.bgMediumGrey};
851
795
  color: ${theme2.colors.textPrimary};
852
796
  }
@@ -864,6 +808,7 @@ var Button = react$1.forwardRef(
864
808
  variant = "filled",
865
809
  size = "medium",
866
810
  width,
811
+ active,
867
812
  children,
868
813
  type = "button",
869
814
  ...props
@@ -875,6 +820,7 @@ var Button = react$1.forwardRef(
875
820
  $variant: variant,
876
821
  $size: size,
877
822
  $width: width,
823
+ $active: active,
878
824
  type,
879
825
  ...props,
880
826
  children
@@ -899,9 +845,24 @@ var Flex = react$1.forwardRef(
899
845
  }
900
846
  );
901
847
  Flex.displayName = "Flex";
848
+ var StyledTextFieldInputWrapper = styled18__default.default.div`
849
+ position: relative;
850
+ width: 100%;
851
+ `;
852
+ var StyledLeadingIconWrapper = styled18__default.default.div`
853
+ position: absolute;
854
+ left: 16px;
855
+ top: 50%;
856
+ transform: translateY(-50%);
857
+ color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
858
+ display: flex;
859
+ align-items: center;
860
+ justify-content: center;
861
+ pointer-events: none;
862
+ `;
902
863
  var StyledTextFieldInput = styled18__default.default.input`
903
864
  width: 100%;
904
- padding: 12.5px 16px;
865
+ padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
905
866
  border: 1px solid
906
867
  ${({ theme: theme2, $variant }) => {
907
868
  if ($variant === "focus") return theme2.colors.lineAccent;
@@ -935,7 +896,7 @@ var StyledTextFieldTextarea = styled18__default.default(TextareaAutosize__defaul
935
896
  shouldForwardProp: (prop) => isPropValid8__default.default(prop) || prop === "minRows" || prop === "maxRows"
936
897
  })`
937
898
  width: 100%;
938
- padding: 12.5px 16px;
899
+ padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
939
900
  border: 1px solid
940
901
  ${({ theme: theme2, $variant }) => {
941
902
  if ($variant === "focus") return theme2.colors.lineAccent;
@@ -981,6 +942,7 @@ var TextField = react$1.forwardRef(
981
942
  multiline = false,
982
943
  variant = "default",
983
944
  width = "375px",
945
+ searchField = false,
984
946
  minRows = 2,
985
947
  maxRows,
986
948
  helperText,
@@ -988,6 +950,7 @@ var TextField = react$1.forwardRef(
988
950
  disabled,
989
951
  ...props
990
952
  }, ref) => {
953
+ const enableSearch = !multiline && searchField;
991
954
  const effectiveVariant = react$1.useMemo(() => {
992
955
  if (disabled) return "disabled";
993
956
  return variant;
@@ -1002,6 +965,7 @@ var TextField = react$1.forwardRef(
1002
965
  $variant: effectiveVariant,
1003
966
  $width: "100%",
1004
967
  $multiline: multiline,
968
+ $hasLeadingIcon: enableSearch,
1005
969
  disabled: effectiveVariant === "disabled" || disabled
1006
970
  };
1007
971
  if (multiline) {
@@ -1012,21 +976,32 @@ var TextField = react$1.forwardRef(
1012
976
  };
1013
977
  }
1014
978
  return baseProps;
1015
- }, [props, effectiveVariant, multiline, minRows, maxRows, disabled]);
979
+ }, [
980
+ props,
981
+ effectiveVariant,
982
+ multiline,
983
+ minRows,
984
+ maxRows,
985
+ disabled,
986
+ enableSearch
987
+ ]);
1016
988
  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", width, children: [
1017
- multiline ? /* @__PURE__ */ jsxRuntime.jsx(
1018
- StyledTextFieldTextarea,
1019
- {
1020
- ref,
1021
- ...inputProps
1022
- }
1023
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1024
- StyledTextFieldInput,
1025
- {
1026
- ref,
1027
- ...inputProps
1028
- }
1029
- ),
989
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledTextFieldInputWrapper, { children: [
990
+ enableSearch && /* @__PURE__ */ jsxRuntime.jsx(StyledLeadingIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 20 }) }),
991
+ multiline ? /* @__PURE__ */ jsxRuntime.jsx(
992
+ StyledTextFieldTextarea,
993
+ {
994
+ ref,
995
+ ...inputProps
996
+ }
997
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
998
+ StyledTextFieldInput,
999
+ {
1000
+ ref,
1001
+ ...inputProps
1002
+ }
1003
+ )
1004
+ ] }),
1030
1005
  shouldShowHelperText && /* @__PURE__ */ jsxRuntime.jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
1031
1006
  ] });
1032
1007
  }
package/dist/index.d.cts CHANGED
@@ -295,13 +295,14 @@ declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.Re
295
295
  /**
296
296
  * Button Styled Components
297
297
  */
298
- type ButtonVariant = 'filled' | 'outlined' | 'text' | 'warning';
299
- type ButtonSize = 'large' | 'medium' | 'small';
298
+ type ButtonVariant = "filled" | "outlined" | "text" | "warning";
299
+ type ButtonSize = "large" | "medium" | "small";
300
300
 
301
301
  interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
302
302
  variant?: ButtonVariant;
303
303
  size?: ButtonSize;
304
304
  width?: string | number;
305
+ active?: boolean;
305
306
  children: ReactNode;
306
307
  }
307
308
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -319,15 +320,25 @@ declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttribu
319
320
 
320
321
  type TextFieldVariant = 'default' | 'focus' | 'warning' | 'disabled';
321
322
 
322
- interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> {
323
- multiline?: boolean;
323
+ interface BaseTextFieldProps {
324
324
  variant?: TextFieldVariant;
325
325
  width?: CSSProperties['width'];
326
- minRows?: number;
327
- maxRows?: number;
326
+ searchField?: boolean;
328
327
  helperText?: string;
329
328
  showHelperText?: boolean;
330
329
  }
330
+ type SinglelineTextFieldProps = BaseTextFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
331
+ multiline?: false;
332
+ minRows?: never;
333
+ maxRows?: never;
334
+ };
335
+ type MultilineTextFieldProps = BaseTextFieldProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> & {
336
+ multiline: true;
337
+ minRows?: number;
338
+ maxRows?: number;
339
+ searchField?: never;
340
+ };
341
+ type TextFieldProps = SinglelineTextFieldProps | MultilineTextFieldProps;
331
342
  type TextFieldRef = HTMLInputElement | HTMLTextAreaElement;
332
343
  declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<TextFieldRef>>;
333
344
 
package/dist/index.d.ts CHANGED
@@ -295,13 +295,14 @@ declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.Re
295
295
  /**
296
296
  * Button Styled Components
297
297
  */
298
- type ButtonVariant = 'filled' | 'outlined' | 'text' | 'warning';
299
- type ButtonSize = 'large' | 'medium' | 'small';
298
+ type ButtonVariant = "filled" | "outlined" | "text" | "warning";
299
+ type ButtonSize = "large" | "medium" | "small";
300
300
 
301
301
  interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
302
302
  variant?: ButtonVariant;
303
303
  size?: ButtonSize;
304
304
  width?: string | number;
305
+ active?: boolean;
305
306
  children: ReactNode;
306
307
  }
307
308
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -319,15 +320,25 @@ declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttribu
319
320
 
320
321
  type TextFieldVariant = 'default' | 'focus' | 'warning' | 'disabled';
321
322
 
322
- interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> {
323
- multiline?: boolean;
323
+ interface BaseTextFieldProps {
324
324
  variant?: TextFieldVariant;
325
325
  width?: CSSProperties['width'];
326
- minRows?: number;
327
- maxRows?: number;
326
+ searchField?: boolean;
328
327
  helperText?: string;
329
328
  showHelperText?: boolean;
330
329
  }
330
+ type SinglelineTextFieldProps = BaseTextFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
331
+ multiline?: false;
332
+ minRows?: never;
333
+ maxRows?: never;
334
+ };
335
+ type MultilineTextFieldProps = BaseTextFieldProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> & {
336
+ multiline: true;
337
+ minRows?: number;
338
+ maxRows?: number;
339
+ searchField?: never;
340
+ };
341
+ type TextFieldProps = SinglelineTextFieldProps | MultilineTextFieldProps;
331
342
  type TextFieldRef = HTMLInputElement | HTMLTextAreaElement;
332
343
  declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<TextFieldRef>>;
333
344
 
package/dist/index.js CHANGED
@@ -5,10 +5,10 @@ import styled18 from '@emotion/styled';
5
5
  import isPropValid8 from '@emotion/is-prop-valid';
6
6
  import * as RadixAvatar from '@radix-ui/react-avatar';
7
7
  import * as RadixProgress from '@radix-ui/react-progress';
8
+ import { Search, Check, ChevronRight, ChevronLeft, Ellipsis, X } from 'lucide-react';
8
9
  import TextareaAutosize from 'react-textarea-autosize';
9
10
  import * as ToastPrimitive from '@radix-ui/react-toast';
10
11
  import * as DialogPrimitive from '@radix-ui/react-dialog';
11
- import { Check, ChevronRight, ChevronLeft, Ellipsis, X } from 'lucide-react';
12
12
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
13
13
  import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
14
14
  import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
@@ -666,75 +666,27 @@ var Progress = forwardRef(
666
666
  Progress.displayName = "Progress";
667
667
  var sizeStyles4 = {
668
668
  filled: {
669
- large: {
670
- borderRadius: "xl",
671
- typography: "Md_16",
672
- padding: "12px 16px"
673
- },
674
- medium: {
675
- borderRadius: "lg",
676
- typography: "Md_15",
677
- padding: "8.5px 16px"
678
- },
679
- small: {
680
- borderRadius: "lg",
681
- typography: "Md_14",
682
- padding: "5.5px 12px"
683
- }
669
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
670
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
671
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
684
672
  },
685
673
  warning: {
686
- large: {
687
- borderRadius: "xl",
688
- typography: "Md_16",
689
- padding: "12px 16px"
690
- },
691
- medium: {
692
- borderRadius: "lg",
693
- typography: "Md_15",
694
- padding: "8.5px 16px"
695
- },
696
- small: {
697
- borderRadius: "lg",
698
- typography: "Md_14",
699
- padding: "5.5px 12px"
700
- }
674
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
675
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
676
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
701
677
  },
702
678
  outlined: {
703
- large: {
704
- borderRadius: "xl",
705
- typography: "Md_16",
706
- padding: "12px 16px"
707
- },
708
- medium: {
709
- borderRadius: "lg",
710
- typography: "Md_15",
711
- padding: "8.5px 16px"
712
- },
713
- small: {
714
- borderRadius: "lg",
715
- typography: "Md_14",
716
- padding: "5.5px 12px"
717
- }
679
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
680
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
681
+ small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
718
682
  },
719
683
  text: {
720
- large: {
721
- borderRadius: "xl",
722
- typography: "Md_16",
723
- padding: "12px 8px"
724
- },
725
- medium: {
726
- borderRadius: "lg",
727
- typography: "Md_15",
728
- padding: "8.5px 8px"
729
- },
730
- small: {
731
- borderRadius: "lg",
732
- typography: "Md_14",
733
- padding: "8px 6px"
734
- }
684
+ large: { borderRadius: "xl", typography: "Md_16", padding: "12px 8px" },
685
+ medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 8px" },
686
+ small: { borderRadius: "lg", typography: "Md_14", padding: "8px 6px" }
735
687
  }
736
688
  };
737
- var propFilter4 = (prop) => !["$variant", "$size", "$width"].includes(prop) && isPropValid8(prop);
689
+ var propFilter4 = (prop) => !["$variant", "$size", "$width", "$active"].includes(prop) && isPropValid8(prop);
738
690
  var StyledButton = styled18("button", {
739
691
  shouldForwardProp: propFilter4
740
692
  })`
@@ -764,15 +716,14 @@ var StyledButton = styled18("button", {
764
716
  `;
765
717
  }}
766
718
 
767
- ${({ $variant, theme: theme2 }) => {
719
+ ${({ $variant, $active, theme: theme2 }) => {
720
+ const activeSelector = $active ? `&, ` : "";
721
+ const hoverActive = `&:hover:not(:disabled), &:active:not(:disabled)`;
768
722
  if ($variant === "filled") {
769
723
  return `
770
- background-color: ${theme2.colors.bgAccent};
724
+ background-color: ${$active ? theme2.colors.bgAccentDark : theme2.colors.bgAccent};
771
725
  color: ${theme2.colors.bgWhite};
772
-
773
- /* Pressed & Hovered \uB3D9\uC77C \uCC98\uB9AC */
774
- &:hover:not(:disabled),
775
- &:active:not(:disabled) {
726
+ ${activeSelector}${hoverActive} {
776
727
  background-color: ${theme2.colors.bgAccentDark};
777
728
  color: ${theme2.colors.bgWhite};
778
729
  }
@@ -780,11 +731,9 @@ var StyledButton = styled18("button", {
780
731
  }
781
732
  if ($variant === "warning") {
782
733
  return `
783
- background-color: ${theme2.colors.bgWarning};
734
+ background-color: ${$active ? theme2.colors.bgWarningDark : theme2.colors.bgWarning};
784
735
  color: ${theme2.colors.bgWhite};
785
-
786
- &:hover:not(:disabled),
787
- &:active:not(:disabled) {
736
+ ${activeSelector}${hoverActive} {
788
737
  background-color: ${theme2.colors.bgWarningDark};
789
738
  color: ${theme2.colors.bgWhite};
790
739
  }
@@ -792,13 +741,10 @@ var StyledButton = styled18("button", {
792
741
  }
793
742
  if ($variant === "outlined") {
794
743
  return `
795
- background-color: ${theme2.colors.bgWhite};
744
+ background-color: ${$active ? theme2.colors.bgMediumGrey : theme2.colors.bgWhite};
796
745
  border: 1px solid ${theme2.colors.lineDefault};
797
746
  color: ${theme2.colors.textPrimary};
798
-
799
- /* Pressed & Hovered: bg-medium-gray */
800
- &:hover:not(:disabled),
801
- &:active:not(:disabled) {
747
+ ${activeSelector}${hoverActive} {
802
748
  background-color: ${theme2.colors.bgMediumGrey};
803
749
  border: 1px solid ${theme2.colors.lineDefault};
804
750
  color: ${theme2.colors.textPrimary};
@@ -806,11 +752,9 @@ var StyledButton = styled18("button", {
806
752
  `;
807
753
  }
808
754
  return `
809
- background-color: transparent;
755
+ background-color: ${$active ? theme2.colors.bgMediumGrey : "transparent"};
810
756
  color: ${theme2.colors.textPrimary};
811
-
812
- &:hover:not(:disabled),
813
- &:active:not(:disabled) {
757
+ ${activeSelector}${hoverActive} {
814
758
  background-color: ${theme2.colors.bgMediumGrey};
815
759
  color: ${theme2.colors.textPrimary};
816
760
  }
@@ -828,6 +772,7 @@ var Button = forwardRef(
828
772
  variant = "filled",
829
773
  size = "medium",
830
774
  width,
775
+ active,
831
776
  children,
832
777
  type = "button",
833
778
  ...props
@@ -839,6 +784,7 @@ var Button = forwardRef(
839
784
  $variant: variant,
840
785
  $size: size,
841
786
  $width: width,
787
+ $active: active,
842
788
  type,
843
789
  ...props,
844
790
  children
@@ -863,9 +809,24 @@ var Flex = forwardRef(
863
809
  }
864
810
  );
865
811
  Flex.displayName = "Flex";
812
+ var StyledTextFieldInputWrapper = styled18.div`
813
+ position: relative;
814
+ width: 100%;
815
+ `;
816
+ var StyledLeadingIconWrapper = styled18.div`
817
+ position: absolute;
818
+ left: 16px;
819
+ top: 50%;
820
+ transform: translateY(-50%);
821
+ color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
822
+ display: flex;
823
+ align-items: center;
824
+ justify-content: center;
825
+ pointer-events: none;
826
+ `;
866
827
  var StyledTextFieldInput = styled18.input`
867
828
  width: 100%;
868
- padding: 12.5px 16px;
829
+ padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
869
830
  border: 1px solid
870
831
  ${({ theme: theme2, $variant }) => {
871
832
  if ($variant === "focus") return theme2.colors.lineAccent;
@@ -899,7 +860,7 @@ var StyledTextFieldTextarea = styled18(TextareaAutosize, {
899
860
  shouldForwardProp: (prop) => isPropValid8(prop) || prop === "minRows" || prop === "maxRows"
900
861
  })`
901
862
  width: 100%;
902
- padding: 12.5px 16px;
863
+ padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "12.5px 16px"};
903
864
  border: 1px solid
904
865
  ${({ theme: theme2, $variant }) => {
905
866
  if ($variant === "focus") return theme2.colors.lineAccent;
@@ -945,6 +906,7 @@ var TextField = forwardRef(
945
906
  multiline = false,
946
907
  variant = "default",
947
908
  width = "375px",
909
+ searchField = false,
948
910
  minRows = 2,
949
911
  maxRows,
950
912
  helperText,
@@ -952,6 +914,7 @@ var TextField = forwardRef(
952
914
  disabled,
953
915
  ...props
954
916
  }, ref) => {
917
+ const enableSearch = !multiline && searchField;
955
918
  const effectiveVariant = useMemo(() => {
956
919
  if (disabled) return "disabled";
957
920
  return variant;
@@ -966,6 +929,7 @@ var TextField = forwardRef(
966
929
  $variant: effectiveVariant,
967
930
  $width: "100%",
968
931
  $multiline: multiline,
932
+ $hasLeadingIcon: enableSearch,
969
933
  disabled: effectiveVariant === "disabled" || disabled
970
934
  };
971
935
  if (multiline) {
@@ -976,21 +940,32 @@ var TextField = forwardRef(
976
940
  };
977
941
  }
978
942
  return baseProps;
979
- }, [props, effectiveVariant, multiline, minRows, maxRows, disabled]);
943
+ }, [
944
+ props,
945
+ effectiveVariant,
946
+ multiline,
947
+ minRows,
948
+ maxRows,
949
+ disabled,
950
+ enableSearch
951
+ ]);
980
952
  return /* @__PURE__ */ jsxs(Flex, { direction: "column", width, children: [
981
- multiline ? /* @__PURE__ */ jsx(
982
- StyledTextFieldTextarea,
983
- {
984
- ref,
985
- ...inputProps
986
- }
987
- ) : /* @__PURE__ */ jsx(
988
- StyledTextFieldInput,
989
- {
990
- ref,
991
- ...inputProps
992
- }
993
- ),
953
+ /* @__PURE__ */ jsxs(StyledTextFieldInputWrapper, { children: [
954
+ enableSearch && /* @__PURE__ */ jsx(StyledLeadingIconWrapper, { children: /* @__PURE__ */ jsx(Search, { size: 20 }) }),
955
+ multiline ? /* @__PURE__ */ jsx(
956
+ StyledTextFieldTextarea,
957
+ {
958
+ ref,
959
+ ...inputProps
960
+ }
961
+ ) : /* @__PURE__ */ jsx(
962
+ StyledTextFieldInput,
963
+ {
964
+ ref,
965
+ ...inputProps
966
+ }
967
+ )
968
+ ] }),
994
969
  shouldShowHelperText && /* @__PURE__ */ jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
995
970
  ] });
996
971
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bichon/ds",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Bichon Design System - Design tokens & React components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",