@seed-design/react 1.2.0 → 1.2.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 (20) hide show
  1. package/lib/components/BottomSheet/BottomSheet.cjs +1 -1
  2. package/lib/components/BottomSheet/BottomSheet.d.ts +1 -1
  3. package/lib/components/BottomSheet/BottomSheet.d.ts.map +1 -1
  4. package/lib/components/BottomSheet/BottomSheet.js +1 -1
  5. package/lib/components/Dialog/Dialog.cjs +1 -6
  6. package/lib/components/Dialog/Dialog.d.ts +1 -1
  7. package/lib/components/Dialog/Dialog.d.ts.map +1 -1
  8. package/lib/components/Dialog/Dialog.js +1 -6
  9. package/lib/components/ImageFrame/ImageFrame.cjs +2 -2
  10. package/lib/components/ImageFrame/ImageFrame.js +2 -2
  11. package/lib/components/TextField/TextField.test.d.ts +1 -0
  12. package/lib/components/TextField/TextField.test.d.ts.map +1 -1
  13. package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts +1 -0
  14. package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts.map +1 -1
  15. package/package.json +3 -3
  16. package/src/components/BottomSheet/BottomSheet.tsx +2 -4
  17. package/src/components/Dialog/Dialog.tsx +1 -5
  18. package/src/components/ImageFrame/ImageFrame.tsx +2 -2
  19. package/src/components/TextField/TextField.test.tsx +17 -25
  20. package/src/components/TextField/useTextFieldWithGraphemes.test.tsx +17 -17
package/lib/components/BottomSheet/BottomSheet.cjs CHANGED
@@ -29,7 +29,7 @@ const BottomSheetContent = withContext(
29
29
  "content"
30
30
  );
31
31
  const BottomSheetHeader = withContext(
32
- reactPrimitive.Primitive.div,
32
+ reactDrawer.Drawer.Header,
33
33
  "header"
34
34
  );
