doom-design-system 0.1.0

package/dist/components/Input/Input.js

@@ -0,0 +1,129 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Text } from '../..';
+const InputContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const InputWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+const StyledInput = styled.input `
+  width: 100%;
+  padding: 0.75rem 1rem;
+  padding-left: ${props => props.hasStartAdornment ? '2rem' : '1rem'};
+  padding-right: ${props => props.hasEndAdornment ? '2rem' : '1rem'};
+  font-size: var(--text-base);
+  background: var(--card-bg);
+  color: var(--foreground);
+  border: var(--border-width) solid ${props => props.isError ? 'var(--error)' : 'var(--card-border)'};
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  outline: none;
+  transition: all 0.1s ease;
+
+  &:focus {
+    box-shadow: var(--shadow-hover);
+    transform: translate(-2px, -2px);
+    border-color: ${props => props.isError ? 'var(--error)' : 'var(--primary)'};
+  }
+
+  &::placeholder {
+    color: var(--muted);
+  }
+
+  &::-webkit-calendar-picker-indicator {
+    background-color: var(--muted-foreground);
+    cursor: pointer;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    transition: background-color 0.2s;
+    width: 1em;
+    height: 1em;
+
+    &:hover {
+      background-color: var(--foreground);
+    }
+  }
+
+  &[type="time"]::-webkit-calendar-picker-indicator {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    background-color: var(--muted-foreground);
+    cursor: pointer;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    transition: background-color 0.2s;
+    width: 1em;
+    height: 1em;
+
+    &:hover {
+      background-color: var(--foreground);
+    }
+  }
+`;
+const Adornment = styled.span `
+  position: absolute;
+  ${props => props.position === 'start' ? 'left: 0.75rem;' : 'right: 0.75rem;'}
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  pointer-events: none;
+  z-index: 1;
+`;
+export function Input(_a) {
+    var { label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "style", "className", "format", "validate", "onBlur", "onFocus", "value"]);
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalError, setInternalError] = useState(undefined);
+    const error = errorProp || internalError;
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        if (validate) {
+            setInternalError(validate(e.target.value));
+        }
+        if (onBlur)
+            onBlur(e);
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(e);
+    };
+    // Use formatted value when not focused, otherwise raw value
+    const displayValue = (!isFocused && format && value !== undefined)
+        ? format(value)
+        : value;
+    return (_jsxs(InputContainer, { style: style, className: className, children: [label && (_jsx(Text, { as: "label", variant: "small", weight: "bold", color: "muted", className: "mb-1 block", children: label })), _jsxs(InputWrapper, { children: [startAdornment && _jsx(Adornment, { position: "start", children: startAdornment }), _jsx(StyledInput, Object.assign({}, props, { value: displayValue, hasStartAdornment: !!startAdornment, hasEndAdornment: !!endAdornment, isError: !!error, onBlur: handleBlur, onFocus: handleFocus })), endAdornment && _jsx(Adornment, { position: "end", children: endAdornment })] }), error && (_jsx(Text, { variant: "caption", color: "error", className: "mt-1", children: error })), !error && helperText && (_jsx(Text, { variant: "caption", color: "muted", className: "mt-1", children: helperText }))] }));
+}

