@k3-universe/react-kit 0.0.41 → 0.0.42

package/src/kit/builder/section/SectionContainer.tsx

@@ -1,85 +1,85 @@
-import { Fragment, type ReactNode } from 'react';
-
-import { cn } from '../../../shadcn/lib/utils';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '../../../shadcn/ui/card';
-import { Separator } from '../../../shadcn/ui/separator';
-import type { SectionNode } from './types';
-
-export type SectionContainerProps = {
-  title?: ReactNode;
-  description?: ReactNode;
-  variant?: SectionNode['variant'];
-  className?: string;
-  headerClassName?: string;
-  contentClassName?: string;
-  children: ReactNode;
-};
-
-const SectionContainer = ({
-  title,
-  description,
-  variant = 'card',
-  className,
-  headerClassName,
-  contentClassName,
-  children,
-}: SectionContainerProps) => {
-  const renderHeader = () => {
-    if (!title && !description) return null;
-
-    return (
-      <div className={cn('space-y-1', headerClassName)}>
-        {title && <h3 className="text-lg font-medium leading-none">{title}</h3>}
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        )}
-      </div>
-    );
-  };
-
-  const renderContent = () => (
-    <div className={cn('space-y-4', contentClassName)}>{children}</div>
-  );
-
-  switch (variant) {
-    case 'card':
-      return (
-        <Card className={className}>
-          {(title || description) && (
-            <CardHeader>
-              {title && <CardTitle>{title}</CardTitle>}
-              {description && <CardDescription>{description}</CardDescription>}
-            </CardHeader>
-          )}
-          <CardContent>{renderContent()}</CardContent>
-        </Card>
-      );
-    case 'separator':
-      return (
-        <div className={cn('space-y-6', className)}>
-          {(title || description) && (
-            <Fragment>
-              {renderHeader()}
-              <Separator />
-            </Fragment>
-          )}
-          {renderContent()}
-        </div>
-      );
-    default:
-      return (
-        <div className={cn('space-y-6', className)}>
-          {renderHeader()}
-          {renderContent()}
-        </div>
-      );
-  }
-};
-
-export default SectionContainer;
+import { Fragment, type ReactNode } from 'react';
+
+import { cn } from '../../../shadcn/lib/utils';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../../shadcn/ui/card';
+import { Separator } from '../../../shadcn/ui/separator';
+import type { SectionNode } from './types';
+
+export type SectionContainerProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  variant?: SectionNode['variant'];
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  children: ReactNode;
+};
+
+const SectionContainer = ({
+  title,
+  description,
+  variant = 'card',
+  className,
+  headerClassName,
+  contentClassName,
+  children,
+}: SectionContainerProps) => {
+  const renderHeader = () => {
+    if (!title && !description) return null;
+
+    return (
+      <div className={cn('space-y-1', headerClassName)}>
+        {title && <h3 className="text-lg font-medium leading-none">{title}</h3>}
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+    );
+  };
+
+  const renderContent = () => (
+    <div className={cn('space-y-4', contentClassName)}>{children}</div>
+  );
+
+  switch (variant) {
+    case 'card':
+      return (
+        <Card className={className}>
+          {(title || description) && (
+            <CardHeader>
+              {title && <CardTitle>{title}</CardTitle>}
+              {description && <CardDescription>{description}</CardDescription>}
+            </CardHeader>
+          )}
+          <CardContent>{renderContent()}</CardContent>
+        </Card>
+      );
+    case 'separator':
+      return (
+        <div className={cn('space-y-6', className)}>
+          {(title || description) && (
+            <Fragment>
+              {renderHeader()}
+              <Separator />
+            </Fragment>
+          )}
+          {renderContent()}
+        </div>
+      );
+    default:
+      return (
+        <div className={cn('space-y-6', className)}>
+          {renderHeader()}
+          {renderContent()}
+        </div>
+      );
+  }
+};
+
+export default SectionContainer;

package/src/kit/builder/section/index.ts

