@sikka/hawa 0.19.22-next → 0.19.24-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.
package/dist/index.css CHANGED
@@ -4261,6 +4261,10 @@ body {
4261
4261
  grid-template-columns: repeat(2, minmax(0, 1fr));
4262
4262
  }
4263
4263
 
4264
+ .md\:hawa-grid-cols-\[1fr_repeat\(3\2c _minmax\(0\2c _1fr\)\)\] {
4265
+ grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
4266
+ }
4267
+
4264
4268
  .md\:hawa-flex-row {
4265
4269
  flex-direction: row;
4266
4270
  }
package/dist/index.d.mts CHANGED
@@ -1714,7 +1714,7 @@ type ComparingPlansTypes = {
1714
1714
  features: {
1715
1715
  included: boolean;
1716
1716
  text: string;
1717
- description?: string;
1717
+ hint?: string;
1718
1718
  }[];
1719
1719
  price?: number;
1720
1720
  texts?: {
package/dist/index.d.ts CHANGED
@@ -1714,7 +1714,7 @@ type ComparingPlansTypes = {
1714
1714
  features: {
1715
1715
  included: boolean;
1716
1716
  text: string;
1717
- description?: string;
1717
+ hint?: string;
1718
1718
  }[];
1719
1719
  price?: number;
1720
1720
  texts?: {
package/dist/index.js CHANGED
@@ -11113,9 +11113,15 @@ var PricingPlans = ({
11113
11113
  // components/blocks/pricing/ComparingPlans.tsx
11114
11114
  var import_react70 = __toESM(require("react"));
11115
11115
  var ComparingPlans = (props) => {
11116
- var _a;
11117
11116
  const [currentCurrency, setCurrentCurrency] = (0, import_react70.useState)("sar");
11118
11117
  const [currentCycle, setCurrentCycle] = (0, import_react70.useState)("monthly");
11118
+ const uniqueFeatures = Array.from(
11119
+ new Set(
11120
+ props.plans.flatMap(
11121
+ (plan) => plan.features.map((feature) => feature.text)
11122
+ )
11123
+ )
11124
+ );
11119
11125
  return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
11120
11126
  Radio,
11121
11127
  {
@@ -11144,15 +11150,45 @@ var ComparingPlans = (props) => {
11144
11150
  }
11145
11151
  }
11146
11152
  }
11147
- )), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-border-gray-200 hawa-bg-gray-100 hawa-p-4 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => /* @__PURE__ */ import_react70.default.createElement("div", { key: i }, /* @__PURE__ */ import_react70.default.createElement("h5", { className: "hawa-text-md hawa-font-bold hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline hawa-text-gray-900 dark:hawa-text-white" }, /* @__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 hawa-text-gray-500 dark:hawa-text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ import_react70.default.createElement("h5", { className: "hawa-text-md hawa-font-normal hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.subtitle)))), (_a = props.plans) == null ? void 0 : _a.map((plan) => {
11148
- return plan.features.map((feature, j) => {
11149
- return /* @__PURE__ */ import_react70.default.createElement(
11150
- "div",
11153
+ )), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ import_react70.default.createElement(
11154
+ "div",
11155
+ {
11156
+ className: cn(
11157
+ "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
11158
+ "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
11159
+ "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
11160
+ )
11161
+ },
11162
+ /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }),
11163
+ props.plans.map((plan, i) => /* @__PURE__ */ import_react70.default.createElement("div", { key: i, 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 hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-normal hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.subtitle)), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline hawa-text-gray-900 dark:hawa-text-white" }, /* @__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 hawa-text-gray-500 dark:hawa-text-gray-400" }, "/ ", plan.texts.cycleText))))
11164
+ ), uniqueFeatures.map((featureText, featureIndex) => {
11165
+ var _a, _b;
11166
+ return /* @__PURE__ */ import_react70.default.createElement(
11167
+ "div",
11168
+ {
11169
+ key: featureIndex,
11170
+ className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
11171
+ },
11172
+ /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-white" }, featureText, props.plans.some(
11173
+ (plan) => plan.features.some(
11174
+ (feature) => feature.text === featureText && feature.hint
11175
+ )
11176
+ ) && /* @__PURE__ */ import_react70.default.createElement(
11177
+ Tooltip,
11151
11178
  {
11152
- key: j,
11153
- className: "hawa-grid hawa-grid-cols-4 hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:hawa-border-gray-700"
11179
+ side: "right",
11180
+ content: (_b = (_a = props.plans.find(
11181
+ (plan) => {
11182
+ var _a2;
11183
+ return (_a2 = plan.features.find(
11184
+ (feature) => feature.text === featureText
11185
+ )) == null ? void 0 : _a2.hint;
11186
+ }
11187
+ )) == null ? void 0 : _a.features.find(
11188
+ (feature) => feature.text === featureText
11189
+ )) == null ? void 0 : _b.hint
11154
11190
  },
11155
- /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ import_react70.default.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ import_react70.default.createElement(
11191
+ /* @__PURE__ */ import_react70.default.createElement(
11156
11192
  "svg",
11157
11193
  {
11158
11194
  stroke: "currentColor",
@@ -11163,12 +11199,15 @@ var ComparingPlans = (props) => {
11163
11199
  width: "1em"
11164
11200
  },
11165
11201
  /* @__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" })
11166
- ))),
11167
- /* @__PURE__ */ import_react70.default.createElement(UncheckMark, null),
11168
- /* @__PURE__ */ import_react70.default.createElement(CheckMark, null),
11169
- /* @__PURE__ */ import_react70.default.createElement(UncheckMark, null)
11170
- );
11171
- });
11202
+ )
11203
+ )),
11204
+ props.plans.map((plan, planIndex) => {
11205
+ const feature = plan.features.find(
11206
+ (f) => f.text === featureText
11207
+ );
11208
+ return /* @__PURE__ */ import_react70.default.createElement("div", { key: planIndex, className: "hawa-text-center" }, (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ import_react70.default.createElement(CheckMark, { className: "dark:hawa-text-white hawa-text-black" }) : /* @__PURE__ */ import_react70.default.createElement(UncheckMark, { className: "dark:hawa-text-white hawa-text-black" }));
11209
+ })
11210
+ );
11172
11211
  })));
