@sikka/hawa 0.19.16-next → 0.19.19-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 +15 -0
  2. package/dist/index.d.mts +13 -6
  3. package/dist/index.d.ts +13 -6
  4. package/dist/index.js +153 -60
  5. package/dist/index.mjs +153 -60
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -980,6 +980,9 @@ input[type="number"]::-webkit-inner-spin-button,
980
980
  top: 0px;
981
981
  bottom: 0px;
982
982
  }
983
+ .-hawa-left-\[1px\] {
984
+ left: -1px;
985
+ }
983
986
  .hawa--left-1 {
984
987
  left: -0.25rem;
985
988
  }
@@ -1727,6 +1730,10 @@ input[type="number"]::-webkit-inner-spin-button,
1727
1730
  --tw-translate-y: -0.5rem;
1728
1731
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1729
1732
  }
1733
+ .-hawa-translate-y-full {
1734
+ --tw-translate-y: -100%;
1735
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1736
+ }
1730
1737
  .hawa--translate-x-0 {
1731
1738
  --tw-translate-x: -0px;
1732
1739
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3677,6 +3684,14 @@ body {
3677
3684
  .data-\[state\=open\]\:hawa-animate-accordion-down[data-state=open] {
3678
3685
  animation: hawa-accordion-down 0.2s ease-out;
3679
3686
  }
3687
+ .data-\[state\=closed\]\:hawa-rounded-b[data-state=closed] {
3688
+ border-bottom-right-radius: var(--radius);
3689
+ border-bottom-left-radius: var(--radius);
3690
+ }
3691
+ .data-\[state\=open\]\:hawa-rounded-b[data-state=open] {
3692
+ border-bottom-right-radius: var(--radius);
3693
+ border-bottom-left-radius: var(--radius);
3694
+ }
3680
3695
  .data-\[active\]\:hawa-bg-accent\/50[data-active] {
3681
3696
  background-color: hsl(var(--accent) / 0.5);
3682
3697
  }
package/dist/index.d.mts CHANGED
@@ -68,6 +68,7 @@ type PricingCardProps = {
68
68
  discount?: string;
69
69
  onPlanClicked?: () => void;
70
70
  currentPlan?: boolean;
71
+ recommended?: boolean;
71
72
  size?: "small" | "medium" | "large";
72
73
  isLoading?: boolean;
73
74
  texts: {
@@ -76,6 +77,7 @@ type PricingCardProps = {
76
77
  buttonText: string;
77
78
  cycleText: string;
78
79
  currencyText: string;
80
+ recommended?: string;
79
81
  };
80
82
  };
81
83
  declare const PricingCard: FC<PricingCardProps>;
@@ -242,13 +244,18 @@ declare const PhoneInput: FC<PhoneInputTypes>;
242
244
 
243
245
  type CheckBoxTypes = {
244
246
  id: string;
245
- label?: any;
246
- sublabel?: any;
247
+ label?: React$1.ReactNode;
248
+ sublabel?: React$1.ReactNode;
247
249
  helperText?: string;
250
+ size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
251
+ radius?: RadiusType;
248
252
  };
249
253
  type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxElement>;
250
254
  declare const Checkbox: React$1.FC<CheckboxProps>;
251
- declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
255
+ declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
256
+ size?: "xs" | "sm" | "lg" | "xl" | "default" | "md" | undefined;
257
+ radius?: RadiusType | undefined;
258
+ } & React$1.RefAttributes<HTMLButtonElement>>;
252
259
 
253
260
  type RadioOptionsTypes = {
254
261
  value: any;
@@ -807,9 +814,9 @@ declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttrib
807
814
 
808
815
  type AccordionProps = {
809
816
  items: AccordionItem[];
810
- itemClassNames: string;
811
- triggerclassNames: string;
812
- contentclassNames: string;
817
+ itemClassNames?: string;
818
+ triggerclassNames?: string;
819
+ contentclassNames?: string;
813
820
  } & React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
814
821
  declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
815
822
  type AccordionItem = {
package/dist/index.d.ts CHANGED
@@ -68,6 +68,7 @@ type PricingCardProps = {
68
68
  discount?: string;
69
69
  onPlanClicked?: () => void;
70
70
  currentPlan?: boolean;
71
+ recommended?: boolean;
71
72
  size?: "small" | "medium" | "large";
72
73
  isLoading?: boolean;
73
74
  texts: {
@@ -76,6 +77,7 @@ type PricingCardProps = {
76
77
  buttonText: string;
77
78
  cycleText: string;
78
79
  currencyText: string;
80
+ recommended?: string;
79
81
  };
80
82
  };
81
83
  declare const PricingCard: FC<PricingCardProps>;
@@ -242,13 +244,18 @@ declare const PhoneInput: FC<PhoneInputTypes>;
242
244
 
243
245
  type CheckBoxTypes = {
244
246
  id: string;
245
- label?: any;
246
- sublabel?: any;
247
+ label?: React$1.ReactNode;
248
+ sublabel?: React$1.ReactNode;
247
249
  helperText?: string;
250
+ size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
251
+ radius?: RadiusType;
248
252
  };
249
253
  type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxElement>;
250
254
  declare const Checkbox: React$1.FC<CheckboxProps>;
251
- declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
255
+ declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
256
+ size?: "xs" | "sm" | "lg" | "xl" | "default" | "md" | undefined;
257
+ radius?: RadiusType | undefined;
258
+ } & React$1.RefAttributes<HTMLButtonElement>>;
252
259
 
253
260
  type RadioOptionsTypes = {
254
261
  value: any;
@@ -807,9 +814,9 @@ declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttrib
807
814
 
808
815
  type AccordionProps = {
809
816
  items: AccordionItem[];
810
- itemClassNames: string;
811
- triggerclassNames: string;
812
- contentclassNames: string;
817
+ itemClassNames?: string;
818
+ triggerclassNames?: string;
819
+ contentclassNames?: string;
813
820
  } & React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
814
821
  declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
815
822
  type AccordionItem = {
package/dist/index.js CHANGED
@@ -868,6 +868,7 @@ var PricingCard = ({
868
868
  size = "medium",
869
869
  direction = "ltr",
870
870
  endButton = true,
871
+ recommended,
871
872
  currentPlan = false,
872
873
  ...props
873
874
  }) => {
@@ -884,10 +885,19 @@ var PricingCard = ({
884
885
  className: cn(
885
886
  currentPlan ? "hawa-border-primary dark:hawa-border-primary/70 hawa-border-2 " : "hawa-border",
886
887
  cardSizes[size],
887
- "hawa-flex hawa-gap-4 hawa-rounded hawa-p-4 hawa-justify-between hawa-flex-col"
888
+ "hawa-flex hawa-gap-4 hawa-p-4 hawa-justify-between hawa-flex-col hawa-relative",
889
+ recommended ? "hawa-rounded hawa-rounded-t-none" : "hawa-rounded"
888
890
  )
889
891
  },
890
- /* @__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-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ import_react7.default.createElement(Separator, null), /* @__PURE__ */ import_react7.default.createElement(
892
+ recommended && /* @__PURE__ */ import_react7.default.createElement(
893
+ "div",
894
+ {
895
+ className: "hawa-bg-primary hawa-text-center hawa-text-primary-foreground hawa-p-2 hawa-border hawa-rounded-t hawa-absolute hawa-top-0 -hawa-left-[1px] -hawa-translate-y-full",
896
+ style: { width: "calc(100% + 2px)" }
897
+ },
898
+ props.texts.recommended || "RECOMMENDED"
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(
891
901
  "div",
892
902
  {
893
903
  className: cn(
@@ -3466,73 +3476,131 @@ var Checkbox = ({
3466
3476
  sublabel,
3467
3477
  helperText,
3468
3478
  disabled,
3479
+ size = "default",
3480
+ radius = "inherit",
3469
3481
  ...props
3470
3482
  }) => {
3471
- return /* @__PURE__ */ React20.createElement("div", { className: "hawa-items-top hawa-flex hawa-gap-2 " }, /* @__PURE__ */ React20.createElement(CheckboxElement, { ...props, disabled, id }), (label || helperText) && /* @__PURE__ */ React20.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React20.createElement(
3472
- "label",
3473
- {
3474
- htmlFor: id,
3475
- className: cn(
3476
- "hawa-w-fit hawa-select-none hawa-text-sm hawa-font-medium hawa-leading-none hawa-pt-0.5",
3477
- disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
3478
- )
3479
- },
3480
- label
3481
- ), sublabel && /* @__PURE__ */ React20.createElement(
3482
- "label",
3483
- {
3484
- htmlFor: id,
3485
- className: cn(
3486
- "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
3487
- disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
3488
- )
3489
- },
3490
- sublabel
3491
- ), helperText && !disabled && /* @__PURE__ */ React20.createElement(
3492
- "label",
3483
+ let labelLineHeightStyles = {
3484
+ xs: sublabel || helperText ? 0.5 : 0.1,
3485
+ sm: 0.6,
3486
+ default: 0.7,
3487
+ md: 0.8,
3488
+ lg: 0.9,
3489
+ xl: 1
3490
+ };
3491
+ return /* @__PURE__ */ React20.createElement(
3492
+ "div",
3493
3493
  {
3494
- htmlFor: id,
3495
3494
  className: cn(
3496
- "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
3497
- disabled && "hawa-cursor-not-allowed hawa-opacity-70"
3495
+ "hawa-flex hawa-gap-2",
3496
+ "hawa-items-top",
3497
+ sublabel || helperText ? "hawa-items-top" : "hawa-items-center"
3498
3498
  )
3499
3499
  },
3500
- helperText
3501
- )));
3502
- };
3503
- var CheckboxElement = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
3504
- CheckboxPrimitive.Root,
3505
- {
3506
- ref,
3507
- className: cn(
3508
- "hawa-peer hawa-icon hawa-shrink-0 hawa-rounded-sm hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
3509
- className
3500
+ /* @__PURE__ */ React20.createElement(
3501
+ CheckboxElement,
3502
+ {
3503
+ ...props,
3504
+ size,
3505
+ radius,
3506
+ disabled,
3507
+ id
3508
+ }
3510
3509
  ),
3511
- ...props
3512
- },
3513
- /* @__PURE__ */ React20.createElement(
3514
- CheckboxPrimitive.Indicator,
3510
+ (label || helperText) && /* @__PURE__ */ React20.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React20.createElement(
3511
+ "label",
3512
+ {
3513
+ htmlFor: id,
3514
+ className: cn(
3515
+ "hawa-w-fit hawa-select-none hawa-text-sm hawa-font-medium hawa-leading-none hawa-pt-0.5",
3516
+ disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
3517
+ ),
3518
+ style: {
3519
+ lineHeight: labelLineHeightStyles[size]
3520
+ }
3521
+ },
3522
+ label
3523
+ ), sublabel && /* @__PURE__ */ React20.createElement(
3524
+ "label",
3525
+ {
3526
+ htmlFor: id,
3527
+ className: cn(
3528
+ "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
3529
+ disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
3530
+ )
3531
+ },
3532
+ sublabel
3533
+ ), helperText && !disabled && /* @__PURE__ */ React20.createElement(
3534
+ "label",
3535
+ {
3536
+ htmlFor: id,
3537
+ className: cn(
3538
+ "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
3539
+ disabled && "hawa-cursor-not-allowed hawa-opacity-70"
3540
+ )
3541
+ },
3542
+ helperText
3543
+ ))
3544
+ );
3545
+ };
3546
+ var CheckboxElement = React20.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
3547
+ let checkboxRadius = {
3548
+ none: "hawa-rounded-none",
3549
+ inherit: "hawa-rounded-sm",
3550
+ full: "hawa-rounded-full"
3551
+ };
3552
+ let checkboxSizes = {
3553
+ xs: "hawa-w-3 hawa-h-3",
3554
+ sm: "hawa-w-6 hawa-h-6",
3555
+ default: "hawa-icon",
3556
+ md: "hawa-w-8 hawa-h-8",
3557
+ lg: "hawa-w-10 hawa-h-10",
3558
+ xl: "hawa-w-12 hawa-h-12"
3559
+ };
3560
+ let checkboxIndicatorSizes = {
3561
+ xs: "0.5em",
3562
+ default: "0.60em",
3563
+ sm: "0.75em",
3564
+ md: "0.875em",
3565
+ lg: "1em",
3566
+ xl: "1.25em"
3567
+ };
3568
+ return /* @__PURE__ */ React20.createElement(
3569
+ CheckboxPrimitive.Root,
3515
3570
  {
3571
+ ref,
3516
3572
  className: cn(
3517
- "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
3518
- )
3573
+ "hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
3574
+ checkboxSizes[size],
3575
+ checkboxRadius[radius],
3576
+ className
3577
+ ),
3578
+ ...props
3519
3579
  },
3520
3580
  /* @__PURE__ */ React20.createElement(
3521
- "svg",
3581
+ CheckboxPrimitive.Indicator,
3522
3582
  {
3523
- "aria-label": "Check Mark",
3524
- stroke: "currentColor",
3525
- fill: "currentColor",
3526
- strokeWidth: "0",
3527
- viewBox: "0 0 512 512",
3528
- height: "0.60em",
3529
- width: "0.60em"
3583
+ className: cn(
3584
+ "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
3585
+ )
3530
3586
  },
3531
- /* @__PURE__ */ React20.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
3532
- ),
3533
- " "
3534
- )
3535
- ));
3587
+ /* @__PURE__ */ React20.createElement(
3588
+ "svg",
3589
+ {
3590
+ "aria-label": "Check Mark",
3591
+ stroke: "currentColor",
3592
+ fill: "currentColor",
3593
+ strokeWidth: "0",
3594
+ viewBox: "0 0 512 512",
3595
+ height: checkboxIndicatorSizes[size],
3596
+ width: checkboxIndicatorSizes[size]
3597
+ },
3598
+ /* @__PURE__ */ React20.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
3599
+ ),
3600
+ " "
3601
+ )
3602
+ );
3603
+ });
3536
3604
  CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
3537
3605
 
3538
3606
  // components/elements/Radio.tsx
@@ -6463,12 +6531,37 @@ var Accordion = React48.forwardRef(
6463
6531
  }, ref) => /* @__PURE__ */ React48.createElement(AccordionPrimitive.Root, { type: props.type, collapsible: true }, items.map((item, index) => /* @__PURE__ */ React48.createElement(
6464
6532
  AccordionItem,
6465
6533
  {
6466
- className: itemClassNames,
6534
+ className: cn(itemClassNames, "hawa-rounded"),
6467
6535
  key: index,
6468
6536
  value: `item-${index}`
6469
6537
  },
6470
- /* @__PURE__ */ React48.createElement(AccordionTrigger, { className: triggerclassNames }, item.trigger),
6471
- /* @__PURE__ */ React48.createElement(AccordionContent, { className: contentclassNames }, item.content)
6538
+ /* @__PURE__ */ React48.createElement(
6539
+ AccordionTrigger,
6540
+ {
6541
+ className: cn(
6542
+ "hawa-transition-all",
6543
+ {
6544
+ "hawa-rounded-t": index === 0,
6545
+ "data-[state=closed]:hawa-rounded-b": index === items.length - 1
6546
+ },
6547
+ triggerclassNames
6548
+ )
6549
+ },
6550
+ item.trigger
6551
+ ),
6552
+ /* @__PURE__ */ React48.createElement(
6553
+ AccordionContent,
6554
+ {
6555
+ className: cn(
6556
+ "hawa-transition-all hawa-border",
6557
+ {
6558
+ "data-[state=open]:hawa-rounded-b": index === items.length - 1
6559
+ },
6560
+ contentclassNames
6561
+ )
6562
+ },
6563
+ item.content
6564
+ )
6472
6565
  )))
6473
6566
  );
6474
6567
  Accordion.displayName = "Accordion";
@@ -6513,7 +6606,7 @@ var AccordionContent = React48.forwardRef(({ className, children, ...props }, re
6513
6606
  ),
6514
6607
  ...props
6515
6608
  },
6516
- /* @__PURE__ */ React48.createElement("div", { className: "hawa-bg-background hawa-border hawa-p-4" }, children)
6609
+ /* @__PURE__ */ React48.createElement("div", { className: "hawa-bg-background hawa-p-4" }, children)
6517
6610
  ));
6518
6611
  AccordionContent.displayName = AccordionPrimitive.Content.displayName;
6519
6612
  var AccordionRoot = AccordionPrimitive.Root;
package/dist/index.mjs CHANGED
@@ -635,6 +635,7 @@ var PricingCard = ({
635
635
  size = "medium",
636
636
  direction = "ltr",
637
637
  endButton = true,
638
+ recommended,
638
639
  currentPlan = false,
639
640
  ...props
640
641
  }) => {
@@ -651,10 +652,19 @@ var PricingCard = ({
651
652
  className: cn(
652
653
  currentPlan ? "hawa-border-primary dark:hawa-border-primary/70 hawa-border-2 " : "hawa-border",
653
654
  cardSizes[size],
654
- "hawa-flex hawa-gap-4 hawa-rounded hawa-p-4 hawa-justify-between hawa-flex-col"
655
+ "hawa-flex hawa-gap-4 hawa-p-4 hawa-justify-between hawa-flex-col hawa-relative",
656
+ recommended ? "hawa-rounded hawa-rounded-t-none" : "hawa-rounded"
655
657
  )
656
658
  },
657
- /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React11.createElement("span", null, props.texts.title), /* @__PURE__ */ React11.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ React11.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React11.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React11.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React11.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && /* @__PURE__ */ React11.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ React11.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React11.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React11.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ React11.createElement(Separator, null), /* @__PURE__ */ React11.createElement(
659
+ recommended && /* @__PURE__ */ React11.createElement(
660
+ "div",
661
+ {
662
+ className: "hawa-bg-primary hawa-text-center hawa-text-primary-foreground hawa-p-2 hawa-border hawa-rounded-t hawa-absolute hawa-top-0 -hawa-left-[1px] -hawa-translate-y-full",
663
+ style: { width: "calc(100% + 2px)" }
664
+ },
665
+ props.texts.recommended || "RECOMMENDED"
666
+ ),
667
+ /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4 hawa-h-full" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-col hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React11.createElement("span", null, props.texts.title), /* @__PURE__ */ React11.createElement("h5", { className: "hawa-text-sm hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle), props.discount && /* @__PURE__ */ React11.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React11.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))), /* @__PURE__ */ React11.createElement("div", { className: " hawa-text-primary hawa-flex hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React11.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-end" }, props.oldPrice && /* @__PURE__ */ React11.createElement("span", { className: "hawa-line-through hawa-opacity-70" }, props.oldPrice + " " + props.texts.currencyText), /* @__PURE__ */ React11.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price)), /* @__PURE__ */ React11.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React11.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-whitespace-nowrap hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))), endButton && /* @__PURE__ */ React11.createElement(Separator, null), /* @__PURE__ */ React11.createElement(
658
668
  "div",
659
669
  {
660
670
  className: cn(
@@ -3233,73 +3243,131 @@ var Checkbox = ({
3233
3243
  sublabel,
3234
3244
  helperText,
3235
3245
  disabled,
3246
+ size = "default",
3247
+ radius = "inherit",
3236
3248
  ...props
3237
3249
  }) => {
3238
- return /* @__PURE__ */ React20.createElement("div", { className: "hawa-items-top hawa-flex hawa-gap-2 " }, /* @__PURE__ */ React20.createElement(CheckboxElement, { ...props, disabled, id }), (label || helperText) && /* @__PURE__ */ React20.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React20.createElement(
3239
- "label",
3240
- {
3241
- htmlFor: id,
3242
- className: cn(
3243
- "hawa-w-fit hawa-select-none hawa-text-sm hawa-font-medium hawa-leading-none hawa-pt-0.5",
3244
- disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
3245
- )
3246
- },
3247
- label
3248
- ), sublabel && /* @__PURE__ */ React20.createElement(
3249
- "label",
3250
- {
3251
- htmlFor: id,
3252
- className: cn(
3253
- "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
3254
- disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
3255
- )
3256
- },
3257
- sublabel
3258
- ), helperText && !disabled && /* @__PURE__ */ React20.createElement(
3259
- "label",
3250
+ let labelLineHeightStyles = {
3251
+ xs: sublabel || helperText ? 0.5 : 0.1,
3252
+ sm: 0.6,
3253
+ default: 0.7,
3254
+ md: 0.8,
3255
+ lg: 0.9,
3256
+ xl: 1
3257
+ };
3258
+ return /* @__PURE__ */ React20.createElement(
3259
+ "div",
3260
3260
  {
3261
- htmlFor: id,
3262
3261
  className: cn(
3263
- "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
3264
- disabled && "hawa-cursor-not-allowed hawa-opacity-70"
3262
+ "hawa-flex hawa-gap-2",
3263
+ "hawa-items-top",
3264
+ sublabel || helperText ? "hawa-items-top" : "hawa-items-center"
3265
3265
  )
3266
3266
  },
3267
- helperText
3268
- )));
3269
- };
3270
- var CheckboxElement = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
3271
- CheckboxPrimitive.Root,
3272
- {
3273
- ref,
3274
- className: cn(
3275
- "hawa-peer hawa-icon hawa-shrink-0 hawa-rounded-sm hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
3276
- className
3267
+ /* @__PURE__ */ React20.createElement(
3268
+ CheckboxElement,
3269
+ {
3270
+ ...props,
3271
+ size,
3272
+ radius,
3273
+ disabled,
3274
+ id
3275
+ }
3277
3276
  ),
3278
- ...props
3279
- },
3280
- /* @__PURE__ */ React20.createElement(
3281
- CheckboxPrimitive.Indicator,
3277
+ (label || helperText) && /* @__PURE__ */ React20.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React20.createElement(
3278
+ "label",
3279
+ {
3280
+ htmlFor: id,
3281
+ className: cn(
3282
+ "hawa-w-fit hawa-select-none hawa-text-sm hawa-font-medium hawa-leading-none hawa-pt-0.5",
3283
+ disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
3284
+ ),
3285
+ style: {
3286
+ lineHeight: labelLineHeightStyles[size]
3287
+ }
3288
+ },
3289
+ label
3290
+ ), sublabel && /* @__PURE__ */ React20.createElement(
3291
+ "label",
3292
+ {
3293
+ htmlFor: id,
3294
+ className: cn(
3295
+ "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
3296
+ disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
3297
+ )
3298
+ },
3299
+ sublabel
3300
+ ), helperText && !disabled && /* @__PURE__ */ React20.createElement(
3301
+ "label",
3302
+ {
3303
+ htmlFor: id,
3304
+ className: cn(
3305
+ "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
3306
+ disabled && "hawa-cursor-not-allowed hawa-opacity-70"
3307
+ )
3308
+ },
3309
+ helperText
3310
+ ))
3311
+ );
3312
+ };
3313
+ var CheckboxElement = React20.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
3314
+ let checkboxRadius = {
3315
+ none: "hawa-rounded-none",
3316
+ inherit: "hawa-rounded-sm",
3317
+ full: "hawa-rounded-full"
3318
+ };
3319
+ let checkboxSizes = {
3320
+ xs: "hawa-w-3 hawa-h-3",
3321
+ sm: "hawa-w-6 hawa-h-6",
3322
+ default: "hawa-icon",
3323
+ md: "hawa-w-8 hawa-h-8",
3324
+ lg: "hawa-w-10 hawa-h-10",
3325
+ xl: "hawa-w-12 hawa-h-12"
3326
+ };
3327
+ let checkboxIndicatorSizes = {
3328
+ xs: "0.5em",
3329
+ default: "0.60em",
3330
+ sm: "0.75em",
3331
+ md: "0.875em",
3332
+ lg: "1em",
3333
+ xl: "1.25em"
3334
+ };
3335
+ return /* @__PURE__ */ React20.createElement(
3336
+ CheckboxPrimitive.Root,
3282
3337
  {
3338
+ ref,
3283
3339
  className: cn(
3284
- "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
3285
- )
3340
+ "hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
3341
+ checkboxSizes[size],
3342
+ checkboxRadius[radius],
3343
+ className
3344
+ ),
3345
+ ...props
3286
3346
  },
3287
3347
  /* @__PURE__ */ React20.createElement(
3288
- "svg",
3348
+ CheckboxPrimitive.Indicator,
3289
3349
  {
3290
- "aria-label": "Check Mark",
3291
- stroke: "currentColor",
3292
- fill: "currentColor",
3293
- strokeWidth: "0",
3294
- viewBox: "0 0 512 512",
3295
- height: "0.60em",
3296
- width: "0.60em"
3350
+ className: cn(
3351
+ "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
3352
+ )
3297
3353
  },
3298
- /* @__PURE__ */ React20.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
3299
- ),
3300
- " "
3301
- )
3302
- ));
3354
+ /* @__PURE__ */ React20.createElement(
3355
+ "svg",
3356
+ {
3357
+ "aria-label": "Check Mark",
3358
+ stroke: "currentColor",
3359
+ fill: "currentColor",
3360
+ strokeWidth: "0",
3361
+ viewBox: "0 0 512 512",
3362
+ height: checkboxIndicatorSizes[size],
3363
+ width: checkboxIndicatorSizes[size]
3364
+ },
3365
+ /* @__PURE__ */ React20.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
3366
+ ),
3367
+ " "
3368
+ )
3369
+ );
3370
+ });
3303
3371
  CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
