@sikka/hawa 0.34.1-next → 0.34.2-next

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.
@@ -1211,12 +1211,12 @@ var AppLayout = ({
1211
1211
  setOpenSideMenu(false);
1212
1212
  }
1213
1213
  }, [size]);
1214
- return /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ import_react5.default.createElement(
1214
+ return /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react5.default.createElement(
1215
1215
  "div",
1216
1216
  {
1217
+ dir: direction,
1217
1218
  className: cn(
1218
- "hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
1219
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
1219
+ "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
1220
1220
  bordered && "hawa-border-b-[1px]"
1221
1221
  )
1222
1222
  },
@@ -1225,18 +1225,10 @@ var AppLayout = ({
1225
1225
  {
1226
1226
  className: cn(
1227
1227
  "dark:hawa-text-white",
1228
- isRTL ? [
1229
- size > 600 ? "hawa-mr-14" : "hawa-mr-2",
1230
- keepDrawerOpen ? "hawa-mr-40" : ""
1231
- ] : [
1232
- size > 600 ? "hawa-ml-14" : "hawa-ml-2",
1233
- keepDrawerOpen ? "hawa-ml-40" : ""
1234
- ]
1228
+ size > 600 ? "hawa-ms-14" : "hawa-ms-2"
1235
1229
  ),
1236
- style: isRTL ? {
1237
- marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
1238
- } : {
1239
- marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
1230
+ style: {
1231
+ marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
1240
1232
  }
1241
1233
  },
1242
1234
  props.pageTitle
@@ -1259,71 +1251,51 @@ var AppLayout = ({
1259
1251
  props.pageTitle ? /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ import_react5.default.createElement("div", null)
1260
1252
  )
1261
1253
  ),
1262
- /* @__PURE__ */ import_react5.default.createElement(
1263
- "div",
1254
+ /* @__PURE__ */ import_react5.default.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ import_react5.default.createElement("div", null, props.email)) : null, /* @__PURE__ */ import_react5.default.createElement(
1255
+ DropdownMenu,
1264
1256
  {
1265
- className: cn(
1266
- "hawa-flex hawa-gap-2 dark:hawa-text-white",
1267
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
1268
- )
1269
- },
1270
- size > 600 ? /* @__PURE__ */ import_react5.default.createElement(
1271
- "div",
1272
- {
1273
- className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
1274
- },
1275
- /* @__PURE__ */ import_react5.default.createElement("div", { className: "hawa-font-bold" }, props.username),
1276
- " ",
1277
- /* @__PURE__ */ import_react5.default.createElement("div", null, props.email)
1278
- ) : null,
1279
- /* @__PURE__ */ import_react5.default.createElement(
1280
- DropdownMenu,
1281
- {
1282
- LinkComponent: MenuLinkComponent,
1283
- triggerClassname: "hawa-mx-2",
1284
- align: "end",
1285
- alignOffset: 8,
1286
- side: "bottom",
1287
- sideOffset: 5,
1288
- width: profileMenuWidth,
1289
- direction: isRTL ? "rtl" : "ltr",
1290
- items: props.profileMenuItems || [],
1291
- onItemSelect: (e) => console.log("selecting item ", e),
1292
- trigger: /* @__PURE__ */ import_react5.default.createElement(
1293
- "div",
1257
+ LinkComponent: MenuLinkComponent,
1258
+ triggerClassname: "hawa-mx-2",
1259
+ align: "end",
1260
+ alignOffset: 8,
1261
+ side: "bottom",
1262
+ sideOffset: 5,
1263
+ width: profileMenuWidth,
1264
+ direction,
1265
+ items: props.profileMenuItems || [],
1266
+ onItemSelect: (e) => console.log("selecting item ", e),
1267
+ trigger: /* @__PURE__ */ import_react5.default.createElement(
1268
+ "div",
1269
+ {
1270
+ onClick: onAvatarClick,
1271
+ className: "hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
1272
+ },
1273
+ props.avatarImage ? /* @__PURE__ */ import_react5.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react5.default.createElement(
1274
+ "svg",
1294
1275
  {
1295
- onClick: onAvatarClick,
1296
- className: "hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
1276
+ "aria-label": "Avatar Icon",
1277
+ className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
1278
+ fill: "currentColor",
1279
+ viewBox: "0 0 20 20"
1297
1280
  },
1298
- props.avatarImage ? /* @__PURE__ */ import_react5.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react5.default.createElement(
1299
- "svg",
1281
+ /* @__PURE__ */ import_react5.default.createElement(
1282
+ "path",
1300
1283
  {
1301
- "aria-label": "Avatar Icon",
1302
- className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
1303
- fill: "currentColor",
1304
- viewBox: "0 0 20 20"
1305
- },
1306
- /* @__PURE__ */ import_react5.default.createElement(
1307
- "path",
1308
- {
1309
- fillRule: "evenodd",
1310
- d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
1311
- clipRule: "evenodd"
1312
- }
1313
- )
1284
+ fillRule: "evenodd",
1285
+ d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
1286
+ clipRule: "evenodd"
1287
+ }
1314
1288
  )
1315
1289
  )
1316
- }
1317
- )
1318
- )
1290
+ )
1291
+ }
1292
+ ))
1319
1293
  ), /* @__PURE__ */ import_react5.default.createElement(
1320
1294
  "div",
1321
1295
  {
1322
1296
  className: cn(
1323
- "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
1324
- isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
1325
- "hawa-h-[calc(100dvh)]",
1326
- "hawa-bg-primary-foreground",
1297
+ "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
1298
+ isRTL ? "hawa-right-0" : "hawa-left-0",
1327
1299
  bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
1328
1300
  ),
1329
1301
  style: {
@@ -1365,7 +1337,7 @@ var AppLayout = ({
1365
1337
  "img",
1366
1338
  {
1367
1339
  className: cn(
1368
- "hawa-h-9 hawa-opacity-0 hawa-transition-all",
1340
+ "hawa-h-9 hawa-opacity-0 hawa-transition-all",
1369
1341
  !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
1370
1342
  classNames == null ? void 0 : classNames.fullLogoImg
1371
1343
  ),
@@ -1376,8 +1348,7 @@ var AppLayout = ({
1376
1348
  "img",
1377
1349
  {
1378
1350
  className: cn(
1379
- "hawa-fixed hawa-h-9 hawa-transition-all",
1380
- isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
1351
+ "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
1381
1352
  openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
1382
1353
  classNames == null ? void 0 : classNames.symbolLogoImg
1383
1354
  ),
@@ -1436,21 +1407,21 @@ var AppLayout = ({
1436
1407
  {
1437
1408
  side: "left",
1438
1409
  delayDuration: 500,
1439
- content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
1440
- triggerProps: { asChild: true }
1410
+ triggerProps: { asChild: true },
1411
+ content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
1441
1412
  },
1442
1413
  /* @__PURE__ */ import_react5.default.createElement(
1443
1414
  Button,
1444
1415
  {
1445
1416
  variant: "outline",
1417
+ size: "smallIcon",
1446
1418
  onClick: () => {
1447
1419
  const newKeepOpenState = !keepDrawerOpen;
1448
1420
  if (props.onDrawerExpand) {
1449
1421
  props.onDrawerExpand(newKeepOpenState);
1450
1422
  }
1451
1423
  setKeepDrawerOpen(newKeepOpenState);
1452
- },
1453
- size: "smallIcon"
1424
+ }
1454
1425
  },
1455
1426
  /* @__PURE__ */ import_react5.default.createElement(
1456
1427
  "svg",
@@ -1479,15 +1450,15 @@ var AppLayout = ({
1479
1450
  {
1480
1451
  className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
1481
1452
  style: isRTL ? {
1482
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
1483
- width: `calc(100% - ${drawerSizeCondition}px)`,
1484
1453
  left: "0px",
1485
- top: props.topBar ? "56px" : "0px"
1486
- } : {
1487
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
1454
+ top: props.topBar ? "56px" : "0px",
1488
1455
  width: `calc(100% - ${drawerSizeCondition}px)`,
1456
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
1457
+ } : {
1489
1458
  left: `${drawerSizeCondition}px`,
1490
- top: props.topBar ? "56px" : "0px"
1459
+ top: props.topBar ? "56px" : "0px",
1460
+ width: `calc(100% - ${drawerSizeCondition}px)`,
1461
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
1491
1462
  }
1492
1463
  },
1493
1464
  props.children