@cntyclub/ui-react 0.1.0

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@cntyclub/ui-react",
+  "version": "0.1.0",
+  "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js",
+      "default": "./dist/form.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "comment-publishConfig": "In-repo (docs/storybook/vue) consume src/ via the exports above. When PUBLISHED to a registry, npm/pnpm swap in these fields so external installs get the compiled, self-contained dist/ (tsup bundles every dependency except react/react-dom) — no transpilePackages, no heavy transitive dep tree.",
+  "dependencies": {
+    "@base-ui/react": "1.1.0",
+    "@headlessui/react": "^2.2.9",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-form": "^1.28.5",
+    "@tiptap/core": "^3.26.1",
+    "@tiptap/extension-placeholder": "^3.26.1",
+    "@tiptap/extension-text-align": "^3.26.1",
+    "@tiptap/pm": "^3.26.1",
+    "@tiptap/react": "^3.26.1",
+    "@tiptap/starter-kit": "^3.26.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.561.0",
+    "qr-code-styling": "^1.9.2",
+    "react-day-picker": "^9.14.0",
+    "react-dropzone": "^14.4.0",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "^3.7.0",
+    "spin-delay": "^2.0.1",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "use-resize-observer": "^9.1.0",
+    "vaul": "^1.1.2",
+    "zustand": "^5.0.11"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "@countryclub/typescript-config": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\""
+  }
+}

package/src/components/form/checkbox-group-field.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import { Checkbox } from "../ui/checkbox";
+import { CheckboxGroup } from "../ui/checkbox-group";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "../ui/field";
+
+export function CheckboxGroupField({
+  field,
+  label,
+  options,
+  emptyMessage,
+  description,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: string[];
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: string[]) => void;
+  };
+  label: string;
+  options: Array<{
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }>;
+  emptyMessage?: string;
+  description?: string;
+}) {
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+
+      {options.length === 0 ? (
+        <div className="text-sm text-muted-foreground">
+          {emptyMessage ?? "No options"}
+        </div>
+      ) : (
+        <CheckboxGroup
+          value={field.state.value}
+          onValueChange={(next) => field.handleChange(next)}
+          className="gap-2 w-full"
+        >
+          {options.map((opt) => {
+            const isChecked = field.state.value.includes(opt.value);
+            return (
+              <button
+                type="button"
+                key={opt.value}
+                disabled={opt.disabled}
+                className="flex w-full items-center gap-3 rounded-lg border px-3 py-2 transition-colors text-left bg-transparent disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer hover:bg-accent/50"
+                onClick={() => {
+                  if (opt.disabled) return;
+                  const next = isChecked
+                    ? field.state.value.filter((v) => v !== opt.value)
+                    : [...field.state.value, opt.value];
+                  field.handleChange(next);
+                }}
+              >
+                <Checkbox
+                  value={opt.value}
+                  checked={isChecked}
+                  disabled={opt.disabled}
+                  readOnly
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-foreground">
+                    {opt.label}
+                  </p>
+                  {opt.description ? (
+                    <p className="text-xs text-muted-foreground">
+                      {opt.description}
+                    </p>
+                  ) : null}
+                </div>
+              </button>
+            );
+          })}
+        </CheckboxGroup>
+      )}
+
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
+  );
+}

