@atom-learning/components 11.5.0 → 11.6.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.
Files changed (32) hide show
  1. package/dist/components/select-menu/SelectMenu.context.d.ts +1 -0
  2. package/dist/components/select-menu/SelectMenu.context.js +2 -1
  3. package/dist/components/select-menu/SelectMenu.context.js.map +1 -1
  4. package/dist/components/select-menu/SelectMenu.d.ts +5 -2
  5. package/dist/components/select-menu/SelectMenu.js +3 -1
  6. package/dist/components/select-menu/SelectMenu.js.map +1 -1
  7. package/dist/components/select-menu/SelectMenuContent.js +23 -12
  8. package/dist/components/select-menu/SelectMenuContent.js.map +1 -1
  9. package/dist/components/select-menu/SelectMenuItem.js +30 -19
  10. package/dist/components/select-menu/SelectMenuItem.js.map +1 -1
  11. package/dist/components/select-menu/SelectMenuLabel.js +10 -6
  12. package/dist/components/select-menu/SelectMenuLabel.js.map +1 -1
  13. package/dist/components/select-menu/SelectMenuSeparator.d.ts +6 -1
  14. package/dist/components/select-menu/SelectMenuSeparator.js +22 -6
  15. package/dist/components/select-menu/SelectMenuSeparator.js.map +1 -1
  16. package/dist/components/select-menu/SelectMenuTrigger.js +29 -8
  17. package/dist/components/select-menu/SelectMenuTrigger.js.map +1 -1
  18. package/dist/components/toggle-group/ToggleGroupButton.d.ts +3 -2
  19. package/dist/components/toggle-group/ToggleGroupButton.js +30 -3
  20. package/dist/components/toggle-group/ToggleGroupButton.js.map +1 -1
  21. package/dist/components/toggle-group/ToggleGroupItem.d.ts +3 -0
  22. package/dist/components/toggle-group/ToggleGroupItem.js +39 -14
  23. package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
  24. package/dist/components/toggle-group/ToggleGroupRoot.d.ts +2 -1
  25. package/dist/components/toggle-group/ToggleGroupRoot.js +18 -2
  26. package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
  27. package/dist/components/toggle-group/index.d.ts +3 -2
  28. package/dist/docgen.json +1 -1
  29. package/dist/index.cjs.js +207 -78
  30. package/dist/index.cjs.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/responsive-variant-classes.css +1 -1
