@sikka/hawa 0.19.34-next → 0.19.36-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 (6) hide show
  1. package/dist/index.css +5 -0
  2. package/dist/index.d.mts +2 -1
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.js +84 -61
  5. package/dist/index.mjs +84 -61
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -4169,6 +4169,11 @@ body {
4169
4169
  top: auto;
4170
4170
  }
4171
4171
 
4172
+ .sm\:hawa-max-w-fit {
4173
+ max-width: -moz-fit-content;
4174
+ max-width: fit-content;
4175
+ }
4176
+
4172
4177
  .sm\:hawa-max-w-sm {
4173
4178
  max-width: 24rem;
4174
4179
  }
package/dist/index.d.mts CHANGED
@@ -353,13 +353,14 @@ type RadioTypes = {
353
353
  orientation?: OrientationType;
354
354
  design?: "default" | "tabs" | "cards" | "bordered";
355
355
  options: RadioOptionsTypes[];
356
- width?: "default" | "full";
356
+ width?: "default" | "full" | "none";
357
357
  onChangeTab?: any;
358
358
  defaultValue?: any;
359
359
  direction?: DirectionType;
360
360
  helperText?: string;
361
361
  labelProps?: LabelProps;
362
362
  label?: string;
363
+ tabsContainerClassName?: string;
363
364
  };
364
365
  declare const Radio: FC<RadioTypes>;
365
366
 
package/dist/index.d.ts CHANGED
@@ -353,13 +353,14 @@ type RadioTypes = {
353
353
  orientation?: OrientationType;
354
354
  design?: "default" | "tabs" | "cards" | "bordered";
355
355
  options: RadioOptionsTypes[];
356
- width?: "default" | "full";
356
+ width?: "default" | "full" | "none";
357
357
  onChangeTab?: any;
358
358
  defaultValue?: any;
359
359
  direction?: DirectionType;
360
360
  helperText?: string;
361
361
  labelProps?: LabelProps;
362
362
  label?: string;
363
+ tabsContainerClassName?: string;
363
364
  };
364
365
  declare const Radio: FC<RadioTypes>;
365
366
 
package/dist/index.js CHANGED
@@ -897,7 +897,7 @@ var PricingCard = ({
897
897
  },
898
898
  props.texts.recommended || "RECOMMENDED"
899
899
  ),