package/dist/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/Input/index.js

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    columns?: string;
+    gap?: string;
+}
+export declare function Grid({ children, columns, gap, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    direction?: 'row' | 'column';
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+    align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    gap?: string;
+    wrap?: boolean;
+}
+export declare function Flex({ children, direction, justify, align, gap, wrap, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Layout/Layout.js

@@ -0,0 +1,37 @@
+'use client';
+'use client';
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+const StyledGrid = styled.div `
+  display: grid;
+  grid-template-columns: ${props => props.columns};
+  gap: ${props => props.gap};
+`;
+export function Grid(_a) {
+    var { children, columns = '1fr', gap = '1rem' } = _a, props = __rest(_a, ["children", "columns", "gap"]);
+    return (_jsx(StyledGrid, Object.assign({ columns: columns, gap: gap }, props, { children: children })));
+}
+const StyledFlex = styled.div `
+  display: flex;
+  flex-direction: ${props => props.direction};
+  justify-content: ${props => props.justify};
+  align-items: ${props => props.align};
+  gap: ${props => props.gap};
+  flex-wrap: ${props => props.$wrap ? 'wrap' : 'nowrap'};
+`;
+export function Flex(_a) {
+    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap"]);
+    return (_jsx(StyledFlex, Object.assign({ direction: direction, justify: justify, align: align, gap: gap, "$wrap": wrap }, props, { children: children })));
+}

package/dist/components/Layout/index.d.ts

@@ -0,0 +1 @@
+export * from './Layout';

package/dist/components/Layout/index.js

@@ -0,0 +1 @@
+export * from './Layout';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LinkProps as NextLinkProps } from 'next/link';
+export type LinkVariant = 'default' | 'button' | 'subtle';
+interface LinkProps extends NextLinkProps {
+    children: React.ReactNode;
+    className?: string;
+    variant?: LinkVariant;
+    style?: React.CSSProperties;
+}
+export declare function Link({ children, variant, prefetch, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Link/Link.js

@@ -0,0 +1,78 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import NextLink from 'next/link';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledLink = styled(NextLink) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  
+  /* Default Variant */
+  ${props => (!props.variant || props.variant === 'default') && css `
+    color: var(--foreground);
+    border-bottom: 2px solid transparent;
+    
+    &:hover {
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+      transform: translateY(-1px);
+    }
+  `}
+
+  /* Subtle Variant */
+  ${props => props.variant === 'subtle' && css `
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    
+    &:hover {
+      color: var(--foreground);
+      text-decoration: underline;
+    }
+  `}
+
+  /* Button-like Variant */
+  ${props => props.variant === 'button' && css `
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border: var(--border-width) solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 0.75rem 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: var(--shadow-hover);
+    font-size: 0.75rem;
+    
+    &:hover {
+      filter: brightness(1.1);
+      transform: translate(-2px, -2px);
+      box-shadow: var(--shadow-hover);
+    }
+    
+    &:active {
+      transform: translate(0, 0);
+      box-shadow: none;
+    }
+  `}
+`;
+export function Link(_a) {
+    var { children, variant = 'default', prefetch } = _a, props = __rest(_a, ["children", "variant", "prefetch"]);
+    return (_jsx(StyledLink, Object.assign({ variant: variant, prefetch: prefetch }, props, { children: children })));
+}

package/dist/components/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/Link/index.js

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare function ModalHeader({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalBody({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalFooter({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ isOpen, onClose, title, children, footer }: ModalProps): React.ReactPortal | null;
+export {};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import styled from '@emotion/styled';
+import { Card, Button, Flex } from '../..';
+const ModalContext = React.createContext({ onClose: () => { } });
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  backdrop-filter: blur(4px);
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.2s ease-out;
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+const ContentContainer = styled.div `
+  width: 100%;
+  max-width: 28rem;
+  animation: slideUp 0.3s ease-out;
+
+  @keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+`;
+const StyledHeader = styled(Flex) `
+  padding: 1.5rem;
+  border-bottom: var(--border-width) solid var(--card-border);
+  background: var(--background);
+  
+  h2 {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+  }
+`;
+const StyledBody = styled.div `
+  padding: 1.5rem;
+`;
+const StyledFooter = styled.div `
+  padding: 1.5rem;
+  border-top: var(--border-width) solid var(--card-border);
+  background: var(--background);
+`;
+export function ModalHeader({ children, className }) {
+    const { onClose } = React.useContext(ModalContext);
+    return (_jsxs(StyledHeader, { justify: "space-between", align: "center", className: className, children: [_jsx("h2", { children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
+}
+export function ModalBody({ children, className }) {
+    return (_jsx(StyledBody, { className: className, children: children }));
+}
+export function ModalFooter({ children, className }) {
+    return (_jsx(StyledFooter, { className: className, children: children }));
+}
+export function Modal({ isOpen, onClose, title, children, footer }) {
+    const overlayRef = useRef(null);
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = (e) => {
+        if (e.target === overlayRef.current) {
+            onClose();
+        }
+    };
+    return createPortal(_jsx(ModalContext.Provider, { value: { onClose }, children: _jsx(Overlay, { ref: overlayRef, onClick: handleOverlayClick, children: _jsx(ContentContainer, { children: _jsx(Card, { style: { padding: 0, overflow: 'hidden' }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })) : (children) }) }) }) }), document.body);
+}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/dist/components/Modal/index.js

@@ -0,0 +1 @@
+export * from './Modal';

package/dist/components/Page/Page.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface PageProps {
+    children: React.ReactNode;
+    /**
+     * 'default': Constrained width (65vw) with standard padding.
+     * 'fullWidth': Spans the entire viewport width with no default padding.
+     */
+    variant?: 'default' | 'fullWidth';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Page({ children, variant, className, style }: PageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Page/Page.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+const PageContainer = styled.main `
+  flex: 1;
+  width: 100%;
+  
+  /* Variant Styles */
+  ${props => props.variant === 'default' ? `
+    width: 90%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+
+    @media (max-width: 1024px) {
+      width: 95%;
+      padding: 1rem;
+    }
+  ` : `
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  `}
+`;
+export function Page({ children, variant = 'default', className, style }) {
+    return (_jsx(PageContainer, { variant: variant, className: className, style: style, children: children }));
+}

package/dist/components/Page/index.d.ts

@@ -0,0 +1 @@
+export * from './Page';

package/dist/components/Page/index.js

@@ -0,0 +1 @@
+export * from './Page';

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface PopoverProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom-center';
+    offset?: number;
+}
+export declare function Popover({ trigger, content, isOpen, onClose, placement, offset }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom-start', offset = 8 }) {
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const [transformOrigin, setTransformOrigin] = useState('top left');
+    const updatePosition = useCallback(() => {
+        if (!isOpen || !triggerRef.current || !contentRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let top = triggerRect.bottom + offset;
+        let left = triggerRect.left;
+        let origin = 'top left';
+        // Vertical positioning (flip if not enough space below)
+        if (top + contentRect.height > viewportHeight && triggerRect.top > contentRect.height) {
+            top = triggerRect.top - contentRect.height - offset;
+            origin = 'bottom';
+        }
+        else {
+            origin = 'top';
+        }
+        // Horizontal positioning
+        if (placement === 'bottom-start') {
+            left = triggerRect.left;
+        }
+        else if (placement === 'bottom-end') {
+            left = triggerRect.right - contentRect.width;
+        }
+        else if (placement === 'bottom-center') {
+            left = triggerRect.left + (triggerRect.width / 2) - (contentRect.width / 2);
+        }
+        // Edge detection (keep within viewport)
+        if (left + contentRect.width > viewportWidth - 16) {
+            left = viewportWidth - contentRect.width - 16; // 16px padding from right edge
+            if (origin.includes('left'))
+                origin = origin.replace('left', 'right');
+        }
+        if (left < 16) {
+            left = 16; // 16px padding from left edge
+            if (origin.includes('right'))
+                origin = origin.replace('right', 'left');
+        }
+        setPosition({ top, left });
+        setTransformOrigin(origin);
+    }, [isOpen, placement, offset]);
+    useEffect(() => {
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener('resize', updatePosition);
+            window.addEventListener('scroll', updatePosition, true);
+        }
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [isOpen, updatePosition]);
+    // Handle click outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleClickOutside(event) {
+            if (triggerRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                contentRef.current &&
+                !contentRef.current.contains(event.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, onClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, style: { display: 'inline-block' }, children: trigger }), isOpen && typeof document !== 'undefined' && createPortal(_jsxs("div", { ref: contentRef, style: {
+                    position: 'fixed',
+                    top: position.top,
+                    left: position.left,
+                    zIndex: 9999, // High z-index to ensure it's on top
+                    transformOrigin: transformOrigin,
+                    animation: 'popoverScale 0.1s ease-out',
+                }, children: [content, _jsx("style", { jsx: true, global: true, children: `
+            @keyframes popoverScale {
+              from { opacity: 0; transform: scale(0.95); }
+              to { opacity: 1; transform: scale(1); }
+            }
+          ` })] }), document.body)] }));
+}

package/dist/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ProgressBarProps {
+    value: number;
+    max?: number;
+    height?: string | number;
+    color?: string;
+    showStripes?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ProgressBar({ value, max, height, color, showStripes, className, style }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+const StyledContainer = styled.div `
+  height: ${props => typeof props.height === 'number' ? `${props.height}px` : props.height};
+  width: 100%;
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: var(--border-width) solid var(--card-border);
+  position: relative;
+`;
+const StyledFill = styled.div `
+  height: 100%;
+  width: ${props => props.percentage}%;
+  background: ${props => props.color};
+  border-right: ${props => props.percentage < 100 ? `var(--border-width) solid var(--card-border)` : 'none'};
+  transition: width 0.5s ease-out;
+`;
+const StyledStripes = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(
+    45deg, 
+    rgba(0, 0, 0, 0.05) 25%, 
+    transparent 25%, 
+    transparent 50%, 
+    rgba(0, 0, 0, 0.05) 50%, 
+    rgba(0, 0, 0, 0.05) 75%, 
+    transparent 75%, 
+    transparent
+  );
+  background-size: 20px 20px;
+  pointer-events: none;
+`;
+export function ProgressBar({ value, max = 100, height = '24px', color = 'var(--primary)', showStripes = true, className, style }) {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    return (_jsxs(StyledContainer, { height: height, className: className, style: style, children: [_jsx(StyledFill, { percentage: percentage, color: color }), showStripes && _jsx(StyledStripes, {})] }));
+}

package/dist/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/dist/components/ProgressBar/index.js

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    label?: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    placeholder?: string;
+}
+export declare function Select({ options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, form, autoFocus, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};