@firecms/ui 3.0.0-canary.134 → 3.0.0-canary.136

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 (13) hide show
  1. package/dist/components/Sheet.d.ts +1 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.es.js +9 -8
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +9 -8
  6. package/dist/index.umd.js.map +1 -1
  7. package/dist/styles.d.ts +3 -3
  8. package/package.json +2 -2
  9. package/src/components/Button.tsx +1 -1
  10. package/src/components/Sheet.tsx +3 -1
  11. package/src/components/Slider.tsx +3 -3
  12. package/src/index.css +1 -1
  13. package/src/styles.ts +3 -3
package/dist/styles.d.ts CHANGED
@@ -5,8 +5,8 @@ export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-
5
5
  export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
6
6
  export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
7
7
  export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
8
- export declare const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
9
- export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
10
- export declare const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
8
+ export declare const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
9
+ export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
10
+ export declare const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-40 m-1 -p-1";
11
11
  export declare const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
12
12
  export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/ui",
3
3
  "type": "module",
4
- "version": "3.0.0-canary.134",
4
+ "version": "3.0.0-canary.136",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -108,7 +108,7 @@
108
108
  "src",
109
109
  "tailwind.config.js"
110
110
  ],
111
- "gitHead": "7cb5af44caa66defa18013655b4b9789661b69e0",
111
+ "gitHead": "10606ac1472f57203a5571b7b5433b2625aafdb9",
112
112
  "publishConfig": {
113
113
  "access": "public"
114
114
  }
package/src/components/Button.tsx CHANGED
@@ -30,7 +30,7 @@ const ButtonInner = React.forwardRef<
30
30
  }: ButtonProps<any>, ref) => {
31
31
 
32
32
  const baseClasses =
33
- "h-fit rounded-md uppercase whitespace-nowrap inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
33
+ "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
34
34
 
35
35
  const buttonClasses = cls({
36
36
  "w-full": fullWidth,
package/src/components/Sheet.tsx CHANGED
@@ -8,6 +8,7 @@ interface SheetProps {
8
8
  open: boolean;
9
9
  title?: string;
10
10
  modal?: boolean;
11
+ includeBackgroundOverlay?: boolean;
11
12
  side?: "top" | "bottom" | "left" | "right";
12
13
  darkBackground?: boolean;
13
14
  transparent?: boolean;
@@ -21,6 +22,7 @@ export const Sheet: React.FC<SheetProps> = ({
21
22
  side = "right",
22
23
  title,
23
24
  modal = true,
25
+ includeBackgroundOverlay = true,
24
26
  open,
25
27
  onOpenChange,
26
28
  transparent,
@@ -59,7 +61,7 @@ export const Sheet: React.FC<SheetProps> = ({
59
61
  <DialogPrimitive.Title autoFocus tabIndex={0}>
60
62
  {title ?? "Sheet"}
61
63
  </DialogPrimitive.Title>
62
- {modal && <DialogPrimitive.Overlay
64
+ {includeBackgroundOverlay && <DialogPrimitive.Overlay
63
65
  className={cls(
64
66
  "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
65
67
  "bg-black bg-opacity-50",
package/src/components/Slider.tsx CHANGED
@@ -32,12 +32,12 @@ function SliderThumb(props: {
32
32
  <TooltipPrimitive.Trigger asChild>
33
33
  <SliderPrimitive.Thumb
34
34
  className={cls({
35
- "border-primary bg-primary hover:bg-primary-dark focus-visible:ring-4 focus-visible:ring-primary outline-none focus-visible:ring-opacity-50": !props.props.disabled,
35
+ "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
36
36
  "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.props.disabled
37
37
  },
38
38
  props.classes,
39
- "focus:ring-8 focus:ring-primary focus:ring-opacity-75",
40
- "hover:ring-8 hover:ring-primary hover:ring-opacity-75",
39
+ "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50",
40
+ "hover:ring-4 hover:ring-primary hover:ring-opacity-25",
41
41
  "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50")}
42
42
 
43
43
  />
package/src/index.css CHANGED
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .typography-button {
63
- @apply text-sm font-medium;
63
+ @apply text-sm font-semibold uppercase;
64
64
  }
65
65
 
66
66
 
package/src/styles.ts CHANGED
@@ -5,8 +5,8 @@ export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800
5
5
  export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
6
6
  export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
7
7
  export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
8
- export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
9
- export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
10
- export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
8
+ export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
9
+ export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
10
+ export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-40 m-1 -p-1";
11
11
  export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
12
12
  export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";