900
- /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ import_react7.default.createElement("span", null, props.texts.title), /* @__PURE__ */ import_react7.default.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react7.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react7.default.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ import_react7.default.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ import_react7.default.createElement(Separator, null), /* @__PURE__ */ import_react7.default.createElement(
900
+ /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ import_react7.default.createElement("span", null, props.texts.title), /* @__PURE__ */ import_react7.default.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react7.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ import_react7.default.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ import_react7.default.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ import_react7.default.createElement(Separator, null), /* @__PURE__ */ import_react7.default.createElement(
901
901
  "div",
902
902
  {
903
903
  className: cn(
@@ -3610,6 +3610,7 @@ var Radio = ({
3610
3610
  width = "default",
3611
3611
  orientation = "horizontal",
3612
3612
  labelProps,
3613
+ tabsContainerClassName,
3613
3614
  ...props
3614
3615
  }) => {
3615
3616
  var _a, _b, _c;
@@ -3621,6 +3622,7 @@ var Radio = ({
3621
3622
  vertical: "hawa-flex hawa-flex-col"
3622
3623
  };
3623
3624
  let widthStyle = {
3625
+ none: "",
3624
3626
  default: "hawa-max-w-fit",
3625
3627
  full: "hawa-w-full"
3626
3628
  };
@@ -3645,8 +3647,9 @@ var Radio = ({
3645
3647
  className: cn(
3646
3648
  props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
3647
3649
  "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
3650
+ orientationStyle[orientation],
3648
3651
  widthStyle[width],
3649
- orientationStyle[orientation]
3652
+ tabsContainerClassName
3650
3653
  )
3651
3654
  },
3652
3655
  (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ import_react14.default.createElement(
@@ -11124,9 +11127,11 @@ var ComparingPlans = (props) => {
11124
11127
  )
11125
11128
  )
11126
11129
  );
11127
- return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
11130
+ return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-flex-col hawa-gap-2 sm:hawa-flex-row hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
11128
11131
  Radio,
11129
11132
  {
11133
+ tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
11134
+ width: "none",
11130
11135
  design: "tabs",
11131
11136
  defaultValue: props.currentCycle.value,
11132
11137
  options: props.billingCycles,
@@ -11139,6 +11144,8 @@ var ComparingPlans = (props) => {
11139
11144
  ), /* @__PURE__ */ import_react70.default.createElement(
11140
11145
  Radio,
11141
11146
  {
11147
+ tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
11148
+ width: "none",
11142
11149
  design: "tabs",
11143
11150
  defaultValue: props.currentCurrency.value,
11144
11151
  options: props.currencies,
@@ -11152,7 +11159,7 @@ var ComparingPlans = (props) => {
11152
11159
  "div",
11153
11160
  {
11154
11161
  className: cn(
11155
- "hawa-sticky hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
11162
+ "hawa-sticky hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
11156
11163
  "hawa-bg-primary-foreground"
11157
11164
  ),
11158
11165
  style: {
@@ -11168,68 +11175,84 @@ var ComparingPlans = (props) => {
11168
11175
  },
11169
11176
  /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline " }, /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText)))
11170
11177
  ))
11171
- ), /* @__PURE__ */ import_react70.default.createElement(ScrollArea, { className: "hawa-h-fit hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border" }, uniqueFeatures.map((featureText, featureIndex) => {
11172
- var _a, _b;
11173
- return /* @__PURE__ */ import_react70.default.createElement(
11174
- "div",
11175
- {
11176
- key: featureIndex,
11177
- className: cn(
11178
- "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
11179
- featureIndex === 0 ? "" : "hawa-border-t"
11180
- )
11181
- },
11182
- /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
11183
- (plan) => plan.features.some(
11184
- (feature) => feature.text === featureText && feature.hint
11185
- )
11186
- ) && /* @__PURE__ */ import_react70.default.createElement(
11187
- Tooltip,
11178
+ ), /* @__PURE__ */ import_react70.default.createElement(
11179
+ ScrollArea,
11180
+ {
11181
+ className: "hawa-h-fit hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border",
11182
+ dir: props.direction
11183
+ },
11184
+ uniqueFeatures.map((featureText, featureIndex) => {
11185
+ var _a, _b, _c, _d;
11186
+ return /* @__PURE__ */ import_react70.default.createElement(
11187
+ "div",
11188
11188
  {
11189
- side: "right",
11190
- content: (_b = (_a = props.plans.find(
11191
- (plan) => {
11192
- var _a2;
11193
- return (_a2 = plan.features.find(
11194
- (feature) => feature.text === featureText
11195
- )) == null ? void 0 : _a2.hint;
11196
- }
11197
- )) == null ? void 0 : _a.features.find(
11198
- (feature) => feature.text === featureText
11199
- )) == null ? void 0 : _b.hint
11189
+ key: featureIndex,
11190
+ className: cn(
11191
+ "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
11192
+ featureIndex === 0 ? "" : "hawa-border-t"
11193
+ )
11200
11194
  },
11201
- /* @__PURE__ */ import_react70.default.createElement(
11202
- "svg",
11195
+ /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
11196
+ (plan) => plan.features.some(
11197
+ (feature) => feature.text === featureText && feature.hint
11198
+ )
11199
+ ) && /* @__PURE__ */ import_react70.default.createElement(
11200
+ Tooltip,
11203
11201
  {
11204
- stroke: "currentColor",
11205
- fill: "currentColor",
11206
- strokeWidth: "0",
11207
- viewBox: "0 0 16 16",
11208
- height: "1em",
11209
- width: "1em"
11202
+ side: "right",
11203
+ content: (_b = (_a = props.plans.find(
11204
+ (plan) => {
11205
+ var _a2;
11206
+ return (_a2 = plan.features.find(
11207
+ (feature) => feature.text === featureText
11208
+ )) == null ? void 0 : _a2.hint;
11209
+ }
11210
+ )) == null ? void 0 : _a.features.find(
11211
+ (feature) => feature.text === featureText
11212
+ )) == null ? void 0 : _b.hint
11210
11213
  },
11211
- /* @__PURE__ */ import_react70.default.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
11212
- )
11213
- ), props.plans.some(
11214
- (plan) => plan.features.some(
11215
- (feature) => feature.text === featureText && feature.soon
11216
- )
11217
- ) && /* @__PURE__ */ import_react70.default.createElement(Chip, { label: "Soon" })),
11218
- props.plans.map((plan, planIndex) => {
11219
- const feature = plan.features.find(
11220
- (f) => f.text === featureText
11221
- );
11222
- return /* @__PURE__ */ import_react70.default.createElement(
11223
- "div",
11214
+ /* @__PURE__ */ import_react70.default.createElement(
11215
+ "svg",
11216
+ {
11217
+ stroke: "currentColor",
11218
+ fill: "currentColor",
11219
+ strokeWidth: "0",
11220
+ viewBox: "0 0 16 16",
11221
+ height: "1em",
11222
+ width: "1em"
11223
+ },
11224
+ /* @__PURE__ */ import_react70.default.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
11225
+ )
11226
+ ), props.plans.some(
11227
+ (plan) => plan.features.some(
11228
+ (feature) => feature.text === featureText && feature.soon
11229
+ )
11230
+ ) && /* @__PURE__ */ import_react70.default.createElement(
11231
+ Chip,
11224
11232
  {
11225
- key: planIndex,
11226
- className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
11227
- },
11228
- (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ import_react70.default.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "hawa-text-foreground" })
11229
- );
11230
- })
11231
- );
11232
- })), props.showButtons && /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-px-4 hawa-py-5" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
11233
+ label: ((_d = (_c = props.plans.find(
11234
+ (plan) => plan.features.some(
11235
+ (feature) => feature.text === featureText && feature.soon
11236
+ )
11237
+ )) == null ? void 0 : _c.texts) == null ? void 0 : _d.soon) || "Soon"
11238
+ }
11239
+ )),
11240
+ props.plans.map((plan, planIndex) => {
11241
+ const feature = plan.features.find(
11242
+ (f) => f.text === featureText
11243
+ );
11244
+ return /* @__PURE__ */ import_react70.default.createElement(
11245
+ "div",
11246
+ {
11247
+ key: planIndex,
11248
+ className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
11249
+ },
11250
+ (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ import_react70.default.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "hawa-text-foreground" })
11251
+ );
11252
+ })
11253
+ );
11254
+ })
11255
+ ), props.showButtons && /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-px-4 hawa-py-5" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
11233
11256
  var _a;
11234
11257
  return /* @__PURE__ */ import_react70.default.createElement(
11235
11258
  "div",
package/dist/index.mjs CHANGED
@@ -664,7 +664,7 @@ var PricingCard = ({
664
664
  },
665
665
  props.texts.recommended || "RECOMMENDED"
666
666
  ),
667
- /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React10.createElement("span", null, props.texts.title), /* @__PURE__ */ React10.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React10.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React10.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && /* @__PURE__ */ React10.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ React10.createElement(Separator, null), /* @__PURE__ */ React10.createElement(
667
+ /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React10.createElement("span", null, props.texts.title), /* @__PURE__ */ React10.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React10.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React10.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && props.oldPrice > 0 && /* @__PURE__ */ React10.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React10.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ React10.createElement(Separator, null), /* @__PURE__ */ React10.createElement(
668
668
  "div",
669
669
  {
670
670
  className: cn(
@@ -3377,6 +3377,7 @@ var Radio = ({
3377
3377
  width = "default",
3378
3378
  orientation = "horizontal",
3379
3379
  labelProps,
3380
+ tabsContainerClassName,
3380
3381
  ...props
3381
3382
  }) => {
3382
3383
  var _a, _b, _c;
@@ -3388,6 +3389,7 @@ var Radio = ({
3388
3389
  vertical: "hawa-flex hawa-flex-col"
3389
3390
  };
3390
3391
  let widthStyle = {
3392
+ none: "",
3391
3393
  default: "hawa-max-w-fit",
3392
3394
  full: "hawa-w-full"
3393
3395
  };
@@ -3412,8 +3414,9 @@ var Radio = ({
3412
3414
  className: cn(
3413
3415
  props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
3414
3416
  "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
3417
+ orientationStyle[orientation],
3415
3418
  widthStyle[width],
3416
- orientationStyle[orientation]
3419
+ tabsContainerClassName
3417
3420
  )
3418
3421
  },
3419
3422
  (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React20.createElement(
@@ -10908,9 +10911,11 @@ var ComparingPlans = (props) => {
10908
10911
  )
10909
10912
  )
10910
10913
  );
10911
- return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
10914
+ return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-flex-col hawa-gap-2 sm:hawa-flex-row hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
10912
10915
  Radio,
10913
10916
  {
10917
+ tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
10918
+ width: "none",
10914
10919
  design: "tabs",
10915
10920
  defaultValue: props.currentCycle.value,
10916
10921
  options: props.billingCycles,
@@ -10923,6 +10928,8 @@ var ComparingPlans = (props) => {
10923
10928
  ), /* @__PURE__ */ React96.createElement(
10924
10929
  Radio,
10925
10930
  {
10931
+ tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
10932
+ width: "none",
10926
10933
  design: "tabs",
10927
10934
  defaultValue: props.currentCurrency.value,
10928
10935
  options: props.currencies,
@@ -10936,7 +10943,7 @@ var ComparingPlans = (props) => {
10936
10943
  "div",
10937
10944
  {
10938
10945
  className: cn(
10939
- "hawa-sticky hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
10946
+ "hawa-sticky hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
10940
10947
  "hawa-bg-primary-foreground"
10941
10948
  ),
10942
10949
  style: {
@@ -10952,68 +10959,84 @@ var ComparingPlans = (props) => {
10952
10959
  },
10953
10960
  /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline " }, /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ React96.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React96.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText)))
10954
10961
  ))
10955
- ), /* @__PURE__ */ React96.createElement(ScrollArea, { className: "hawa-h-fit hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border" }, uniqueFeatures.map((featureText, featureIndex) => {
10956
- var _a, _b;
10957
- return /* @__PURE__ */ React96.createElement(
10958
- "div",
10959
- {
10960
- key: featureIndex,
10961
- className: cn(
10962
- "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
10963
- featureIndex === 0 ? "" : "hawa-border-t"
10964
- )
10965
- },
10966
- /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
10967
- (plan) => plan.features.some(
10968
- (feature) => feature.text === featureText && feature.hint
10969
- )
10970
- ) && /* @__PURE__ */ React96.createElement(
10971
- Tooltip,
10962
+ ), /* @__PURE__ */ React96.createElement(
10963
+ ScrollArea,
10964
+ {
10965
+ className: "hawa-h-fit hawa-rounded hawa-rounded-t-none hawa-border-t-0 hawa-border",
10966
+ dir: props.direction
10967
+ },
10968
+ uniqueFeatures.map((featureText, featureIndex) => {
10969
+ var _a, _b, _c, _d;
10970
+ return /* @__PURE__ */ React96.createElement(
10971
+ "div",
10972
10972
  {
10973
- side: "right",
10974
- content: (_b = (_a = props.plans.find(
10975
- (plan) => {
10976
- var _a2;
10977
- return (_a2 = plan.features.find(
10978
- (feature) => feature.text === featureText
10979
- )) == null ? void 0 : _a2.hint;
10980
- }
10981
- )) == null ? void 0 : _a.features.find(
10982
- (feature) => feature.text === featureText
10983
- )) == null ? void 0 : _b.hint
10973
+ key: featureIndex,
10974
+ className: cn(
10975
+ "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
10976
+ featureIndex === 0 ? "" : "hawa-border-t"
10977
+ )
10984
10978
  },
10985
- /* @__PURE__ */ React96.createElement(
10986
- "svg",
10979
+ /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
10980
+ (plan) => plan.features.some(
10981
+ (feature) => feature.text === featureText && feature.hint
10982
+ )
10983
+ ) && /* @__PURE__ */ React96.createElement(
10984
+ Tooltip,
10987
10985
  {
10988
- stroke: "currentColor",
10989
- fill: "currentColor",
10990
- strokeWidth: "0",
10991
- viewBox: "0 0 16 16",
10992
- height: "1em",
10993
- width: "1em"
10986
+ side: "right",
10987
+ content: (_b = (_a = props.plans.find(
10988
+ (plan) => {
10989
+ var _a2;
10990
+ return (_a2 = plan.features.find(
10991
+ (feature) => feature.text === featureText
10992
+ )) == null ? void 0 : _a2.hint;
10993
+ }
10994
+ )) == null ? void 0 : _a.features.find(
10995
+ (feature) => feature.text === featureText
10996
+ )) == null ? void 0 : _b.hint
10994
10997
  },
10995
- /* @__PURE__ */ React96.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
10996
- )
10997
- ), props.plans.some(
10998
- (plan) => plan.features.some(
10999
- (feature) => feature.text === featureText && feature.soon
11000
- )
11001
- ) && /* @__PURE__ */ React96.createElement(Chip, { label: "Soon" })),
11002
- props.plans.map((plan, planIndex) => {
11003
- const feature = plan.features.find(
11004
- (f) => f.text === featureText
11005
- );
11006
- return /* @__PURE__ */ React96.createElement(
11007
- "div",
10998
+ /* @__PURE__ */ React96.createElement(
10999
+ "svg",
11000
+ {
11001
+ stroke: "currentColor",
11002
+ fill: "currentColor",
11003
+ strokeWidth: "0",
11004
+ viewBox: "0 0 16 16",
11005
+ height: "1em",
11006
+ width: "1em"
11007
+ },
11008
+ /* @__PURE__ */ React96.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
11009
+ )
11010
+ ), props.plans.some(
11011
+ (plan) => plan.features.some(
11012
+ (feature) => feature.text === featureText && feature.soon
11013
+ )
11014
+ ) && /* @__PURE__ */ React96.createElement(
11015
+ Chip,
11008
11016
  {
11009
- key: planIndex,
11010
- className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
11011
- },
11012
- (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ React96.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "hawa-text-foreground" })
11013
- );
11014
- })
11015
- );
11016
- })), props.showButtons && /* @__PURE__ */ React96.createElement("div", { className: "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-px-4 hawa-py-5" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
11017
+ label: ((_d = (_c = props.plans.find(
11018
+ (plan) => plan.features.some(
11019
+ (feature) => feature.text === featureText && feature.soon
11020
+ )
11021
+ )) == null ? void 0 : _c.texts) == null ? void 0 : _d.soon) || "Soon"
11022
+ }
11023
+ )),
11024
+ props.plans.map((plan, planIndex) => {
11025
+ const feature = plan.features.find(
11026
+ (f) => f.text === featureText
11027
+ );
11028
+ return /* @__PURE__ */ React96.createElement(
11029
+ "div",
11030
+ {
11031
+ key: planIndex,
11032
+ className: "hawa-text-center hawa-flex hawa-flex-col hawa-items-center"
11033
+ },
11034
+ (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ React96.createElement(CheckMark, { className: "hawa-text-foreground" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "hawa-text-foreground" })
11035
+ );
11036
+ })
11037
+ );
11038
+ })
11039
+ ), props.showButtons && /* @__PURE__ */ React96.createElement("div", { className: "hawa-grid hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-px-4 hawa-py-5" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => {
11017
11040
  var _a;
11018
11041
  return /* @__PURE__ */ React96.createElement(
11019
11042
  "div",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.19.34-next",
3
+ "version": "0.19.36-next",
4
4
  "description": "Modern UI Kit made with Tailwind",
5
5
  "author": {
6
6
  "name": "Sikka Software",