package/dist/components/toggle-group/ToggleGroupItem.js CHANGED
@@ -13,13 +13,10 @@ var standardVariant = [
13
13
  "not-disabled:data-[state=on]:before:bg-none",
14
14
  "not-disabled:focus-visible:before:bg-none",
15
15
  "not-disabled:focus-visible:data-[state=off]:border-grey-600!",
16
- "not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
17
16
  "not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]",
18
- "not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]",
19
17
  "not-disabled:focus-visible:outline-none",
20
18
  "not-disabled:focus-visible:relative",
21
- "not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
22
- "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
19
+ "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
23
20
  "not-disabled:focus-visible:z-1",
24
21
  "not-disabled:hover:before:bg-none",
25
22
  "not-disabled:hover:border-current!",
@@ -37,28 +34,56 @@ var modernVariant = [
37
34
  "data-[state=on]:shadow-none!",
38
35
  "data-[state=on]:text-grey-900",
39
36
  "not-disabled:focus-visible:data-[state=off]:border-grey-600!",
40
- "not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
41
- "not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]",
42
37
  "not-disabled:focus-visible:outline-none",
43
38
  "not-disabled:focus-visible:relative",
44
- "not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
45
- "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
39
+ "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
46
40
  "not-disabled:focus-visible:z-1",
47
41
  "not-disabled:hover:text-primary-900"
48
42
  ];
43
+ var darkBase = [
44
+ "bg-transparent",
45
+ "text-grey-200",
46
+ "data-[state=on]:text-white",
47
+ "not-disabled:hover:text-white",
48
+ "not-disabled:focus-visible:shadow-[var(--color-grey-1000)_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!"
49
+ ];
50
+ var standardDarkVariant = darkBase;
51
+ var modernDarkVariant = [
52
+ ...darkBase,
53
+ "data-[state=on]:bg-grey-900",
54
+ "data-[state=on]:border-grey-800!"
55
+ ];
49
56
  var ToggleGroupItem = styled(ToggleGroup.Item, {
50
57
  base: [
51
58
  "cursor-pointer",
52
59
  "disabled:cursor-not-allowed",
53
60
  "disabled:opacity-30"
54
61
  ],
55
- variants: { theme: {
56
- standard: standardVariant,
57
- modern: modernVariant
58
- } },
59
- defaultVariants: { theme: "standard" }
62
+ variants: {
63
+ theme: {
64
+ standard: standardVariant,
65
+ modern: modernVariant
66
+ },
67
+ colorMode: {
68
+ light: [],
69
+ dark: []
70
+ }
71
+ },
72
+ compoundVariants: [{
73
+ theme: "standard",
74
+ colorMode: "dark",
75
+ class: standardDarkVariant
76
+ }, {
77
+ theme: "modern",
78
+ colorMode: "dark",
79
+ class: modernDarkVariant
80
+ }],
81
+ defaultVariants: {
82
+ theme: "standard",
83
+ colorMode: "light"
84
+ }
60
85
  }, { enablePolymorphism: false });
61
86
  //#endregion
62
- export { ToggleGroupItem, modernVariant, standardVariant };
87
+ export { ToggleGroupItem, modernDarkVariant, modernVariant, standardDarkVariant, standardVariant };
63
88
 
64
89
  //# sourceMappingURL=ToggleGroupItem.js.map
package/dist/components/toggle-group/ToggleGroupItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n 'before:bg-grey-600',\n 'bg-white',\n 'border',\n 'border-grey-600',\n 'text-grey-800',\n 'data-[state=on]:border-current!',\n 'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n 'data-[state=on]:text-primary-800',\n 'not-disabled:data-[state=on]:before:bg-none',\n 'not-disabled:focus-visible:before:bg-none',\n 'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n 'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n 'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:before:bg-none',\n 'not-disabled:hover:border-current!',\n 'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n 'bg-grey-200',\n 'border-0',\n 'text-grey-800',\n 'overflow-hidden',\n 'rounded-md',\n 'data-[state=on]:bg-white',\n 'data-[state=on]:border!',\n 'data-[state=on]:border-grey-200!',\n 'data-[state=on]:shadow-none!',\n 'data-[state=on]:text-grey-900',\n 'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n 'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(\n ToggleGroup.Item,\n {\n base: [\n 'cursor-pointer',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n standard: standardVariant,\n modern: modernVariant\n }\n },\n defaultVariants: {\n theme: 'standard'\n }\n },\n { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,kBAAkB,OAC7B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,OAAO,WACT;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
1
+ {"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n 'before:bg-grey-600',\n 'bg-white',\n 'border',\n 'border-grey-600',\n 'text-grey-800',\n 'data-[state=on]:border-current!',\n 'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n 'data-[state=on]:text-primary-800',\n 'not-disabled:data-[state=on]:before:bg-none',\n 'not-disabled:focus-visible:before:bg-none',\n 'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n 'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n // One comma-separated ring: separate shadow classes overwrite each other\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:before:bg-none',\n 'not-disabled:hover:border-current!',\n 'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n 'bg-grey-200',\n 'border-0',\n 'text-grey-800',\n 'overflow-hidden',\n 'rounded-md',\n 'data-[state=on]:bg-white',\n 'data-[state=on]:border!',\n 'data-[state=on]:border-grey-200!',\n 'data-[state=on]:shadow-none!',\n 'data-[state=on]:text-grey-900',\n 'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n // One comma-separated ring: separate shadow classes overwrite each other,\n // and it must be important to beat data-[state=on]:shadow-none!\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:text-primary-900'\n]\n\n// Dark classes are layered over a theme's classes (via compoundVariants), so\n// they only list what differs; tailwind-merge drops the overridden light ones.\nconst darkBase = [\n 'bg-transparent',\n 'text-grey-200',\n 'data-[state=on]:text-white',\n 'not-disabled:hover:text-white',\n // Inner offset is grey-1000, not white, so the ring reads on a dark surface\n 'not-disabled:focus-visible:shadow-[var(--color-grey-1000)_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!'\n]\n\nexport const standardDarkVariant = darkBase\n\nexport const modernDarkVariant = [\n ...darkBase,\n 'data-[state=on]:bg-grey-900',\n 'data-[state=on]:border-grey-800!'\n]\n\nexport const ToggleGroupItem = styled(\n ToggleGroup.Item,\n {\n base: [\n 'cursor-pointer',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n standard: standardVariant,\n modern: modernVariant\n },\n colorMode: {\n light: [],\n dark: []\n }\n },\n compoundVariants: [\n { theme: 'standard', colorMode: 'dark', class: standardDarkVariant },\n { theme: 'modern', colorMode: 'dark', class: modernDarkVariant }\n ],\n defaultVariants: {\n theme: 'standard',\n colorMode: 'light'\n }\n },\n { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;AACF;AAIA,IAAM,WAAW;CACf;CACA;CACA;CACA;CAEA;AACF;AAEA,IAAa,sBAAsB;AAEnC,IAAa,oBAAoB;CAC/B,GAAG;CACH;CACA;AACF;AAEA,IAAa,kBAAkB,OAC7B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,UAAU;GACV,QAAQ;EACV;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB,CAChB;EAAE,OAAO;EAAY,WAAW;EAAQ,OAAO;CAAoB,GACnE;EAAE,OAAO;EAAU,WAAW;EAAQ,OAAO;CAAkB,CACjE;CACA,iBAAiB;EACf,OAAO;EACP,WAAW;CACb;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
package/dist/components/toggle-group/ToggleGroupRoot.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const StyledRoot: import("../..").PolymorphicComponent<({ ref, di
12
12
  hasGap?: boolean | undefined;
13
13
  direction?: "column" | "row" | undefined;
14
14
  theme?: "modern" | "standard" | undefined;
15
+ colorMode?: "dark" | "light" | undefined;
15
16
  }>;
16
- export declare const ToggleGroupRoot: ({ ref, orientation, gap, isFullWidth, children, theme, wrap, ...rest }: React.ComponentProps<typeof StyledRoot> & RootType) => React.JSX.Element;
17
+ export declare const ToggleGroupRoot: ({ ref, orientation, gap, isFullWidth, children, theme, colorMode, wrap, ...rest }: React.ComponentProps<typeof StyledRoot> & RootType) => React.JSX.Element;
17
18
  export {};
package/dist/components/toggle-group/ToggleGroupRoot.js CHANGED
@@ -31,6 +31,10 @@ var StyledRoot = styled(ToggleGroup.Root, {
31
31
  theme: {
32
32
  standard: [],
33
33
  modern: ["bg-grey-200"]
34
+ },
35
+ colorMode: {
36
+ light: [],
37
+ dark: []
34
38
  }
35
39
  },
36
40
  compoundVariants: [
@@ -80,6 +84,16 @@ var StyledRoot = styled(ToggleGroup.Root, {
80
84
  "**:data-radix-collection-item:rounded-none",
81
85
  "bg-white"
82
86
  ]
87
+ },
88
+ {
89
+ theme: "standard",
90
+ colorMode: "dark",
91
+ class: ["bg-transparent"]
92
+ },
93
+ {
94
+ theme: "modern",
95
+ colorMode: "dark",
96
+ class: ["bg-grey-800"]
83
97
  }
84
98
  ]
85
99
  });
@@ -90,7 +104,7 @@ var gapClassMap = {
90
104
  3: "gap-3"
91
105
  };
92
106
  var orientationToDirection = (orientation) => orientation === "horizontal" ? "row" : "column";
93
- var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, theme = "standard", wrap, ...rest }) => {
107
+ var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, theme = "standard", colorMode = "light", wrap, ...rest }) => {
94
108
  const hasGap = typeof gap === "number";
95
109
  return /* @__PURE__ */ jsx(StyledRoot, {
96
110
  ref,
@@ -99,13 +113,15 @@ var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, chil
99
113
  isFullWidth,
100
114
  orientation,
101
115
  theme,
116
+ colorMode,
102
117
  ...rest,
103
118
  children: /* @__PURE__ */ jsx("div", {
104
119
  className: cn("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap"),
105
120
  children: React$1.Children.toArray(children).map((child) => {
106
121
  if (React$1.isValidElement(child)) return React$1.cloneElement(child, {
107
122
  ...child.props,
108
- theme
123
+ theme,
124
+ colorMode
109
125
  });
110
126
  return child;
111
127
  })
package/dist/components/toggle-group/ToggleGroupRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ToggleGroup } from '../../utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n orientation?: 'horizontal' | 'vertical'\n isFullWidth?: boolean\n gap?: 0 | 1 | 2 | 3\n wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n base: ['w-fit'],\n variants: {\n isFullWidth: {\n true: [\n '**:data-radix-collection-item:basis-0',\n '**:data-radix-collection-item:grow',\n 'w-full'\n ],\n false: ['w-auto']\n },\n hasGap: {\n true: ['**:data-radix-collection-item:rounded-md'],\n false: [\n '**:data-radix-collection-item:not-last:before:absolute',\n \"**:data-radix-collection-item:not-last:before:content-['']\",\n '**:data-radix-collection-item:relative',\n 'rounded-md'\n ]\n },\n direction: {\n column: [],\n row: []\n },\n theme: {\n standard: [],\n modern: ['bg-grey-200']\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:first:rounded-l-md',\n '**:data-radix-collection-item:last:rounded-r-md',\n '**:data-radix-collection-item:not-first:border-l-transparent',\n '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n '**:data-radix-collection-item:not-last:before:right-0',\n '**:data-radix-collection-item:not-last:before:-top-px',\n '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n '**:data-radix-collection-item:not-last:before:w-px',\n '**:data-radix-collection-item:not-last:border-r-transparent',\n '**:data-radix-collection-item:rounded-none'\n ]\n },\n {\n hasGap: false,\n direction: 'column',\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:first:rounded-t-sm',\n '**:data-radix-collection-item:last:rounded-b-sm',\n '**:data-radix-collection-item:not-first:border-t-transparent',\n '**:data-radix-collection-item:not-last:before:bottom-0',\n '**:data-radix-collection-item:not-last:before:h-px',\n '**:data-radix-collection-item:not-last:before:-left-px',\n '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n '**:data-radix-collection-item:not-last:border-b-transparent'\n ]\n },\n {\n hasGap: false,\n theme: 'modern',\n class: []\n },\n {\n hasGap: false,\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:bg-transparent',\n '**:data-radix-collection-item:rounded-none',\n 'bg-white'\n ]\n }\n ]\n})\n\nconst gapClassMap = {\n 0: 'gap-0.5',\n 1: 'gap-1',\n 2: 'gap-2',\n 3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = ({\n ref,\n orientation = 'horizontal',\n gap,\n isFullWidth,\n children,\n theme = 'standard',\n wrap,\n ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n theme={theme}\n {...rest}\n >\n <div\n className={cn(\n 'flex',\n hasGap && gapClassMap[gap],\n orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n wrap ? 'flex-wrap' : 'flex-nowrap'\n )}\n >\n {\n React.Children.toArray(children).map((child) => {\n if (React.isValidElement<{ theme?: typeof theme }>(child)) {\n return React.cloneElement(child, { ...child.props, theme })\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </div>\n </StyledRoot>\n )\n}\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACP,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IAAI,QAAM,eAAyC,KAAK,GACtD,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAM,CAAC;IAE5D,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}
1
+ {"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ToggleGroup } from '../../utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n orientation?: 'horizontal' | 'vertical'\n isFullWidth?: boolean\n gap?: 0 | 1 | 2 | 3\n wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n base: ['w-fit'],\n variants: {\n isFullWidth: {\n true: [\n '**:data-radix-collection-item:basis-0',\n '**:data-radix-collection-item:grow',\n 'w-full'\n ],\n false: ['w-auto']\n },\n hasGap: {\n true: ['**:data-radix-collection-item:rounded-md'],\n false: [\n '**:data-radix-collection-item:not-last:before:absolute',\n \"**:data-radix-collection-item:not-last:before:content-['']\",\n '**:data-radix-collection-item:relative',\n 'rounded-md'\n ]\n },\n direction: {\n column: [],\n row: []\n },\n theme: {\n standard: [],\n modern: ['bg-grey-200']\n },\n colorMode: {\n light: [],\n dark: []\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:first:rounded-l-md',\n '**:data-radix-collection-item:last:rounded-r-md',\n '**:data-radix-collection-item:not-first:border-l-transparent',\n '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n '**:data-radix-collection-item:not-last:before:right-0',\n '**:data-radix-collection-item:not-last:before:-top-px',\n '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n '**:data-radix-collection-item:not-last:before:w-px',\n '**:data-radix-collection-item:not-last:border-r-transparent',\n '**:data-radix-collection-item:rounded-none'\n ]\n },\n {\n hasGap: false,\n direction: 'column',\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:first:rounded-t-sm',\n '**:data-radix-collection-item:last:rounded-b-sm',\n '**:data-radix-collection-item:not-first:border-t-transparent',\n '**:data-radix-collection-item:not-last:before:bottom-0',\n '**:data-radix-collection-item:not-last:before:h-px',\n '**:data-radix-collection-item:not-last:before:-left-px',\n '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n '**:data-radix-collection-item:not-last:border-b-transparent'\n ]\n },\n {\n hasGap: false,\n theme: 'modern',\n class: []\n },\n {\n hasGap: false,\n theme: 'standard',\n class: [\n '**:data-radix-collection-item:bg-transparent',\n '**:data-radix-collection-item:rounded-none',\n 'bg-white'\n ]\n },\n // After the light compounds so these win the merge\n {\n theme: 'standard',\n colorMode: 'dark',\n class: ['bg-transparent']\n },\n {\n theme: 'modern',\n colorMode: 'dark',\n class: ['bg-grey-800']\n }\n ]\n})\n\nconst gapClassMap = {\n 0: 'gap-0.5',\n 1: 'gap-1',\n 2: 'gap-2',\n 3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = ({\n ref,\n orientation = 'horizontal',\n gap,\n isFullWidth,\n children,\n theme = 'standard',\n colorMode = 'light',\n wrap,\n ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n theme={theme}\n colorMode={colorMode}\n {...rest}\n >\n <div\n className={cn(\n 'flex',\n hasGap && gapClassMap[gap],\n orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n wrap ? 'flex-wrap' : 'flex-nowrap'\n )}\n >\n {\n React.Children.toArray(children).map((child) => {\n if (\n React.isValidElement<{\n theme?: typeof theme\n colorMode?: typeof colorMode\n }>(child)\n ) {\n return React.cloneElement(child, {\n ...child.props,\n theme,\n colorMode\n })\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </div>\n </StyledRoot>\n )\n}\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;EAEA;GACE,OAAO;GACP,WAAW;GACX,OAAO,CAAC,gBAAgB;EAC1B;EACA;GACE,OAAO;GACP,WAAW;GACX,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,YAAY,SACZ,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACI;EACX,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IACE,QAAM,eAGH,KAAK,GAER,OAAO,QAAM,aAAa,OAAO;KAC/B,GAAG,MAAM;KACT;KACA;IACF,CAAC;IAEH,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}
package/dist/components/toggle-group/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  export declare const ToggleGroup: {
2
2
  Item: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
3
3
  theme?: "modern" | "standard" | undefined;
4
+ colorMode?: "dark" | "light" | undefined;
4
5
  }>;
5
- Button: ({ ref, size, theme, children, ...rest }: React.ComponentProps<typeof import("./ToggleGroupButton").StyledButton>) => import("react").JSX.Element;
6
- Root: ({ ref, orientation, gap, isFullWidth, children, theme, wrap, ...rest }: React.ComponentProps<typeof import("./ToggleGroupRoot").StyledRoot> & {
6
+ Button: ({ ref, size, theme, colorMode, children, ...rest }: React.ComponentProps<typeof import("./ToggleGroupButton").StyledButton>) => import("react").JSX.Element;
7
+ Root: ({ ref, orientation, gap, isFullWidth, children, theme, colorMode, wrap, ...rest }: React.ComponentProps<typeof import("./ToggleGroupRoot").StyledRoot> & {
7
8
  orientation?: 'horizontal' | 'vertical';
8
9
  isFullWidth?: boolean;
9
10
  gap?: 0 | 1 | 2 | 3;