@oppulence/design-system 1.0.3 → 1.0.5

package/hooks/use-resize-observer.ts

@@ -0,0 +1,24 @@
+import { type RefObject, useEffect, useState } from "react";
+
+export function useResizeObserver(
+  elementRef: RefObject<Element>,
+): ResizeObserverEntry | undefined {
+  const [entry, setEntry] = useState<ResizeObserverEntry>();
+
+  useEffect(() => {
+    const node = elementRef?.current;
+    if (!node) {
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      setEntry(entry);
+    });
+
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [elementRef]);
+
+  return entry;
+}

package/lib/ai.ts

@@ -0,0 +1,31 @@
+export type ChatRole = "assistant" | "user" | "system" | "tool";
+
+export type ChatStatus = "idle" | "submitted" | "streaming" | "error";
+
+export type FileUIPart = {
+  type: "file";
+  url?: string;
+  mediaType?: string;
+  filename?: string;
+  data?: string;
+};
+
+export type ToolState =
+  | "input-streaming"
+  | "input-available"
+  | "output-available"
+  | "output-error";
+
+export type ToolUIPart = {
+  type: string;
+  state: ToolState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string | null;
+};
+
+export type GeneratedImage = {
+  base64: string;
+  mediaType: string;
+  uint8Array?: Uint8Array;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oppulence/design-system",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Design system for Oppulence - shadcn-style components with Tailwind CSS v4",
   "type": "module",
   "main": "./src/index.ts",
@@ -68,21 +68,39 @@
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@fontsource-variable/plus-jakarta-sans": "^5.2.8",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tiptap/extension-link": "^2.12.0",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-underline": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/react": "^2.12.0",
+    "@tiptap/starter-kit": "^2.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.25",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.70.0",
+    "react-icons": "^5.5.0",
+    "react-number-format": "^5.4.4",
     "react-resizable-panels": "^4.2.0",
+    "react-syntax-highlighter": "^15.6.6",
     "recharts": "2.15.4",
     "shadcn": "^3.6.2",
     "sonner": "^2.0.7",
+    "streamdown": "1.2.0",
     "tailwind-merge": "^3.4.0",
+    "tippy.js": "^6.3.7",
     "tw-animate-css": "^1.4.0",
+    "use-stick-to-bottom": "^1.1.1",
     "vaul": "^1.1.2"
   },
   "peerDependencies": {

package/src/components/atoms/animated-size-container.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  type ComponentPropsWithoutRef,
+  type PropsWithChildren,
+  type RefObject,
+  forwardRef,
+  useRef,
+} from "react";
+
+import { useResizeObserver } from "../../../hooks/use-resize-observer";
+import { cn } from "../../../lib/utils";
+
+type AnimatedSizeContainerProps = PropsWithChildren<{
+  width?: boolean;
+  height?: boolean;
+}> &
+  Omit<ComponentPropsWithoutRef<typeof motion.div>, "animate" | "children" | "className">;
+
+/**
+ * A container with animated width and height (each optional) based on children dimensions.
+ */
+const AnimatedSizeContainer = forwardRef<
+  HTMLDivElement,
+  AnimatedSizeContainerProps
+>(({ width = false, height = false, transition, children, ...rest }, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeObserverEntry = useResizeObserver(containerRef as RefObject<Element>);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="overflow-hidden"
+      animate={{
+        width: width
+          ? (resizeObserverEntry?.contentRect?.width ?? "auto")
+          : "auto",
+        height: height
+          ? (resizeObserverEntry?.contentRect?.height ?? "auto")
+          : "auto",
+      }}
+      transition={transition ?? { type: "spring", duration: 0.3 }}
+      {...rest}
+    >
+      <div
+        ref={containerRef}
+        className={cn(height && "h-max", width && "w-max")}
+      >
+        {children}
+      </div>
+    </motion.div>
+  );
+});
+
+AnimatedSizeContainer.displayName = "AnimatedSizeContainer";
+
+export { AnimatedSizeContainer };
+export type { AnimatedSizeContainerProps };

package/src/components/atoms/button.tsx

@@ -76,6 +76,8 @@ type ButtonProps = Omit<ButtonPrimitive.Props, "className"> &
     iconLeft?: React.ReactNode;
     /** Icon to show on the right side of the button */
     iconRight?: React.ReactNode;
+    /** HTML button type attribute */
+    type?: "button" | "submit" | "reset";
   };
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

package/src/components/atoms/currency-input.tsx

@@ -0,0 +1,16 @@
+import { NumericFormat, type NumericFormatProps } from "react-number-format";
+
+import { Input } from "./input";
+
+export function CurrencyInput({
+  thousandSeparator = true,
+  ...props
+}: Omit<NumericFormatProps, "className">) {
+  return (
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      customInput={Input}
+      {...props}
+    />
+  );
+}