@object-ui/components 5.0.2 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,6 +18,7 @@ export * from './sort-builder';
18
18
  export * from './grouping-editor';
19
19
  export * from './action-param-dialog';
20
20
  export * from './view-skeleton';
21
+ export * from './shimmer-skeleton';
21
22
  export * from './RecordTitleChip';
22
23
  export * from './refresh-indicator';
23
24
  export * from './view-states';
@@ -0,0 +1,32 @@
1
+ /**
2
+ * ObjectUI
3
+ * Copyright (c) 2024-present ObjectStack Inc.
4
+ *
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ import * as React from "react";
9
+ /**
10
+ * `ShimmerSkeleton` — drop-in replacement for `Skeleton` with a Linear /
11
+ * Notion-style shimmer effect instead of the default pulse.
12
+ *
13
+ * Why: the canonical `Skeleton` from `ui/skeleton.tsx` uses
14
+ * `animate-pulse`, which fades opacity uniformly. That reads as "this
15
+ * page is loading" but doesn't suggest direction or progress. A
16
+ * left-to-right shimmer is the modern enterprise-app convention and
17
+ * subjectively feels faster.
18
+ *
19
+ * Requires the `@keyframes shimmer` + `@utility animate-shimmer`
20
+ * declarations in `@object-ui/app-shell/styles.css` (already imported
21
+ * by every host app).
22
+ *
23
+ * Respects `prefers-reduced-motion` automatically: the shimmer is
24
+ * applied via `motion-safe:`, so reduced-motion users see a static
25
+ * muted block that still communicates "loading" via shape.
26
+ *
27
+ * @example
28
+ * <ShimmerSkeleton className="h-4 w-32 rounded-md" />
29
+ */
30
+ export interface ShimmerSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
31
+ }
32
+ export declare function ShimmerSkeleton({ className, ...props }: ShimmerSkeletonProps): import("react/jsx-runtime").JSX.Element;
@@ -14,12 +14,37 @@ declare function DataLoadingState({ className, message, ...props }: DataLoadingS
14
14
  interface DataEmptyStateProps extends React.ComponentProps<"div"> {
15
15
  /** Icon rendered above the title */
16
16
  icon?: React.ReactNode;
17
+ /**
18
+ * Optional illustration rendered above the icon (or replacing it
19
+ * when the icon would have shown a generic Inbox glyph). Use for
20
+ * product-feel empty states — onboarding-style hero SVGs, brand
21
+ * illustrations, etc. Sized to roughly 96–160px by default; pass a
22
+ * custom `className` on the SVG to override.
23
+ *
24
+ * When `illustration` is set, the default Inbox icon is suppressed.
25
+ * To show BOTH a custom icon and an illustration, pass both `icon`
26
+ * and `illustration`.
27
+ */
28
+ illustration?: React.ReactNode;
29
+ /**
30
+ * When false, the icon container is omitted entirely. Useful for
31
+ * board-level / banner-style empty states that should not show a generic
32
+ * inbox glyph. Defaults to true.
33
+ */
34
+ showIcon?: boolean;
35
+ /**
36
+ * Override class on the icon wrapper. By default the wrapper renders as a
37
+ * small muted rounded square (`size-10 rounded-lg bg-muted`). Pass `""` to
38
+ * strip that styling and render the icon raw, or extend the look (e.g.
39
+ * larger size).
40
+ */
41
+ iconWrapperClassName?: string;
17
42
  title?: string;
18
43
  description?: string;
19
44
  /** Optional action rendered below the description */
20
45
  action?: React.ReactNode;
21
46
  }
22
- declare function DataEmptyState({ className, icon, title, description, action, children, ...props }: DataEmptyStateProps): import("react/jsx-runtime").JSX.Element;
47
+ declare function DataEmptyState({ className, icon, illustration, showIcon, iconWrapperClassName, title, description, action, children, ...props }: DataEmptyStateProps): import("react/jsx-runtime").JSX.Element;
23
48
  interface DataErrorStateProps extends React.ComponentProps<"div"> {
24
49
  title?: string;
25
50
  /** Error message or description */
@@ -30,4 +55,4 @@ interface DataErrorStateProps extends React.ComponentProps<"div"> {
30
55
  retryLabel?: string;
31
56
  }
32
57
  declare function DataErrorState({ className, title, message, onRetry, retryLabel, children, ...props }: DataErrorStateProps): import("react/jsx-runtime").JSX.Element;
33
- export { DataLoadingState, DataEmptyState, DataErrorState, type DataLoadingStateProps, type DataEmptyStateProps, type DataErrorStateProps, };
58
+ export { DataLoadingState, DataEmptyState, DataEmptyState as EmptyState, DataErrorState, type DataLoadingStateProps, type DataEmptyStateProps, type DataEmptyStateProps as EmptyStateProps, type DataErrorStateProps, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@object-ui/components",
3
- "version": "5.0.2",
3
+ "version": "5.2.1",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "description": "Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS",
@@ -69,10 +69,10 @@
69
69
  "tailwind-merge": "^3.6.0",
70
70
  "tailwindcss-animate": "^1.0.7",
71
71
  "vaul": "^1.1.2",
72
- "@object-ui/core": "5.0.2",
73
- "@object-ui/i18n": "5.0.2",
74
- "@object-ui/react": "5.0.2",
75
- "@object-ui/types": "5.0.2"
72
+ "@object-ui/core": "5.2.1",
73
+ "@object-ui/i18n": "5.2.1",
74
+ "@object-ui/react": "5.2.1",
75
+ "@object-ui/types": "5.2.1"
76
76
  },
77
77
  "peerDependencies": {
78
78
  "react": "^18.0.0 || ^19.0.0",