@optigrit/optigrit-ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,66 @@
+# @optigrit/optigrit-ui
+
+UI component library for Optigrit apps (React + Tailwind CSS).
+
+## Install
+
+```bash
+npm install @optigrit/optigrit-ui
+```
+
+Peer dependencies (install in your app):
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Usage
+
+Import components from the package root or subpaths:
+
+```tsx
+import { /* components */ } from "@optigrit/optigrit-ui";
+import { /* theme helpers */ } from "@optigrit/optigrit-ui/theme";
+import { /* hooks */ } from "@optigrit/optigrit-ui/hooks";
+```
+
+Tailwind preset:
+
+```js
+// tailwind.config.js
+import preset from "@optigrit/optigrit-ui/preset";
+
+export default {
+  presets: [preset],
+  content: [
+    "./node_modules/@optigrit/optigrit-ui/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+};
+```
+
+Base styles (optional): copy or import `index.css` from the package as needed.
+
+## CLI (`init`)
+
+After installing the package:
+
+```bash
+npx optigrit-ui init
+```
+
+(or `npx @optigrit/optigrit-ui init`)
+
+This wires Tailwind to use the preset and copies starter CSS when possible.
+
+## Scripts (development)
+
+| Script | Description |
+| --- | --- |
+| `npm run build` | Production bundle (`tsup` → `dist/`) |
+| `npm run lint` | Typecheck (`tsc`) |
+| `npm run storybook` | Storybook dev server |
+
+## License
+
+ISC

package/dist/{Input-CL3wQvR_.d.ts → Input-CWxBHfX8.d.ts}

@@ -8,6 +8,7 @@ type PopoverProps = HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
     onClose?: () => void;
     onOpen?: (node: HTMLDivElement) => void;
+    closeOnClickOutside?: boolean;
 };
 
 type InputProps = {

package/dist/{chunk-2LJSVQ6B.js → chunk-F6GWYCMR.js}

@@ -40,6 +40,7 @@ function calculatePopoverStyle(container, defaultPosition) {
 }
 
 // src/core/Popover/Popover.tsx
+import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Popover(props) {
   const {
@@ -49,6 +50,7 @@ function Popover(props) {
     onClose,
     position: _position = "bottom-center",
     onOpen,
+    closeOnClickOutside = true,
     ...popoverProps
   } = props;
   const popoverRef = useRef(null);
@@ -120,37 +122,43 @@ function Popover(props) {
     if (open) showPopover();
     else hidePopover();
   }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed w-[100dvw] h-[100dvh] left-0 top-0",
-        style: { display: open ? "block" : "none" },
-        onClick: handleClickOutside
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...popoverProps,
-        ref: popoverRef,
-        style: {
-          display: "flex",
-          position: "fixed",
-          transition: "all 200ms",
-          opacity: 0,
-          scale: 0.8,
-          ...popoverProps.style
-        },
-        children
-      }
-    )
-  ] });
+  if (!targetRef.current) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Show, { when: !!closeOnClickOutside, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1] bg-red-600/10",
+          style: { display: open ? "block" : "none" },
+          onClick: handleClickOutside
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...popoverProps,
+          ref: popoverRef,
+          style: {
+            display: "flex",
+            position: "fixed",
+            transition: "all 200ms",
+            opacity: 0,
+            scale: 0.8,
+            zIndex: 2,
+            ...popoverProps.style
+          },
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
 }
 
 // src/shared/utils/helper.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(inputs.filter(Boolean).join(" "));
 }
 
 // src/core/Input/Input.tsx
@@ -164,10 +172,10 @@ var Input = forwardRef((props, ref) => {
     required,
     fullWidth = false,
     labelShrink = false,
-    bgColor = "white",
-    textColor = "black",
-    borderColor = "black",
-    primaryColor = "royalblue",
+    bgColor = "var(--bg, white)",
+    textColor = "var(--text, black)",
+    borderColor = "var(--border, black)",
+    primaryColor = "var(--primary, royalblue)",
     inputContainerProps = {},
     ...inputProps
   } = props;
@@ -266,8 +274,98 @@ var Input = forwardRef((props, ref) => {
   );
 });
 
