@charcoal-ui/react 3.10.1-beta.1 → 4.0.0-beta.1

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 (31) hide show
  1. package/dist/_lib/useClassNames.d.ts +5 -0
  2. package/dist/_lib/useClassNames.d.ts.map +1 -0
  3. package/dist/components/Button/index.d.ts +13 -10
  4. package/dist/components/Button/index.d.ts.map +1 -1
  5. package/dist/components/Button/index.story.d.ts +9 -4
  6. package/dist/components/Button/index.story.d.ts.map +1 -1
  7. package/dist/index.cjs.js +314 -357
  8. package/dist/index.cjs.js.map +1 -1
  9. package/dist/index.css +118 -0
  10. package/dist/index.css.map +1 -0
  11. package/dist/index.esm.js +208 -251
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/styled.d.ts +4 -4
  14. package/package.json +17 -11
  15. package/src/_lib/useClassNames.ts +14 -0
  16. package/src/components/Button/__snapshots__/index.story.storyshot +22 -1754
  17. package/src/components/Button/index.css +125 -0
  18. package/src/components/Button/index.story.tsx +1 -95
  19. package/src/components/Button/index.tsx +36 -42
  20. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +4 -111
  21. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +2 -105
  22. package/src/components/Modal/__snapshots__/index.story.storyshot +569 -1621
  23. package/dist/components/Button/StyledButton.d.ts +0 -13
  24. package/dist/components/Button/StyledButton.d.ts.map +0 -1
  25. package/dist/components/Button/lib/variantToBackground.d.ts +0 -3
  26. package/dist/components/Button/lib/variantToBackground.d.ts.map +0 -1
  27. package/dist/components/Button/lib/variantToFont.d.ts +0 -3
  28. package/dist/components/Button/lib/variantToFont.d.ts.map +0 -1
  29. package/src/components/Button/StyledButton.tsx +0 -71
  30. package/src/components/Button/lib/variantToBackground.tsx +0 -19
  31. package/src/components/Button/lib/variantToFont.tsx +0 -19
package/dist/styled.d.ts CHANGED
@@ -61,17 +61,17 @@ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
61
61
  }> & {
62
62
  readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
63
63
  } & {
64
- readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
65
- readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
64
+ readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 40 | 4 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
65
+ readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 40 | 4 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
66
66
  } & {
67
67
  readonly height: Readonly<{
68
- px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
68
+ px: (size: 0 | "auto" | 40 | 4 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
69
69
  column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
70
70
  auto: import("@charcoal-ui/styled/dist/internals").Internal;
71
71
  full: import("@charcoal-ui/styled/dist/internals").Internal;
72
72
  }>;
73
73
  readonly width: Readonly<{
74
- px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
74
+ px: (size: 0 | "auto" | 40 | 4 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
75
75
  column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
76
76
  auto: import("@charcoal-ui/styled/dist/internals").Internal;
77
77
  full: import("@charcoal-ui/styled/dist/internals").Internal;
package/package.json CHANGED
@@ -1,14 +1,20 @@
1
1
  {
2
2
  "name": "@charcoal-ui/react",
3
- "version": "3.10.1-beta.1",
3
+ "version": "4.0.0-beta.1",
4
4
  "license": "Apache-2.0",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",
7
7
  "exports": {
8
- "types": "./dist/index.d.ts",
9
- "require": "./dist/index.cjs.js",
10
- "import": "./dist/index.esm.js",
11
- "default": "./dist/index.esm.js"
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "require": "./dist/index.cjs.js",
11
+ "import": "./dist/index.esm.js",
12
+ "default": "./dist/index.esm.js"
13
+ },
14
+ "./dist/index.css": {
15
+ "import": "./dist/index.css",
16
+ "require": "./dist/index.css"
17
+ }
12
18
  },
13
19
  "types": "./dist/index.d.ts",
14
20
  "sideEffects": false,
@@ -20,7 +26,7 @@
20
26
  "clean": "rimraf dist .tsbuildinfo"
21
27
  },
22
28
  "devDependencies": {
23
- "@charcoal-ui/esbuild-plugin-styled-components": "^3.10.1-beta.1",
29
+ "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.1",
24
30
  "@react-types/switch": "^3.1.2",
25
31
  "@storybook/addon-actions": "^7.4.1",
26
32
  "@storybook/addon-knobs": "^7.0.2",
@@ -54,10 +60,10 @@
54
60
  "typescript": "^4.9.5"
55
61
  },
56
62
  "dependencies": {
57
- "@charcoal-ui/icons": "^3.10.1-beta.1",
58
- "@charcoal-ui/styled": "^3.10.1-beta.1",
59
- "@charcoal-ui/theme": "^3.10.1-beta.1",
60
- "@charcoal-ui/utils": "^3.10.1-beta.1",
63
+ "@charcoal-ui/icons": "^4.0.0-beta.1",
64
+ "@charcoal-ui/styled": "^4.0.0-beta.1",
65
+ "@charcoal-ui/theme": "^4.0.0-beta.1",
66
+ "@charcoal-ui/utils": "^4.0.0-beta.1",
61
67
  "@react-aria/button": "^3.9.1",
62
68
  "@react-aria/checkbox": "^3.13.0",
63
69
  "@react-aria/dialog": "^3.5.10",
@@ -90,5 +96,5 @@
90
96
  "url": "https://github.com/pixiv/charcoal.git",
91
97
  "directory": "packages/react"
92
98
  },
93
- "gitHead": "f36f447ec52c5dc78bea2a40bd9b7bf7751d9849"
99
+ "gitHead": "305cf0556895d0683c892a3852bff77389fa4217"
94
100
  }
package/src/_lib/useClassNames.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { useMemo } from 'react'
2
+
3
+ /**
4
+ * Join two class names if propsClassName is defined.
5
+ */
6
+ export function useClassNames(
7
+ defaultClassName: string,
8
+ propsClassName?: string
9
+ ) {
10
+ return useMemo(
11
+ () => [defaultClassName, propsClassName].filter((v) => v).join(' '),
12
+ [defaultClassName, propsClassName]
13
+ )
14
+ }