@atom-learning/components 6.6.0 → 6.7.0

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.
package/dist/index.cjs.js CHANGED
@@ -2903,26 +2903,36 @@ var StyledRoot$4 = styled("div", {
2903
2903
  "disabled:opacity-30",
2904
2904
  "disabled:pointer-events-none"
2905
2905
  ],
2906
- variants: { size: {
2907
- sm: [
2908
- "h-6",
2909
- "text-sm",
2910
- "leading-[1.53]",
2911
- "capsize-[0.4056]"
2912
- ],
2913
- md: [
2914
- "h-8",
2915
- "text-sm",
2916
- "leading-[1.53]",
2917
- "capsize-[0.4056]"
2918
- ],
2919
- lg: [
2920
- "h-10",
2921
- "text-md",
2922
- "leading-normal",
2923
- "capsize-[0.3864]"
2924
- ]
2925
- } }
2906
+ variants: {
2907
+ size: {
2908
+ sm: [
2909
+ "h-6",
2910
+ "text-sm",
2911
+ "leading-[1.53]",
2912
+ "capsize-[0.4056]"
2913
+ ],
2914
+ md: [
2915
+ "h-8",
2916
+ "text-sm",
2917
+ "leading-[1.53]",
2918
+ "capsize-[0.4056]"
2919
+ ],
2920
+ lg: [
2921
+ "h-10",
2922
+ "text-md",
2923
+ "leading-normal",
2924
+ "capsize-[0.3864]"
2925
+ ]
2926
+ },
2927
+ appearance: {
2928
+ standard: [],
2929
+ modern: [
2930
+ "border-grey-900",
2931
+ "text-grey-900",
2932
+ "bg-grey-100"
2933
+ ]
2934
+ }
2935
+ }
2926
2936
  });
2927
2937
  var ChipRootContext = react.createContext({});
2928
2938
  var ChipRootProvider = ({ size, children }) => {
@@ -3011,29 +3021,45 @@ ChipDismissibleGroup.displayName = "ChipDismissibleGroup";
3011
3021
  //#endregion
3012
3022
  //#region src/components/chip-toggle-group/ChipToggleGroupItem.tsx
3013
3023
  var StyledChipToggleIcon = styled(Icon, { base: ["hidden"] });
3014
- var StyledChipToggleGroupItem = styled(Chip, { base: [
3015
- "flex",
3016
- "not-disabled:cursor-pointer",
3017
- "not-disabled:data-[state=on]:hover:bg-white",
3018
- "not-disabled:data-[state=on]:hover:text-primary-1000",
3019
- "not-disabled:focus-visible:outline-none",
3020
- "not-disabled:focus-visible:relative",
3021
- "not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
3022
- "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
3023
- "not-disabled:focus-visible:z-1",
3024
- "not-disabled:hover:bg-grey-200",
3025
- "not-disabled:hover:border-current",
3026
- "not-disabled:hover:text-grey-1000",
3027
- "data-[state=off]:bg-white",
3028
- "data-[state=off]:border-grey-600",
3029
- "data-[state=off]:text-grey-800",
3030
- "data-[state=on]:[&_svg]:block"
3031
- ] });
3032
- var ChipToggleGroupItem = ({ size = "md", children, ...rest }) => {
3024
+ var StyledChipToggleGroupItem = styled(Chip, {
3025
+ base: [
3026
+ "flex",
3027
+ "not-disabled:cursor-pointer",
3028
+ "not-disabled:data-[state=on]:hover:bg-white",
3029
+ "not-disabled:data-[state=on]:hover:text-primary-1000",
3030
+ "not-disabled:focus-visible:outline-none",
3031
+ "not-disabled:focus-visible:relative",
3032
+ "not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
3033
+ "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
3034
+ "not-disabled:focus-visible:z-1",
3035
+ "not-disabled:hover:bg-grey-200",
3036
+ "not-disabled:hover:border-current",
3037
+ "not-disabled:hover:text-grey-1000",
3038
+ "data-[state=off]:bg-white",
3039
+ "data-[state=off]:border-grey-600",
3040
+ "data-[state=off]:text-grey-800",
3041
+ "data-[state=on]:[&_svg]:block"
3042
+ ],
3043
+ variants: { appearance: {
3044
+ standard: [],
3045
+ modern: [
3046
+ "data-[state=off]:bg-grey-100",
3047
+ "data-[state=off]:border-transparent",
3048
+ "data-[state=on]:border-grey-900",
3049
+ "data-[state=on]:text-grey-900",
3050
+ "data-[state=on]:bg-white",
3051
+ "data-[state=on]:font-bold"
3052
+ ]
3053
+ } }
3054
+ });
3055
+ var ChipToggleGroupItem = ({ size = "md", appearance, children, ...rest }) => {
3033
3056
  return /* @__PURE__ */ react.createElement(_radix_ui_react_toggle_group.Item, {
3034
3057
  ...rest,
3035
3058
  asChild: true
3036
- }, /* @__PURE__ */ react.createElement(StyledChipToggleGroupItem, { as: "button" }, /* @__PURE__ */ react.createElement(StyledChipToggleIcon, {
3059
+ }, /* @__PURE__ */ react.createElement(StyledChipToggleGroupItem, {
3060
+ as: "button",
3061
+ appearance
3062
+ }, /* @__PURE__ */ react.createElement(StyledChipToggleIcon, {
3037
3063
  is: _atom_learning_icons.Ok,
3038
3064
  size: size === "lg" ? "md" : "sm"
3039
3065
  }), /* @__PURE__ */ react.createElement(Chip.Content, null, children)));