@greatapps/common 1.1.429 → 1.1.430

package/dist/components/modals/cards/AddCardModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconX } from '@tabler/icons-react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\n\nconst INITIAL_STRIPE_STATUS: StripeElementsStatus = {\n  cardNumber: false,\n  cardExpiry: false,\n  cardCvc: false,\n};\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n  const [currentStep, setCurrentStep] = useState(1);\n  const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);\n  const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createCardMutation = useCreateCard();\n  const updateAccountMutation = useUpdateAccount();\n  const elements = useElements();\n  const stripe = useStripe();\n\n  const form = useForm<CardFormData>({\n    resolver: zodResolver(cardFormSchema),\n    mode: 'onSubmit',\n    reValidateMode: 'onChange',\n    defaultValues: {\n      country: 'BR',\n      personType: 'pf',\n    },\n  });\n\n  const handleClose = useCallback(() => {\n    form.reset();\n    setCurrentStep(1);\n    setStripeStatus(INITIAL_STRIPE_STATUS);\n    setStripeErrors({});\n    closeModal();\n  }, [form, closeModal]);\n\n  const handleStripeChange = useCallback(\n    (field: keyof StripeElementsStatus, complete: boolean) => {\n      setStripeStatus((prev) => ({ ...prev, [field]: complete }));\n      if (complete) {\n        setStripeErrors((prev) => ({ ...prev, [field]: undefined }));\n      }\n    },\n    []\n  );\n\n  const handleContinue = useCallback(async () => {\n    const rhfValid = await form.trigger(['name', 'country', 'personType', 'cpf', 'cnpj']);\n\n    const newStripeErrors: Record<string, string | undefined> = {};\n    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';\n    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';\n    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';\n    setStripeErrors(newStripeErrors);\n\n    const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n\n    if (rhfValid && stripeValid) {\n      form.clearErrors(['fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);\n      setCurrentStep(2);\n    }\n  }, [form, stripeStatus]);\n\n  const handleBack = useCallback(() => {\n    setCurrentStep(1);\n  }, []);\n\n  async function handleSubmit(data: CardFormData) {\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    const { error, paymentMethod } = await stripe.createPaymentMethod({\n      type: 'card',\n      card: cardElement,\n      billing_details: {\n        name: data.fullName,\n        address: {\n          country: data.country,\n          postal_code: data.cep,\n          line1: `${data.street}, ${data.streetNumber}`,\n          line2: data.complement || undefined,\n          city: data.city,\n          state: data.state,\n        },\n      },\n    });\n\n    if (error) {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível adicionar o cartão na Stripe, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n      return;\n    }\n\n    try {\n      const [cardResult] = await Promise.all([\n        createCardMutation.mutateAsync({ payment_method_id: paymentMethod.id }),\n        updateAccountMutation.mutateAsync({\n          financial_document_type: data.personType === 'pf' ? 1 : 2,\n          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,\n          financial_name: data.fullName,\n          zipcode: data.cep,\n          address: data.street,\n          address_number: data.streetNumber,\n          address_complement: data.complement || '',\n          city: data.city,\n          state: data.state,\n        }),\n      ]);\n\n      if (cardResult.success && cardResult.data?.id != null) {\n        onCardAdded?.(cardResult.data.id.toString());\n      }\n\n      toast.custom(\n        (t) => <Toast variant=\"success\" message=\"Cartão adicionado com sucesso.\" toastId={t} />,\n        { duration: 5000 }\n      );\n      handleClose();\n    } catch {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível salvar o seu novo cartão, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n    }\n  }\n\n  const isSubmitting =\n    createCardMutation.isPending ||\n    updateAccountMutation.isPending ||\n    form.formState.isSubmitting;\n\n  const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'city', 'state']);\n  const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, city, state] = watchedValues;\n  const isStep1Valid =\n    !!name &&\n    !!country &&\n    !!personType &&\n    (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&\n    stripeStatus.cardNumber &&\n    stripeStatus.cardExpiry &&\n    stripeStatus.cardCvc;\n  const isStep2Valid =\n    !!fullName &&\n    !!cep && cep.length >= 9 &&\n    !!street &&\n    !!streetNumber &&\n    !!city &&\n    !!state;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto\"\n      >\n        <DialogHeader className=\"p-0\">\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n              {currentStep === 1 ? 'Adicionar cartão' : 'Dados de cobrança'}\n            </DialogTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n        </DialogHeader>\n\n        {/* Progress bar */}\n        <div className=\"h-1 bg-zinc-100 w-full\">\n          <div\n            className=\"h-full bg-cyan-400 transition-all duration-300 ease-in-out\"\n            style={{ width: currentStep === 1 ? '50%' : '100%' }}\n          />\n        </div>\n\n        <form\n          onSubmit={form.handleSubmit(handleSubmit)}\n          className=\"flex flex-col flex-1 lg:flex-none\"\n        >\n          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>\n            <CardFormFields\n              form={form}\n              onStripeChange={handleStripeChange}\n              stripeErrors={stripeErrors}\n            />\n          </div>\n          <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>\n            <BillingFormFields form={form} />\n          </div>\n\n          <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n            {currentStep === 1 ? (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n                  Cancelar\n                </Button>\n                <Button\n                  type=\"button\"\n                  className=\"h-10!\"\n                  onClick={handleContinue}\n                  disabled={!isStep1Valid}\n                >\n                  Continuar\n                </Button>\n              </>\n            ) : (\n              <>\n                <Button variant=\"secondary\" type=\"button\" onClick={handleBack} className=\"h-10!\">\n                  Voltar\n                </Button>\n                <Button type=\"submit\" className=\"h-10!\" disabled={isSubmitting || !isStep2Valid}>\n                  {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}\n                </Button>\n              </>\n            )}\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/cards/CardFormFields.mjs

@@ -0,0 +1,268 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useViaCep } from "../../../modules/accounts/hooks/useViaCep";
+import { FormField } from "../../ui/form/FormField";
+import { SelectField } from "../../ui/form/SelectField";
+import { formatCPF, formatCNPJ, formatPostalCode } from "../../../utils/format/masks";
+import z from "zod";
+import { CardCvcElement, CardExpiryElement, CardNumberElement } from "@stripe/react-stripe-js";
+const stripeElementOptions = {
+  style: {
+    base: {
+      fontSize: "16px",
+      color: "#030712",
+      fontFamily: "Inter, sans-serif",
+      "::placeholder": {
+        color: "#9ca3af"
+      }
+    }
+  }
+};
+const cardFormSchema = z.object({
+  name: z.string().min(1, "Nome \xE9 obrigat\xF3rio"),
+  country: z.string().min(1, "Pa\xEDs \xE9 obrigat\xF3rio"),
+  personType: z.enum(["pf", "pj"]),
+  cpf: z.string().optional(),
+  cnpj: z.string().optional(),
+  fullName: z.string().min(1, "Nome completo \xE9 obrigat\xF3rio"),
+  cep: z.string().min(9, "CEP \xE9 obrigat\xF3rio"),
+  street: z.string().min(1, "Endere\xE7o \xE9 obrigat\xF3rio"),
+  streetNumber: z.string().min(1, "N\xFAmero \xE9 obrigat\xF3rio"),
+  city: z.string().min(1, "Cidade \xE9 obrigat\xF3ria"),
+  state: z.string().min(1, "UF \xE9 obrigat\xF3rio"),
+  complement: z.string().optional()
+}).refine(
+  (data) => {
+    if (data.personType === "pf") return !!data.cpf && data.cpf.length >= 14;
+    return !!data.cnpj && data.cnpj.length >= 18;
+  },
+  {
+    message: "Documento \xE9 obrigat\xF3rio",
+    path: ["cpf"]
+  }
+);
+const STEP1_FIELDS = ["name", "country", "personType", "cpf", "cnpj"];
+function CardFormFields({ form, onStripeChange, stripeErrors }) {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors }
+  } = form;
+  const personType = watch("personType");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Nome impresso no cart\xE3o",
+        placeholder: "Digite aqui",
+        ...register("name"),
+        error: !!errors.name,
+        errorMessage: errors.name?.message
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "N\xFAmero do cart\xE3o" }),
+      /* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        CardNumberElement,
+        {
+          options: { ...stripeElementOptions, showIcon: true },
+          onChange: (e) => onStripeChange("cardNumber", e.complete)
+        }
+      ) }) }),
+      stripeErrors.cardNumber && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: stripeErrors.cardNumber })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "Data de validade" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+          CardExpiryElement,
+          {
+            options: stripeElementOptions,
+            onChange: (e) => onStripeChange("cardExpiry", e.complete)
+          }
+        ) }) }),
+        stripeErrors.cardExpiry && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: stripeErrors.cardExpiry })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "CVC" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+          CardCvcElement,
+          {
+            options: stripeElementOptions,
+            onChange: (e) => onStripeChange("cardCvc", e.complete)
+          }
+        ) }) }),
+        stripeErrors.cardCvc && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: stripeErrors.cardCvc })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        label: "Pa\xEDs",
+        placeholder: "Selecione",
+        value: watch("country"),
+        onChange: (value) => setValue("country", value),
+        options: [
+          { value: "BR", label: "Brasil" },
+          { value: "ES", label: "Espanha" },
+          { value: "US", label: "Estados Unidos" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(
+        SelectField,
+        {
+          label: "Tipo de pessoa",
+          placeholder: "Selecione",
+          value: personType,
+          onChange: (value) => {
+            setValue("personType", value);
+            setValue("cpf", "");
+            setValue("cnpj", "");
+          },
+          options: [
+            { value: "pf", label: "Pessoa f\xEDsica" },
+            { value: "pj", label: "Pessoa jur\xEDdica" }
+          ],
+          containerClassName: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: personType === "pj" ? /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "CNPJ",
+          placeholder: "__.___.___/____-__",
+          ...register("cnpj", {
+            onChange: (e) => {
+              setValue("cnpj", formatCNPJ(e.target.value));
+            }
+          }),
+          error: !!errors.cpf,
+          errorMessage: errors.cpf?.message
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "CPF",
+          placeholder: "___.___.___-__",
+          ...register("cpf", {
+            onChange: (e) => {
+              setValue("cpf", formatCPF(e.target.value));
+            }
+          }),
+          error: !!errors.cpf,
+          errorMessage: errors.cpf?.message
+        }
+      ) })
+    ] })
+  ] });
+}
+function BillingFormFields({ form }) {
+  const {
+    register,
+    setValue,
+    formState: { errors }
+  } = form;
+  const { mutateAsync: lookupCep } = useViaCep();
+  const handleCepChange = (rawValue) => {
+    const masked = formatPostalCode(rawValue);
+    setValue("cep", masked);
+    const digits = rawValue.replace(/\D/g, "");
+    if (digits.length === 8) {
+      lookupCep(digits).then((data) => {
+        setValue("street", data.logradouro, { shouldValidate: true });
+        setValue("city", data.localidade, { shouldValidate: true });
+        setValue("state", data.uf, { shouldValidate: true });
+      }).catch(() => {
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Nome completo",
+        placeholder: "Digite aqui",
+        ...register("fullName"),
+        error: !!errors.fullName,
+        errorMessage: errors.fullName?.message
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "CEP",
+        placeholder: "_____-___",
+        ...register("cep", {
+          onChange: (e) => handleCepChange(e.target.value)
+        }),
+        error: !!errors.cep,
+        errorMessage: errors.cep?.message
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-[4]", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Endere\xE7o",
+          placeholder: "",
+          ...register("street"),
+          error: !!errors.street,
+          errorMessage: errors.street?.message
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-[1]", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "N\xFAmero",
+          placeholder: "",
+          ...register("streetNumber"),
+          error: !!errors.streetNumber,
+          errorMessage: errors.streetNumber?.message
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "Cidade",
+          placeholder: "",
+          ...register("city"),
+          error: !!errors.city,
+          errorMessage: errors.city?.message
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "UF",
+          placeholder: "",
+          ...register("state"),
+          error: !!errors.state,
+          errorMessage: errors.state?.message
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Complemento",
+        optional: true,
+        placeholder: "",
+        ...register("complement"),
+        error: !!errors.complement,
+        errorMessage: errors.complement?.message
+      }
+    )
+  ] });
+}
+export {
+  BillingFormFields,
+  CardFormFields,
+  STEP1_FIELDS,
+  cardFormSchema
+};
+//# sourceMappingURL=CardFormFields.mjs.map

package/dist/components/modals/cards/CardFormFields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { useViaCep } from '../../../modules/accounts/hooks/useViaCep';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';\nimport z from 'zod';\nimport { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';\n\nconst stripeElementOptions = {\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#030712',\n      fontFamily: 'Inter, sans-serif',\n      '::placeholder': {\n        color: '#9ca3af',\n      },\n    },\n  },\n};\n\nexport const cardFormSchema = z\n  .object({\n    name: z.string().min(1, 'Nome é obrigatório'),\n    country: z.string().min(1, 'País é obrigatório'),\n    personType: z.enum(['pf', 'pj']),\n    cpf: z.string().optional(),\n    cnpj: z.string().optional(),\n    fullName: z.string().min(1, 'Nome completo é obrigatório'),\n    cep: z.string().min(9, 'CEP é obrigatório'),\n    street: z.string().min(1, 'Endereço é obrigatório'),\n    streetNumber: z.string().min(1, 'Número é obrigatório'),\n    city: z.string().min(1, 'Cidade é obrigatória'),\n    state: z.string().min(1, 'UF é obrigatório'),\n    complement: z.string().optional(),\n  })\n  .refine(\n    (data) => {\n      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;\n      return !!data.cnpj && data.cnpj.length >= 18;\n    },\n    {\n      message: 'Documento é obrigatório',\n      path: ['cpf'],\n    }\n  );\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport type StripeElementsStatus = {\n  cardNumber: boolean;\n  cardExpiry: boolean;\n  cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;\n  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };\n};\n\nexport function CardFormFields({ form, onStripeChange, stripeErrors }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const personType = watch('personType');\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome impresso no cartão\"\n        placeholder=\"Digite aqui\"\n        {...register('name')}\n        error={!!errors.name}\n        errorMessage={errors.name?.message}\n      />\n\n      <div className=\"flex flex-col gap-1.5\">\n        <label className=\"paragraph-xsmall-semibold text-zinc-600\">Número do cartão</label>\n        <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative\">\n          <div className=\"w-full\">\n            <CardNumberElement\n              options={{ ...stripeElementOptions, showIcon: true }}\n              onChange={(e: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}\n            />\n          </div>\n        </div>\n        {stripeErrors.cardNumber && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardNumber}</p>\n        )}\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">Data de validade</label>\n          <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n            <div className=\"w-full\">\n              <CardExpiryElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardExpiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardExpiry}</p>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">CVC</label>\n          <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n            <div className=\"w-full\">\n              <CardCvcElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardCvc && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardCvc}</p>\n          )}\n        </div>\n      </div>\n\n      <SelectField\n        label=\"País\"\n        placeholder=\"Selecione\"\n        value={watch('country')}\n        onChange={(value) => setValue('country', value as string)}\n        options={[\n          { value: 'BR', label: 'Brasil' },\n          { value: 'ES', label: 'Espanha' },\n          { value: 'US', label: 'Estados Unidos' },\n        ]}\n      />\n\n      <div className=\"flex gap-4\">\n        <SelectField\n          label=\"Tipo de pessoa\"\n          placeholder=\"Selecione\"\n          value={personType}\n          onChange={(value) => {\n            setValue('personType', value as 'pf' | 'pj');\n            setValue('cpf', '');\n            setValue('cnpj', '');\n          }}\n          options={[\n            { value: 'pf', label: 'Pessoa física' },\n            { value: 'pj', label: 'Pessoa jurídica' },\n          ]}\n          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          {personType === 'pj' ? (\n            <FormField\n              label=\"CNPJ\"\n              placeholder=\"__.___.___/____-__\"\n              {...register('cnpj', {\n                onChange: (e) => {\n                  setValue('cnpj', formatCNPJ(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          ) : (\n            <FormField\n              label=\"CPF\"\n              placeholder=\"___.___.___-__\"\n              {...register('cpf', {\n                onChange: (e) => {\n                  setValue('cpf', formatCPF(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype BillingFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function BillingFormFields({ form }: BillingFormFieldsProps) {\n  const {\n    register,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const { mutateAsync: lookupCep } = useViaCep();\n\n  const handleCepChange = (rawValue: string) => {\n    const masked = formatPostalCode(rawValue);\n    setValue('cep', masked);\n\n    const digits = rawValue.replace(/\\D/g, '');\n    if (digits.length === 8) {\n      lookupCep(digits).then((data) => {\n        setValue('street', data.logradouro, { shouldValidate: true });\n        setValue('city', data.localidade, { shouldValidate: true });\n        setValue('state', data.uf, { shouldValidate: true });\n      }).catch(() => {\n        // silently ignore — user can fill manually\n      });\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome completo\"\n        placeholder=\"Digite aqui\"\n        {...register('fullName')}\n        error={!!errors.fullName}\n        errorMessage={errors.fullName?.message}\n      />\n\n      <FormField\n        label=\"CEP\"\n        placeholder=\"_____-___\"\n        {...register('cep', {\n          onChange: (e) => handleCepChange(e.target.value),\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[4]\">\n          <FormField\n            label=\"Endereço\"\n            placeholder=\"\"\n            {...register('street')}\n            error={!!errors.street}\n            errorMessage={errors.street?.message}\n          />\n        </div>\n        <div className=\"flex-[1]\">\n          <FormField\n            label=\"Número\"\n            placeholder=\"\"\n            {...register('streetNumber')}\n            error={!!errors.streetNumber}\n            errorMessage={errors.streetNumber?.message}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Cidade\"\n            placeholder=\"\"\n            {...register('city')}\n            error={!!errors.city}\n            errorMessage={errors.city?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"UF\"\n            placeholder=\"\"\n            {...register('state')}\n            error={!!errors.state}\n            errorMessage={errors.state?.message}\n          />\n        </div>\n      </div>\n\n      <FormField\n        label=\"Complemento\"\n        optional\n        placeholder=\"\"\n        {...register('complement')}\n        error={!!errors.complement}\n        errorMessage={errors.complement?.message}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/navigation/AppNavigation.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DesktopShell } from "./shells/DesktopShell";
+import { MdShell } from "./shells/MdShell";
+import { MobileShell } from "./shells/MobileShell";
+import { TabsMobileShell } from "./shells/TabsMobileShell";
+import { NavItems } from "./subcomponents/NavItems";
+import { ProjectSelector } from "./subcomponents/ProjectSelector";
+import { PlanCard } from "./subcomponents/PlanCard";
+import { CreditsCard } from "./subcomponents/CreditsCard";
+import { BottomLinks } from "./subcomponents/BottomLinks";
+import { NavItemsContext } from "./NavItemsContext";
+function AppNavigationRoot({ children, mobileVariant = "sheet", mobileTabsOffset, onCancelledReactivate }) {
+  const [navItems, setNavItems] = useState([]);
+  return /* @__PURE__ */ jsxs(NavItemsContext.Provider, { value: { navItems, setNavItems, mobileVariant }, children: [
+    /* @__PURE__ */ jsx(DesktopShell, { children }),
+    /* @__PURE__ */ jsx(MdShell, { children }),
+    /* @__PURE__ */ jsx(MobileShell, { children }),
+    mobileVariant === "tabs" && /* @__PURE__ */ jsx(TabsMobileShell, { topOffset: mobileTabsOffset, children })
+  ] });
+}
+const AppNavigation = Object.assign(AppNavigationRoot, {
+  NavItems,
+  ProjectSelector,
+  PlanCard,
+  CreditsCard,
+  BottomLinks
+});
+export {
+  AppNavigation
+};
+//# sourceMappingURL=AppNavigation.mjs.map

