@charcoal-ui/react 3.6.0 → 3.8.0

package/dist/styled.d.ts

@@ -61,17 +61,17 @@ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
 }> & {
     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">;
 } & {
-    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 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
-    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 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440]>;
+    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]>;
+    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]>;
 } & {
     readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+        px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;
     }>;
     readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 40 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+        px: (size: 0 | "auto" | 4 | 40 | 8 | 16 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -51,24 +51,21 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.6.0",
-    "@charcoal-ui/styled": "^3.6.0",
-    "@charcoal-ui/theme": "^3.6.0",
-    "@charcoal-ui/utils": "^3.6.0",
-    "@react-aria/button": "^3.7.0",
-    "@react-aria/checkbox": "^3.11.0",
-    "@react-aria/dialog": "^3.5.0",
-    "@react-aria/focus": "^3.11.0",
-    "@react-aria/listbox": "^3.8.0",
-    "@react-aria/overlays": "^3.13.0",
-    "@react-aria/radio": "^3.8.0",
-    "@react-aria/select": "^3.9.0",
-    "@react-aria/separator": "^3.3.0",
-    "@react-aria/ssr": "^3.5.0",
-    "@react-aria/switch": "^3.4.0",
-    "@react-aria/textfield": "^3.9.0",
-    "@react-aria/utils": "^3.15.0",
-    "@react-aria/visually-hidden": "^3.7.0",
+    "@charcoal-ui/icons": "^3.8.0",
+    "@charcoal-ui/styled": "^3.8.0",
+    "@charcoal-ui/theme": "^3.8.0",
+    "@charcoal-ui/utils": "^3.8.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/checkbox": "^3.13.0",
+    "@react-aria/dialog": "^3.5.10",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/overlays": "^3.20.0",
+    "@react-aria/radio": "^3.10.0",
+    "@react-aria/ssr": "^3.9.1",
+    "@react-aria/switch": "^3.6.0",
+    "@react-aria/textfield": "^3.14.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-aria/visually-hidden": "^3.8.8",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
@@ -90,5 +87,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "a77b512ae91706be951d5e1fa12265522f1f54e4"
+  "gitHead": "939ab20e11455ff9cba840c38c7dfd33cd739b59"
 }

package/src/_lib/compat.ts

@@ -28,4 +28,12 @@ export interface ReactAreaUseTextFieldCompat<E = Element> {
   readonly onSelect?: React.ReactEventHandler<E>
   readonly onBeforeInput?: React.FormEventHandler<E>
   readonly onInput?: React.FormEventHandler<E>
+  readonly autoCapitalize?:
+    | 'none'
+    | 'on'
+    | 'off'
+    | 'sentences'
+    | 'words'
+    | 'characters'
+    | undefined
 }

package/src/components/Button/StyledButton.tsx

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components'
+import Clickable from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import type { Size } from '.'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+
+const horizontalPaddingSmall = css`
+  padding-right: 16px;
+  padding-left: 16px;
+`
+
+const horizontalPaddingMedium = css`
+  padding-right: 24px;
+  padding-left: 24px;
+`
+
+type StyledButtonProps = {
+  $fullWidth: boolean
+  $size: Size
+  $background: ReturnType<typeof variantToBackground>
+  $color: ReturnType<typeof variantToFont>
+  $isActive: boolean
+}
+
+export const StyledButton = styled(Clickable)<StyledButtonProps>`
+  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 999999px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+
+  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
+  color: var(--charcoal-${(p) => p.$color});
+  background-color: var(--charcoal-${(p) => p.$background});
+  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    ${focusVisibleFocusRingCss}
+
+    ${({ $isActive: $active, $color, $background }) =>
+      $active
+        ? css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          `
+        : css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+  }
+
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
+  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
+`