@oppulence/design-system 1.0.4 → 1.0.5

package/src/components/atoms/image.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import type { GeneratedImage } from "../../../lib/ai";
+
+export type ImageProps = GeneratedImage &
+  Omit<ComponentProps<"img">, "src" | "className"> & {
+    alt?: string;
+  };
+
+export function Image({
+  base64,
+  mediaType,
+  alt,
+  ...props
+}: ImageProps) {
+  return (
+    <img
+      {...props}
+      alt={alt}
+      className="h-auto max-w-full overflow-hidden rounded-md"
+      src={`data:${mediaType};base64,${base64}`}
+    />
+  );
+}

package/src/components/atoms/index.ts

@@ -1,21 +1,31 @@
 export * from "./aspect-ratio";
+export * from "./animated-size-container";
 export * from "./avatar";
 export * from "./badge";
 export * from "./button";
 export * from "./checkbox";
 export * from "./container";
+export * from "./currency-input";
 export * from "./heading";
+export * from "./icons";
+export * from "./image";
 export * from "./input";
 export * from "./kbd";
 export * from "./label";
+export * from "./loader";
 export * from "./logo";
 export * from "./progress";
+export * from "./quantity-input";
+export * from "./record-button";
 export * from "./separator";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./spinner";
 export * from "./stack";
+export * from "./submit-button";
 export * from "./switch";
 export * from "./text";
+export * from "./text-effect";
+export * from "./text-shimmer";
 export * from "./textarea";
 export * from "./toggle";

package/src/components/atoms/loader.tsx

@@ -0,0 +1,92 @@
+import type { HTMLAttributes } from "react";
+
+type LoaderIconProps = {
+  size?: number;
+};
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+  size?: number;
+};
+
+export const Loader = ({ size = 16, ...props }: LoaderProps) => (
+  <div
+    className="inline-flex animate-spin items-center justify-center"
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);

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