@@ -1,2 +1,2 @@
-export { default as SectionBuilder } from './SectionBuilder';
-export * from './types';
+export { default as SectionBuilder } from './SectionBuilder';
+export * from './types';

package/src/kit/builder/section/types.ts

@@ -1,80 +1,80 @@
-import type React from 'react';
-
-export type SectionLayout = 'grid' | 'flex' | 'tabs';
-
-export interface SectionGridOptions {
-  cols?: number;
-  smCols?: number;
-  mdCols?: number;
-  lgCols?: number;
-  xlCols?: number;
-  gap?: string; // Tailwind gap classes like 'gap-4' (optional)
-}
-
-export interface SectionFlexOptions {
-  direction?: 'row' | 'col';
-  wrap?: boolean;
-  gap?: string; // Tailwind gap classes like 'gap-4'
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  justify?: 'start' | 'center' | 'between' | 'end';
-}
-
-export interface SectionBase {
-  id: string;
-  title?: string;
-  subtitle?: string;
-  variant?: 'card' | 'separator' | 'plain';
-  className?: string;
-  headerClassName?: string;
-  contentClassName?: string;
-  hidden?: boolean;
-}
-
-export interface SectionLeaf {
-  key: string;
-  content: React.ReactNode;
-  className?: string;
-  // Optional label & layout
-  label?: React.ReactNode;
-  labelLayout?: 'inline' | 'stacked';
-  labelClassName?: string;
-  valueClassName?: string;
-  inlineLabelWidthClass?: string; // e.g. 'w-32' when labelLayout is 'inline'
-  description?: React.ReactNode;
-  span?: {
-    base?: number;
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-  };
-  hidden?: boolean;
-  renderKey?: string | number;
-}
-
-// Tabs layout support
-export interface SectionTab {
-  id: string;
-  label: React.ReactNode;
-  className?: string;
-  contentClassName?: string;
-  node: SectionNode; // Content of this tab as a nested section node
-}
-
-export interface SectionNode extends SectionBase {
-  layout?: SectionLayout;
-  grid?: SectionGridOptions;
-  flex?: SectionFlexOptions;
-  children?: Array<SectionNode | SectionLeaf>;
-  // Tabs layout (layout === 'tabs')
-  tabs?: SectionTab[];
-  defaultTabId?: string;
-  tabsListClassName?: string;
-  tabsContentClassName?: string;
-}
-
-export interface SectionBuilderProps {
-  sections: SectionNode[];
-  renderLeaf?: (leaf: SectionLeaf) => React.ReactNode;
-  className?: string;
-}
+import type React from 'react';
+
+export type SectionLayout = 'grid' | 'flex' | 'tabs';
+
+export interface SectionGridOptions {
+  cols?: number;
+  smCols?: number;
+  mdCols?: number;
+  lgCols?: number;
+  xlCols?: number;
+  gap?: string; // Tailwind gap classes like 'gap-4' (optional)
+}
+
+export interface SectionFlexOptions {
+  direction?: 'row' | 'col';
+  wrap?: boolean;
+  gap?: string; // Tailwind gap classes like 'gap-4'
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'between' | 'end';
+}
+
+export interface SectionBase {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  variant?: 'card' | 'separator' | 'plain';
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  hidden?: boolean;
+}
+
+export interface SectionLeaf {
+  key: string;
+  content: React.ReactNode;
+  className?: string;
+  // Optional label & layout
+  label?: React.ReactNode;
+  labelLayout?: 'inline' | 'stacked';
+  labelClassName?: string;
+  valueClassName?: string;
+  inlineLabelWidthClass?: string; // e.g. 'w-32' when labelLayout is 'inline'
+  description?: React.ReactNode;
+  span?: {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  hidden?: boolean;
+  renderKey?: string | number;
+}
+
+// Tabs layout support
+export interface SectionTab {
+  id: string;
+  label: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  node: SectionNode; // Content of this tab as a nested section node
+}
+
+export interface SectionNode extends SectionBase {
+  layout?: SectionLayout;
+  grid?: SectionGridOptions;
+  flex?: SectionFlexOptions;
+  children?: Array<SectionNode | SectionLeaf>;
+  // Tabs layout (layout === 'tabs')
+  tabs?: SectionTab[];
+  defaultTabId?: string;
+  tabsListClassName?: string;
+  tabsContentClassName?: string;
+}
+
+export interface SectionBuilderProps {
+  sections: SectionNode[];
+  renderLeaf?: (leaf: SectionLeaf) => React.ReactNode;
+  className?: string;
+}

package/src/kit/builder/stack-dialog/context.ts

@@ -1,15 +1,15 @@
-import { createContext } from 'react';
-import type { StackDialogContextInstance } from './types';
-
-export const StackDialogContext = createContext<StackDialogContextInstance>({
-  activeDialogs: [],
-  createDialog: () => {
-    throw new Error('createDialog must be called within StackDialogProvider');
-  },
-  closeDialog: () => {
-    throw new Error('closeDialog must be called within StackDialogProvider');
-  },
-  closeAllDialogs: () => {
-    throw new Error('closeAllDialog must be called within StackDialogProvider');
-  },
-});
+import { createContext } from 'react';
+import type { StackDialogContextInstance } from './types';
+
+export const StackDialogContext = createContext<StackDialogContextInstance>({
+  activeDialogs: [],
+  createDialog: () => {
+    throw new Error('createDialog must be called within StackDialogProvider');
+  },
+  closeDialog: () => {
+    throw new Error('closeDialog must be called within StackDialogProvider');
+  },
+  closeAllDialogs: () => {
+    throw new Error('closeAllDialog must be called within StackDialogProvider');
+  },
+});

package/src/kit/builder/stack-dialog/hooks.ts

@@ -1,13 +1,13 @@
-import { useContext } from 'react';
-import { StackDialogContext } from './context';
-import type { StackDialogHook } from './types';
-
-export function useStackDialog(): StackDialogHook {
-  const { createDialog, closeDialog, closeAllDialogs } =
-    useContext(StackDialogContext);
-  return {
-    createDialog,
-    closeDialog,
-    closeAllDialogs,
-  };
-}
+import { useContext } from 'react';
+import { StackDialogContext } from './context';
+import type { StackDialogHook } from './types';
+
+export function useStackDialog(): StackDialogHook {
+  const { createDialog, closeDialog, closeAllDialogs } =
+    useContext(StackDialogContext);
+  return {
+    createDialog,
+    closeDialog,
+    closeAllDialogs,
+  };
+}

package/src/kit/builder/stack-dialog/index.ts

@@ -1,12 +1,12 @@
-export { StackDialogContext } from './context';
-
-export { StackDialogContextProvider as StackDialogProvider } from './provider';
-
-export { useStackDialog } from './hooks';
-
-export type {
-  StackDialogContextInstance,
-  StackDialogCreateConfig,
-  StackDialogHook,
-  StackDialogInstance,
-} from './types';
+export { StackDialogContext } from './context';
+
+export { StackDialogContextProvider as StackDialogProvider } from './provider';
+
+export { useStackDialog } from './hooks';
+
+export type {
+  StackDialogContextInstance,
+  StackDialogCreateConfig,
+  StackDialogHook,
+  StackDialogInstance,
+} from './types';

package/src/kit/builder/stack-dialog/provider.tsx

@@ -1,51 +1,51 @@
-import { type PropsWithChildren, useCallback, useRef, useState } from 'react';
-import { StackDialogContext } from './context';
-import { StackDialogRenderer } from './renderer';
-import type { StackDialogCreateConfig, StackDialogInstance } from './types';
-
-export function StackDialogContextProvider(props: PropsWithChildren) {
-  const [activeDialogs, setActiveDialogs] = useState<StackDialogInstance[]>([]);
-  const ids = useRef<number>(0);
-
-  const handleCreateDialog = useCallback((config: StackDialogCreateConfig) => {
-    const dialogId = config.id ?? (ids.current++).toString();
-
-    setActiveDialogs((prev) => {
-      const clone = [...prev];
-      clone.push({ ...config, id: dialogId });
-      return clone;
-    });
-
-    return dialogId;
-  }, []);
-
-  const handleCloseDialog = useCallback((id?: string) => {
-    setActiveDialogs((prev) => {
-      const clone = [...prev];
-      if (!id) clone.splice(clone.length - 1, 1);
-      else clone.splice(clone.findIndex((d) => d.id === id));
-      return clone;
-    });
-  }, []);
-
-  const handleCloseAllDialog = useCallback(() => {
-    setActiveDialogs([]);
-  }, []);
-
-  return (
-    <StackDialogContext.Provider
-      value={{
-        activeDialogs,
-        createDialog: handleCreateDialog,
-        closeDialog: handleCloseDialog,
-        closeAllDialogs: handleCloseAllDialog,
-      }}
-    >
-      {props.children}
-      <StackDialogRenderer
-        dialogs={activeDialogs}
-        closeDialog={handleCloseDialog}
-      />
-    </StackDialogContext.Provider>
-  );
-}
+import { type PropsWithChildren, useCallback, useRef, useState } from 'react';
+import { StackDialogContext } from './context';
+import { StackDialogRenderer } from './renderer';
+import type { StackDialogCreateConfig, StackDialogInstance } from './types';
+
+export function StackDialogContextProvider(props: PropsWithChildren) {
+  const [activeDialogs, setActiveDialogs] = useState<StackDialogInstance[]>([]);
+  const ids = useRef<number>(0);
+
+  const handleCreateDialog = useCallback((config: StackDialogCreateConfig) => {
+    const dialogId = config.id ?? (ids.current++).toString();
+
+    setActiveDialogs((prev) => {
+      const clone = [...prev];
+      clone.push({ ...config, id: dialogId });
+      return clone;
+    });
+
+    return dialogId;
+  }, []);
+
+  const handleCloseDialog = useCallback((id?: string) => {
+    setActiveDialogs((prev) => {
+      const clone = [...prev];
+      if (!id) clone.splice(clone.length - 1, 1);
+      else clone.splice(clone.findIndex((d) => d.id === id));
+      return clone;
+    });
+  }, []);
+
+  const handleCloseAllDialog = useCallback(() => {
+    setActiveDialogs([]);
+  }, []);
+
+  return (
+    <StackDialogContext.Provider
+      value={{
+        activeDialogs,
+        createDialog: handleCreateDialog,
+        closeDialog: handleCloseDialog,
+        closeAllDialogs: handleCloseAllDialog,
+      }}
+    >
+      {props.children}
+      <StackDialogRenderer
+        dialogs={activeDialogs}
+        closeDialog={handleCloseDialog}
+      />
+    </StackDialogContext.Provider>
+  );
+}

package/src/kit/builder/stack-dialog/renderer.tsx

@@ -1,36 +1,36 @@
-import { cn } from '../../../shadcn/lib/utils';
-import { Dialog, DialogContent } from '../../../shadcn/ui/dialog';
-import type { StackDialogInstance } from './types';
-
-export function StackDialogRenderer(props: {
-  dialogs: StackDialogInstance[];
-  closeDialog: (id: string) => void;
-}) {
-  const handleCloseDialog = (dialog: StackDialogInstance) => () => {
-    if (dialog.onInterruptClosing == null) {
-      props.closeDialog(dialog.id);
-    } else if (dialog.onInterruptClosing()) {
-      props.closeDialog(dialog.id);
-    }
-  };
-
-  return props.dialogs.map((dialog, i) => (
-    <Dialog
-      open={!!props.dialogs[i]}
-      onOpenChange={handleCloseDialog(dialog)}
-      key={dialog.id}
-    >
-      <DialogContent
-        className={cn('w-auto min-w-[300px]', dialog.dialogContentClassName)}
-        onEscapeKeyDown={(e) => {
-          if (dialog.closeOnEscapePressed === false) e.preventDefault();
-        }}
-        onInteractOutside={(e) => {
-          if (dialog.closeOnInteractOutside === false) e.preventDefault();
-        }}
-      >
-        {dialog.template}
-      </DialogContent>
-    </Dialog>
-  ));
-}
+import { cn } from '../../../shadcn/lib/utils';
+import { Dialog, DialogContent } from '../../../shadcn/ui/dialog';
+import type { StackDialogInstance } from './types';
+
+export function StackDialogRenderer(props: {
+  dialogs: StackDialogInstance[];
+  closeDialog: (id: string) => void;
+}) {
+  const handleCloseDialog = (dialog: StackDialogInstance) => () => {
+    if (dialog.onInterruptClosing == null) {
+      props.closeDialog(dialog.id);
+    } else if (dialog.onInterruptClosing()) {
+      props.closeDialog(dialog.id);
+    }
+  };
+
+  return props.dialogs.map((dialog, i) => (
+    <Dialog
+      open={!!props.dialogs[i]}
+      onOpenChange={handleCloseDialog(dialog)}
+      key={dialog.id}
+    >
+      <DialogContent
+        className={cn('w-auto min-w-[300px]', dialog.dialogContentClassName)}
+        onEscapeKeyDown={(e) => {
+          if (dialog.closeOnEscapePressed === false) e.preventDefault();
+        }}
+        onInteractOutside={(e) => {
+          if (dialog.closeOnInteractOutside === false) e.preventDefault();
+        }}
+      >
+        {dialog.template}
+      </DialogContent>
+    </Dialog>
+  ));
+}

package/src/kit/builder/stack-dialog/types.ts

@@ -1,34 +1,34 @@
-import type { ReactNode } from 'react';
-
-export type StackDialogContextInstance = {
-  activeDialogs: StackDialogInstance[];
-  createDialog: (config: StackDialogCreateConfig) => string;
-  closeDialog: (id?: string) => void;
-  closeAllDialogs: () => void;
-};
-
-export type StackDialogInstance = {
-  id: string;
-  template: ReactNode;
-  dialogContentClassName?: string;
-  onInterruptClosing?: () => boolean;
-  closeOnInteractOutside?: boolean;
-  closeOnEscapePressed?: boolean;
-};
-
-export type StackDialogCreateConfig = {
-  /** Optional ID for the dialog, generated when omited. */
-  id?: string;
-  /** The element to be rendered in the dialog. */
-  template: ReactNode;
-  /** Return **`true`** to continue closing the dialog. */
-  onInterruptClosing?: () => boolean;
-  /** Allow closing the dialog by clicking outside of dialog. */
-  closeOnInteractOutside?: boolean;
-  /** Allow closing the dialog by pressing Escape key. */
-  closeOnEscapePressed?: boolean;
-  /** Classname for DialogContent */
-  dialogContentClassName?: string;
-};
-
-export type StackDialogHook = Omit<StackDialogContextInstance, 'activeDialogs'>;
+import type { ReactNode } from 'react';
+
+export type StackDialogContextInstance = {
+  activeDialogs: StackDialogInstance[];
+  createDialog: (config: StackDialogCreateConfig) => string;
+  closeDialog: (id?: string) => void;
+  closeAllDialogs: () => void;
+};
+
+export type StackDialogInstance = {
+  id: string;
+  template: ReactNode;
+  dialogContentClassName?: string;
+  onInterruptClosing?: () => boolean;
+  closeOnInteractOutside?: boolean;
+  closeOnEscapePressed?: boolean;
+};
+
+export type StackDialogCreateConfig = {
+  /** Optional ID for the dialog, generated when omited. */
+  id?: string;
+  /** The element to be rendered in the dialog. */
+  template: ReactNode;
+  /** Return **`true`** to continue closing the dialog. */
+  onInterruptClosing?: () => boolean;
+  /** Allow closing the dialog by clicking outside of dialog. */
+  closeOnInteractOutside?: boolean;
+  /** Allow closing the dialog by pressing Escape key. */
+  closeOnEscapePressed?: boolean;
+  /** Classname for DialogContent */
+  dialogContentClassName?: string;
+};
+
+export type StackDialogHook = Omit<StackDialogContextInstance, 'activeDialogs'>;