@seed-design/react 0.1.14 → 0.2.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 (12) hide show
  1. package/lib/components/Divider/Divider.cjs +14 -2
  2. package/lib/components/Divider/Divider.d.ts +9 -1
  3. package/lib/components/Divider/Divider.d.ts.map +1 -1
  4. package/lib/components/Divider/Divider.js +14 -2
  5. package/lib/components/Icon/Icon.d.ts.map +1 -1
  6. package/lib/utils/createSlotRecipeContext.d.ts.map +1 -1
  7. package/package.json +4 -4
  8. package/src/components/ActionChip/ActionChip.tsx +2 -2
  9. package/src/components/ControlChip/ControlChip.tsx +2 -2
  10. package/src/components/Divider/Divider.tsx +28 -3
  11. package/src/components/Icon/Icon.tsx +4 -1
  12. package/src/utils/createSlotRecipeContext.tsx +4 -1
package/lib/components/Divider/Divider.cjs CHANGED
@@ -27,16 +27,28 @@ function _interopNamespaceDefault(e) {
27
27
  const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
28
28
 
29
29
  const Divider = React__namespace.forwardRef((props, ref) => {
30
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
30
+ const {
31
+ as = "hr",
32
+ color = "stroke.neutral",
33
+ thickness = 1,
34
+ orientation = "horizontal",
35
+ role,
36
+ ...rest
37
+ } = props;
31
38
  return /* @__PURE__ */ jsxRuntime.jsx(
32
39
  Box.Box,
33
40
  {
34
41
  ref,
35
42
  as,
43
+ role,
44
+ ...(as === "hr" && orientation !== "horizontal" || as !== "hr" && role === "separator") && {
45
+ "aria-orientation": orientation
46
+ },
36
47
  display: "block",
37
48
  borderColor: color,
38
49
  borderWidth: 0,
39
- borderBottomWidth: thickness,
50
+ ...orientation === "vertical" && { borderRightWidth: thickness },
51
+ ...orientation === "horizontal" && { borderBottomWidth: thickness },
40
52
  ...rest
41
53
  }
42
54
  );
package/lib/components/Divider/Divider.d.ts CHANGED
@@ -2,9 +2,12 @@ import { BoxProps } from '../Box/Box';
2
2
  import * as React from "react";
3
3
  export interface DividerProps {
4
4
  /**
5
+ * The HTML element to use for the divider.
6
+ * Keep in mind that "hr" elements are read by screen readers as a semantic break with an implicit role="separator"
7
+ * If the element should be read by screen readers but be rendered as an element other than "hr", give an explicit role="separator"
5
8
  * @default "hr"
6
9
  */
7
- as?: "hr" | "div";
10
+ as?: "hr" | "div" | "li";
8
11
  /**
9
12
  * @default "stroke.neutral"
10
13
  */
@@ -13,6 +16,11 @@ export interface DividerProps {
13
16
  * @default 1
14
17
  */
15
18
  thickness?: BoxProps["borderBottomWidth"];
19
+ /**
20
+ * @default "horizontal"
21
+ */
22
+ orientation?: "horizontal" | "vertical";
23
+ role?: Extract<React.AriaRole, "separator">;
16
24
  }
17
25
  export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
18
26
  //# sourceMappingURL=Divider.d.ts.map
package/lib/components/Divider/Divider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oFAclB,CAAC"}
1
+ {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,OAAO,oFA6BlB,CAAC"}
package/lib/components/Divider/Divider.js CHANGED
@@ -4,16 +4,28 @@ import * as React from 'react';
4
4
  import { Box } from '../Box/Box.js';
5
5
 
6
6
  const Divider = React.forwardRef((props, ref) => {
7
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
7
+ const {
8
+ as = "hr",
9
+ color = "stroke.neutral",
10
+ thickness = 1,
11
+ orientation = "horizontal",
12
+ role,
13
+ ...rest
14
+ } = props;
8
15
  return /* @__PURE__ */ jsx(
9
16
  Box,
10
17
  {
11
18
  ref,
12
19
  as,
20
+ role,
21
+ ...(as === "hr" && orientation !== "horizontal" || as !== "hr" && role === "separator") && {
22
+ "aria-orientation": orientation
23
+ },
13
24
  display: "block",
14
25
  borderColor: color,
15
26
  borderWidth: 0,
16
- borderBottomWidth: thickness,
27
+ ...orientation === "vertical" && { borderRightWidth: thickness },
28
+ ...orientation === "horizontal" && { borderBottomWidth: thickness },
17
29
  ...rest
18
30
  }
19
31
  );
package/lib/components/Icon/Icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,wBAG1B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE5B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,wBAG1B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,4CAsDA,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE5B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
package/lib/utils/createSlotRecipeContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"createSlotRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createSlotRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE;yCAIP;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAsBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAuBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,KACtB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAsBtF"}
1
+ {"version":3,"file":"createSlotRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createSlotRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,EAAE,UAAU,CAAC;KACnB;yCAI2C;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAsBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAuBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,KACtB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAsBtF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.1.14",
3
+ "version": "0.2.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -50,7 +50,7 @@
50
50
  "@seed-design/react-pull-to-refresh": "0.0.6",
51
51
  "@seed-design/react-radio-group": "0.0.4",
52
52
  "@seed-design/react-segmented-control": "0.0.5",
53
- "@seed-design/react-snackbar": "0.0.5",
53
+ "@seed-design/react-snackbar": "0.0.6",
54
54
  "@seed-design/react-switch": "0.0.4",
55
55
  "@seed-design/react-tabs": "0.0.8",
56
56
  "@seed-design/react-text-field": "0.0.4",
@@ -58,12 +58,12 @@
58
58
  "clsx": "^2.1.1"
59
59
  },
60
60
  "peerDependencies": {
61
- "@seed-design/css": "0.1.14",
61
+ "@seed-design/css": "0.2.0",
62
62
  "react": ">=18.0.0",
63
63
  "react-dom": ">=18.0.0"
64
64
  },
65
65
  "devDependencies": {
66
- "@seed-design/css": "0.1.14",
66
+ "@seed-design/css": "0.2.0",
67
67
  "@vitejs/plugin-react": "^5.0.0",
68
68
  "ajv": "^8.17.1",
69
69
  "globby": "^14.1.0",
package/src/components/ActionChip/ActionChip.tsx CHANGED
@@ -8,12 +8,12 @@ const { withContext } = createRecipeContext(actionChip);
8
8
 
9
9
  /**
10
10
  * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
11
- *
11
+ *
12
12
  * Migration guide:
13
13
  * ```tsx
14
14
  * // Before
15
15
  * <ActionChip size="medium">Label</ActionChip>
16
- *
16
+ *
17
17
  * // After
18
18
  * import { Chip } from "@seed-design/react";
19
19
  * <Chip.Button size="medium" variant="solid">Label</Chip.Button>
package/src/components/ControlChip/ControlChip.tsx CHANGED
@@ -13,12 +13,12 @@ export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariant
13
13
 
14
14
  /**
15
15
  * @deprecated ControlChipProps is deprecated. Use Chip.Toggle or Chip.Button instead.
16
- *
16
+ *
17
17
  * Migration guide:
18
18
  * ```tsx
19
19
  * // Before
20
20
  * <ControlChip size="medium">Label</ControlChip>
21
- *
21
+ *
22
22
  * // After
23
23
  * import { Chip } from "@seed-design/react";
24
24
  * <Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
package/src/components/Divider/Divider.tsx CHANGED
@@ -3,9 +3,12 @@ import { Box, type BoxProps } from "../Box/Box";
3
3
 
4
4
  export interface DividerProps {
5
5
  /**
6
+ * The HTML element to use for the divider.
7
+ * Keep in mind that "hr" elements are read by screen readers as a semantic break with an implicit role="separator"
8
+ * If the element should be read by screen readers but be rendered as an element other than "hr", give an explicit role="separator"
6
9
  * @default "hr"
7
10
  */
8
- as?: "hr" | "div";
11
+ as?: "hr" | "div" | "li";
9
12
 
10
13
  /**
11
14
  * @default "stroke.neutral"
@@ -16,19 +19,41 @@ export interface DividerProps {
16
19
  * @default 1
17
20
  */
18
21
  thickness?: BoxProps["borderBottomWidth"];
22
+
23
+ /**
24
+ * @default "horizontal"
25
+ */
26
+ orientation?: "horizontal" | "vertical";
27
+
28
+ role?: Extract<React.AriaRole, "separator">;
19
29
  }
20
30
 
21
31
  export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
22
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
32
+ const {
33
+ as = "hr",
34
+ color = "stroke.neutral",
35
+ thickness = 1,
36
+ orientation = "horizontal",
37
+ role,
38
+ ...rest
39
+ } = props;
23
40
 
24
41
  return (
25
42
  <Box
26
43
  ref={ref}
27
44
  as={as}
45
+ role={role}
46
+ // if hr, aria-orientation=horizontal is implied if not specified
47
+ // if not hr, aria-orientation is needed
48
+ {...(((as === "hr" && orientation !== "horizontal") ||
49
+ (as !== "hr" && role === "separator")) && {
50
+ "aria-orientation": orientation,
51
+ })}
28
52
  display="block"
29
53
  borderColor={color}
30
54
  borderWidth={0}
31
- borderBottomWidth={thickness}
55
+ {...(orientation === "vertical" && { borderRightWidth: thickness })}
56
+ {...(orientation === "horizontal" && { borderBottomWidth: thickness })}
32
57
  {...rest}
33
58
  />
34
59
  );
package/src/components/Icon/Icon.tsx CHANGED
@@ -46,7 +46,10 @@ const IconContext = createContext<{ register: () => void; unregister: () => void
46
46
  export const IconRequired = ({
47
47
  children,
48
48
  enabled,
49
- }: { children: React.ReactNode; enabled: boolean }) => {
49
+ }: {
50
+ children: React.ReactNode;
51
+ enabled: boolean;
52
+ }) => {
50
53
  const registeredRef = useRef(false);
51
54
  const parentContext = useContext(IconContext);
52
55
 
package/src/utils/createSlotRecipeContext.tsx CHANGED
@@ -18,7 +18,10 @@ export function createSlotRecipeContext<
18
18
  const ClassNamesProvider = ({
19
19
  children,
20
20
  value,
21
- }: { children: React.ReactNode; value: Classnames }) => {
21
+ }: {
22
+ children: React.ReactNode;
23
+ value: Classnames;
24
+ }) => {
22
25
  return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
23
26
  };
24
27