@refinn/core-ui 0.1.11 → 0.1.12

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 +90 -52
  2. package/dist/index.d.mts +3 -1
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +90 -52
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -799,9 +799,22 @@ function IndeterminateIcon({ className }) {
799
799
  }
800
800
  );
801
801
  }
802
+ var boxSizeClasses = {
803
+ s: "h-20 w-20",
804
+ m: "h-24 w-24"
805
+ };
806
+ var labelTextClasses = {
807
+ s: "text-label-medium",
808
+ m: "text-label-large"
809
+ };
810
+ var descriptionPaddingClasses = {
811
+ s: "pl-24",
812
+ m: "pl-28"
813
+ };
802
814
  var Checkbox = (0, import_react8.forwardRef)(
803
815
  (_a, ref) => {
804
816
  var _b = _a, {
817
+ size = "s",
805
818
  label,
806
819
  description,
807
820
  error = false,
@@ -812,6 +825,7 @@ var Checkbox = (0, import_react8.forwardRef)(
812
825
  id,
813
826
  defaultChecked
814
827
  } = _b, rest = __objRest(_b, [
828
+ "size",
815
829
  "label",
816
830
  "description",
817
831
  "error",
@@ -825,64 +839,88 @@ var Checkbox = (0, import_react8.forwardRef)(
825
839
  const reactId = (0, import_react8.useId)();
826
840
  const inputId = id != null ? id : reactId;
827
841
  const [isChecked, setIsChecked] = (0, import_react8.useState)(defaultChecked != null ? defaultChecked : false);
842
+ const active = isChecked || indeterminate;
843
+ let bgClass;
844
+ let borderClass;
845
+ let iconColorClass;
846
+ let hoverClass = "";
847
+ if (disabled) {
848
+ bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
849
+ borderClass = "border-checkbox-disabled-border";
850
+ iconColorClass = "text-checkbox-disabled-icon";
851
+ } else if (contrast) {
852
+ bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
853
+ borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
854
+ iconColorClass = "text-checkbox-contrast-checked-icon";
855
+ } else if (active) {
856
+ bgClass = "bg-checkbox-checked-bg";
857
+ borderClass = "border-checkbox-checked-border";
858
+ iconColorClass = "text-checkbox-checked-icon";
859
+ } else if (error) {
860
+ bgClass = "bg-checkbox-error-bg";
861
+ borderClass = "border-checkbox-error-border";
862
+ iconColorClass = "";
863
+ } else {
864
+ bgClass = "bg-checkbox-bg";
865
+ borderClass = "border-checkbox-border";
866
+ iconColorClass = "";
867
+ hoverClass = "hover:border-checkbox-hover-border";
868
+ }
869
+ const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
870
+ const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
871
+ const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
828
872
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
829
873
  "label",
830
874
  {
831
875
  htmlFor: inputId,
832
- className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
876
+ className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
833
877
  children: [
834
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mr-16", children: [
835
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
836
- "input",
837
- __spreadValues({
838
- ref,
839
- id: inputId,
840
- type: "checkbox",
841
- defaultChecked,
842
- onChange: (e) => {
843
- var _a2;
844
- setIsChecked(e.target.checked);
845
- (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
846
- },
847
- disabled,
848
- "aria-checked": indeterminate ? "mixed" : isChecked,
849
- className: "sr-only"
850
- }, rest)
851
- ),
852
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
853
- "div",
854
- {
855
- className: `box m-6 flex h-20 w-20 rounded-md items-center justify-center border ${contrast ? isChecked || indeterminate ? "border-white bg-white" : "border-white" : isChecked || indeterminate ? "bg-static-icon-brand border-static-icon-brand" : "border-static-icon-primary"}`,
856
- children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
857
- CheckIcon,
858
- {
859
- className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
860
- }
861
- ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
862
- IndeterminateIcon,
863
- {
864
- className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
865
- }
866
- ) : null
867
- }
868
- )
878
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-4", children: [
879
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative shrink-0", children: [
880
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
881
+ "input",
882
+ __spreadValues({
883
+ ref,
884
+ id: inputId,
885
+ type: "checkbox",
886
+ defaultChecked,
887
+ onChange: (e) => {
888
+ var _a2;
889
+ setIsChecked(e.target.checked);
890
+ (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
891
+ },
892
+ disabled,
893
+ "aria-checked": indeterminate ? "mixed" : isChecked,
894
+ className: "peer sr-only"
895
+ }, rest)
896
+ ),
897
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
898
+ "div",
899
+ {
900
+ className: `flex items-center justify-center rounded-md border transition-colors ${boxSizeClasses[size]} ${bgClass} ${borderClass} ${hoverClass} ${ringClass} peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2`,
901
+ children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
902
+ CheckIcon,
903
+ {
904
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
905
+ }
906
+ ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
907
+ IndeterminateIcon,
908
+ {
909
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
910
+ }
911
+ ) : null
912
+ }
913
+ )
914
+ ] }),
915
+ label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
869
916
  ] }),
