@k3-universe/react-kit 0.0.41 → 0.0.43

package/src/kit/components/keyboard/index.ts

@@ -1,4 +1,4 @@
-export { Keyboard } from './Keyboard';
-export type { KeyboardProps, KeyboardLayout } from './Keyboard';
-export default void 0;
-
+export { Keyboard } from './Keyboard';
+export type { KeyboardProps, KeyboardLayout } from './Keyboard';
+export default void 0;
+

package/src/kit/components/login/Login.tsx

@@ -1,141 +1,141 @@
-import type * as React from 'react';
-
-export type LoginProps = {
-  // Application title shown above the form (e.g., "Acme Inc")
-  appTitle?: string;
-  // Optional subtitle under the app title
-  subtitle?: string;
-  // Customizable signup label and link
-  signupLabel?: string; // e.g., "Don't have an account?"
-  signupLinkLabel?: string; // e.g., "Sign up"
-  signupHref?: string;
-  // Optional: render a "Forgot password" link under the form
-  forgotPasswordLabel?: string; // e.g., "Forgot your password?"
-  forgotPasswordLinkLabel?: string; // e.g., "Forgot your password?"
-  forgotPasswordHref?: string; // when provided, the link will render
-  // Right-side image URL and alt
-  rightImageSrc?: string;
-  rightImageAlt?: string;
-  // Explicit toggle to show/hide the right-side visual column
-  showRightImage?: boolean;
-  // Optional className for the outer container
-  className?: string;
-  // Optional continue-with slot (renders below the submit action area)
-  continueWith?: React.ReactNode;
-  // Children used as the form area
-  children?: React.ReactNode;
-};
-
-/**
- * Login layout container.
- *
- * Responsibilities:
- * - Provides a two-column layout (form + optional right-side image)
- * - Renders an app title and optional subtitle above the form
- * - Renders optional separator and custom `continueWith` content (e.g., social buttons)
- * - Renders a footer with configurable signup CTA
- * - Leaves the actual form implementation to children, so you can use FormBuilder or any custom form
- */
-export function Login({
-  appTitle = 'Acme Inc',
-  subtitle,
-  signupLabel = "Don't have an account?",
-  signupLinkLabel = 'Sign up',
-  signupHref,
-  forgotPasswordLabel = 'Forgot your password?',
-  forgotPasswordLinkLabel = 'Reset Here',
-  forgotPasswordHref,
-  rightImageSrc,
-  rightImageAlt = 'Login image',
-  showRightImage = true,
-  className,
-  continueWith,
-  children,
-}: LoginProps) {
-  const shouldRenderRightColumn = showRightImage;
-
-  return (
-    <div
-      className={[
-        'mx-auto grid min-h-screen w-full grid-cols-1',
-        shouldRenderRightColumn ? 'lg:grid-cols-2' : null,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {/* Left column: form section */}
-      <div className="flex items-center justify-center p-6 sm:p-8 lg:p-12">
-        <div className="w-full max-w-md">
-          {/* Title */}
-          <div className="mb-6 text-center">
-            <h1 className="text-2xl font-bold leading-tight tracking-tight">
-              {appTitle}
-            </h1>
-            {subtitle ? (
-              <p className="text-muted-foreground mt-1 text-sm">{subtitle}</p>
-            ) : null}
-          </div>
-
-          {/* Form area (children) */}
-          <div className="grid gap-6">
-            {children}
-
-            {/* Optional: Forgot password link */}
-            {forgotPasswordHref ? (
-              <div className="text-center text-sm">
-                {forgotPasswordLabel}{' '}
-                <a
-                  href={forgotPasswordHref}
-                  className="underline underline-offset-4"
-                >
-                  {forgotPasswordLinkLabel}
-                </a>
-              </div>
-            ) : null}
-
-            {/* Optional separator + continueWith slot */}
-            {continueWith ? (
-              <>
-                <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
-                  <span className="bg-background text-muted-foreground relative z-10 px-2">
-                    Or continue with
-                  </span>
-                </div>
-                <div className="grid gap-3">{continueWith}</div>
-              </>
-            ) : null}
-          </div>
-
-          {/* Signup footer */}
-          {signupHref ? (
-            <div className="mt-6 text-center text-sm">
-              {signupLabel}{' '}
-              <a href={signupHref} className="underline underline-offset-4">
-                {signupLinkLabel}
-              </a>
-            </div>
-          ) : null}
-        </div>
-      </div>
-
-      {/* Right column: image */}
-      {shouldRenderRightColumn ? (
-        <div className="hidden lg:block">
-          {rightImageSrc ? (
-            <img
-              src={rightImageSrc}
-              alt={rightImageAlt}
-              className="h-full w-full object-cover"
-              loading="lazy"
-            />
-          ) : (
-            <div className="h-full w-full bg-muted" />
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export default Login;
+import type * as React from 'react';
+
+export type LoginProps = {
+  // Application title shown above the form (e.g., "Acme Inc")
+  appTitle?: string;
+  // Optional subtitle under the app title
+  subtitle?: string;
+  // Customizable signup label and link
+  signupLabel?: string; // e.g., "Don't have an account?"
+  signupLinkLabel?: string; // e.g., "Sign up"
+  signupHref?: string;
+  // Optional: render a "Forgot password" link under the form
+  forgotPasswordLabel?: string; // e.g., "Forgot your password?"
+  forgotPasswordLinkLabel?: string; // e.g., "Forgot your password?"
+  forgotPasswordHref?: string; // when provided, the link will render
+  // Right-side image URL and alt
+  rightImageSrc?: string;
+  rightImageAlt?: string;
+  // Explicit toggle to show/hide the right-side visual column
+  showRightImage?: boolean;
+  // Optional className for the outer container
+  className?: string;
+  // Optional continue-with slot (renders below the submit action area)
+  continueWith?: React.ReactNode;
+  // Children used as the form area
+  children?: React.ReactNode;
+};
+
+/**
+ * Login layout container.
+ *
+ * Responsibilities:
+ * - Provides a two-column layout (form + optional right-side image)
+ * - Renders an app title and optional subtitle above the form
+ * - Renders optional separator and custom `continueWith` content (e.g., social buttons)
+ * - Renders a footer with configurable signup CTA
+ * - Leaves the actual form implementation to children, so you can use FormBuilder or any custom form
+ */
+export function Login({
+  appTitle = 'Acme Inc',
+  subtitle,
+  signupLabel = "Don't have an account?",
+  signupLinkLabel = 'Sign up',
+  signupHref,
+  forgotPasswordLabel = 'Forgot your password?',
+  forgotPasswordLinkLabel = 'Reset Here',
+  forgotPasswordHref,
+  rightImageSrc,
+  rightImageAlt = 'Login image',
+  showRightImage = true,
+  className,
+  continueWith,
+  children,
+}: LoginProps) {
+  const shouldRenderRightColumn = showRightImage;
+
+  return (
+    <div
+      className={[
+        'mx-auto grid min-h-screen w-full grid-cols-1',
+        shouldRenderRightColumn ? 'lg:grid-cols-2' : null,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {/* Left column: form section */}
+      <div className="flex items-center justify-center p-6 sm:p-8 lg:p-12">
+        <div className="w-full max-w-md">
+          {/* Title */}
+          <div className="mb-6 text-center">
+            <h1 className="text-2xl font-bold leading-tight tracking-tight">
+              {appTitle}
+            </h1>
+            {subtitle ? (
+              <p className="text-muted-foreground mt-1 text-sm">{subtitle}</p>
+            ) : null}
+          </div>
+
+          {/* Form area (children) */}
+          <div className="grid gap-6">
+            {children}
+
+            {/* Optional: Forgot password link */}
+            {forgotPasswordHref ? (
+              <div className="text-center text-sm">
+                {forgotPasswordLabel}{' '}
+                <a
+                  href={forgotPasswordHref}
+                  className="underline underline-offset-4"
+                >
+                  {forgotPasswordLinkLabel}
+                </a>
+              </div>
+            ) : null}
+
+            {/* Optional separator + continueWith slot */}
+            {continueWith ? (
+              <>
+                <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+                  <span className="bg-background text-muted-foreground relative z-10 px-2">
+                    Or continue with
+                  </span>
+                </div>
+                <div className="grid gap-3">{continueWith}</div>
+              </>
+            ) : null}
+          </div>
+
+          {/* Signup footer */}
+          {signupHref ? (
+            <div className="mt-6 text-center text-sm">
+              {signupLabel}{' '}
+              <a href={signupHref} className="underline underline-offset-4">
+                {signupLinkLabel}
+              </a>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Right column: image */}
+      {shouldRenderRightColumn ? (
+        <div className="hidden lg:block">
+          {rightImageSrc ? (
+            <img
+              src={rightImageSrc}
+              alt={rightImageAlt}
+              className="h-full w-full object-cover"
+              loading="lazy"
+            />
+          ) : (
+            <div className="h-full w-full bg-muted" />
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Login;

package/src/kit/components/login/index.ts

@@ -1 +1 @@
-export * from './Login';
+export * from './Login';

package/src/kit/components/monthpicker/MonthInput.tsx

@@ -1,131 +1,131 @@
-'use client';
-
-import * as React from 'react';
-import { Calendar as CalendarIcon } from 'lucide-react';
-import { cn } from '../../../shadcn/lib/utils';
-import { Button } from '../../../shadcn/ui/button';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../../../shadcn/ui/popover';
-import { MonthPicker } from './MonthPicker';
-
-export interface MonthInputProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  value?: Date | null;
-  onChange?: (date: Date | null) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  minDate?: Date;
-  maxDate?: Date;
-  disabledDates?: Date[];
-  format?: (date: Date) => string;
-  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  showFooter?: boolean; // default true
-  cancelLabel?: string; // default 'Cancel'
-  applyLabel?: string; // default 'Apply'
-  // Back-compat aliases
-  clearLabel?: string;
-  closeLabel?: string;
-}
-
-export function MonthInput({
-  value,
-  onChange,
-  placeholder = 'Pick a month',
-  disabled,
-  minDate,
-  maxDate,
-  disabledDates,
-  format,
-  className,
-  buttonVariant = 'outline',
-  ...props
-}: MonthInputProps) {
-  const [internalOpen, setInternalOpen] = React.useState(false);
-  const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
-  const setOpen = (o: boolean) =>
-    props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
-  const [draft, setDraft] = React.useState<Date | null>(value ?? null);
-
-  React.useEffect(() => {
-    if (isOpen) {
-      // Reset draft when opening to current value
-      setDraft(value ?? null);
-    }
-  }, [isOpen, value]);
-
-  const label = value
-    ? format
-      ? format(value)
-      : value.toLocaleDateString(undefined, { year: 'numeric', month: 'short' })
-    : placeholder;
-
-  return (
-    <div className={cn('w-fit', className)} {...props}>
-      <Popover open={isOpen} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            type="button"
-            disabled={disabled}
-            variant={buttonVariant}
-            className={cn(
-              'w-[240px] justify-start text-left font-normal',
-              !value && 'text-muted-foreground',
-            )}
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {label}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0" align="start">
-          <MonthPicker
-            selectedMonth={draft ?? undefined}
-            onMonthSelect={(d) => {
-              if (disabled) return;
-              setDraft(d ?? null);
-            }}
-            minDate={minDate}
-            maxDate={maxDate}
-            disabledDates={disabledDates}
-            variant={{
-              calendar: { main: 'ghost', selected: 'default' },
-              chevrons: 'outline',
-            }}
-          />
-          {(props.showFooter ?? true) && (
-            <div className="flex items-center justify-between gap-2 p-2 border-t">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={() => setOpen(false)}
-                disabled={disabled}
-              >
-                {props.cancelLabel ?? props.clearLabel ?? 'Cancel'}
-              </Button>
-              <Button
-                type="button"
-                variant="default"
-                size="sm"
-                onClick={() => {
-                  onChange?.(draft ?? null);
-                  setOpen(false);
-                }}
-              >
-                {props.applyLabel ?? props.closeLabel ?? 'Apply'}
-              </Button>
-            </div>
-          )}
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
-
-MonthInput.displayName = 'MonthInput';
-
-export default MonthInput;
+'use client';
+
+import * as React from 'react';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { cn } from '../../../shadcn/lib/utils';
+import { Button } from '../../../shadcn/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../shadcn/ui/popover';
+import { MonthPicker } from './MonthPicker';
+
+export interface MonthInputProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  format?: (date: Date) => string;
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showFooter?: boolean; // default true
+  cancelLabel?: string; // default 'Cancel'
+  applyLabel?: string; // default 'Apply'
+  // Back-compat aliases
+  clearLabel?: string;
+  closeLabel?: string;
+}
+
+export function MonthInput({
+  value,
+  onChange,
+  placeholder = 'Pick a month',
+  disabled,
+  minDate,
+  maxDate,
+  disabledDates,
+  format,
+  className,
+  buttonVariant = 'outline',
+  ...props
+}: MonthInputProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
+  const setOpen = (o: boolean) =>
+    props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
+  const [draft, setDraft] = React.useState<Date | null>(value ?? null);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      // Reset draft when opening to current value
+      setDraft(value ?? null);
+    }
+  }, [isOpen, value]);
+
+  const label = value
+    ? format
+      ? format(value)
+      : value.toLocaleDateString(undefined, { year: 'numeric', month: 'short' })
+    : placeholder;
+
+  return (
+    <div className={cn('w-fit', className)} {...props}>
+      <Popover open={isOpen} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            disabled={disabled}
+            variant={buttonVariant}
+            className={cn(
+              'w-[240px] justify-start text-left font-normal',
+              !value && 'text-muted-foreground',
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {label}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" align="start">
+          <MonthPicker
+            selectedMonth={draft ?? undefined}
+            onMonthSelect={(d) => {
+              if (disabled) return;
+              setDraft(d ?? null);
+            }}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabledDates={disabledDates}
+            variant={{
+              calendar: { main: 'ghost', selected: 'default' },
+              chevrons: 'outline',
+            }}
+          />
+          {(props.showFooter ?? true) && (
+            <div className="flex items-center justify-between gap-2 p-2 border-t">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => setOpen(false)}
+                disabled={disabled}
+              >
+                {props.cancelLabel ?? props.clearLabel ?? 'Cancel'}
+              </Button>
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                onClick={() => {
+                  onChange?.(draft ?? null);
+                  setOpen(false);
+                }}
+              >
+                {props.applyLabel ?? props.closeLabel ?? 'Apply'}
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+MonthInput.displayName = 'MonthInput';
+
+export default MonthInput;