@@ -0,0 +1,103 @@
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+
+type QuantityInputProps = {
+  value?: number;
+  min?: number;
+  max?: number;
+  onChange?: (value: number) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  step?: number;
+  placeholder?: string;
+};
+
+export function QuantityInput({
+  value = 0,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  onChange,
+  onBlur,
+  onFocus,
+  step = 0.1,
+  placeholder = "0",
+}: QuantityInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [rawValue, setRawValue] = React.useState(String(value));
+
+  const handleInput: React.ChangeEventHandler<HTMLInputElement> = ({
+    currentTarget: el,
+  }) => {
+    const input = el.value;
+    setRawValue(input);
+
+    const num = Number.parseFloat(input);
+    if (!Number.isNaN(num) && min <= num && num <= max) {
+      onChange?.(num);
+    }
+  };
+
+  const handlePointerDown =
+    (diff: number) => (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (event.pointerType === "mouse") {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+      const newVal = Math.min(Math.max(value + diff, min), max);
+      onChange?.(newVal);
+      setRawValue(String(newVal));
+    };
+
+  return (
+    <div className="group flex items-stretch transition-[box-shadow] font-mono">
+      <button
+        aria-label="Decrease"
+        className="flex items-center pr-[.325em]"
+        disabled={value <= min}
+        onPointerDown={handlePointerDown(-1)}
+        type="button"
+        tabIndex={-1}
+      >
+        <Minus
+          className="size-2"
+          absoluteStrokeWidth
+          strokeWidth={3.5}
+          tabIndex={-1}
+        />
+      </button>
+      <div className="relative grid items-center justify-items-center text-center">
+        <input
+          ref={inputRef}
+          className="flex w-full max-w-full text-center transition-colors file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 p-0 border-0 h-6 text-xs !bg-transparent border-b border-transparent focus:border-border [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
+          style={{ fontKerning: "none" }}
+          type="number"
+          min={min}
+          max={max}
+          autoComplete="off"
+          step={step}
+          value={rawValue === "0" ? "" : rawValue}
+          placeholder={placeholder}
+          onInput={handleInput}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          inputMode="decimal"
+        />
+      </div>
+      <button
+        aria-label="Increase"
+        className="flex items-center pl-[.325em]"
+        disabled={value >= max}
+        onPointerDown={handlePointerDown(1)}
+        type="button"
+        tabIndex={-1}
+      >
+        <Plus
+          className="size-2"
+          absoluteStrokeWidth
+          strokeWidth={3.5}
+          tabIndex={-1}
+        />
+      </button>
+    </div>
+  );
+}

package/src/components/atoms/record-button.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import { buttonVariants } from "./button";
+import { Loader } from "./loader";
+
+export interface RecordButtonProps {
+  isRecording?: boolean;
+  isProcessing?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  size?: number;
+}
+
+const RecordIcon = ({
+  size = 16,
+  isRecording = false,
+}: {
+  size?: number;
+  isRecording?: boolean;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3" y="10" width="2" height="4" fill="currentColor">
+        {isRecording && (
+          <>
+            <animate
+              attributeName="height"
+              values="4;2;6;3;8;1;5;2;7;4"
+              dur="2.4s"
+              repeatCount="indefinite"
+              begin="0s"
+            />
+            <animate
+              attributeName="y"
+              values="10;11;7;10.5;6;11.5;8.5;11;6.5;10"
+              dur="2.4s"
+              repeatCount="indefinite"
+              begin="0s"
+            />
+          </>
+        )}
+      </rect>
+
+      <rect x="7" y="6" width="2" height="12" fill="currentColor">
+        {isRecording && (
+          <>
+            <animate
+              attributeName="height"
+              values="12;8;16;10;18;6;14;9;15;12"
+              dur="2.7s"
+              repeatCount="indefinite"
+              begin="0.45s"
+            />
+            <animate
+              attributeName="y"
+              values="6;8;2;7;1;9;5;7.5;4.5;6"
+              dur="2.7s"
+              repeatCount="indefinite"
+              begin="0.45s"
+            />
+          </>
+        )}
+      </rect>
+
+      <rect x="11" y="2" width="2" height="20" fill="currentColor">
+        {isRecording && (
+          <>
+            <animate
+              attributeName="height"
+              values="20;14;22;16;24;12;18;15;21;20"
+              dur="2.1s"
+              repeatCount="indefinite"
+              begin="0.9s"
+            />
+            <animate
+              attributeName="y"
+              values="2;5;1;4;0;6;3;4.5;1.5;2"
+              dur="2.1s"
+              repeatCount="indefinite"
+              begin="0.9s"
+            />
+          </>
+        )}
+      </rect>
+
+      <rect x="15" y="6" width="2" height="12" fill="currentColor">
+        {isRecording && (
+          <>
+            <animate
+              attributeName="height"
+              values="12;16;8;14;10;18;6;13;9;12"
+              dur="3.3s"
+              repeatCount="indefinite"
+              begin="1.35s"
+            />
+            <animate
+              attributeName="y"
+              values="6;2;8;5;7;1;9;5.5;7.5;6"
+              dur="3.3s"
+              repeatCount="indefinite"
+              begin="1.35s"
+            />
+          </>
+        )}
+      </rect>
+
+      <rect x="19" y="10" width="2" height="4" fill="currentColor">
+        {isRecording && (
+          <>
+            <animate
+              attributeName="height"
+              values="4;6;2;7;3;8;1;5;3;4"
+              dur="3.0s"
+              repeatCount="indefinite"
+              begin="1.8s"
+            />
+            <animate
+              attributeName="y"
+              values="10;7;11;6.5;10.5;6;11.5;8.5;10.5;10"
+              dur="3.0s"
+              repeatCount="indefinite"
+              begin="1.8s"
+            />
+          </>
+        )}
+      </rect>
+    </svg>
+  );
+};
+
+export function RecordButton({
+  isRecording = false,
+  isProcessing = false,
+  onClick,
+  disabled = false,
+  size = 16,
+}: RecordButtonProps) {
+  const baseClassName = cn(
+    buttonVariants({ variant: "ghost", size: "icon-xs" }),
+    "size-6 mr-2 transition-all duration-300",
+  );
+
+  if (isProcessing) {
+    return (
+      <button
+        type="button"
+        className={cn(baseClassName, "opacity-50")}
+        disabled
+        aria-busy="true"
+      >
+        <Loader size={size} />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        baseClassName,
+        "text-muted-foreground hover:bg-transparent hover:text-foreground",
+        isRecording && "text-red-500",
+        disabled && "opacity-50",
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <RecordIcon size={size} isRecording={isRecording} />
+    </button>
+  );
+}

package/src/components/atoms/submit-button.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { Button, type ButtonProps } from "./button";
+
+type SubmitButtonProps = {
+  children: ReactNode;
+  isSubmitting: boolean;
+  disabled?: boolean;
+} &
+  Omit<ButtonProps, "loading">;
+
+export function SubmitButton({
+  children,
+  isSubmitting,
+  disabled,
+  ...props
+}: SubmitButtonProps) {
+  return (
+    <Button
+      loading={isSubmitting}
+      disabled={isSubmitting || disabled}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/atoms/text-effect.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import type {
+  TargetAndTransition,
+  Transition,
+  Variant,
+  Variants,
+} from "framer-motion";
+import React from "react";
+
+export type PresetType = "blur" | "fade-in-blur" | "scale" | "fade" | "slide";
+
+export type PerType = "word" | "char" | "line";
+
+export type TextEffectProps = {
+  children: string;
+  per?: PerType;
+  as?: keyof React.JSX.IntrinsicElements;
+  variants?: {
+    container?: Variants;
+    item?: Variants;
+  };
+  preset?: PresetType;
+  delay?: number;
+  speedReveal?: number;
+  speedSegment?: number;
+  trigger?: boolean;
+  onAnimationComplete?: () => void;
+  onAnimationStart?: () => void;
+  containerTransition?: Transition;
+  segmentTransition?: Transition;
+  style?: React.CSSProperties;
+};
+
+const defaultStaggerTimes: Record<PerType, number> = {
+  char: 0.03,
+  word: 0.05,
+  line: 0.1,
+};
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+  exit: { opacity: 0 },
+};
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: "blur(12px)" },
+      visible: { opacity: 1, filter: "blur(0px)" },
+      exit: { opacity: 0, filter: "blur(12px)" },
+    },
+  },
+  "fade-in-blur": {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20, filter: "blur(12px)" },
+      visible: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: { opacity: 0, y: 20, filter: "blur(12px)" },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+      exit: { opacity: 0 },
+    },
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 20 },
+    },
+  },
+};
+
+const AnimationComponent: React.FC<{
+  segment: string;
+  variants: Variants;
+  per: "line" | "word" | "char";
+}> = React.memo(({ segment, variants, per }) => {
+  return per === "line" ? (
+    <motion.span variants={variants} className="block">
+      {segment}
+    </motion.span>
+  ) : per === "word" ? (
+    <motion.span
+      aria-hidden="true"
+      variants={variants}
+      className="inline-block whitespace-pre"
+    >
+      {segment}
+    </motion.span>
+  ) : (
+    <motion.span className="inline-block whitespace-pre">
+      {segment.split("").map((char, charIndex) => (
+        <motion.span
+          key={`char-${charIndex.toString()}`}
+          aria-hidden="true"
+          variants={variants}
+          className="inline-block whitespace-pre"
+        >
+          {char}
+        </motion.span>
+      ))}
+    </motion.span>
+  );
+});
+
+AnimationComponent.displayName = "AnimationComponent";
+
+const splitText = (text: string, per: PerType) => {
+  if (per === "line") return text.split("\n");
+  return text.split(/(\s+)/);
+};
+
+const hasTransition = (
+  variant?: Variant,
+): variant is TargetAndTransition & { transition?: Transition } => {
+  if (!variant) return false;
+  return typeof variant === "object" && "transition" in variant;
+};
+
+const createVariantsWithTransition = (
+  baseVariants: Variants,
+  transition?: Transition & { exit?: Transition },
+): Variants => {
+  if (!transition) return baseVariants;
+
+  const { exit: _, ...mainTransition } = transition;
+
+  return {
+    ...baseVariants,
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...(hasTransition(baseVariants.visible)
+          ? baseVariants.visible.transition
+          : {}),
+        ...mainTransition,
+      },
+    },
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...(hasTransition(baseVariants.exit)
+          ? baseVariants.exit.transition
+          : {}),
+        ...mainTransition,
+        staggerDirection: -1,
+      },
+    },
+  };
+};
+
+export const TextEffect = ({
+  children,
+  per = "word",
+  as = "p",
+  variants,
+  preset,
+  delay = 0,
+  speedReveal,
+  speedSegment,
+  trigger = true,
+  onAnimationComplete,
+  onAnimationStart,
+  containerTransition,
+  segmentTransition,
+  style,
+}: TextEffectProps) => {
+  const Component = motion.create(as);
+  const segments = splitText(children, per);
+
+  const baseContainer = preset
+    ? presetVariants[preset].container
+    : variants?.container ?? defaultContainerVariants;
+  const baseItem = preset
+    ? presetVariants[preset].item
+    : variants?.item ?? defaultItemVariants;
+
+  const staggerChildren = speedSegment ?? defaultStaggerTimes[per];
+
+  const containerVariants = createVariantsWithTransition(baseContainer, {
+    ...containerTransition,
+    staggerChildren,
+    delayChildren: delay,
+  });
+
+  const itemVariants = createVariantsWithTransition(baseItem, {
+    ...segmentTransition,
+    duration: speedReveal,
+  });
+
+  return (
+    <AnimatePresence>
+      {trigger && (
+        <Component
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          onAnimationComplete={onAnimationComplete}
+          onAnimationStart={onAnimationStart}
+          style={style}
+        >
+          {segments.map((segment, index) => (
+            <AnimationComponent
+              key={`segment-${index.toString()}`}
+              segment={segment}
+              variants={itemVariants}
+              per={per}
+            />
+          ))}
+        </Component>
+      )}
+    </AnimatePresence>
+  );
+};