package/dist/components/navigation/AppNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { BottomLinks } from './subcomponents/BottomLinks';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n  mobileVariant?: 'sheet' | 'tabs';\r\n  mobileTabsOffset?: string;\r\n  onCancelledReactivate?: () => void;\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset, onCancelledReactivate }: AppNavigationProps) {\r\n  const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n  return (\r\n    <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      <MobileShell>{children}</MobileShell>\r\n      {mobileVariant === 'tabs' && (\r\n        <TabsMobileShell topOffset={mobileTabsOffset}>{children}</TabsMobileShell>\r\n      )}\r\n    </NavItemsContext.Provider>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n  BottomLinks,\r\n});\r\n"],"mappings":";AA+BI,SACE,KADF;AA7BJ,SAAoB,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAehC,SAAS,kBAAkB,EAAE,UAAU,gBAAgB,SAAS,kBAAkB,sBAAsB,GAAuB;AAC7H,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAE5D,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,aAAa,cAAc,GACtE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IACnB,oBAAC,eAAa,UAAS;AAAA,IACtB,kBAAkB,UACjB,oBAAC,mBAAgB,WAAW,kBAAmB,UAAS;AAAA,KAE5D;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}

package/dist/components/navigation/AppNavigationContext.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, useContext } from "react";
+const AppNavigationContext = createContext(void 0);
+function useAppNavigationContext() {
+  const ctx = useContext(AppNavigationContext);
+  if (!ctx) throw new Error("useAppNavigationContext must be used inside AppNavigation");
+  return ctx;
+}
+export {
+  AppNavigationContext,
+  useAppNavigationContext
+};
+//# sourceMappingURL=AppNavigationContext.mjs.map