11173
11212
  };
11174
11213
 
package/dist/index.mjs CHANGED
@@ -10897,9 +10897,15 @@ var PricingPlans = ({
10897
10897
  // components/blocks/pricing/ComparingPlans.tsx
10898
10898
  import React96, { useState as useState36 } from "react";
10899
10899
  var ComparingPlans = (props) => {
10900
- var _a;
10901
10900
  const [currentCurrency, setCurrentCurrency] = useState36("sar");
10902
10901
  const [currentCycle, setCurrentCycle] = useState36("monthly");
10902
+ const uniqueFeatures = Array.from(
10903
+ new Set(
10904
+ props.plans.flatMap(
10905
+ (plan) => plan.features.map((feature) => feature.text)
10906
+ )
10907
+ )
10908
+ );
10903
10909
  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
10904
10910
  Radio,
10905
10911
  {
@@ -10928,15 +10934,45 @@ var ComparingPlans = (props) => {
10928
10934
  }
10929
10935
  }
10930
10936
  }
10931
- )), /* @__PURE__ */ React96.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-border-gray-200 hawa-bg-gray-100 hawa-p-4 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }), props.plans.map((plan, i) => /* @__PURE__ */ React96.createElement("div", { key: i }, /* @__PURE__ */ React96.createElement("h5", { className: "hawa-text-md hawa-font-bold hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.title), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline hawa-text-gray-900 dark:hawa-text-white" }, /* @__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 hawa-text-gray-500 dark:hawa-text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React96.createElement("h5", { className: "hawa-text-md hawa-font-normal hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.subtitle)))), (_a = props.plans) == null ? void 0 : _a.map((plan) => {
10932
- return plan.features.map((feature, j) => {
10933
- return /* @__PURE__ */ React96.createElement(
10934
- "div",
10937
+ )), /* @__PURE__ */ React96.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ React96.createElement(
10938
+ "div",
10939
+ {
10940
+ className: cn(
10941
+ "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
10942
+ "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
10943
+ "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
10944
+ )
10945
+ },
10946
+ /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }),
10947
+ props.plans.map((plan, i) => /* @__PURE__ */ React96.createElement("div", { key: i, 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 hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.title), /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-normal hawa-text-gray-500 dark:hawa-text-gray-400" }, plan.texts.subtitle)), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline hawa-text-gray-900 dark:hawa-text-white" }, /* @__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 hawa-text-gray-500 dark:hawa-text-gray-400" }, "/ ", plan.texts.cycleText))))
10948
+ ), uniqueFeatures.map((featureText, featureIndex) => {
10949
+ var _a, _b;
10950
+ return /* @__PURE__ */ React96.createElement(
10951
+ "div",
10952
+ {
10953
+ key: featureIndex,
10954
+ className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
10955
+ },
10956
+ /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-white" }, featureText, props.plans.some(
10957
+ (plan) => plan.features.some(
10958
+ (feature) => feature.text === featureText && feature.hint
10959
+ )
10960
+ ) && /* @__PURE__ */ React96.createElement(
10961
+ Tooltip,
10935
10962
  {
10936
- key: j,
10937
- className: "hawa-grid hawa-grid-cols-4 hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:hawa-border-gray-700"
10963
+ side: "right",
10964
+ content: (_b = (_a = props.plans.find(
10965
+ (plan) => {
10966
+ var _a2;
10967
+ return (_a2 = plan.features.find(
10968
+ (feature) => feature.text === featureText
10969
+ )) == null ? void 0 : _a2.hint;
10970
+ }
10971
+ )) == null ? void 0 : _a.features.find(
10972
+ (feature) => feature.text === featureText
10973
+ )) == null ? void 0 : _b.hint
10938
10974
  },
10939
- /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-gray-500 dark:hawa-text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React96.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React96.createElement(
10975
+ /* @__PURE__ */ React96.createElement(
10940
10976
  "svg",
10941
10977
  {
10942
10978
  stroke: "currentColor",
@@ -10947,12 +10983,15 @@ var ComparingPlans = (props) => {
10947
10983
  width: "1em"
10948
10984
  },
10949
10985
  /* @__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" })
10950
- ))),
10951
- /* @__PURE__ */ React96.createElement(UncheckMark, null),
10952
- /* @__PURE__ */ React96.createElement(CheckMark, null),
10953
- /* @__PURE__ */ React96.createElement(UncheckMark, null)
10954
- );
10955
- });
10986
+ )
10987
+ )),
10988
+ props.plans.map((plan, planIndex) => {
10989
+ const feature = plan.features.find(
10990
+ (f) => f.text === featureText
10991
+ );
10992
+ return /* @__PURE__ */ React96.createElement("div", { key: planIndex, className: "hawa-text-center" }, (feature == null ? void 0 : feature.included) ? /* @__PURE__ */ React96.createElement(CheckMark, { className: "dark:hawa-text-white hawa-text-black" }) : /* @__PURE__ */ React96.createElement(UncheckMark, { className: "dark:hawa-text-white hawa-text-black" }));
10993
+ })
10994
+ );
10956
10995
  })));
10957
10996
  };
10958
10997
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.19.22-next",
3
+ "version": "0.19.24-next",
4
4
  "description": "Modern UI Kit made with Tailwind",
5
5
  "author": {
6
6
  "name": "Sikka Software",