35
35
  const BottomSheetTitle = withContext(
package/lib/components/BottomSheet/BottomSheet.d.ts CHANGED
@@ -19,7 +19,7 @@ export declare const BottomSheetBackdrop: ForwardRefExoticComponent<BottomSheetB
19
19
  export interface BottomSheetContentProps extends Drawer.ContentProps {
20
20
  }
21
21
  export declare const BottomSheetContent: ForwardRefExoticComponent<BottomSheetContentProps & RefAttributes<HTMLDivElement>>;
22
- export interface BottomSheetHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
22
+ export interface BottomSheetHeaderProps extends Drawer.HeaderProps {
23
23
  }
24
24
  export declare const BottomSheetHeader: ForwardRefExoticComponent<BottomSheetHeaderProps & RefAttributes<HTMLDivElement>>;
25
25
  export interface BottomSheetTitleProps extends Drawer.TitleProps {
package/lib/components/BottomSheet/BottomSheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrE,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,MAAM,CAAC,SAAS;CAAG;AAE1F,eAAO,MAAM,eAAe,iEAI1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,mJAAiB,CAAC;AAIjD,MAAM,WAAW,0BAA2B,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE7E,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEnE,eAAO,MAAM,gBAAgB,sHAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,8HAGC,CAAC;AAIrC,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,IAAI,CACF,UAAU,EACV,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CACpF,EACD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,2HAGlC,CAAC"}
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrE,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,MAAM,CAAC,SAAS;CAAG;AAE1F,eAAO,MAAM,eAAe,iEAI1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,mJAAiB,CAAC;AAIjD,MAAM,WAAW,0BAA2B,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE7E,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,WAAW;CAAG;AAErE,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEnE,eAAO,MAAM,gBAAgB,sHAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,8HAGC,CAAC;AAIrC,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,IAAI,CACF,UAAU,EACV,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CACpF,EACD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,2HAGlC,CAAC"}
package/lib/components/BottomSheet/BottomSheet.js CHANGED
@@ -25,7 +25,7 @@ const BottomSheetContent = withContext(
25
25
  "content"
26
26
  );
27
27
  const BottomSheetHeader = withContext(
28
- Primitive.div,
28
+ Drawer.Header,
29
29
  "header"
30
30
  );
31
31
  const BottomSheetTitle = withContext(
package/lib/components/Dialog/Dialog.cjs CHANGED
@@ -3,11 +3,9 @@
3
3
 
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
- const jsxRuntime = require('react/jsx-runtime');
7
6
  const reactDialog = require('@seed-design/react-dialog');
8
7
  const reactPrimitive = require('@seed-design/react-primitive');
9
8
  const dialog = require('@seed-design/css/recipes/dialog');
10
- const React = require('react');
11
9
  const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
12
10
  const createWithStateProps = require('../../utils/createWithStateProps.cjs');
13
11
 
@@ -42,10 +40,7 @@ const DialogDescription = withContext(
42
40
  "description"
43
41
  );
44
42
  const DialogFooter = withContext(reactPrimitive.Primitive.div, "footer");
45
- const DialogAction = React.forwardRef((props, ref) => {
46
- const api = reactDialog.useDialogContext();
47
- return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.button, { ...props, ref, onClick: () => api.setOpen(false) });
48
- });
43
+ const DialogAction = reactDialog.Dialog.CloseButton;
49
44
 
50
45
  exports.DialogAction = DialogAction;
51
46
  exports.DialogBackdrop = DialogBackdrop;
package/lib/components/Dialog/Dialog.d.ts CHANGED
@@ -39,5 +39,5 @@ export interface DialogFooterProps extends PrimitiveProps, React.HTMLAttributes<
39
39
  export declare const DialogFooter: ForwardRefExoticComponent<DialogFooterProps & RefAttributes<HTMLDivElement>>;
40
40
  export interface DialogActionProps extends PrimitiveProps, React.HTMLAttributes<HTMLButtonElement> {
41
41
  }
42
- export declare const DialogAction: ForwardRefExoticComponent<DialogActionProps & RefAttributes<HTMLButtonElement>>;
42
+ export declare const DialogAction: ForwardRefExoticComponent<DialogPrimitive.CloseButtonProps & RefAttributes<HTMLButtonElement>>;
43
43
  //# sourceMappingURL=Dialog.d.ts.map
package/lib/components/Dialog/Dialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAUlF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,eAAe,CAAC,SAAS;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,4DAKrB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,4HAA0B,CAAC;AAIrD,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEjF,eAAO,MAAM,gBAAgB,kHAG5B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE7E,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAOpG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,iHAGvB,CAAC;AAOF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAIpG,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,YAAY,iHAGvB,CAAC"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AASlF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,eAAe,CAAC,SAAS;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,4DAKrB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,4HAA0B,CAAC;AAIrD,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEjF,eAAO,MAAM,gBAAgB,kHAG5B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE7E,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAOpG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,iHAGvB,CAAC;AAOF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAIpG,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,YAAY,gIAA8B,CAAC"}
package/lib/components/Dialog/Dialog.js CHANGED
@@ -1,9 +1,7 @@
1
1
  'use client';
2
- import { jsx } from 'react/jsx-runtime';
3
2
  import { Dialog, useDialogContext } from '@seed-design/react-dialog';
4
3
  import { Primitive } from '@seed-design/react-primitive';
5
4
  import { dialog } from '@seed-design/css/recipes/dialog';
6
- import { forwardRef } from 'react';
7
5
  import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
8
6
  import { createWithStateProps } from '../../utils/createWithStateProps.js';
9
7
 
@@ -38,9 +36,6 @@ const DialogDescription = withContext(
38
36
  "description"
39
37
  );
40
38
  const DialogFooter = withContext(Primitive.div, "footer");
41
- const DialogAction = forwardRef((props, ref) => {
42
- const api = useDialogContext();
43
- return /* @__PURE__ */ jsx(Primitive.button, { ...props, ref, onClick: () => api.setOpen(false) });
44
- });
39
+ const DialogAction = Dialog.CloseButton;
45
40
 
46
41
  export { DialogAction, DialogBackdrop, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger };
package/lib/components/ImageFrame/ImageFrame.cjs CHANGED
@@ -109,14 +109,14 @@ const ImageFrameIndicator = React__namespace.forwardRef(
109
109
  ImageFrameIndicator.displayName = "ImageFrameIndicator";
110
110
  const HeartFillPath = "M15.5452 10C11.7873 10 9.25 12.9484 9.25 16.6267C9.25 19.8754 11.1219 22.0952 13.1877 23.969C13.7807 24.5069 14.4438 25.0617 15.095 25.6066C15.5434 25.9817 15.9862 26.3522 16.3967 26.7093C17.4501 27.6257 18.4191 28.557 19.1995 29.5994C19.3886 29.8518 19.6856 30.0003 20.001 30C20.3163 29.9997 20.6131 29.8507 20.8016 29.5979C21.5785 28.5562 22.5453 27.6253 23.598 26.7091C24.0105 26.35 24.4568 25.9766 24.9089 25.5984C25.5573 25.0559 26.2176 24.5035 26.807 23.9693C28.8739 22.096 30.75 19.8761 30.75 16.6267C30.75 12.9484 28.2127 10 24.4548 10C22.6365 10 21.1002 11.0545 20 12.4906C18.8998 11.0545 17.3635 10 15.5452 10Z";
111
111
  const HeartOutlineStrokePath = "M15.5452 12C13.0342 12 11.25 13.905 11.25 16.6267C11.25 18.9912 12.5659 20.7048 14.5314 22.4876C15.1157 23.0176 15.7038 23.5087 16.3148 24.019C16.7646 24.3946 17.2269 24.7807 17.7093 25.2003C18.4947 25.8835 19.2814 26.6141 19.9988 27.4215C20.7144 26.614 21.5001 25.8836 22.2849 25.2005C22.7714 24.7771 23.2368 24.3885 23.6895 24.0105C24.2967 23.5035 24.8813 23.0154 25.4639 22.4874C27.4317 20.704 28.75 18.9906 28.75 16.6267C28.75 13.905 26.9658 12 24.4548 12C23.069 12 21.747 12.8325 20.8919 14.5189C20.7215 14.8549 20.3768 15.0667 20 15.0667C19.6233 15.0667 19.2785 14.8549 19.1081 14.5189C18.2531 12.8325 16.931 12 15.5452 12ZM9.25 16.6267C9.25 12.9484 11.7873 10 15.5452 10C17.3146 10 18.8683 10.8364 20 12.2306C21.1317 10.8364 22.6854 10 24.4548 10C28.2127 10 30.75 12.9484 30.75 16.6267C30.75 19.8761 28.8739 22.096 26.807 23.9693C26.2176 24.5035 25.5573 25.0559 24.9089 25.5984C24.4568 25.9766 24.0105 26.35 23.598 26.7091C22.5453 27.6253 21.5785 28.5562 20.8016 29.5979C20.6131 29.8507 20.3163 29.9997 20.001 30C19.6856 30.0003 19.3886 29.8518 19.1995 29.5994C18.4191 28.557 17.4501 27.6257 16.3967 26.7093C15.9862 26.3522 15.5434 25.9817 15.095 25.6066C14.4438 25.0617 13.7807 24.5069 13.1877 23.969C11.1219 22.0952 9.25 19.8754 9.25 16.6267Z";
112
- const UnselectedHeartIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
112
+ const UnselectedHeartIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
113
113
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: HeartFillPath, fill: "black", fillOpacity: "0.063" }),
114
114
  /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: HeartOutlineStrokePath, fill: "white" })
