@zentauri-ui/zentauri-components 0.0.84 → 0.0.91

package/dist/ui/empty-state.js

@@ -0,0 +1,154 @@
+"use client";
+
+
+// src/ui/empty-state/empty-state.tsx
+import { createContext, useContext, useMemo } from "react";
+import { motion } from "framer-motion";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/empty-state/animations.ts
+var emptyStateAnimationPresets = {
+  none: {},
+  float: {
+    whileHover: { y: -4 },
+    transition: { type: "spring", stiffness: 260, damping: 22 }
+  },
+  fade: {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.25, ease: "easeOut" }
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 16 },
+    animate: { opacity: 1, y: 0 },
+    transition: { type: "spring", stiffness: 380, damping: 28 }
+  }
+};
+
+// src/ui/empty-state/variants.ts
+import { cva } from "class-variance-authority";
+var emptyStateVariants = cva("flex w-full flex-col items-center text-center", {
+  variants: {
+    size: {
+      sm: "gap-2 p-4 text-sm",
+      md: "gap-3 p-6 text-sm",
+      lg: "gap-4 p-8 text-base"
+    },
+    appearance: {
+      default: "text-slate-50",
+      ghost: "text-slate-200",
+      card: "rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]"
+    },
+    align: {
+      start: "items-start text-left",
+      center: "items-center text-center",
+      end: "items-end text-right"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
+    align: "center"
+  }
+});
+var emptyStateTitleVariants = cva("font-semibold tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var emptyStateDescriptionVariants = cva("max-w-md text-slate-400", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/ui/empty-state/empty-state.tsx
+import { jsx } from "react/jsx-runtime";
+var EmptyStateSizeContext = createContext("md");
+function useEmptyStateSize() {
+  return useContext(EmptyStateSizeContext);
+}
+function EmptyState(props) {
+  const {
+    className,
+    size = "md",
+    appearance,
+    align,
+    animation = "none",
+    children,
+    ref,
+    ...rest
+  } = props;
+  const motionProps = emptyStateAnimationPresets[animation];
+  const ctx = useMemo(() => size ?? "md", [size]);
+  return /* @__PURE__ */ jsx(EmptyStateSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    motion.section,
+    {
+      ref,
+      "data-slot": "empty-state",
+      "aria-live": "polite",
+      className: cn(emptyStateVariants({ size, appearance, align }), className),
+      initial: animation === "none" ? false : void 0,
+      ...motionProps,
+      ...rest,
+      children
+    }
+  ) });
+}
+EmptyState.displayName = "EmptyState";
+function EmptyStateIcon({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-icon", className: cn("text-slate-300", className), children });
+}
+EmptyStateIcon.displayName = "EmptyStateIcon";
+function EmptyStateTitle({ className, children }) {
+  const size = useEmptyStateSize();
+  return /* @__PURE__ */ jsx("h2", { "data-slot": "empty-state-title", className: cn(emptyStateTitleVariants({ size }), className), children });
+}
+EmptyStateTitle.displayName = "EmptyStateTitle";
+function EmptyStateDescription({
+  className,
+  children
+}) {
+  const size = useEmptyStateSize();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "empty-state-description",
+      className: cn(emptyStateDescriptionVariants({ size }), className),
+      children
+    }
+  );
+}
+EmptyStateDescription.displayName = "EmptyStateDescription";
+function EmptyStateAction({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: cn("mt-2", className), children });
+}
+EmptyStateAction.displayName = "EmptyStateAction";
+export {
+  EmptyState,
+  EmptyStateAction,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+  emptyStateAnimationPresets,
+  emptyStateDescriptionVariants,
+  emptyStateTitleVariants,
+  emptyStateVariants
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/ui/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/empty-state/empty-state.tsx","../../src/lib/utils.ts","../../src/ui/empty-state/animations.ts","../../src/ui/empty-state/variants.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { emptyStateAnimationPresets } from \"./animations\";\nimport type { EmptyStateProps, EmptyStateSectionProps } from \"./types\";\nimport {\n  emptyStateDescriptionVariants,\n  emptyStateTitleVariants,\n  emptyStateVariants,\n} from \"./variants\";\n\ntype EmptyStateSize = NonNullable<EmptyStateProps[\"size\"]>;\n\nconst EmptyStateSizeContext = createContext<EmptyStateSize>(\"md\");\n\nfunction useEmptyStateSize(): EmptyStateSize {\n  return useContext(EmptyStateSizeContext);\n}\n\nexport function EmptyState(props: EmptyStateProps) {\n  const {\n    className,\n    size = \"md\",\n    appearance,\n    align,\n    animation = \"none\",\n    children,\n    ref,\n    ...rest\n  } = props;\n  const motionProps = emptyStateAnimationPresets[animation];\n  const ctx = useMemo(() => size ?? \"md\", [size]);\n\n  return (\n    <EmptyStateSizeContext.Provider value={ctx}>\n      <motion.section\n        ref={ref}\n        data-slot=\"empty-state\"\n        aria-live=\"polite\"\n        className={cn(emptyStateVariants({ size, appearance, align }), className)}\n        initial={animation === \"none\" ? false : undefined}\n        {...motionProps}\n        {...rest}\n      >\n        {children}\n      </motion.section>\n    </EmptyStateSizeContext.Provider>\n  );\n}\n\nEmptyState.displayName = \"EmptyState\";\n\nexport function EmptyStateIcon({ className, children }: EmptyStateSectionProps) {\n  return (\n    <div data-slot=\"empty-state-icon\" className={cn(\"text-slate-300\", className)}>\n      {children}\n    </div>\n  );\n}\n\nEmptyStateIcon.displayName = \"EmptyStateIcon\";\n\nexport function EmptyStateTitle({ className, children }: EmptyStateSectionProps) {\n  const size = useEmptyStateSize();\n  return (\n    <h2 data-slot=\"empty-state-title\" className={cn(emptyStateTitleVariants({ size }), className)}>\n      {children}\n    </h2>\n  );\n}\n\nEmptyStateTitle.displayName = \"EmptyStateTitle\";\n\nexport function EmptyStateDescription({\n  className,\n  children,\n}: EmptyStateSectionProps) {\n  const size = useEmptyStateSize();\n  return (\n    <p\n      data-slot=\"empty-state-description\"\n      className={cn(emptyStateDescriptionVariants({ size }), className)}\n    >\n      {children}\n    </p>\n  );\n}\n\nEmptyStateDescription.displayName = \"EmptyStateDescription\";\n\nexport function EmptyStateAction({ className, children }: EmptyStateSectionProps) {\n  return (\n    <div data-slot=\"empty-state-action\" className={cn(\"mt-2\", className)}>\n      {children}\n    </div>\n  );\n}\n\nEmptyStateAction.displayName = \"EmptyStateAction\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { EmptyStateAnimation } from \"./types\";\n\ntype EmptyStatePresetMotionProps = Pick<\n  HTMLMotionProps<\"div\">,\n  \"initial\" | \"animate\" | \"transition\" | \"whileHover\"\n>;\n\nexport type EmptyStateAnimationPresets = Record<\n  EmptyStateAnimation,\n  EmptyStatePresetMotionProps\n>;\n\nexport const emptyStateAnimationPresets: EmptyStateAnimationPresets = {\n  none: {},\n  float: {\n    whileHover: { y: -4 },\n    transition: { type: \"spring\", stiffness: 260, damping: 22 },\n  },\n  fade: {\n    initial: { opacity: 0, y: 8 },\n    animate: { opacity: 1, y: 0 },\n    transition: { duration: 0.25, ease: \"easeOut\" },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 16 },\n    animate: { opacity: 1, y: 0 },\n    transition: { type: \"spring\", stiffness: 380, damping: 28 },\n  },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const emptyStateVariants = cva(\"flex w-full flex-col items-center text-center\", {\n  variants: {\n    size: {\n      sm: \"gap-2 p-4 text-sm\",\n      md: \"gap-3 p-6 text-sm\",\n      lg: \"gap-4 p-8 text-base\",\n    },\n    appearance: {\n      default: \"text-slate-50\",\n      ghost: \"text-slate-200\",\n      card: \"rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n    },\n    align: {\n      start: \"items-start text-left\",\n      center: \"items-center text-center\",\n      end: \"items-end text-right\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    appearance: \"default\",\n    align: \"center\",\n  },\n});\n\nexport const emptyStateTitleVariants = cva(\"font-semibold tracking-tight\", {\n  variants: {\n    size: {\n      sm: \"text-base\",\n      md: \"text-lg\",\n      lg: \"text-xl\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const emptyStateDescriptionVariants = cva(\"max-w-md text-slate-400\", {\n  variants: {\n    size: {\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-base\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n"],"mappings":"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","names":[]}