@refinn/core-ui 0.1.10 → 0.1.11

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 (6) hide show
  1. package/dist/index.cjs +80 -44
  2. package/dist/index.d.mts +3 -0
  3. package/dist/index.d.ts +3 -0
  4. package/dist/index.js +80 -44
  5. package/dist/theme.css +1 -0
  6. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1247,6 +1247,9 @@ var Drawer = (0, import_react12.forwardRef)(
1247
1247
  subtitle,
1248
1248
  closable = true,
1249
1249
  backdrop = true,
1250
+ fullScreen = false,
1251
+ header,
1252
+ background = "primary",
1250
1253
  children,
1251
1254
  dismiss,
1252
1255
  secondary,
@@ -1259,6 +1262,9 @@ var Drawer = (0, import_react12.forwardRef)(
1259
1262
  "subtitle",
1260
1263
  "closable",
1261
1264
  "backdrop",
1265
+ "fullScreen",
1266
+ "header",
1267
+ "background",
1262
1268
  "children",
1263
1269
  "dismiss",
1264
1270
  "secondary",
@@ -1279,7 +1285,7 @@ var Drawer = (0, import_react12.forwardRef)(
1279
1285
  const handleBackdropMouseDown = (e) => {
1280
1286
  if (closable && e.target === e.currentTarget) handleClose();
1281
1287
  };
1282
- const showHeader = Boolean(title || subtitle || closable);
1288
+ const showHeader = header != null ? header : Boolean(title || subtitle || closable);
1283
1289
  const showFooter = Boolean(dismiss || secondary || confirm);
1284
1290
  const allActions = Boolean(dismiss && secondary && confirm);
1285
1291
  return (0, import_react_dom2.createPortal)(
@@ -1304,54 +1310,84 @@ var Drawer = (0, import_react12.forwardRef)(
1304
1310
  "relative flex h-full w-full flex-col overflow-hidden bg-dialog-background-primary",
1305
1311
  "transition-transform duration-300",
1306
1312
  animate ? "translate-y-0" : "translate-y-full",
1307
- "lg:translate-y-0",
1308
- animate ? "lg:translate-x-0" : "lg:translate-x-full",
1309
- "lg:w-480 lg:min-w-480 lg:max-w-640",
1313
+ fullScreen ? "" : [
1314
+ "lg:translate-y-0",
1315
+ animate ? "lg:translate-x-0" : "lg:translate-x-full"
1316
+ ].join(" "),
1317
+ fullScreen ? "lg:w-full" : "lg:w-480 lg:min-w-480 lg:max-w-640",
1310
1318
  className
1311
1319
  ].filter(Boolean).join(" "),
1312
1320
  onMouseDown: (e) => e.stopPropagation()
1313
1321
  }, rest), {
1314
1322
  children: [
1315
- showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16 lg:px-24 lg:pb-16 lg:pt-20", children: [
1316
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
1317
- title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
1318
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
1319
- ] }),
1320
- closable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1321
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1322
- IconButton,
1323
- {
1324
- icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-20 w-20" }),
1325
- size: "s",
1326
- "aria-label": "\u0E1B\u0E34\u0E14",
1327
- onClick: handleClose,
1328
- className: "bg-icon-button-background-enabled lg:hidden!"
1329
- }
1330
- ),
1331
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1332
- IconButton,
1333
- {
1334
- icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-24 w-24" }),
1335
- size: "m",
1336
- "aria-label": "\u0E1B\u0E34\u0E14",
1337
- onClick: handleClose,
1338
- className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
1339
- }
1340
- )
1341
- ] })
1342
- ] }),
1343
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 overflow-y-auto bg-dialog-background-primary p-16 text-body-regular text-dialog-text-primary lg:p-24", children }),
1344
- showFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end lg:px-24 lg:pb-24 lg:pt-16", children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1345
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
1346
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
1347
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
1348
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
1349
- ] })
1350
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1351
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
1352
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
1353
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
1354
- ] }) })
1323
+ showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1324
+ "div",
1325
+ {
1326
+ className: [
1327
+ "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
1328
+ fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
1329
+ ].join(" "),
1330
+ children: [
1331
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
1332
+ title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
1333
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
1334
+ ] }),
1335
+ closable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1336
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1337
+ IconButton,
1338
+ {
1339
+ icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-20 w-20" }),
1340
+ size: "s",
1341
+ "aria-label": "\u0E1B\u0E34\u0E14",
1342
+ onClick: handleClose,
1343
+ className: "bg-icon-button-background-enabled lg:hidden!"
1344
+ }
1345
+ ),
1346
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1347
+ IconButton,
1348
+ {
1349
+ icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-24 w-24" }),
1350
+ size: fullScreen ? "l" : "m",
1351
+ "aria-label": "\u0E1B\u0E34\u0E14",
1352
+ onClick: handleClose,
1353
+ className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
1354
+ }
1355
+ )
1356
+ ] })
1357
+ ]
1358
+ }
1359
+ ),
1360
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1361
+ "div",
1362
+ {
1363
+ className: [
1364
+ "flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
1365
+ background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
1366
+ fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
1367
+ ].join(" "),
1368
+ children
1369
+ }
1370
+ ),
1371
+ showFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1372
+ "div",
1373
+ {
1374
+ className: [
1375
+ "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
1376
+ fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
1377
+ ].join(" "),
1378
+ children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1379
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
1380
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
1381
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
1382
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
1383
+ ] })
1384
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
1385
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
1386
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
1387
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
1388
+ ] })
1389
+ }
1390
+ )
1355
1391
  ]