package/src/components/form/date-field.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import { Button } from "../ui/button";
+import { Calendar } from "../ui/calendar";
+import { Field, FieldError, FieldLabel } from "../ui/field";
+import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
+import { cn } from "../../lib/utils/css";
+
+export function DateField({
+  field,
+  label,
+  placeholder,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: Date | undefined;
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: Date | undefined) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  placeholder?: string;
+}) {
+  const value = field.state.value;
+
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  const hasValue = Boolean(value);
+
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <Popover onOpenChangeComplete={(open) => !open && field.handleBlur()}>
+        <PopoverTrigger
+          render={
+            <Button
+              className={cn("w-full justify-start", {
+                "text-muted-foreground": !hasValue,
+              })}
+              variant="outline"
+            />
+          }
+        >
+          <CalendarIcon aria-hidden="true" />
+          {value ? (
+            format(value, "LLL dd, y")
+          ) : (
+            <span>{placeholder ?? "Pick a date"}</span>
+          )}
+        </PopoverTrigger>
+        <PopoverPopup>
+          <Calendar
+            mode="single"
+            defaultMonth={value}
+            selected={value}
+            numberOfMonths={2}
+            onSelect={(next) => {
+              field.handleChange(next ?? undefined);
+            }}
+            autoFocus
+          />
+        </PopoverPopup>
+      </Popover>
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

package/src/components/form/date-range-field.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Calendar } from "../ui/calendar";
+import { Field, FieldError, FieldLabel } from "../ui/field";
+import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
+import { cn } from "../../lib/utils/css";
+
+export function DateRangeField({
+  field,
+  label,
+  placeholder,
+  numberOfMonths = 2,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: {
+        from: Date | undefined;
+        to: Date | undefined;
+      };
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: {
+      from: Date | undefined;
+      to: Date | undefined;
+    }) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  placeholder?: string;
+  numberOfMonths?: number;
+}) {
+  const value = field.state.value;
+
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  const hasValue = Boolean(value.from);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        onOpenChangeComplete={(open) => !open && field.handleBlur()}
+      >
+        <PopoverTrigger
+          render={
+            <Button
+              className={cn("w-full justify-start", {
+                "text-muted-foreground": !hasValue,
+              })}
+              variant="outline"
+            />
+          }
+        >
+          <CalendarIcon aria-hidden="true" />
+          {value.from ? (
+            value.to ? (
+              <>
+                {format(value.from, "LLL dd, y")} -{" "}
+                {format(value.to, "LLL dd, y")}
+              </>
+            ) : (
+              format(value.from, "LLL dd, y")
+            )
+          ) : (
+            <span>{placeholder ?? "Pick a date range"}</span>
+          )}
+        </PopoverTrigger>
+        <PopoverPopup>
+          <Calendar
+            mode="range"
+            defaultMonth={value.from}
+            selected={value}
+            resetOnSelect
+            numberOfMonths={numberOfMonths}
+            onSelect={(range) => {
+              field.handleChange({
+                from: range?.from ?? undefined,
+                to: range?.to ?? undefined,
+              });
+              if (range?.from && range?.to) {
+                setOpen(false);
+              }
+            }}
+            autoFocus
+          />
+        </PopoverPopup>
+      </Popover>
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

package/src/components/form/form-context.ts

@@ -0,0 +1,10 @@
+"use client";
+
+import { createFormHookContexts } from "@tanstack/react-form";
+
+export const {
+  fieldContext: appFieldContext,
+  formContext: appFormContext,
+  useFieldContext: useAppFieldContext,
+  useFormContext: useAppFormContext,
+} = createFormHookContexts();

package/src/components/form/form.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  createFormHook,
+  formOptions,
+  revalidateLogic,
+} from "@tanstack/react-form";
+import { CheckboxGroupField } from "./checkbox-group-field";
+import { DateField } from "./date-field";
+import { DateRangeField } from "./date-range-field";
+import { appFieldContext, appFormContext } from "./form-context";
+import { NumberField } from "./number-field";
+import { SelectField } from "./select-field";
+import { SubmitButton } from "./submit-button";
+import { TextField } from "./text-field";
+
+const { useAppForm, withForm: withAppForm } = createFormHook({
+  fieldContext: appFieldContext,
+  formContext: appFormContext,
+  fieldComponents: {
+    TextField,
+    CheckboxGroupField,
+    SelectField,
+    DateField,
+    DateRangeField,
+    NumberField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+});
+
+const customFormOptions = formOptions({
+  validationLogic: revalidateLogic({
+    mode: "submit",
+    modeAfterSubmission: "blur",
+  }),
+});
+
+const useCustomAppForm: typeof useAppForm = (options) => {
+  return useAppForm({
+    ...customFormOptions,
+    ...options,
+  });
+};
+
+const withCustomAppForm: typeof withAppForm = (options) => {
+  return withAppForm({
+    ...customFormOptions,
+    ...options,
+  });
+};
+
+export { useCustomAppForm as useAppForm, withCustomAppForm as withAppForm };

package/src/components/form/number-field.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+} from "../ui/field";
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberField as NumberFieldPrimitive,
+} from "../ui/number-field";
+
+export function NumberField({
+  field,
+  label,
+  min,
+  className,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: number;
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: number) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  min?: number;
+  className?: string;
+}) {
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  return (
+    <Field className={className} name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <FieldControl
+        render={
+          <NumberFieldPrimitive
+            value={field.state.value}
+            min={min}
+            onValueChange={(next) => {
+              if (typeof next === "number") field.handleChange(next);
+            }}
+            onBlur={() => field.handleBlur()}
+          >
+            <NumberFieldGroup>
+              <NumberFieldDecrement />
+              <NumberFieldInput />
+              <NumberFieldIncrement />
+            </NumberFieldGroup>
+          </NumberFieldPrimitive>
+        }
+      />
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

package/src/components/form/select-field.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+} from "../ui/field";
+import {
+  Select,
+  SelectItem,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+export function SelectField({
+  field,
+  label,
+  placeholder,
+  options,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: string;
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: string) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  placeholder?: string;
+  options: Array<{ value: string; label: string }>;
+}) {
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <FieldControl
+        render={
+          <Select
+            items={options}
+            value={field.state.value ? field.state.value : null}
+            onValueChange={(next) => {
+              field.handleChange(next ?? "");
+            }}
+            onOpenChangeComplete={(open) => {
+              if (!open) field.handleBlur();
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={placeholder ?? "Select"} />
+            </SelectTrigger>
+            <SelectPopup>
+              {options.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectPopup>
+          </Select>
+        }
+      />
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

package/src/components/form/submit-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button } from "../ui/button";
+import { SpinnerOnDemand } from "../ui/spinner-on-demand";
+import { useAppFormContext } from "./form-context";
+
+interface SubmitButtonProps extends React.ComponentProps<typeof Button> {
+  icon?: React.ReactNode;
+}
+
+export function SubmitButton({
+  children,
+  disabled,
+  icon,
+  ...props
+}: SubmitButtonProps) {
+  const form = useAppFormContext();
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <Button type="submit" disabled={isSubmitting || disabled} {...props}>
+          <SpinnerOnDemand icon={icon} isLoading={isSubmitting} />
+          {children}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+}