115
115
  ] });
116
116
  const SelectedHeartIcon = () => {
117
117
  const id = React__namespace.useId();
118
118
  const gradientId = `seed-heart-gradient${id.replace(/:/g, "")}`;
119
- return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
119
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
120
120
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: HeartFillPath, fill: `url(#${gradientId})` }),
121
121
  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
122
122
  "linearGradient",
package/lib/components/ImageFrame/ImageFrame.js CHANGED
@@ -86,14 +86,14 @@ const ImageFrameIndicator = React.forwardRef(
86
86
  ImageFrameIndicator.displayName = "ImageFrameIndicator";
87
87
  const HeartFillPath = "M15.5452 10C11.7873 10 9.25 12.9484 9.25 16.6267C9.25 19.8754 11.1219 22.0952 13.1877 23.969C13.7807 24.5069 14.4438 25.0617 15.095 25.6066C15.5434 25.9817 15.9862 26.3522 16.3967 26.7093C17.4501 27.6257 18.4191 28.557 19.1995 29.5994C19.3886 29.8518 19.6856 30.0003 20.001 30C20.3163 29.9997 20.6131 29.8507 20.8016 29.5979C21.5785 28.5562 22.5453 27.6253 23.598 26.7091C24.0105 26.35 24.4568 25.9766 24.9089 25.5984C25.5573 25.0559 26.2176 24.5035 26.807 23.9693C28.8739 22.096 30.75 19.8761 30.75 16.6267C30.75 12.9484 28.2127 10 24.4548 10C22.6365 10 21.1002 11.0545 20 12.4906C18.8998 11.0545 17.3635 10 15.5452 10Z";
88
88
  const HeartOutlineStrokePath = "M15.5452 12C13.0342 12 11.25 13.905 11.25 16.6267C11.25 18.9912 12.5659 20.7048 14.5314 22.4876C15.1157 23.0176 15.7038 23.5087 16.3148 24.019C16.7646 24.3946 17.2269 24.7807 17.7093 25.2003C18.4947 25.8835 19.2814 26.6141 19.9988 27.4215C20.7144 26.614 21.5001 25.8836 22.2849 25.2005C22.7714 24.7771 23.2368 24.3885 23.6895 24.0105C24.2967 23.5035 24.8813 23.0154 25.4639 22.4874C27.4317 20.704 28.75 18.9906 28.75 16.6267C28.75 13.905 26.9658 12 24.4548 12C23.069 12 21.747 12.8325 20.8919 14.5189C20.7215 14.8549 20.3768 15.0667 20 15.0667C19.6233 15.0667 19.2785 14.8549 19.1081 14.5189C18.2531 12.8325 16.931 12 15.5452 12ZM9.25 16.6267C9.25 12.9484 11.7873 10 15.5452 10C17.3146 10 18.8683 10.8364 20 12.2306C21.1317 10.8364 22.6854 10 24.4548 10C28.2127 10 30.75 12.9484 30.75 16.6267C30.75 19.8761 28.8739 22.096 26.807 23.9693C26.2176 24.5035 25.5573 25.0559 24.9089 25.5984C24.4568 25.9766 24.0105 26.35 23.598 26.7091C22.5453 27.6253 21.5785 28.5562 20.8016 29.5979C20.6131 29.8507 20.3163 29.9997 20.001 30C19.6856 30.0003 19.3886 29.8518 19.1995 29.5994C18.4191 28.557 17.4501 27.6257 16.3967 26.7093C15.9862 26.3522 15.5434 25.9817 15.095 25.6066C14.4438 25.0617 13.7807 24.5069 13.1877 23.969C11.1219 22.0952 9.25 19.8754 9.25 16.6267Z";
89
- const UnselectedHeartIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
89
+ const UnselectedHeartIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
90
90
  /* @__PURE__ */ jsx("path", { d: HeartFillPath, fill: "black", fillOpacity: "0.063" }),
91
91
  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: HeartOutlineStrokePath, fill: "white" })