3304
3372
 
3305
3373
  // components/elements/Radio.tsx
@@ -6245,12 +6313,37 @@ var Accordion = React48.forwardRef(
6245
6313
  }, ref) => /* @__PURE__ */ React48.createElement(AccordionPrimitive.Root, { type: props.type, collapsible: true }, items.map((item, index) => /* @__PURE__ */ React48.createElement(
6246
6314
  AccordionItem,
6247
6315
  {
6248
- className: itemClassNames,
6316
+ className: cn(itemClassNames, "hawa-rounded"),
6249
6317
  key: index,
6250
6318
  value: `item-${index}`
6251
6319
  },
6252
- /* @__PURE__ */ React48.createElement(AccordionTrigger, { className: triggerclassNames }, item.trigger),
6253
- /* @__PURE__ */ React48.createElement(AccordionContent, { className: contentclassNames }, item.content)
6320
+ /* @__PURE__ */ React48.createElement(
6321
+ AccordionTrigger,
6322
+ {
6323
+ className: cn(
6324
+ "hawa-transition-all",
6325
+ {
6326
+ "hawa-rounded-t": index === 0,
6327
+ "data-[state=closed]:hawa-rounded-b": index === items.length - 1
6328
+ },
6329
+ triggerclassNames
6330
+ )
6331
+ },
6332
+ item.trigger
6333
+ ),
6334
+ /* @__PURE__ */ React48.createElement(
6335
+ AccordionContent,
6336
+ {
6337
+ className: cn(
6338
+ "hawa-transition-all hawa-border",
6339
+ {
6340
+ "data-[state=open]:hawa-rounded-b": index === items.length - 1
6341
+ },
6342
+ contentclassNames
6343
+ )
6344
+ },
6345
+ item.content
6346
+ )
6254
6347
  )))
6255
6348
  );
6256
6349
  Accordion.displayName = "Accordion";
@@ -6295,7 +6388,7 @@ var AccordionContent = React48.forwardRef(({ className, children, ...props }, re
6295
6388
  ),
6296
6389
  ...props
6297
6390
  },
6298
- /* @__PURE__ */ React48.createElement("div", { className: "hawa-bg-background hawa-border hawa-p-4" }, children)
6391
+ /* @__PURE__ */ React48.createElement("div", { className: "hawa-bg-background hawa-p-4" }, children)
6299
6392
  ));
6300
6393
  AccordionContent.displayName = AccordionPrimitive.Content.displayName;
6301
6394
  var AccordionRoot = AccordionPrimitive.Root;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.19.16-next",
3
+ "version": "0.19.19-next",
4
4
  "description": "Modern UI Kit made with Tailwind",
5
5
  "author": {
6
6
  "name": "Sikka Software",