@pallamart/pm-core-components 2.0.0 → 2.2.0

package/dist/components/internal/avatar/pm-avatar.js

@@ -2,5 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { PallamartClassNameService } from '@pallamart/pm-design-system';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-export const PmAvatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: PallamartClassNameService.merge('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className), ...props })));
+import { PmSkeleton } from '../skeleton/pm-skeleton.js';
+export const PmAvatar = React.forwardRef(({ className, isLoading = false, ...props }, ref) => isLoading ? (_jsx(PmSkeleton, { className: PallamartClassNameService.merge('h-10 w-10 shrink-0 rounded-full', className) })) : (_jsx(AvatarPrimitive.Root, { ref: ref, className: PallamartClassNameService.merge('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className), ...props })));
 PmAvatar.displayName = AvatarPrimitive.Root.displayName;

package/dist/components/internal/badge/pm-badge.d.ts

@@ -1,2 +1,2 @@
 import type { PmBadgeProps } from '../../../models/internal/badge/pm-badge-props.js';
-export declare const PmBadge: ({ className, variant, ...props }: PmBadgeProps) => import("react").JSX.Element;
+export declare const PmBadge: ({ className, isLoading, variant, ...props }: PmBadgeProps) => import("react").JSX.Element;

package/dist/components/internal/badge/pm-badge.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallamartClassNameService } from '@pallamart/pm-design-system';
 import { PmBadgeVariants } from '../../../constants/internal/pm-badge-variants.js';
-export const PmBadge = ({ className, variant, ...props }) => {
+import { PmSkeleton } from '../skeleton/pm-skeleton.js';
+export const PmBadge = ({ className, isLoading = false, variant, ...props }) => {
+    if (isLoading)
+        return (_jsx(PmSkeleton, { className: PallamartClassNameService.merge('h-5 w-16 rounded-full', className) }));
     return (_jsx("div", { className: PallamartClassNameService.merge(PmBadgeVariants({ variant }), className), ...props }));
 };

package/dist/components/internal/card/pm-card.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { PallamartClassNameService } from '@pallamart/pm-design-system';
-export const PmCard = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PallamartClassNameService.merge('rounded-xl border bg-card text-card-foreground shadow', className), ...props })));
+import { PmSkeleton } from '../skeleton/pm-skeleton.js';
+export const PmCard = React.forwardRef(({ className, isLoading = false, ...props }, ref) => isLoading ? (_jsx(PmSkeleton, { className: PallamartClassNameService.merge('h-40 w-full rounded-xl', className) })) : (_jsx("div", { ref: ref, className: PallamartClassNameService.merge('rounded-xl border bg-card text-card-foreground shadow', className), ...props })));
 PmCard.displayName = 'PmCard';

package/dist/components/internal/index.d.ts

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/components/internal/index.js

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/components/internal/input/pm-input.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { PallamartClassNameService } from '@pallamart/pm-design-system';
-export const PmInput = React.forwardRef(({ className, type, ...props }, ref) => {
+import { PmSkeleton } from '../skeleton/pm-skeleton.js';
+export const PmInput = React.forwardRef(({ className, isLoading = false, type, ...props }, ref) => {
+    if (isLoading)
+        return (_jsx(PmSkeleton, { className: PallamartClassNameService.merge('h-9 w-full rounded-md', className) }));
     return (_jsx("input", { type: type, className: PallamartClassNameService.merge('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ref: ref, ...props }));
 });
 PmInput.displayName = 'PmInput';

package/dist/components/internal/navigation-progress/index.d.ts

@@ -0,0 +1 @@
+export * from './pm-navigation-progress.js';

package/dist/components/internal/navigation-progress/index.js

@@ -0,0 +1 @@
+export * from './pm-navigation-progress.js';

package/dist/components/internal/navigation-progress/pm-navigation-progress.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { PmNavigationProgressProps } from '../../../models/internal/navigation-progress/pm-navigation-progress-props.js';
+export declare const PmNavigationProgress: ({ className, state }: PmNavigationProgressProps) => React.JSX.Element;

package/dist/components/internal/navigation-progress/pm-navigation-progress.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PallamartClassNameService } from '@pallamart/pm-design-system';
+import { PmNavigationProgressConfig } from '../../../constants/internal/pm-navigation-progress-config.js';
+import { PmNavigationState } from '../../../constants/internal/pm-navigation-state.js';
+import { PmProgress } from '../progress/pm-progress.js';
+export const PmNavigationProgress = ({ className, state }) => {
+    const [value, setValue] = React.useState(PmNavigationProgressConfig.startValue);
+    const [isVisible, setIsVisible] = React.useState(false);
+    React.useEffect(() => {
+        if (state === PmNavigationState.Idle) {
+            if (!isVisible)
+                return;
+            setValue(PmNavigationProgressConfig.completeValue);
+            const hideTimer = window.setTimeout(() => setIsVisible(false), PmNavigationProgressConfig.hideDelayMs);
+            const resetTimer = window.setTimeout(() => setValue(PmNavigationProgressConfig.startValue), PmNavigationProgressConfig.resetDelayMs);
+            return () => {
+                window.clearTimeout(hideTimer);
+                window.clearTimeout(resetTimer);
+            };
+        }
+        setIsVisible(true);
+        setValue(state === PmNavigationState.Submitting
+            ? PmNavigationProgressConfig.submittingValue
+            : PmNavigationProgressConfig.loadingValue);
+    }, [isVisible, state]);
+    return (_jsx(PmProgress, { "aria-hidden": !isVisible, className: PallamartClassNameService.merge('pointer-events-none fixed inset-x-0 top-0 z-[999] h-0.5 rounded-none bg-transparent transition-opacity', isVisible ? 'opacity-100' : 'opacity-0', className), value: value }));
+};

package/dist/components/internal/select/pm-select-trigger.js

@@ -3,5 +3,6 @@ import * as React from 'react';
 import { PallamartClassNameService } from '@pallamart/pm-design-system';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown } from 'lucide-react';
-export const PmSelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: PallamartClassNameService.merge('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: 'h-4 w-4 opacity-50' }) })] })));
+import { PmSkeleton } from '../skeleton/pm-skeleton.js';
+export const PmSelectTrigger = React.forwardRef(({ className, children, isLoading = false, ...props }, ref) => isLoading ? (_jsx(PmSkeleton, { className: PallamartClassNameService.merge('h-9 w-full rounded-md', className) })) : (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: PallamartClassNameService.merge('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: 'h-4 w-4 opacity-50' }) })] })));
 PmSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

package/dist/constants/internal/index.d.ts

@@ -4,6 +4,8 @@ export * from './pm-badge-variants.js';
 export * from './pm-button-variants.js';
 export * from './pm-field-orientation.js';
 export * from './pm-label-variants.js';
+export * from './pm-navigation-progress-config.js';
+export * from './pm-navigation-state.js';
 export * from './pm-root-status-messages.js';
 export * from './pm-sheet-variants.js';
 export * from './pm-toggle-variants.js';

package/dist/constants/internal/index.js

@@ -4,6 +4,8 @@ export * from './pm-badge-variants.js';
 export * from './pm-button-variants.js';
 export * from './pm-field-orientation.js';
 export * from './pm-label-variants.js';
+export * from './pm-navigation-progress-config.js';
+export * from './pm-navigation-state.js';
 export * from './pm-root-status-messages.js';
 export * from './pm-sheet-variants.js';
 export * from './pm-toggle-variants.js';

package/dist/constants/internal/pm-navigation-progress-config.d.ts

@@ -0,0 +1,8 @@
+export declare const PmNavigationProgressConfig: {
+    readonly completeValue: 100;
+    readonly hideDelayMs: 200;
+    readonly loadingValue: 75;
+    readonly resetDelayMs: 450;
+    readonly startValue: 0;
+    readonly submittingValue: 40;
+};

package/dist/constants/internal/pm-navigation-progress-config.js

@@ -0,0 +1,8 @@
+export const PmNavigationProgressConfig = {
+    completeValue: 100,
+    hideDelayMs: 200,
+    loadingValue: 75,
+    resetDelayMs: 450,
+    startValue: 0,
+    submittingValue: 40,
+};

package/dist/constants/internal/pm-navigation-state.d.ts

@@ -0,0 +1,5 @@
+export declare enum PmNavigationState {
+    Idle = "idle",
+    Loading = "loading",
+    Submitting = "submitting"
+}

package/dist/constants/internal/pm-navigation-state.js

@@ -0,0 +1,6 @@
+export var PmNavigationState;
+(function (PmNavigationState) {
+    PmNavigationState["Idle"] = "idle";
+    PmNavigationState["Loading"] = "loading";
+    PmNavigationState["Submitting"] = "submitting";
+})(PmNavigationState || (PmNavigationState = {}));

package/dist/models/internal/avatar/pm-avatar-props.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
 import type * as AvatarPrimitive from '@radix-ui/react-avatar';
 export interface PmAvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    isLoading?: boolean;
 }

package/dist/models/internal/badge/pm-badge-props.d.ts

@@ -2,4 +2,5 @@ import type * as React from 'react';
 import type { VariantProps } from 'class-variance-authority';
 import type { PmBadgeVariants } from '../../../constants/internal/pm-badge-variants.js';
 export interface PmBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof PmBadgeVariants> {
+    isLoading?: boolean;
 }

package/dist/models/internal/card/pm-card-props.d.ts

@@ -1,3 +1,4 @@
 import type * as React from 'react';
 export interface PmCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    isLoading?: boolean;
 }

package/dist/models/internal/index.d.ts

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/models/internal/index.js

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/models/internal/input/pm-input-props.d.ts

@@ -1,3 +1,4 @@
 import type * as React from 'react';
 export interface PmInputProps extends React.ComponentProps<'input'> {
+    isLoading?: boolean;
 }

package/dist/models/internal/navigation-progress/index.d.ts

@@ -0,0 +1 @@
+export * from './pm-navigation-progress-props.js';

package/dist/models/internal/navigation-progress/index.js

@@ -0,0 +1 @@
+export * from './pm-navigation-progress-props.js';

package/dist/models/internal/navigation-progress/pm-navigation-progress-props.d.ts

@@ -0,0 +1,5 @@
+import type { PmNavigationState } from '../../../constants/internal/pm-navigation-state.js';
+export interface PmNavigationProgressProps {
+    className?: string;
+    state: PmNavigationState;
+}

package/dist/models/internal/navigation-progress/pm-navigation-progress-props.js

@@ -0,0 +1 @@
+export {};

package/dist/models/internal/select/pm-select-trigger-props.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
 import type * as SelectPrimitive from '@radix-ui/react-select';
 export interface PmSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    isLoading?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallamart/pm-core-components",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"private": false,
 	"type": "module",
 	"main": "./dist/index.js",