@prediktif/ui 0.1.17 → 0.1.18

package/dist/index.d.mts

@@ -1,5 +1,8 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
 
 interface NavItem {
     title: string;
@@ -58,4 +61,21 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
+interface StateEmptyProps {
+    icon: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    buttonText: string;
+    render?: ComponentProps<typeof Button>["render"];
+}
+declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
+
+export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
 
 interface NavItem {
     title: string;
@@ -58,4 +61,21 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
+interface StateEmptyProps {
+    icon: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    buttonText: string;
+    render?: ComponentProps<typeof Button>["render"];
+}
+declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
+
+export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };

package/dist/index.js

@@ -62,7 +62,8 @@ var index_exports = {};
 __export(index_exports, {
   AppSidebar: () => AppSidebar,
   HeaderTabs: () => HeaderTabs,
-  HeaderTitle: () => HeaderTitle
+  HeaderTitle: () => HeaderTitle,
+  StateEmpty: () => StateEmpty
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1575,9 +1576,146 @@ var HeaderTitle = (0, import_react3.memo)(function HeaderTitle2({
     children
   ] });
 });
+
+// src/components/composed/state-empty.tsx
+var import_react4 = require("react");
+
+// src/components/ui/empty.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_cn13 = require("cn");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Empty(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty",
+      className: (0, import_cn13.cn)(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-header",
+      className: (0, import_cn13.cn)("flex max-w-sm flex-col items-center gap-1", className)
+    }, props)
+  );
+}
+var emptyMediaVariants = (0, import_class_variance_authority4.cva)(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: (0, import_cn13.cn)(emptyMediaVariants({ variant, className }))
+    }, props)
+  );
+}
+function EmptyTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-title",
+      className: (0, import_cn13.cn)(
+        "font-heading text-sm font-medium tracking-tight",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-description",
+      className: (0, import_cn13.cn)(
+        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-content",
+      className: (0, import_cn13.cn)(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/state-empty.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function renderStateIcon(icon) {
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComp, {});
+  }
+  return icon;
+}
+var StateEmpty = (0, import_react4.memo)(function StateEmpty2({
+  icon,
+  title,
+  description,
+  buttonText,
+  render
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Empty, { className: "w-full border border-dashed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(EmptyHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        nativeButton: !render,
+        render,
+        children: buttonText
+      }
+    ) })
+  ] });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSidebar,
   HeaderTabs,
-  HeaderTitle
+  HeaderTitle,
+  StateEmpty
 });

package/dist/index.mjs

@@ -1540,8 +1540,145 @@ var HeaderTitle = memo3(function HeaderTitle2({
     children
   ] });
 });
+
+// src/components/composed/state-empty.tsx
+import { memo as memo4 } from "react";
+
+// src/components/ui/empty.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { cn as cn13 } from "cn";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Empty(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty",
+      className: cn13(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-header",
+      className: cn13("flex max-w-sm flex-col items-center gap-1", className)
+    }, props)
+  );
+}
+var emptyMediaVariants = cva4(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn13(emptyMediaVariants({ variant, className }))
+    }, props)
+  );
+}
+function EmptyTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-title",
+      className: cn13(
+        "font-heading text-sm font-medium tracking-tight",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-description",
+      className: cn13(
+        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )
+    }, props)
+  );
+}
+function EmptyContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadValues({
+      "data-slot": "empty-content",
+      className: cn13(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/state-empty.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function renderStateIcon(icon) {
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ jsx17(IconComp, {});
+  }
+  return icon;
+}
+var StateEmpty = memo4(function StateEmpty2({
+  icon,
+  title,
+  description,
+  buttonText,
+  render
+}) {
+  return /* @__PURE__ */ jsxs10(Empty, { className: "w-full border border-dashed", children: [
+    /* @__PURE__ */ jsxs10(EmptyHeader, { children: [
+      /* @__PURE__ */ jsx17(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
+      /* @__PURE__ */ jsx17(EmptyTitle, { children: title }),
+      /* @__PURE__ */ jsx17(EmptyDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx17(EmptyContent, { children: /* @__PURE__ */ jsx17(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        nativeButton: !render,
+        render,
+        children: buttonText
+      }
+    ) })
+  ] });
+});
 export {
   AppSidebar,
   HeaderTabs,
-  HeaderTitle
+  HeaderTitle,
+  StateEmpty
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",