@refinn/core-ui 0.1.11 → 0.1.13

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 +102 -56
  2. package/dist/index.d.mts +3 -1
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +102 -56
  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,
@@ -810,8 +823,11 @@ var Checkbox = (0, import_react8.forwardRef)(
810
823
  disabled = false,
811
824
  className = "",
812
825
  id,
813
- defaultChecked
826
+ checked,
827
+ defaultChecked,
828
+ onChange
814
829
  } = _b, rest = __objRest(_b, [
830
+ "size",
815
831
  "label",
816
832
  "description",
817
833
  "error",
@@ -820,69 +836,99 @@ var Checkbox = (0, import_react8.forwardRef)(
820
836
  "disabled",
821
837
  "className",
822
838
  "id",
823
- "defaultChecked"
839
+ "checked",
840
+ "defaultChecked",
841
+ "onChange"
824
842
  ]);
825
843
  const reactId = (0, import_react8.useId)();
826
844
  const inputId = id != null ? id : reactId;
827
- const [isChecked, setIsChecked] = (0, import_react8.useState)(defaultChecked != null ? defaultChecked : false);
845
+ const isControlled = checked !== void 0;
846
+ const [uncontrolledChecked, setUncontrolledChecked] = (0, import_react8.useState)(
847
+ defaultChecked != null ? defaultChecked : false
848
+ );
849
+ const isChecked = isControlled ? checked : uncontrolledChecked;
850
+ const active = isChecked || indeterminate;
851
+ let bgClass;
852
+ let borderClass;
853
+ let iconColorClass;
854
+ let hoverClass = "";
855
+ if (disabled) {
856
+ bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
857
+ borderClass = "border-checkbox-disabled-border";
858
+ iconColorClass = "text-checkbox-disabled-icon";
859
+ } else if (contrast) {
860
+ bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
861
+ borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
862
+ iconColorClass = "text-checkbox-contrast-checked-icon";
863
+ } else if (active) {
864
+ bgClass = "bg-checkbox-checked-bg";
865
+ borderClass = "border-checkbox-checked-border";
866
+ iconColorClass = "text-checkbox-checked-icon";
867
+ } else if (error) {
868
+ bgClass = "bg-checkbox-error-bg";
869
+ borderClass = "border-checkbox-error-border";
870
+ iconColorClass = "";
871
+ } else {
872
+ bgClass = "bg-checkbox-bg";
873
+ borderClass = "border-checkbox-border";
874
+ iconColorClass = "";
875
+ hoverClass = "hover:border-checkbox-hover-border";
876
+ }
877
+ const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
878
+ const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
879
+ const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
828
880
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
829
881
  "label",
830
882
  {
831
883
  htmlFor: inputId,
832
- className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
884
+ className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
833
885
  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
- )
886
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-4", children: [
887
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative shrink-0", children: [
888
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
889
+ "input",
890
+ __spreadValues({
891
+ ref,
892
+ id: inputId,
893
+ type: "checkbox",
894
+ checked: isControlled ? checked : void 0,
895
+ defaultChecked: isControlled ? void 0 : defaultChecked,
896
+ onChange: (e) => {
897
+ if (!isControlled) setUncontrolledChecked(e.target.checked);
898
+ onChange == null ? void 0 : onChange(e);
899
+ },
900
+ disabled,
901
+ "aria-checked": indeterminate ? "mixed" : isChecked,
902
+ className: "peer sr-only"
903
+ }, rest)
904
+ ),
905
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
906
+ "div",
907
+ {
908
+ 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`,
909
+ children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
910
+ CheckIcon,
911
+ {
912
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
913
+ }
914
+ ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
915
+ IndeterminateIcon,
916
+ {
917
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
918
+ }
919
+ ) : null
920
+ }
921
+ )
922
+ ] }),
923
+ label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
869
924
  ] }),
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
- ] })
925
+ description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
926
+ "span",
927
+ {
928
+ className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
929
+ children: description
930
+ }
931
+ )
886
932
  ]
887
933
  }
888
934
  );
@@ -1526,7 +1572,7 @@ var Dropdown = (0, import_react13.forwardRef)(
1526
1572
  const triggerClassName = `w-full rounded-6 text-body-small px-16 inline-flex gap-8 items-center border
1527
1573
  ${size === "lg" ? "h-48 py-16" : "h-40 py-12"}
1528
1574
  ${!isCombobox ? disabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer" : ""}
1529
- ${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "bg-dropdown-background-enabled border-dropdown-border-danger ring-1 ring-inset ring-dropdown-border-danger" : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
1575
+ ${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? `bg-dropdown-background-enabled border-dropdown-border-danger ${isOpen ? "ring-1 ring-inset ring-dropdown-border-danger" : ""}` : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
1530
1576
  ${className}`;
1531
1577
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
1532
1578
  label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
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,
@@ -774,8 +787,11 @@ var Checkbox = forwardRef8(
774
787
  disabled = false,
775
788
  className = "",
776
789
  id,
777
- defaultChecked
790
+ checked,
791
+ defaultChecked,
792
+ onChange
778
793
  } = _b, rest = __objRest(_b, [
794
+ "size",
779
795
  "label",
780
796
  "description",
781
797
  "error",
@@ -784,69 +800,99 @@ var Checkbox = forwardRef8(
784
800
  "disabled",
785
801
  "className",
786
802
  "id",
787
- "defaultChecked"
803
+ "checked",
804
+ "defaultChecked",
805
+ "onChange"
788
806
  ]);
789
807
  const reactId = useId2();
790
808
  const inputId = id != null ? id : reactId;
791
- const [isChecked, setIsChecked] = useState2(defaultChecked != null ? defaultChecked : false);
809
+ const isControlled = checked !== void 0;
810
+ const [uncontrolledChecked, setUncontrolledChecked] = useState2(
811
+ defaultChecked != null ? defaultChecked : false
812
+ );
813
+ const isChecked = isControlled ? checked : uncontrolledChecked;
814
+ const active = isChecked || indeterminate;
815
+ let bgClass;
816
+ let borderClass;
817
+ let iconColorClass;
818
+ let hoverClass = "";
819
+ if (disabled) {
820
+ bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
821
+ borderClass = "border-checkbox-disabled-border";
822
+ iconColorClass = "text-checkbox-disabled-icon";
823
+ } else if (contrast) {
824
+ bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
825
+ borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
826
+ iconColorClass = "text-checkbox-contrast-checked-icon";
827
+ } else if (active) {
828
+ bgClass = "bg-checkbox-checked-bg";
829
+ borderClass = "border-checkbox-checked-border";
830
+ iconColorClass = "text-checkbox-checked-icon";
831
+ } else if (error) {
832
+ bgClass = "bg-checkbox-error-bg";
833
+ borderClass = "border-checkbox-error-border";
834
+ iconColorClass = "";
835
+ } else {
836
+ bgClass = "bg-checkbox-bg";
837
+ borderClass = "border-checkbox-border";
838
+ iconColorClass = "";
839
+ hoverClass = "hover:border-checkbox-hover-border";
840
+ }
841
+ const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
842
+ const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
843
+ const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
792
844
  return /* @__PURE__ */ jsxs8(
793
845
  "label",
794
846
  {
795
847
  htmlFor: inputId,
796
- className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
848
+ className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
797
849
  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
- )
850
+ /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
851
+ /* @__PURE__ */ jsxs8("div", { className: "relative shrink-0", children: [
852
+ /* @__PURE__ */ jsx8(
853
+ "input",
854
+ __spreadValues({
855
+ ref,
856
+ id: inputId,
857
+ type: "checkbox",
858
+ checked: isControlled ? checked : void 0,
859
+ defaultChecked: isControlled ? void 0 : defaultChecked,
860
+ onChange: (e) => {
861
+ if (!isControlled) setUncontrolledChecked(e.target.checked);
862
+ onChange == null ? void 0 : onChange(e);
863
+ },
864
+ disabled,
865
+ "aria-checked": indeterminate ? "mixed" : isChecked,
866
+ className: "peer sr-only"
867
+ }, rest)
868
+ ),
869
+ /* @__PURE__ */ jsx8(
870
+ "div",
871
+ {
872
+ 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`,
873
+ children: isChecked ? /* @__PURE__ */ jsx8(
874
+ CheckIcon,
875
+ {
876
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
877
+ }
878
+ ) : indeterminate ? /* @__PURE__ */ jsx8(
879
+ IndeterminateIcon,
880
+ {
881
+ className: `${boxSizeClasses[size]} ${iconColorClass}`
882
+ }
883
+ ) : null
884
+ }
885
+ )
886
+ ] }),
887
+ label && /* @__PURE__ */ jsx8("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
833
888
  ] }),
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
- ] })
889
+ description && /* @__PURE__ */ jsx8(
890
+ "span",
891
+ {
892
+ className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
893
+ children: description
894
+ }
895
+ )
850
896
  ]
851
897
  }
852
898
  );
@@ -1506,7 +1552,7 @@ var Dropdown = forwardRef13(
1506
1552
  const triggerClassName = `w-full rounded-6 text-body-small px-16 inline-flex gap-8 items-center border
1507
1553
  ${size === "lg" ? "h-48 py-16" : "h-40 py-12"}
1508
1554
  ${!isCombobox ? disabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer" : ""}
1509
- ${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "bg-dropdown-background-enabled border-dropdown-border-danger ring-1 ring-inset ring-dropdown-border-danger" : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
1555
+ ${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? `bg-dropdown-background-enabled border-dropdown-border-danger ${isOpen ? "ring-1 ring-inset ring-dropdown-border-danger" : ""}` : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
1510
1556
  ${className}`;
1511
1557
  return /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
1512
1558
  label ? /* @__PURE__ */ jsx13(
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.13",
4
4
  "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",