package/dist/components/navigation/AppNavigationContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/AppNavigationContext.ts"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, useContext } from 'react';\r\n\r\nexport type Breakpoint = 'desktop' | 'md' | 'mobile';\r\n\r\ninterface AppNavigationContextValue {\r\n  breakpoint: Breakpoint;\r\n}\r\n\r\nexport const AppNavigationContext = createContext<AppNavigationContextValue | undefined>(undefined);\r\n\r\nexport function useAppNavigationContext(): AppNavigationContextValue {\r\n  const ctx = useContext(AppNavigationContext);\r\n  if (!ctx) throw new Error('useAppNavigationContext must be used inside AppNavigation');\r\n  return ctx;\r\n}\r\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAQnC,MAAM,uBAAuB,cAAqD,MAAS;AAE3F,SAAS,0BAAqD;AACnE,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,SAAO;AACT;","names":[]}

package/dist/components/navigation/CancelledSubscriptionBanner.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { IconAlertOctagon, IconX } from "@tabler/icons-react";
+import { formatShortDate } from "../../infra/utils/date";
+import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
+function CancelledSubscriptionBanner({ onReactivate }) {
+  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+  const dismiss = useCallback(() => setVisible(false), []);
+  const dueDate = new Date(subscription?.date_due);
+  const today = /* @__PURE__ */ new Date();
+  const isPastDue = today >= dueDate;
+  const formattedDate = formatShortDate(dueDate);
+  const isTrial = subscription?.type === "trial";
+  if (!visible) return null;
+  if (isTrial && !isPastDue) return null;
+  if (!isTrial && (!subscription?.date_cancellation || isPastDue)) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? "translate-y-0 md:translate-y-9" : "-translate-y-full"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 w-full sm:w-auto", children: [
+          /* @__PURE__ */ jsx(IconAlertOctagon, { size: 16, className: "text-white shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: isPastDue ? "Sua assinatura foi cancelada e suas p\xE1ginas foram retiradas do ar." : `Assinatura cancelada! Suas p\xE1ginas ser\xE3o retiradas do ar no dia ${formattedDate}!` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-center p-1.5 cursor-pointer",
+              onClick: onReactivate,
+              children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white underline", children: "Reativar assinatura" })
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer shrink-0", onClick: dismiss, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-red-200" }) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  CancelledSubscriptionBanner
+};
+//# sourceMappingURL=CancelledSubscriptionBanner.mjs.map