+// src/core/Ripple/index.tsx
+import { forwardRef as forwardRef2, useImperativeHandle, useCallback, useRef as useRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Ripple = forwardRef2(
+  ({ color = "rgba(255, 255, 255, 0.3)", duration = 600 }, ref) => {
+    const containerRef = useRef3(null);
+    const addRipple = useCallback(
+      (event) => {
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const diameter = Math.max(rect.width, rect.height);
+        const radius = diameter / 2;
+        const circle = document.createElement("span");
+        circle.style.position = "absolute";
+        circle.style.width = `${diameter}px`;
+        circle.style.height = `${diameter}px`;
+        circle.style.left = `${event.clientX - rect.left - radius}px`;
+        circle.style.top = `${event.clientY - rect.top - radius}px`;
+        circle.style.borderRadius = "9999px";
+        circle.style.pointerEvents = "none";
+        circle.style.backgroundColor = color;
+        container.appendChild(circle);
+        const anim = circle.animate(
+          [
+            { transform: "scale(0)", opacity: "1" },
+            { transform: "scale(4)", opacity: "0" }
+          ],
+          { duration, easing: "linear" }
+        );
+        anim.onfinish = () => circle.remove();
+      },
+      [color, duration]
+    );
+    useImperativeHandle(ref, () => ({
+      addRipple
+    }));
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        ref: containerRef,
+        className: "absolute inset-0 overflow-hidden pointer-events-none",
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+Ripple.displayName = "Ripple";
+
+// src/core/Spinner/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var colorClasses = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  error: "text-error",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  inherit: "text-inherit"
+};
+function Spinner({
+  size = 40,
+  thickness = 3.6,
+  color = "primary",
+  className = ""
+}) {
+  const sizeStyle = typeof size === "number" ? `${size}px` : size;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "progressbar",
+      className: `inline-block animate-circular-rotate ${colorClasses[color]} ${className}`,
+      style: { width: sizeStyle, height: sizeStyle },
+      children: /* @__PURE__ */ jsx4("svg", { viewBox: "22 22 44 44", className: "block w-full h-full", children: /* @__PURE__ */ jsx4(
+        "circle",
+        {
+          className: "animate-circular-dash",
+          cx: "44",
+          cy: "44",
+          r: 20,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: thickness,
+          strokeLinecap: "round"
+        }
+      ) })
+    }
+  );
+}
+
 // src/core/ShowWithAnimation/index.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState2 } from "react";
 
 // src/core/ShowWithAnimation/const.ts
 var defaultAnimationStyle = {
@@ -304,7 +402,7 @@ var defaultAnimationStyle = {
 };
 
 // src/core/ShowWithAnimation/index.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function ShowWithAnimation(props) {
   const {
     when,
@@ -312,11 +410,12 @@ function ShowWithAnimation(props) {
     containerProps,
     animationStyle,
     otherwise = null,
-    removeOnHide = false,
+    removeOnHide: _removeOnHide = false,
     animationType = "fade",
     animationDuration = 300,
     ...wrapperProps
   } = props;
+  const removeOnHide = _removeOnHide === void 0 || _removeOnHide;
   if (animationStyle) {
     if (!animationStyle.children.to) {
       animationStyle.children.to = animationStyle.children.from;
@@ -329,20 +428,21 @@ function ShowWithAnimation(props) {
     }
   }
   const defaultAnimationStyle2 = (() => {
-    const animationStyle2 = defaultAnimationStyle[animationType];
-    if (!animationStyle2.children.to) {
-      animationStyle2.children.to = animationStyle2.children.from;
+    if (animationStyle) return animationStyle;
+    const defaultAnimationStyle3 = defaultAnimationStyle[animationType];
+    if (!defaultAnimationStyle3.children.to) {
+      defaultAnimationStyle3.children.to = defaultAnimationStyle3.children.from;
     }
-    if (!animationStyle2.otherwise) {
-      animationStyle2.otherwise = animationStyle2.children;
+    if (!defaultAnimationStyle3.otherwise) {
+      defaultAnimationStyle3.otherwise = defaultAnimationStyle3.children;
     }
-    if (!animationStyle2.otherwise.to) {
-      animationStyle2.otherwise.to = animationStyle2.otherwise.from;
+    if (!defaultAnimationStyle3.otherwise.to) {
+      defaultAnimationStyle3.otherwise.to = defaultAnimationStyle3.otherwise.from;
     }
-    return animationStyle2;
+    return defaultAnimationStyle3;
   })();
-  const childrenContainer = useRef3(null);
-  const otherwiseContainer = useRef3(null);
+  const childrenContainer = useRef4(null);
+  const otherwiseContainer = useRef4(null);
   const [isChildrenVisible, setIsChildrenVisible] = useState2(when);
   const [isOtherwiseVisible, setIsOtherwiseVisible] = useState2(!when);
   function handleShow() {
@@ -413,9 +513,8 @@ function ShowWithAnimation(props) {
     {
       ...containerProps,
       className: cn("relative flex items-center justify-center", containerProps?.className),
-      style: { ...containerProps?.style, position: "relative" },
       children: [
-        isChildrenVisible ? /* @__PURE__ */ jsx3(
+        isChildrenVisible ? /* @__PURE__ */ jsx5(
           "div",
           {
             ...wrapperProps,
@@ -430,7 +529,7 @@ function ShowWithAnimation(props) {
             children
           }
         ) : null,
-        otherwise && isOtherwiseVisible ? /* @__PURE__ */ jsx3(
+        otherwise && isOtherwiseVisible ? /* @__PURE__ */ jsx5(
           "div",
           {
             ...wrapperProps,
@@ -460,6 +559,8 @@ export {
   Popover,
   cn,
   Input,
+  Ripple,
+  Spinner,
   ShowWithAnimation,
   Show
 };

package/dist/components/index.d.ts

@@ -1,24 +1,35 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, RefObject } from 'react';
+import react__default, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, RefObject, TableHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PopoverProps, a as InputProps } from '../Input-CL3wQvR_.js';
+import { P as PopoverProps, a as InputProps } from '../Input-CWxBHfX8.js';
 
-type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+type ButtonVariant = "contained" | "outlined" | "soft" | "text";
+type ButtonColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonRoundness = "none" | "sm" | "md" | "lg" | "full";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    color?: ButtonColor;
     size?: ButtonSize;
     roundness?: ButtonRoundness;
     fullWidth?: boolean;
     loading?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
-    iconOnly?: boolean;
     disableRipple?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    roundness?: ButtonRoundness;
+    loading?: boolean;
+    disableRipple?: boolean;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 type SIZE = "xs" | "sm" | "md" | "lg" | "xl";
 
 type TooltipProps = HTMLAttributes<HTMLDivElement> & {
@@ -66,4 +77,96 @@ type MultiSelectProps = {
 } & Omit<InputFieldProps, 'readOnly' | 'value' | 'onChange' | 'onChangeValue'>;
 declare function MultiSelect(props: MultiSelectProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, Select, type SelectProps, Tooltip, type TooltipProps };
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    stickyHeader?: boolean;
+    size?: "small" | "medium";
+}
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+
+interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    align?: "left" | "center" | "right" | "justify" | "inherit";
+    padding?: "normal" | "none" | "checkbox";
+    variant?: "head" | "body" | "footer";
+    component?: "td" | "th";
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
+interface TableContainerProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const TableContainer: react.ForwardRefExoticComponent<TableContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableFooter: react.ForwardRefExoticComponent<TableFooterProps & react.RefAttributes<HTMLTableSectionElement>>;
+
+interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableSectionElement>>;
+
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    hover?: boolean;
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+
+type DialogProps = {
+    open: boolean;
+    onClose?: () => void;
+    children?: react__default.ReactNode;
+    backdropClose?: boolean;
+    className?: string;
+    closeOnEsc?: boolean;
+    animationDuration?: number;
+    size?: SIZE | "full" | "auto";
+};
+declare function Dialog(props: DialogProps): react__default.ReactPortal | null;
+
+type DialogHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+};
+declare function DialogHeader(props: DialogHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function DialogFooter(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+declare function DialogContent(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+type DrawerProps = {
+    open: boolean;
+    onClose?: () => void;
+    children?: react__default.ReactNode;
+    backdropClose?: boolean;
+    className?: string;
+    closeOnEsc?: boolean;
+    animationDuration?: number;
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    size?: SIZE | number;
+    rounded?: number;
+};
+declare function Drawer(props: DrawerProps): react__default.ReactPortal | null;
+
+type DrawerContentProps = {
+    children?: react__default.ReactNode;
+    className?: string;
+    style?: react__default.CSSProperties;
+};
+declare function DrawerContent({ children, className, style }: DrawerContentProps): react_jsx_runtime.JSX.Element;
+
+type DrawerHeaderProps = {
+    children?: react__default.ReactNode;
+    className?: string;
+    style?: react__default.CSSProperties;
+};
+declare function DrawerHeader({ children, className, style }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+
+type DrawerFooterProps = {
+    children?: react__default.ReactNode;
+    className?: string;
+    style?: react__default.CSSProperties;
+};
+declare function DrawerFooter({ children, className, style }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, IconButton, type IconButtonProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, Select, type SelectProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tooltip, type TooltipProps };