paris 0.4.0 → 0.4.2

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 (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +1 -1
  3. package/src/stories/card/Card.module.scss +1 -1
  4. package/src/stories/card/Card.tsx +19 -23
  5. package/src/stories/tilt/Tilt.tsx +2 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # paris
2
2
 
3
+ ## 0.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 32e9050: Fix `Card` className prop
8
+
9
+ ## 0.4.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 6d53d07: Separate `Tilt` from `Card`
14
+
3
15
  ## 0.4.0
4
16
 
5
17
  ### Minor Changes
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "paris",
3
3
  "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
4
4
  "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
5
- "version": "0.4.0",
5
+ "version": "0.4.2",
6
6
  "homepage": "https://paris.slingshot.fm",
7
7
  "license": "MIT",
8
8
  "repository": {
package/src/stories/card/Card.module.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  box-shadow: var(--pte-lighting-subtlePopup);
5
5
 
6
6
  user-select: var(--pte-utils-defaultUserSelect);
7
- width: max-content;
7
+ width: auto;
8
8
  padding: 16px;
9
9
 
10
10
  &.flat {
package/src/stories/card/Card.tsx CHANGED
@@ -1,8 +1,6 @@
1
- import type { FC, ReactNode } from 'react';
1
+ import type { FC, HTMLAttributes, ReactNode } from 'react';
2
2
  import clsx from 'clsx';
3
- import { createElement, Fragment } from 'react';
4
3
  import styles from './Card.module.scss';
5
- import type { TiltProps } from '../tilt';
6
4
  import { Tilt } from '../tilt';
7
5
 
8
6
  export type CardProps = {
@@ -12,21 +10,21 @@ export type CardProps = {
12
10
  * @default "hover"
13
11
  */
14
12
  kind?: 'hover' | 'flat';
15
- /**
16
- * Whether the Card should tilt on hover.
17
- *
18
- * @default true
19
- */
20
- tilt?: boolean;
13
+ // /**
14
+ // * Whether the Card should tilt on hover.
15
+ // *
16
+ // * @default true
17
+ // */
18
+ // tilt?: boolean;
21
19
  /** The contents of the Card. */
22
20
  children?: ReactNode | ReactNode[];
23
- /**
24
- * Overrides for nested components.
25
- */
26
- overrides?: {
27
- tilt?: TiltProps;
28
- }
29
- };
21
+ // /**
22
+ // * Overrides for nested components.
23
+ // */
24
+ // overrides?: {
25
+ // tilt?: TiltProps;
26
+ // }
27
+ } & HTMLAttributes<HTMLDivElement>;
30
28
 
31
29
  /**
32
30
  * A Card component.
@@ -42,19 +40,17 @@ export type CardProps = {
42
40
  */
43
41
  export const Card: FC<CardProps> = ({
44
42
  kind = 'hover',
45
- tilt = true,
46
43
  children,
47
- overrides,
44
+ ...props
48
45
  }) => (
49
- <Tilt
50
- disableTilt={!tilt}
51
- {...overrides?.tilt}
46
+ <div
47
+ {...props}
52
48
  className={clsx(
53
49
  styles.container,
54
50
  styles[kind],
55
- overrides?.tilt?.className,
51
+ props?.className,
56
52
  )}
57
53
  >
58
54
  {children}
59
- </Tilt>
55
+ </div>
60
56
  );
package/src/stories/tilt/Tilt.tsx CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import type { FC, ReactNode } from 'react';
2
4
  import RPTilt from 'react-parallax-tilt';
3
5
  import styles from './Tilt.module.scss';