92
92
  ] });
93
93
  const SelectedHeartIcon = () => {
94
94
  const id = React.useId();
95
95
  const gradientId = `seed-heart-gradient${id.replace(/:/g, "")}`;
96
- return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
96
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
97
97
  /* @__PURE__ */ jsx("path", { d: HeartFillPath, fill: `url(#${gradientId})` }),
98
98
  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
99
99
  "linearGradient",
package/lib/components/TextField/TextField.test.d.ts CHANGED
@@ -1 +1,2 @@
1
+ export {};
1
2
  //# sourceMappingURL=TextField.test.d.ts.map
package/lib/components/TextField/TextField.test.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
1
+ {"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":""}
package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts CHANGED
@@ -1 +1,2 @@
1
+ export {};
1
2
  //# sourceMappingURL=useTextFieldWithGraphemes.test.d.ts.map
package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTextFieldWithGraphemes.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
1
+ {"version":3,"file":"useTextFieldWithGraphemes.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.test.tsx"],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -44,8 +44,8 @@
44
44
  "@seed-design/react-avatar": "1.0.0",
45
45
  "@seed-design/react-checkbox": "1.0.1",
46
46
  "@seed-design/react-collapsible": "0.1.0",
47
- "@seed-design/react-dialog": "1.0.1",
48
- "@seed-design/react-drawer": "1.0.5",
47
+ "@seed-design/react-dialog": "1.0.2",
48
+ "@seed-design/react-drawer": "1.0.8",
49
49
  "@seed-design/react-field": "1.0.1",
50
50
  "@seed-design/react-image": "0.1.0",
51
51
  "@seed-design/react-fieldset": "0.1.0",
package/src/components/BottomSheet/BottomSheet.tsx CHANGED
@@ -51,12 +51,10 @@ export const BottomSheetContent = withContext<HTMLDivElement, BottomSheetContent
51
51
 
52
52
  ////////////////////////////////////////////////////////////////////////////////////
53
53
 
54
- export interface BottomSheetHeaderProps
55
- extends PrimitiveProps,
56
- React.HTMLAttributes<HTMLDivElement> {}
54
+ export interface BottomSheetHeaderProps extends Drawer.HeaderProps {}
57
55
 
58
56
  export const BottomSheetHeader = withContext<HTMLDivElement, BottomSheetHeaderProps>(
59
- Primitive.div,
57
+ Drawer.Header,
60
58
  "header",
61
59
  );
62
60
 
package/src/components/Dialog/Dialog.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
2
2
  import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
3
3
  import { dialog, type DialogVariantProps } from "@seed-design/css/recipes/dialog";
4
- import { forwardRef } from "react";
5
4
  import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
6
5
  import { createWithStateProps } from "../../utils/createWithStateProps";
7
6
 
@@ -103,7 +102,4 @@ export interface DialogActionProps
103
102
  extends PrimitiveProps,
104
103
  React.HTMLAttributes<HTMLButtonElement> {}
105
104
 
106
- export const DialogAction = forwardRef<HTMLButtonElement, DialogActionProps>((props, ref) => {
107
- const api = useDialogContext();
108
- return <Primitive.button {...props} ref={ref} onClick={() => api.setOpen(false)} />;
109
- });
105
+ export const DialogAction = DialogPrimitive.CloseButton;
package/src/components/ImageFrame/ImageFrame.tsx CHANGED
@@ -176,7 +176,7 @@ const HeartOutlineStrokePath =
176
176
  "M15.5452 12C13.0342 12 11.25 13.905 11.25 16.6267C11.25 18.9912 12.5659 20.7048 14.5314 22.4876C15.1157 23.0176 15.7038 23.5087 16.3148 24.019C16.7646 24.3946 17.2269 24.7807 17.7093 25.2003C18.4947 25.8835 19.2814 26.6141 19.9988 27.4215C20.7144 26.614 21.5001 25.8836 22.2849 25.2005C22.7714 24.7771 23.2368 24.3885 23.6895 24.0105C24.2967 23.5035 24.8813 23.0154 25.4639 22.4874C27.4317 20.704 28.75 18.9906 28.75 16.6267C28.75 13.905 26.9658 12 24.4548 12C23.069 12 21.747 12.8325 20.8919 14.5189C20.7215 14.8549 20.3768 15.0667 20 15.0667C19.6233 15.0667 19.2785 14.8549 19.1081 14.5189C18.2531 12.8325 16.931 12 15.5452 12ZM9.25 16.6267C9.25 12.9484 11.7873 10 15.5452 10C17.3146 10 18.8683 10.8364 20 12.2306C21.1317 10.8364 22.6854 10 24.4548 10C28.2127 10 30.75 12.9484 30.75 16.6267C30.75 19.8761 28.8739 22.096 26.807 23.9693C26.2176 24.5035 25.5573 25.0559 24.9089 25.5984C24.4568 25.9766 24.0105 26.35 23.598 26.7091C22.5453 27.6253 21.5785 28.5562 20.8016 29.5979C20.6131 29.8507 20.3163 29.9997 20.001 30C19.6856 30.0003 19.3886 29.8518 19.1995 29.5994C18.4191 28.557 17.4501 27.6257 16.3967 26.7093C15.9862 26.3522 15.5434 25.9817 15.095 25.6066C14.4438 25.0617 13.7807 24.5069 13.1877 23.969C11.1219 22.0952 9.25 19.8754 9.25 16.6267Z";
177
177
 
178
178
  const UnselectedHeartIcon = () => (
179
- <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
179
+ <svg viewBox="8 9 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
180
180
  <path d={HeartFillPath} fill="black" fillOpacity="0.063" />
181
181
  <path fillRule="evenodd" clipRule="evenodd" d={HeartOutlineStrokePath} fill="white" />
182
182
  </svg>
@@ -186,7 +186,7 @@ const SelectedHeartIcon = () => {
186
186
  const id = React.useId();
187
187
  const gradientId = `seed-heart-gradient${id.replace(/:/g, "")}`;
188
188
  return (
189
- <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
189
+ <svg viewBox="8 9 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
190
190
  <path d={HeartFillPath} fill={`url(#${gradientId})`} />
191
191
  <defs>
192
192
  <linearGradient
package/src/components/TextField/TextField.test.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import "@testing-library/jest-dom/vitest";
2
- import { cleanup, render } from "@testing-library/react";
1
+ import { render } from "@testing-library/react";
3
2
  import userEvent from "@testing-library/user-event";
4
- import { afterEach, describe, expect, it, vi } from "vitest";
3
+ import { describe, expect, it, mock } from "bun:test";
5
4
  import type { ReactElement } from "react";
6
5
  import React from "react";
7
6
 
@@ -16,8 +15,6 @@ import {
16
15
  TextFieldSuffixText,
17
16
  } from "./TextField";
18
17
 
19
- afterEach(cleanup);
20
-
21
18
  function setUp(jsx: ReactElement) {
22
19
  return {
23
20
  user: userEvent.setup(),
@@ -26,17 +23,12 @@ function setUp(jsx: ReactElement) {
26
23
  }
27
24
 
28
25
  describe("TextField", () => {
29
- global.CSS = {
30
- // @ts-expect-error
31
- supports: (_k, _v) => true,
32
- };
33
-
34
26
  describe("props merging", () => {
35
27
  describe("TextFieldInput", () => {
36
28
  it("should merge props from TextFieldRoot", () => {
37
29
  const { getByRole } = setUp(
38
30
  <TextFieldRoot defaultValue="initial">
39
- <TextFieldInput placeholder="Placeholder" />
31
+ <TextFieldInput placeholder="Placeholder" aria-label="Test input" />
40
32
  </TextFieldRoot>,
41
33
  );
42
34
 
@@ -49,7 +41,7 @@ describe("TextField", () => {
49
41
  const { getByRole } = setUp(
50
42
  <Field.Root required invalid disabled name="test-field">
51
43
  <TextFieldRoot>
52
- <TextFieldInput />
44
+ <TextFieldInput aria-label="Test input" />
53
45
  </TextFieldRoot>
54
46
  </Field.Root>,
55
47
  );
@@ -65,7 +57,7 @@ describe("TextField", () => {
65
57
  const { getByRole } = setUp(
66
58
  <Field.Root name="field-name">
67
59
  <TextFieldRoot>
68
- <TextFieldInput name="direct-name" />
60
+ <TextFieldInput name="direct-name" aria-label="Test input" />
69
61
  </TextFieldRoot>
70
62
  </Field.Root>,
71
63
  );
@@ -78,7 +70,7 @@ describe("TextField", () => {
78
70
  const { getByRole } = setUp(
79
71
  <Field.Root disabled readOnly invalid>
80
72
  <TextFieldRoot>
81
- <TextFieldInput data-custom="value" />
73
+ <TextFieldInput data-custom="value" aria-label="Test input" />
82
74
  </TextFieldRoot>
83
75
  </Field.Root>,
84
76
  );
@@ -91,10 +83,10 @@ describe("TextField", () => {
91
83
  });
92
84
 
93
85
  it("should handle uncontrolled modes", async () => {
94
- const handleChange = vi.fn();
86
+ const handleChange = mock(() => {});
95
87
  const { getByRole, user } = setUp(
96
88
  <TextFieldRoot onValueChange={handleChange}>
97
- <TextFieldInput />
89
+ <TextFieldInput aria-label="Test input" />
98
90
  </TextFieldRoot>,
99
91
  );
100
92
 
@@ -110,7 +102,7 @@ describe("TextField", () => {
110
102
 
111
103
  return (
112
104
  <TextFieldRoot value={value} onValueChange={setValue}>
113
- <TextFieldInput />
105
+ <TextFieldInput aria-label="Test input" />
114
106
  </TextFieldRoot>
115
107
  );
116
108
  }
@@ -128,7 +120,7 @@ describe("TextField", () => {
128
120
  it("should merge props from TextFieldRoot", () => {
129
121
  const { getByRole } = setUp(
130
122
  <TextFieldRoot defaultValue="initial">
131
- <TextFieldTextarea placeholder="Placeholder" />
123
+ <TextFieldTextarea placeholder="Placeholder" aria-label="Test textarea" />
132
124
  </TextFieldRoot>,
133
125
  );
134
126
 
@@ -141,7 +133,7 @@ describe("TextField", () => {
141
133
  const { getByRole } = setUp(
142
134
  <Field.Root required invalid disabled name="test-field">
143
135
  <TextFieldRoot>
144
- <TextFieldTextarea />
136
+ <TextFieldTextarea aria-label="Test textarea" />
145
137
  </TextFieldRoot>
146
138
  </Field.Root>,
147
139
  );
@@ -157,7 +149,7 @@ describe("TextField", () => {
157
149
  const { getByRole } = setUp(
158
150
  <Field.Root disabled name="field-name">
159
151
  <TextFieldRoot>
160
- <TextFieldTextarea disabled={false} name="direct-name" />
152
+ <TextFieldTextarea disabled={false} name="direct-name" aria-label="Test textarea" />
161
153
  </TextFieldRoot>
162
154
  </Field.Root>,
163
155
  );
@@ -171,7 +163,7 @@ describe("TextField", () => {
171
163
  const { getByRole } = setUp(
172
164
  <Field.Root disabled readOnly invalid>
173
165
  <TextFieldRoot>
174
- <TextFieldTextarea data-custom="value" />
166
+ <TextFieldTextarea data-custom="value" aria-label="Test textarea" />
175
167
  </TextFieldRoot>
176
168
  </Field.Root>,
177
169
  );
@@ -184,10 +176,10 @@ describe("TextField", () => {
184
176
  });
185
177
 
186
178
  it("should handle uncontrolled modes", async () => {
187
- const handleChange = vi.fn();
179
+ const handleChange = mock(() => {});
188
180
  const { getByRole, user } = setUp(
189
181
  <TextFieldRoot onValueChange={handleChange}>
190
- <TextFieldTextarea />
182
+ <TextFieldTextarea aria-label="Test textarea" />
191
183
  </TextFieldRoot>,
192
184
  );
193
185
 
@@ -203,7 +195,7 @@ describe("TextField", () => {
203
195
 
204
196
  return (
205
197
  <TextFieldRoot value={value} onValueChange={setValue}>
206
- <TextFieldTextarea />
198
+ <TextFieldTextarea aria-label="Test textarea" />
207
199
  </TextFieldRoot>
208
200
  );
209
201
  }
@@ -223,7 +215,7 @@ describe("TextField", () => {
223
215
  <TextFieldRoot disabled invalid readOnly>
224
216
  <TextFieldPrefixText>Prefix</TextFieldPrefixText>
225
217
  <TextFieldPrefixIcon svg={<svg data-testid="prefix-icon" />} />
226
- <TextFieldInput />
218
+ <TextFieldInput aria-label="Test input" />
227
219
  <TextFieldSuffixIcon svg={<svg data-testid="suffix-icon" />} />
228
220
  <TextFieldSuffixText>Suffix</TextFieldSuffixText>
229
221
  </TextFieldRoot>,
package/src/components/TextField/useTextFieldWithGraphemes.test.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import "@testing-library/jest-dom/vitest";
2
- import { cleanup, render } from "@testing-library/react";
1
+ import { render } from "@testing-library/react";
3
2
  import userEvent from "@testing-library/user-event";
4
- import { afterEach, describe, expect, it, vi } from "vitest";
3
+ import { describe, expect, it, mock } from "bun:test";
5
4
  import type { ReactElement } from "react";
6
5
  import React from "react";
7
6
 
@@ -15,8 +14,6 @@ import {
15
14
  } from "../Field/Field";
16
15
  import { useTextFieldWithGraphemes } from "./useTextFieldWithGraphemes";
17
16
 
18
- afterEach(cleanup);
19
-
20
17
  function setUp(jsx: ReactElement) {
21
18
  return {
22
19
  user: userEvent.setup(),
@@ -55,11 +52,6 @@ const TextFieldWithGraphemes = (props: TextFieldWithGraphemesProps) => {
55
52
  };
56
53
 
57
54
  describe("useTextFieldWithGraphemes", () => {
58
- global.CSS = {
59
- // @ts-expect-error
60
- supports: (_k, _v) => true,
61
- };
62
-
63
55
  describe("basic functionality", () => {
64
56
  it("should render with empty default value", () => {
65
57
  const { getByTestId } = setUp(<TextFieldWithGraphemes />);
@@ -153,8 +145,15 @@ describe("useTextFieldWithGraphemes", () => {
153
145
  });
154
146
 
155
147
  describe("onValueChange callback", () => {
148
+ type ValueChangeParams = {
149
+ value: string;
150
+ graphemes: string[];
151
+ slicedValue: string;
152
+ slicedGraphemes: string[];
153
+ };
154
+
156
155
  it("should call onValueChange with correct parameters", async () => {
157
- const handleValueChange = vi.fn();
156
+ const handleValueChange = mock<(params: ValueChangeParams) => void>(() => {});
158
157
  const { getByTestId, user } = setUp(
159
158
  <TextFieldWithGraphemes onValueChange={handleValueChange} />,
160
159
  );
@@ -178,7 +177,7 @@ describe("useTextFieldWithGraphemes", () => {
178
177
  });
179
178
 
180
179
  it("should provide sliced values when maxGraphemes is set", async () => {
181
- const handleValueChange = vi.fn();
180
+ const handleValueChange = mock<(params: ValueChangeParams) => void>(() => {});
182
181
  const { getByTestId, user } = setUp(
183
182
  <TextFieldWithGraphemes maxGraphemeCount={3} onValueChange={handleValueChange} />,
184
183
  );
@@ -186,7 +185,8 @@ describe("useTextFieldWithGraphemes", () => {
186
185
 
187
186
  await user.type(input, "Hello");
188
187
 
189
- const lastCall = handleValueChange.mock.calls[handleValueChange.mock.calls.length - 1][0];
188
+ const lastCall = handleValueChange.mock.calls[handleValueChange.mock.calls.length - 1]?.[0];
189
+ if (!lastCall) throw new Error("Expected lastCall to be defined");
190
190
 
191
191
  expect(lastCall.value).toBe("Hello");
192
192
  expect(lastCall.graphemes).toEqual(["H", "e", "l", "l", "o"]);
@@ -195,7 +195,7 @@ describe("useTextFieldWithGraphemes", () => {
195
195
  });
196
196
 
197
197
  it("should handle empty string", async () => {
198
- const handleValueChange = vi.fn();
198
+ const handleValueChange = mock(() => {});
199
199
  const { getByTestId, user } = setUp(
200
200
  <TextFieldWithGraphemes defaultValue="Test" onValueChange={handleValueChange} />,
201
201
  );
@@ -212,8 +212,8 @@ describe("useTextFieldWithGraphemes", () => {
212
212
  });
213
213
 
214
214
  it("should be called in both controlled and uncontrolled modes", async () => {
215
- const handleUncontrolled = vi.fn();
216
- const handleControlled = vi.fn();
215
+ const handleUncontrolled = mock<(params: ValueChangeParams) => void>(() => {});
216
+ const handleControlled = mock<(params: ValueChangeParams) => void>(() => {});
217
217
 
218
218
  function TestBothModes() {
219
219
  const [controlledValue, setControlledValue] = React.useState("controlled");
@@ -291,7 +291,7 @@ describe("useTextFieldWithGraphemes", () => {
291
291
  });
292
292
 
293
293
  it("should call onValueChange even when value doesn't change in controlled mode", async () => {
294
- const handleValueChange = vi.fn();
294
+ const handleValueChange = mock(() => {});
295
295
  const { getByTestId, user } = setUp(
296
296
  <TextFieldWithGraphemes value="fixed" onValueChange={handleValueChange} />,
297
297
  );