@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.
Files changed (10) hide show
  1. package/dist/appLayout/index.js +53 -82
  2. package/dist/appLayout/index.js.map +1 -1
  3. package/dist/appLayout/index.mjs +53 -82
  4. package/dist/appLayout/index.mjs.map +1 -1
  5. package/dist/index.css +15 -6
  6. package/dist/index.js +53 -82
  7. package/dist/index.mjs +53 -82
  8. package/dist/layout/index.js +53 -82
  9. package/dist/layout/index.mjs +53 -82
  10. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -9149,12 +9149,12 @@ var AppLayout = ({
9149
9149
  setOpenSideMenu(false);
9150
9150
  }
9151
9151
  }, [size]);
9152
- return /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ import_react55.default.createElement(
9152
+ return /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react55.default.createElement(
9153
9153
  "div",
9154
9154
  {
9155
+ dir: direction,
9155
9156
  className: cn(
9156
- "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",
9157
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
9157
+ "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",
9158
9158
  bordered && "hawa-border-b-[1px]"
9159
9159
  )
9160
9160
  },
@@ -9163,18 +9163,10 @@ var AppLayout = ({
9163
9163
  {
9164
9164
  className: cn(
9165
9165
  "dark:hawa-text-white",
9166
- isRTL ? [
9167
- size > 600 ? "hawa-mr-14" : "hawa-mr-2",
9168
- keepDrawerOpen ? "hawa-mr-40" : ""
9169
- ] : [
9170
- size > 600 ? "hawa-ml-14" : "hawa-ml-2",
9171
- keepDrawerOpen ? "hawa-ml-40" : ""
9172
- ]
9166
+ size > 600 ? "hawa-ms-14" : "hawa-ms-2"
9173
9167
  ),
9174
- style: isRTL ? {
9175
- marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
9176
- } : {
9177
- marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
9168
+ style: {
9169
+ marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
9178
9170
  }
9179
9171
  },
9180
9172
  props.pageTitle
@@ -9197,71 +9189,51 @@ var AppLayout = ({
9197
9189
  props.pageTitle ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ import_react55.default.createElement("div", null)
9198
9190
  )
9199
9191
  ),
9200
- /* @__PURE__ */ import_react55.default.createElement(
9201
- "div",
9192
+ /* @__PURE__ */ import_react55.default.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ import_react55.default.createElement("div", null, props.email)) : null, /* @__PURE__ */ import_react55.default.createElement(
9193
+ DropdownMenu,
9202
9194
  {
9203
- className: cn(
9204
- "hawa-flex hawa-gap-2 dark:hawa-text-white",
9205
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
9206
- )
9207
- },
9208
- size > 600 ? /* @__PURE__ */ import_react55.default.createElement(
9209
- "div",
9210
- {
9211
- className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
9212
- },
9213
- /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-font-bold" }, props.username),
9214
- " ",
9215
- /* @__PURE__ */ import_react55.default.createElement("div", null, props.email)
9216
- ) : null,
9217
- /* @__PURE__ */ import_react55.default.createElement(
9218
- DropdownMenu,
9219
- {
9220
- LinkComponent: MenuLinkComponent,
9221
- triggerClassname: "hawa-mx-2",
9222
- align: "end",
9223
- alignOffset: 8,
9224
- side: "bottom",
9225
- sideOffset: 5,
9226
- width: profileMenuWidth,
9227
- direction: isRTL ? "rtl" : "ltr",
9228
- items: props.profileMenuItems || [],
9229
- onItemSelect: (e) => console.log("selecting item ", e),
9230
- trigger: /* @__PURE__ */ import_react55.default.createElement(
9231
- "div",
9195
+ LinkComponent: MenuLinkComponent,
9196
+ triggerClassname: "hawa-mx-2",
9197
+ align: "end",
9198
+ alignOffset: 8,
9199
+ side: "bottom",
9200
+ sideOffset: 5,
9201
+ width: profileMenuWidth,
9202
+ direction,
9203
+ items: props.profileMenuItems || [],
9204
+ onItemSelect: (e) => console.log("selecting item ", e),
9205
+ trigger: /* @__PURE__ */ import_react55.default.createElement(
9206
+ "div",
9207
+ {
9208
+ onClick: onAvatarClick,
9209
+ 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"
9210
+ },
9211
+ props.avatarImage ? /* @__PURE__ */ import_react55.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react55.default.createElement(
9212
+ "svg",
9232
9213
  {
9233
- onClick: onAvatarClick,
9234
- 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"
9214
+ "aria-label": "Avatar Icon",
9215
+ className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
9216
+ fill: "currentColor",
9217
+ viewBox: "0 0 20 20"
9235
9218
  },
9236
- props.avatarImage ? /* @__PURE__ */ import_react55.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react55.default.createElement(
9237
- "svg",
9219
+ /* @__PURE__ */ import_react55.default.createElement(
9220
+ "path",
9238
9221
  {
9239
- "aria-label": "Avatar Icon",
9240
- className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
9241
- fill: "currentColor",
9242
- viewBox: "0 0 20 20"
9243
- },
9244
- /* @__PURE__ */ import_react55.default.createElement(
9245
- "path",
9246
- {
9247
- fillRule: "evenodd",
9248
- d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
9249
- clipRule: "evenodd"
9250
- }
9251
- )
9222
+ fillRule: "evenodd",
9223
+ d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
9224
+ clipRule: "evenodd"
9225
+ }
9252
9226
  )
9253
9227
  )
9254
- }
9255
- )
9256
- )
9228
+ )
9229
+ }
9230
+ ))
9257
9231
  ), /* @__PURE__ */ import_react55.default.createElement(
9258
9232
  "div",
9259
9233
  {
9260
9234
  className: cn(
9261
- "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
9262
- isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
9263
- "hawa-h-[calc(100dvh)]",
9264
- "hawa-bg-primary-foreground",
9235
+ "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",
9236
+ isRTL ? "hawa-right-0" : "hawa-left-0",
9265
9237
  bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
9266
9238
  ),
9267
9239
  style: {
@@ -9303,7 +9275,7 @@ var AppLayout = ({
9303
9275
  "img",
9304
9276
  {
9305
9277
  className: cn(
9306
- "hawa-h-9 hawa-opacity-0 hawa-transition-all",
9278
+ "hawa-h-9 hawa-opacity-0 hawa-transition-all",
9307
9279
  !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
9308
9280
  classNames == null ? void 0 : classNames.fullLogoImg
9309
9281
  ),
@@ -9314,8 +9286,7 @@ var AppLayout = ({
9314
9286
  "img",
9315
9287
  {
9316
9288
  className: cn(
9317
- "hawa-fixed hawa-h-9 hawa-transition-all",
9318
- isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
9289
+ "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
9319
9290
  openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
9320
9291
  classNames == null ? void 0 : classNames.symbolLogoImg
9321
9292
  ),
@@ -9374,21 +9345,21 @@ var AppLayout = ({
9374
9345
  {
9375
9346
  side: "left",
9376
9347
  delayDuration: 500,
9377
- content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
9378
- triggerProps: { asChild: true }
9348
+ triggerProps: { asChild: true },
9349
+ content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
9379
9350
  },
9380
9351
  /* @__PURE__ */ import_react55.default.createElement(
9381
9352
  Button,
9382
9353
  {
9383
9354
  variant: "outline",
9355
+ size: "smallIcon",
9384
9356
  onClick: () => {
9385
9357
  const newKeepOpenState = !keepDrawerOpen;
9386
9358
  if (props.onDrawerExpand) {
9387
9359
  props.onDrawerExpand(newKeepOpenState);
9388
9360
  }
9389
9361
  setKeepDrawerOpen(newKeepOpenState);
9390
- },
9391
- size: "smallIcon"
9362
+ }
9392
9363
  },
9393
9364
  /* @__PURE__ */ import_react55.default.createElement(
9394
9365
  "svg",
@@ -9417,15 +9388,15 @@ var AppLayout = ({
9417
9388
  {
9418
9389
  className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
9419
9390
  style: isRTL ? {
9420
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
9421
- width: `calc(100% - ${drawerSizeCondition}px)`,
9422
9391
  left: "0px",
9423
- top: props.topBar ? "56px" : "0px"
9424
- } : {
9425
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
9392
+ top: props.topBar ? "56px" : "0px",
9426
9393
  width: `calc(100% - ${drawerSizeCondition}px)`,
9394
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
9395
+ } : {
9427
9396
  left: `${drawerSizeCondition}px`,
9428
- top: props.topBar ? "56px" : "0px"
9397
+ top: props.topBar ? "56px" : "0px",
9398
+ width: `calc(100% - ${drawerSizeCondition}px)`,
9399
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
9429
9400
  }
9430
9401
  },
9431
9402
  props.children
package/dist/index.mjs CHANGED
@@ -8926,12 +8926,12 @@ var AppLayout = ({
8926
8926
  setOpenSideMenu(false);
8927
8927
  }
8928
8928
  }, [size]);
8929
- return /* @__PURE__ */ React76.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
8929
+ return /* @__PURE__ */ React76.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
8930
8930
  "div",
8931
8931
  {
8932
+ dir: direction,
8932
8933
  className: cn(
8933
- "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",
8934
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
8934
+ "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",
8935
8935
  bordered && "hawa-border-b-[1px]"
8936
8936
  )
8937
8937
  },
@@ -8940,18 +8940,10 @@ var AppLayout = ({
8940
8940
  {
8941
8941
  className: cn(
8942
8942
  "dark:hawa-text-white",
8943
- isRTL ? [
8944
- size > 600 ? "hawa-mr-14" : "hawa-mr-2",
8945
- keepDrawerOpen ? "hawa-mr-40" : ""
8946
- ] : [
8947
- size > 600 ? "hawa-ml-14" : "hawa-ml-2",
8948
- keepDrawerOpen ? "hawa-ml-40" : ""
8949
- ]
8943
+ size > 600 ? "hawa-ms-14" : "hawa-ms-2"
8950
8944
  ),
8951
- style: isRTL ? {
8952
- marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
8953
- } : {
8954
- marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
8945
+ style: {
8946
+ marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
8955
8947
  }
8956
8948
  },
8957
8949
  props.pageTitle
@@ -8974,71 +8966,51 @@ var AppLayout = ({
8974
8966
  props.pageTitle ? /* @__PURE__ */ React76.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)
8975
8967
  )
8976
8968
  ),
8977
- /* @__PURE__ */ React76.createElement(
8978
- "div",
8969
+ /* @__PURE__ */ React76.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ React76.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ React76.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React76.createElement("div", null, props.email)) : null, /* @__PURE__ */ React76.createElement(
8970
+ DropdownMenu,
8979
8971
  {
8980
- className: cn(
8981
- "hawa-flex hawa-gap-2 dark:hawa-text-white",
8982
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
8983
- )
8984
- },
8985
- size > 600 ? /* @__PURE__ */ React76.createElement(
8986
- "div",
8987
- {
8988
- className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
8989
- },
8990
- /* @__PURE__ */ React76.createElement("div", { className: "hawa-font-bold" }, props.username),
8991
- " ",
8992
- /* @__PURE__ */ React76.createElement("div", null, props.email)
8993
- ) : null,
8994
- /* @__PURE__ */ React76.createElement(
8995
- DropdownMenu,
8996
- {
8997
- LinkComponent: MenuLinkComponent,
8998
- triggerClassname: "hawa-mx-2",
8999
- align: "end",
9000
- alignOffset: 8,
9001
- side: "bottom",
9002
- sideOffset: 5,
9003
- width: profileMenuWidth,
9004
- direction: isRTL ? "rtl" : "ltr",
9005
- items: props.profileMenuItems || [],
9006
- onItemSelect: (e) => console.log("selecting item ", e),
9007
- trigger: /* @__PURE__ */ React76.createElement(
9008
- "div",
8972
+ LinkComponent: MenuLinkComponent,
8973
+ triggerClassname: "hawa-mx-2",
8974
+ align: "end",
8975
+ alignOffset: 8,
8976
+ side: "bottom",
8977
+ sideOffset: 5,
8978
+ width: profileMenuWidth,
8979
+ direction,
8980
+ items: props.profileMenuItems || [],
8981
+ onItemSelect: (e) => console.log("selecting item ", e),
8982
+ trigger: /* @__PURE__ */ React76.createElement(
8983
+ "div",
8984
+ {
8985
+ onClick: onAvatarClick,
8986
+ 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"
8987
+ },
8988
+ props.avatarImage ? /* @__PURE__ */ React76.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React76.createElement(
8989
+ "svg",
9009
8990
  {
9010
- onClick: onAvatarClick,
9011
- 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"
8991
+ "aria-label": "Avatar Icon",
8992
+ className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
8993
+ fill: "currentColor",
8994
+ viewBox: "0 0 20 20"
9012
8995
  },
9013
- props.avatarImage ? /* @__PURE__ */ React76.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React76.createElement(
9014
- "svg",
8996
+ /* @__PURE__ */ React76.createElement(
8997
+ "path",
9015
8998
  {
9016
- "aria-label": "Avatar Icon",
9017
- className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
9018
- fill: "currentColor",
9019
- viewBox: "0 0 20 20"
9020
- },
9021
- /* @__PURE__ */ React76.createElement(
9022
- "path",
9023
- {
9024
- fillRule: "evenodd",
9025
- d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
9026
- clipRule: "evenodd"
9027
- }
9028
- )
8999
+ fillRule: "evenodd",
9000
+ d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
9001
+ clipRule: "evenodd"
9002
+ }
9029
9003
  )
9030
9004
  )
9031
- }
9032
- )
9033
- )
9005
+ )
9006
+ }
9007
+ ))
9034
9008
  ), /* @__PURE__ */ React76.createElement(
9035
9009
  "div",
9036
9010
  {
9037
9011
  className: cn(
9038
- "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
9039
- isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
9040
- "hawa-h-[calc(100dvh)]",
9041
- "hawa-bg-primary-foreground",
9012
+ "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",
9013
+ isRTL ? "hawa-right-0" : "hawa-left-0",
9042
9014
  bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
9043
9015
  ),
9044
9016
  style: {
@@ -9080,7 +9052,7 @@ var AppLayout = ({
9080
9052
  "img",
9081
9053
  {
9082
9054
  className: cn(
9083
- "hawa-h-9 hawa-opacity-0 hawa-transition-all",
9055
+ "hawa-h-9 hawa-opacity-0 hawa-transition-all",
9084
9056
  !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
9085
9057
  classNames == null ? void 0 : classNames.fullLogoImg
9086
9058
  ),
@@ -9091,8 +9063,7 @@ var AppLayout = ({
9091
9063
  "img",
9092
9064
  {
9093
9065
  className: cn(
9094
- "hawa-fixed hawa-h-9 hawa-transition-all",
9095
- isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
9066
+ "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
9096
9067
  openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
9097
9068
  classNames == null ? void 0 : classNames.symbolLogoImg
9098
9069
  ),
@@ -9151,21 +9122,21 @@ var AppLayout = ({
9151
9122
  {
9152
9123
  side: "left",
9153
9124
  delayDuration: 500,
9154
- content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
9155
- triggerProps: { asChild: true }
9125
+ triggerProps: { asChild: true },
9126
+ content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
9156
9127
  },
9157
9128
  /* @__PURE__ */ React76.createElement(
9158
9129
  Button,
9159
9130
  {
9160
9131
  variant: "outline",
9132
+ size: "smallIcon",
9161
9133
  onClick: () => {
9162
9134
  const newKeepOpenState = !keepDrawerOpen;
9163
9135
  if (props.onDrawerExpand) {
9164
9136
  props.onDrawerExpand(newKeepOpenState);
9165
9137
  }
9166
9138
  setKeepDrawerOpen(newKeepOpenState);
9167
- },
9168
- size: "smallIcon"
9139
+ }
9169
9140
  },
9170
9141
  /* @__PURE__ */ React76.createElement(
9171
9142
  "svg",
@@ -9194,15 +9165,15 @@ var AppLayout = ({
9194
9165
  {
9195
9166
  className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
9196
9167
  style: isRTL ? {
9197
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
9198
- width: `calc(100% - ${drawerSizeCondition}px)`,
9199
9168
  left: "0px",
9200
- top: props.topBar ? "56px" : "0px"
9201
- } : {
9202
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
9169
+ top: props.topBar ? "56px" : "0px",
9203
9170
  width: `calc(100% - ${drawerSizeCondition}px)`,
9171
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
9172
+ } : {
9204
9173
  left: `${drawerSizeCondition}px`,
9205
- top: props.topBar ? "56px" : "0px"
9174
+ top: props.topBar ? "56px" : "0px",
9175
+ width: `calc(100% - ${drawerSizeCondition}px)`,
9176
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
9206
9177
  }
9207
9178
  },
9208
9179
  props.children
package/dist/layout/index.js CHANGED
@@ -1525,12 +1525,12 @@ var AppLayout = ({
1525
1525
  setOpenSideMenu(false);
1526
1526
  }
1527
1527
  }, [size]);
1528
- return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ import_react9.default.createElement(
1528
+ return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react9.default.createElement(
1529
1529
  "div",
1530
1530
  {
1531
+ dir: direction,
1531
1532
  className: cn(
1532
- "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",
1533
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
1533
+ "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",
1534
1534
  bordered && "hawa-border-b-[1px]"
1535
1535
  )
1536
1536
  },
@@ -1539,18 +1539,10 @@ var AppLayout = ({
1539
1539
  {
1540
1540
  className: cn(
1541
1541
  "dark:hawa-text-white",
1542
- isRTL ? [
1543
- size > 600 ? "hawa-mr-14" : "hawa-mr-2",
1544
- keepDrawerOpen ? "hawa-mr-40" : ""
1545
- ] : [
1546
- size > 600 ? "hawa-ml-14" : "hawa-ml-2",
1547
- keepDrawerOpen ? "hawa-ml-40" : ""
1548
- ]
1542
+ size > 600 ? "hawa-ms-14" : "hawa-ms-2"
1549
1543
  ),
1550
- style: isRTL ? {
1551
- marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
1552
- } : {
1553
- marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
1544
+ style: {
1545
+ marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
1554
1546
  }
1555
1547
  },
1556
1548
  props.pageTitle
@@ -1573,71 +1565,51 @@ var AppLayout = ({
1573
1565
  props.pageTitle ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ import_react9.default.createElement("div", null)
1574
1566
  )
1575
1567
  ),
1576
- /* @__PURE__ */ import_react9.default.createElement(
1577
- "div",
1568
+ /* @__PURE__ */ import_react9.default.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ import_react9.default.createElement("div", null, props.email)) : null, /* @__PURE__ */ import_react9.default.createElement(
1569
+ DropdownMenu,
1578
1570
  {
1579
- className: cn(
1580
- "hawa-flex hawa-gap-2 dark:hawa-text-white",
1581
- isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
1582
- )
1583
- },
1584
- size > 600 ? /* @__PURE__ */ import_react9.default.createElement(
1585
- "div",
1586
- {
1587
- className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
1588
- },
1589
- /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-font-bold" }, props.username),
1590
- " ",
1591
- /* @__PURE__ */ import_react9.default.createElement("div", null, props.email)
1592
- ) : null,
1593
- /* @__PURE__ */ import_react9.default.createElement(
1594
- DropdownMenu,
1595
- {
1596
- LinkComponent: MenuLinkComponent,
1597
- triggerClassname: "hawa-mx-2",
1598
- align: "end",
1599
- alignOffset: 8,
1600
- side: "bottom",
1601
- sideOffset: 5,
1602
- width: profileMenuWidth,
1603
- direction: isRTL ? "rtl" : "ltr",
1604
- items: props.profileMenuItems || [],
1605
- onItemSelect: (e) => console.log("selecting item ", e),
1606
- trigger: /* @__PURE__ */ import_react9.default.createElement(
1607
- "div",
1571
+ LinkComponent: MenuLinkComponent,
1572
+ triggerClassname: "hawa-mx-2",
1573
+ align: "end",
1574
+ alignOffset: 8,
1575
+ side: "bottom",
1576
+ sideOffset: 5,
1577
+ width: profileMenuWidth,
1578
+ direction,
1579
+ items: props.profileMenuItems || [],
1580
+ onItemSelect: (e) => console.log("selecting item ", e),
1581
+ trigger: /* @__PURE__ */ import_react9.default.createElement(
1582
+ "div",
1583
+ {
1584
+ onClick: onAvatarClick,
1585
+ 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"
1586
+ },
1587
+ props.avatarImage ? /* @__PURE__ */ import_react9.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react9.default.createElement(
1588
+ "svg",
1608
1589
  {
1609
- onClick: onAvatarClick,
1610
- 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"
1590
+ "aria-label": "Avatar Icon",
1591
+ className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
1592
+ fill: "currentColor",
1593
+ viewBox: "0 0 20 20"
1611
1594
  },
1612
- props.avatarImage ? /* @__PURE__ */ import_react9.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react9.default.createElement(
1613
- "svg",
1595
+ /* @__PURE__ */ import_react9.default.createElement(
1596
+ "path",
1614
1597
  {
1615
- "aria-label": "Avatar Icon",
1616
- className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
1617
- fill: "currentColor",
1618
- viewBox: "0 0 20 20"
1619
- },
1620
- /* @__PURE__ */ import_react9.default.createElement(
1621
- "path",
1622
- {
1623
- fillRule: "evenodd",
1624
- d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
1625
- clipRule: "evenodd"
1626
- }
1627
- )
1598
+ fillRule: "evenodd",
1599
+ d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
1600
+ clipRule: "evenodd"
1601
+ }
1628
1602
  )
1629
1603
  )
1630
- }
1631
- )
1632
- )
1604
+ )
1605
+ }
1606
+ ))
1633
1607
  ), /* @__PURE__ */ import_react9.default.createElement(
1634
1608
  "div",
1635
1609
  {
1636
1610
  className: cn(
1637
- "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
1638
- isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
1639
- "hawa-h-[calc(100dvh)]",
1640
- "hawa-bg-primary-foreground",
1611
+ "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",
1612
+ isRTL ? "hawa-right-0" : "hawa-left-0",
1641
1613
  bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
1642
1614
  ),
1643
1615
  style: {
@@ -1679,7 +1651,7 @@ var AppLayout = ({
1679
1651
  "img",
1680
1652
  {
1681
1653
  className: cn(
1682
- "hawa-h-9 hawa-opacity-0 hawa-transition-all",
1654
+ "hawa-h-9 hawa-opacity-0 hawa-transition-all",
1683
1655
  !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
1684
1656
  classNames == null ? void 0 : classNames.fullLogoImg
1685
1657
  ),
@@ -1690,8 +1662,7 @@ var AppLayout = ({
1690
1662
  "img",
1691
1663
  {
1692
1664
  className: cn(
1693
- "hawa-fixed hawa-h-9 hawa-transition-all",
1694
- isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
1665
+ "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
1695
1666
  openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
1696
1667
  classNames == null ? void 0 : classNames.symbolLogoImg
1697
1668
  ),
@@ -1750,21 +1721,21 @@ var AppLayout = ({
1750
1721
  {
1751
1722
  side: "left",
1752
1723
  delayDuration: 500,
1753
- content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
1754
- triggerProps: { asChild: true }
1724
+ triggerProps: { asChild: true },
1725
+ content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
1755
1726
  },
1756
1727
  /* @__PURE__ */ import_react9.default.createElement(
1757
1728
  Button,
1758
1729
  {
1759
1730
  variant: "outline",
1731
+ size: "smallIcon",
1760
1732
  onClick: () => {
1761
1733
  const newKeepOpenState = !keepDrawerOpen;
1762
1734
  if (props.onDrawerExpand) {
1763
1735
  props.onDrawerExpand(newKeepOpenState);
1764
1736
  }
1765
1737
  setKeepDrawerOpen(newKeepOpenState);
1766
- },
1767
- size: "smallIcon"
1738
+ }
1768
1739
  },
1769
1740
  /* @__PURE__ */ import_react9.default.createElement(
1770
1741
  "svg",
@@ -1793,15 +1764,15 @@ var AppLayout = ({
1793
1764
  {
1794
1765
  className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
1795
1766
  style: isRTL ? {
1796
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
1797
- width: `calc(100% - ${drawerSizeCondition}px)`,
1798
1767
  left: "0px",
1799
- top: props.topBar ? "56px" : "0px"
1800
- } : {
1801
- height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
1768
+ top: props.topBar ? "56px" : "0px",
1802
1769
  width: `calc(100% - ${drawerSizeCondition}px)`,
1770
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
1771
+ } : {
1803
1772
  left: `${drawerSizeCondition}px`,
1804
- top: props.topBar ? "56px" : "0px"
1773
+ top: props.topBar ? "56px" : "0px",
1774
+ width: `calc(100% - ${drawerSizeCondition}px)`,
1775
+ height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
1805
1776
  }
1806
1777
  },
1807
1778
  props.children