870
- (label || description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex flex-col", children: [
871
- label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
872
- "span",
873
- {
874
- className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
875
- children: label
876
- }
877
- ),
878
- description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
879
- "span",
880
- {
881
- className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
882
- children: description
883
- }
884
- )
885
- ] })
917
+ description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
918
+ "span",
919
+ {
920
+ className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
921
+ children: description
922
+ }
923
+ )
886
924
  ]
887
925
  }
888
926
  );
package/dist/index.d.mts CHANGED
@@ -72,7 +72,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
72
72
  }
73
73
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
74
74
 
75
- interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
75
+ type CheckboxSize = "s" | "m";
76
+ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
77
+ size?: CheckboxSize;
76
78
  label?: ReactNode;
77
79
  description?: ReactNode;
78
80
  error?: boolean;
package/dist/index.d.ts CHANGED
@@ -72,7 +72,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
72
72
  }
73
73
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
74
74
 
75
- interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
75
+ type CheckboxSize = "s" | "m";
76
+ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
77
+ size?: CheckboxSize;
76
78
  label?: ReactNode;
77
79
  description?: ReactNode;
78
80
  error?: boolean;
package/dist/index.js CHANGED
@@ -763,9 +763,22 @@ function IndeterminateIcon({ className }) {
763
763
  }
764
764
  );
765
765
  }