package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/CancelledSubscriptionBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertOctagon, IconX } from '@tabler/icons-react';\nimport { formatShortDate } from '../../infra/utils/date';\nimport { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';\n\ninterface CancelledSubscriptionBannerProps {\n  onReactivate?: () => void;\n}\n\nexport function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {\n  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();\n  const [visible, setVisible] = useState(true);\n  const [animated, setAnimated] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setAnimated(true), 50);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const dismiss = useCallback(() => setVisible(false), []);\n  const dueDate = new Date(subscription?.date_due);\n  const today = new Date();\n  const isPastDue = today >= dueDate;\n  const formattedDate = formatShortDate(dueDate);\n\n  const isTrial = subscription?.type === 'trial';\n\n  if (!visible) return null;\n  if (isTrial && !isPastDue) return null;\n  if (!isTrial && (!subscription?.date_cancellation || isPastDue)) return null;\n\n  return (\n    <div className=\"fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n      <div\n        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n      >\n        <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n          <IconAlertOctagon size={16} className=\"text-white shrink-0\" />\n          <span className=\"paragraph-xsmall-semibold text-white\">\n            {isPastDue\n              ? 'Sua assinatura foi cancelada e suas páginas foram retiradas do ar.'\n              : `Assinatura cancelada! Suas páginas serão retiradas do ar no dia ${formattedDate}!`}\n          </span>\n        </div>\n        <div className=\"flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start\">\n          <button\n            type=\"button\"\n            className=\"flex items-center justify-center p-1.5 cursor-pointer\"\n            onClick={onReactivate}\n          >\n            <span className=\"paragraph-xsmall-semibold text-white underline\">\n              Reativar assinatura\n            </span>\n          </button>\n          <button type=\"button\" className=\"cursor-pointer shrink-0\" onClick={dismiss}>\n            <IconX size={18} className=\"text-red-200\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAsCQ,SACE,KADF;AApCR,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAS,kBAAkB,aAAa;AACxC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAM/B,SAAS,4BAA4B,EAAE,aAAa,GAAqC;AAC9F,QAAM,EAAE,MAAM,EAAE,MAAM,CAAC,YAAY,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,sBAAsB;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,IAAI,GAAG,EAAE;AACpD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AACvD,QAAM,UAAU,IAAI,KAAK,cAAc,QAAQ;AAC/C,QAAM,QAAQ,oBAAI,KAAK;AACvB,QAAM,YAAY,SAAS;AAC3B,QAAM,gBAAgB,gBAAgB,OAAO;AAE7C,QAAM,UAAU,cAAc,SAAS;AAEvC,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,WAAW,CAAC,UAAW,QAAO;AAClC,MAAI,CAAC,YAAY,CAAC,cAAc,qBAAqB,WAAY,QAAO;AAExE,SACE,oBAAC,SAAI,WAAU,wHACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,8NAA8N,WAAW,mCAAmC,mBAAmB;AAAA,MAE1S;AAAA,6BAAC,SAAI,WAAU,mDACb;AAAA,8BAAC,oBAAiB,MAAM,IAAI,WAAU,uBAAsB;AAAA,UAC5D,oBAAC,UAAK,WAAU,wCACb,sBACG,0EACA,yEAAmE,aAAa,KACtF;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,UAAK,WAAU,kDAAiD,iCAEjE;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,YAAO,MAAK,UAAS,WAAU,2BAA0B,SAAS,SACjE,8BAAC,SAAM,MAAM,IAAI,WAAU,gBAAe,GAC5C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/navigation/NavItem.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useAppNavigationContext } from "./AppNavigationContext";
+import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
+import { useMdSidebarStore } from "../../store/useMdSidebarStore";
+function NavItem({ icon: Icon, label, href, isActive = false }) {
+  const { breakpoint } = useAppNavigationContext();
+  const { close } = useMobileNavbarSheet();
+  const { collapse } = useMdSidebarStore();
+  const handleClick = () => {
+    if (breakpoint === "mobile") {
+      close();
+    } else if (breakpoint === "md") {
+      collapse();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href,
+      prefetch: true,
+      className: `rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline ${isActive ? "bg-gray-50" : "bg-white hover:bg-gray-100"} active:bg-gray-50`,
+      onClick: handleClick,
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 20,
+            className: isActive ? "text-gray-950" : "text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `paragraph-small-medium ${isActive ? "text-gray-950" : "text-gray-500"}`, children: label })
+      ]
+    }
+  );
+}
+export {
+  NavItem
+};
+//# sourceMappingURL=NavItem.mjs.map