1356
1392
  })
1357
1393
  )
package/dist/index.d.mts CHANGED
@@ -124,6 +124,9 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
124
124
  subtitle?: ReactNode;
125
125
  closable?: boolean;
126
126
  backdrop?: boolean;
127
+ fullScreen?: boolean;
128
+ header?: boolean;
129
+ background?: 'primary' | 'secondary';
127
130
  children?: ReactNode;
128
131
  dismiss?: DrawerActionProps;
129
132
  secondary?: DrawerActionProps;
package/dist/index.d.ts CHANGED
@@ -124,6 +124,9 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
124
124
  subtitle?: ReactNode;
125
125
  closable?: boolean;
126
126
  backdrop?: boolean;
127
+ fullScreen?: boolean;
128
+ header?: boolean;
129
+ background?: 'primary' | 'secondary';
127
130
  children?: ReactNode;
128
131
  dismiss?: DrawerActionProps;
129
132
  secondary?: DrawerActionProps;
package/dist/index.js CHANGED
@@ -1221,6 +1221,9 @@ var Drawer = forwardRef12(
1221
1221
  subtitle,
1222
1222
  closable = true,
1223
1223
  backdrop = true,
1224
+ fullScreen = false,
1225
+ header,
1226
+ background = "primary",
1224
1227
  children,
1225
1228
  dismiss,
1226
1229
  secondary,
@@ -1233,6 +1236,9 @@ var Drawer = forwardRef12(
1233
1236
  "subtitle",
1234
1237
  "closable",
1235
1238
  "backdrop",
1239
+ "fullScreen",
1240
+ "header",
1241
+ "background",
1236
1242
  "children",
1237
1243
  "dismiss",
1238
1244
  "secondary",
@@ -1253,7 +1259,7 @@ var Drawer = forwardRef12(
1253
1259
  const handleBackdropMouseDown = (e) => {
1254
1260
  if (closable && e.target === e.currentTarget) handleClose();
1255
1261
  };
1256
- const showHeader = Boolean(title || subtitle || closable);
1262
+ const showHeader = header != null ? header : Boolean(title || subtitle || closable);
1257
1263
  const showFooter = Boolean(dismiss || secondary || confirm);
1258
1264
  const allActions = Boolean(dismiss && secondary && confirm);
1259
1265
  return createPortal2(
@@ -1278,54 +1284,84 @@ var Drawer = forwardRef12(
1278
1284
  "relative flex h-full w-full flex-col overflow-hidden bg-dialog-background-primary",
1279
1285
  "transition-transform duration-300",
1280
1286
  animate ? "translate-y-0" : "translate-y-full",
1281
- "lg:translate-y-0",
1282
- animate ? "lg:translate-x-0" : "lg:translate-x-full",
1283
- "lg:w-480 lg:min-w-480 lg:max-w-640",
1287
+ fullScreen ? "" : [
1288
+ "lg:translate-y-0",
1289
+ animate ? "lg:translate-x-0" : "lg:translate-x-full"
1290
+ ].join(" "),
1291
+ fullScreen ? "lg:w-full" : "lg:w-480 lg:min-w-480 lg:max-w-640",
1284
1292
  className
1285
1293
  ].filter(Boolean).join(" "),
1286
1294
  onMouseDown: (e) => e.stopPropagation()
1287
1295
  }, rest), {
1288
1296
  children: [
1289
- showHeader && /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16 lg:px-24 lg:pb-16 lg:pt-20", children: [
1290
- /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
1291
- title && /* @__PURE__ */ jsx12("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
1292
- subtitle && /* @__PURE__ */ jsx12("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
1293
- ] }),
1294
- closable && /* @__PURE__ */ jsxs11(Fragment3, { children: [
1295
- /* @__PURE__ */ jsx12(
1296
- IconButton,
1297
- {
1298
- icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-20 w-20" }),
1299
- size: "s",
1300
- "aria-label": "\u0E1B\u0E34\u0E14",
1301
- onClick: handleClose,
1302
- className: "bg-icon-button-background-enabled lg:hidden!"
1303
- }
1304
- ),
1305
- /* @__PURE__ */ jsx12(
1306
- IconButton,
1307
- {
1308
- icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-24 w-24" }),
1309
- size: "m",
1310
- "aria-label": "\u0E1B\u0E34\u0E14",
1311
- onClick: handleClose,
1312
- className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
1313
- }
1314
- )
1315
- ] })
1316
- ] }),
1317
- /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-y-auto bg-dialog-background-primary p-16 text-body-regular text-dialog-text-primary lg:p-24", children }),
1318
- showFooter && /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end lg:px-24 lg:pb-24 lg:pt-16", children: allActions ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
1319
- /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
1320
- /* @__PURE__ */ jsxs11("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
1321
- /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
1322
- /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
1323
- ] })
1324
- ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
1325
- /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
1326
- /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
1327
- /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
1328
- ] }) })
1297
+ showHeader && /* @__PURE__ */ jsxs11(
1298
+ "div",
1299
+ {
1300
+ className: [
1301
+ "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
1302
+ fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
1303
+ ].join(" "),
1304
+ children: [
1305
+ /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
1306
+ title && /* @__PURE__ */ jsx12("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
1307
+ subtitle && /* @__PURE__ */ jsx12("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
1308
+ ] }),
1309
+ closable && /* @__PURE__ */ jsxs11(Fragment3, { children: [
1310
+ /* @__PURE__ */ jsx12(
1311
+ IconButton,
1312
+ {
1313
+ icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-20 w-20" }),
1314
+ size: "s",
1315
+ "aria-label": "\u0E1B\u0E34\u0E14",
1316
+ onClick: handleClose,
1317
+ className: "bg-icon-button-background-enabled lg:hidden!"
1318
+ }
1319
+ ),
1320
+ /* @__PURE__ */ jsx12(
1321
+ IconButton,
1322
+ {
1323
+ icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-24 w-24" }),
1324
+ size: fullScreen ? "l" : "m",
1325
+ "aria-label": "\u0E1B\u0E34\u0E14",
1326
+ onClick: handleClose,
1327
+ className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
1328
+ }
1329
+ )
1330
+ ] })
1331
+ ]
1332
+ }
1333
+ ),
1334
+ /* @__PURE__ */ jsx12(
1335
+ "div",
1336
+ {
1337
+ className: [
1338
+ "flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
1339
+ background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
1340
+ fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
1341
+ ].join(" "),
1342
+ children
1343
+ }
1344
+ ),
1345
+ showFooter && /* @__PURE__ */ jsx12(
1346
+ "div",
1347
+ {
1348
+ className: [
1349
+ "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
1350
+ fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
1351
+ ].join(" "),
1352
+ children: allActions ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
1353
+ /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
1354
+ /* @__PURE__ */ jsxs11("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
1355
+ /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
1356
+ /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
1357
+ ] })
1358
+ ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
1359
+ /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
1360
+ /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
1361
+ /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
1362
+ ] })
1363
+ }
1364
+ )
1329
1365
  ]
1330
1366
  })
1331
1367
  )
package/dist/theme.css CHANGED
@@ -496,6 +496,7 @@
496
496
  --color-dialog-icon-warning: var(--color-amber-500);
497
497
  --color-drawer-background-primary: var(--color-white-100);
498
498
  --color-drawer-background-backdrop: var(--color-black-20);
499
+ --color-drawer-background-secondary: var(--color-gray-50);
499
500
  --color-drawer-text-secondary: var(--color-gray-600);
500
501
  --color-drawer-text-primary: var(--color-gray-900);
501
502
  --color-loading-primary: var(--color-blue-600);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refinn/core-ui",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",