766
+ var boxSizeClasses = {
767
+ s: "h-20 w-20",
768
+ m: "h-24 w-24"
769
+ };
770
+ var labelTextClasses = {
771
+ s: "text-label-medium",
772
+ m: "text-label-large"
773
+ };
774
+ var descriptionPaddingClasses = {
775
+ s: "pl-24",
776
+ m: "pl-28"
777
+ };
766
778
  var Checkbox = forwardRef8(
767
779
  (_a, ref) => {
768
780
  var _b = _a, {
781
+ size = "s",
769
782
  label,
770
783
  description,
771
784
  error = false,
@@ -776,6 +789,7 @@ var Checkbox = forwardRef8(
776
789
  id,
777
790
  defaultChecked
778
791
  } = _b, rest = __objRest(_b, [
792
+ "size",
779
793
  "label",
780
794
  "description",
781
795
  "error",
@@ -789,64 +803,88 @@ var Checkbox = forwardRef8(
789
803
  const reactId = useId2();
790
804
  const inputId = id != null ? id : reactId;
791
805
  const [isChecked, setIsChecked] = useState2(defaultChecked != null ? defaultChecked : false);
806
+ const active = isChecked || indeterminate;
807
+ let bgClass;
808
+ let borderClass;
809
+ let iconColorClass;
810
+ let hoverClass = "";
811
+ if (disabled) {
812
+ bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
813
+ borderClass = "border-checkbox-disabled-border";
814
+ iconColorClass = "text-checkbox-disabled-icon";
815
+ } else if (contrast) {
816
+ bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
817
+ borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
818
+ iconColorClass = "text-checkbox-contrast-checked-icon";
819
+ } else if (active) {
820
+ bgClass = "bg-checkbox-checked-bg";
821
+ borderClass = "border-checkbox-checked-border";
822
+ iconColorClass = "text-checkbox-checked-icon";
823
+ } else if (error) {
824
+ bgClass = "bg-checkbox-error-bg";
825
+ borderClass = "border-checkbox-error-border";
826
+ iconColorClass = "";
827
+ } else {
828
+ bgClass = "bg-checkbox-bg";
829
+ borderClass = "border-checkbox-border";
830
+ iconColorClass = "";
831
+ hoverClass = "hover:border-checkbox-hover-border";
832
+ }
833
+ const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
834
+ const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
835
+ const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
792
836
  return /* @__PURE__ */ jsxs8(
793
837
  "label",
794
838
  {
795
839
  htmlFor: inputId,
796
- className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
840
+ className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
797
841
  children: [
798
- /* @__PURE__ */ jsxs8("div", { className: "relative mr-16", children: [
799
- /* @__PURE__ */ jsx8(
800
- "input",
801
- __spreadValues({
802
- ref,
803
- id: inputId,
804
- type: "checkbox",
805
- defaultChecked,
806
- onChange: (e) => {
807
- var _a2;
808
- setIsChecked(e.target.checked);
809
- (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
810
- },
811
- disabled,
812
- "aria-checked": indeterminate ? "mixed" : isChecked,
813
- className: "sr-only"
814
- }, rest)
815
- ),
816
- /* @__PURE__ */ jsx8(
817
- "div",
818
- {
819
- className: `box m-6 flex h-20 w-20 rounded-md items-center justify-center border ${contrast ? isChecked || indeterminate ? "border-white bg-white" : "border-white" : isChecked || indeterminate ? "bg-static-icon-brand border-static-icon-brand" : "border-static-icon-primary"}`,
820
- children: isChecked ? /* @__PURE__ */ jsx8(
821
- CheckIcon,
822
- {
823
- className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
824
- }
825
- ) : indeterminate ? /* @__PURE__ */ jsx8(
826
- IndeterminateIcon,
827
- {
828
- className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
829
- }
830
- ) : null
831
- }
832
- )
842
+ /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
843
+ /* @__PURE__ */ jsxs8("div", { className: "relative shrink-0", children: [
844
+ /* @__PURE__ */ jsx8(
845
+ "input",
846
+ __spreadValues({
847
+ ref,
848
+ id: inputId,
849
+ type: "checkbox",
850
+ defaultChecked,
851
+ onChange: (e) => {
852
+ var _a2;
853
+ setIsChecked(e.target.checked);
854
+ (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
855
+ },
856
+ disabled,
857
+ "aria-checked": indeterminate ? "mixed" : isChecked,
858
+ className: "peer sr-only"
859
+ }, rest)
860
+ ),
861
+ /* @__PURE__ */ jsx8(
862
+ "div",
863
+ {
864
+ className: `flex items-center justify-center rounded-md border transition-colors ${boxSizeClasses[size]} ${bgClass} ${borderClass} ${hoverClass} ${ringClass} peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2`,
865
+ children: isChecked ? /* @__PURE__ */ jsx8(
866
+ CheckIcon,
867
+ {
868
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
869
+ }
870
+ ) : indeterminate ? /* @__PURE__ */ jsx8(
871
+ IndeterminateIcon,
872
+ {
873
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
874
+ }
875
+ ) : null
876
+ }
877
+ )
878
+ ] }),
879
+ label && /* @__PURE__ */ jsx8("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
833
880
  ] }),
834
- (label || description) && /* @__PURE__ */ jsxs8("span", { className: "flex flex-col", children: [
835
- label && /* @__PURE__ */ jsx8(
836
- "span",
837
- {
838
- className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
839
- children: label
840
- }
841
- ),
842
- description && /* @__PURE__ */ jsx8(
843
- "span",
844
- {
845
- className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
846
- children: description
847
- }
848
- )
849
- ] })
881
+ description && /* @__PURE__ */ jsx8(
882
+ "span",
883
+ {
884
+ className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
885
+ children: description
886
+ }
887
+ )
850
888
  ]
851
889
  }
852
890
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refinn/core-ui",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",