package/dist/components/navigation/NavItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/NavItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType } from 'react';\r\nimport Link from 'next/link';\r\nimport { useAppNavigationContext } from './AppNavigationContext';\r\nimport { useMobileNavbarSheet } from '../../store/useMobileNavbarSheet';\r\nimport { useMdSidebarStore } from '../../store/useMdSidebarStore';\r\n\r\ninterface NavItemProps {\r\n  icon?: ElementType;\r\n  label: string;\r\n  href: string;\r\n  isActive?: boolean;\r\n}\r\n\r\nexport function NavItem({ icon: Icon, label, href, isActive = false }: NavItemProps) {\r\n  const { breakpoint } = useAppNavigationContext();\r\n  const { close } = useMobileNavbarSheet();\r\n  const { collapse } = useMdSidebarStore();\r\n\r\n  const handleClick = () => {\r\n    if (breakpoint === 'mobile') {\r\n      close();\r\n    } else if (breakpoint === 'md') {\r\n      collapse();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Link\r\n      href={href}\r\n      prefetch\r\n      className={`rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline ${\r\n        isActive ? 'bg-gray-50' : 'bg-white hover:bg-gray-100'\r\n      } active:bg-gray-50`}\r\n      onClick={handleClick}\r\n    >\r\n      {Icon && (\r\n        <Icon\r\n          size={20}\r\n          className={isActive ? 'text-gray-950' : 'text-gray-400'}\r\n        />\r\n      )}\r\n      <span className={`paragraph-small-medium ${isActive ? 'text-gray-950' : 'text-gray-500'}`}>\r\n        {label}\r\n      </span>\r\n    </Link>\r\n  );\r\n}\r\n"],"mappings":";AA6BI,SASI,KATJ;AA1BJ,OAAO,UAAU;AACjB,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAS3B,SAAS,QAAQ,EAAE,MAAM,MAAM,OAAO,MAAM,WAAW,MAAM,GAAiB;AACnF,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAC/C,QAAM,EAAE,MAAM,IAAI,qBAAqB;AACvC,QAAM,EAAE,SAAS,IAAI,kBAAkB;AAEvC,QAAM,cAAc,MAAM;AACxB,QAAI,eAAe,UAAU;AAC3B,YAAM;AAAA,IACR,WAAW,eAAe,MAAM;AAC9B,eAAS;AAAA,IACX;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAQ;AAAA,MACR,WAAW,wFACT,WAAW,eAAe,4BAC5B;AAAA,MACA,SAAS;AAAA,MAER;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,WAAW,kBAAkB;AAAA;AAAA,QAC1C;AAAA,QAEF,oBAAC,UAAK,WAAW,0BAA0B,WAAW,kBAAkB,eAAe,IACpF,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/navigation/NavItemsContext.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from "react";
+const NavItemsContext = createContext({
+  navItems: [],
+  setNavItems: () => {
+  },
+  mobileVariant: "sheet"
+});
+function useNavItemsContext() {
+  return useContext(NavItemsContext);
+}
+export {
+  NavItemsContext,
+  useNavItemsContext
+};
+//# sourceMappingURL=NavItemsContext.mjs.map

package/dist/components/navigation/NavItemsContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/NavItemsContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { NavItemConfig } from './subcomponents/NavItems';\n\ninterface NavItemsContextValue {\n  navItems: NavItemConfig[];\n  setNavItems: (items: NavItemConfig[]) => void;\n  mobileVariant: 'sheet' | 'tabs';\n}\n\nexport const NavItemsContext = createContext<NavItemsContextValue>({\n  navItems: [],\n  setNavItems: () => {},\n  mobileVariant: 'sheet',\n});\n\nexport function useNavItemsContext(): NavItemsContextValue {\n  return useContext(NavItemsContext);\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AASnC,MAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,CAAC;AAAA,EACX,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,eAAe;AACjB,CAAC;AAEM,SAAS,qBAA2C;AACzD,SAAO,WAAW,eAAe;AACnC;","names":[]}