@bichon/ds 0.0.1 → 0.0.2

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 +26 -80
  2. package/dist/index.d.cts +3 -2
  3. package/dist/index.d.ts +3 -2
  4. package/dist/index.js +26 -80
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -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
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>>;
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>>;
package/dist/index.js CHANGED
@@ -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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bichon/ds",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "Bichon Design System - Design tokens & React components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",