doom-design-system 0.1.1 → 0.1.4

package/dist/components/Form/Form.d.ts

@@ -1,14 +1,27 @@
 import React from 'react';
-interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+import { Label } from '../Label/Label';
+export { Label };
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     children: React.ReactNode;
 }
-export declare function Form({ children, className, style, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare function Form({ children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export interface FormMessageProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: React.ReactNode;
+    variant?: 'error' | 'description';
 }
-export declare function FormGroup({ children, className, style, ...props }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export declare function FormMessage({ children, variant, ...props }: FormMessageProps): import("react/jsx-runtime").JSX.Element;
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    label?: string;
+    error?: string | boolean;
+    description?: string;
+    htmlFor?: string;
+    required?: boolean;
 }
-export declare function Label({ children, className, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Field({ children, label, error, description, htmlFor, required, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    error?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Form/Form.js

@@ -1,3 +1,4 @@
+'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)
@@ -9,16 +10,55 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledForm = styled.form `
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+`;
+const StyledField = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  
+`;
+import { Label } from '../Label/Label';
+export { Label };
+const StyledMessage = styled.span `
+  font-size: 0.75rem;
+  font-weight: 500;
+  
+  ${props => props.variant === 'error' && css `
+    color: var(--error);
+    font-weight: 700;
+    text-transform: uppercase;
+    animation: shake 0.3s ease-in-out;
+  `}
+
+  ${props => props.variant === 'description' && css `
+    color: var(--muted-foreground);
+  `}
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+  }
+`;
 export function Form(_a) {
-    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
-    return (_jsx("form", Object.assign({ className: className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '1.5rem' }, style) }, props, { children: children })));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(StyledForm, Object.assign({}, props, { children: children }));
 }
-export function FormGroup(_a) {
-    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
-    return (_jsx("div", Object.assign({ className: className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '0.5rem' }, style) }, props, { children: children })));
+export function FormMessage(_a) {
+    var { children, variant = 'description' } = _a, props = __rest(_a, ["children", "variant"]);
+    return _jsx(StyledMessage, Object.assign({ variant: variant }, props, { children: children }));
 }
-export function Label(_a) {
-    var { children, className = '', style } = _a, props = __rest(_a, ["children", "className", "style"]);
-    return (_jsx("label", Object.assign({ className: className, style: Object.assign({ fontWeight: 700, fontSize: '0.9rem', color: '#000000', textTransform: 'uppercase', letterSpacing: '0.05em' }, style) }, props, { children: children })));
+export function Field(_a) {
+    var { children, label, error, description, htmlFor, required } = _a, props = __rest(_a, ["children", "label", "error", "description", "htmlFor", "required"]);
+    return (_jsxs(StyledField, Object.assign({ error: !!error }, props, { children: [label && (_jsx(Label, { htmlFor: htmlFor, required: required, children: label })), children, description && !error && (_jsx(FormMessage, { variant: "description", children: description })), error && typeof error === 'string' && (_jsx(FormMessage, { variant: "error", children: error }))] })));
 }
+export const FormGroup = StyledField;

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

@@ -8,5 +8,5 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     format?: (value: string | number | readonly string[] | undefined) => string;
     validate?: (value: string | number | readonly string[] | undefined) => string | undefined;
 }
-export declare function Input({ label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, id, required, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Input.js

@@ -13,10 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from '@emotion/styled';
-import { Text } from '../..';
+import { css } from '@emotion/react';
+import { Label } from '../Label/Label';
+import { baseInteractiveStyles, focusStyles, errorStyles } from '../../styles/mixins';
 const InputContainer = styled.div `
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
   width: 100%;
 `;
 const InputWrapper = styled.div `
@@ -33,67 +36,15 @@ const StyledInput = styled.input `
   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)'};
-  }
+  
+  ${baseInteractiveStyles}
+  ${focusStyles}
 
   &::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);
-    }
-  }
+  ${props => props.isError && errorStyles}
 `;
 const Adornment = styled.span `
   position: absolute;
@@ -103,8 +54,25 @@ const Adornment = styled.span `
   pointer-events: none;
   z-index: 1;
 `;
+const HelperText = styled.span `
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: ${props => props.isError ? 'var(--error)' : 'var(--muted-foreground)'};
+  
+  ${props => props.isError && css `
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    animation: input-shake 0.3s ease-in-out;
+  `}
+
+  @keyframes input-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+  }
+`;
 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"]);
+    var { label, error: errorProp, helperText, startAdornment, endAdornment, style, className, format, validate, onBlur, onFocus, value, id, required } = _a, props = __rest(_a, ["label", "error", "helperText", "startAdornment", "endAdornment", "style", "className", "format", "validate", "onBlur", "onFocus", "value", "id", "required"]);
     const [isFocused, setIsFocused] = useState(false);
     const [internalError, setInternalError] = useState(undefined);
     const error = errorProp || internalError;
@@ -121,9 +89,8 @@ export function Input(_a) {
         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 }))] }));
+    return (_jsxs(InputContainer, { style: style, className: className, children: [label && (_jsx(Label, { htmlFor: id, required: required, children: label })), _jsxs(InputWrapper, { children: [startAdornment && _jsx(Adornment, { position: "start", children: startAdornment }), _jsx(StyledInput, Object.assign({ id: id, required: required, value: displayValue, hasStartAdornment: !!startAdornment, hasEndAdornment: !!endAdornment, isError: !!error, onBlur: handleBlur, onFocus: handleFocus }, props)), endAdornment && _jsx(Adornment, { position: "end", children: endAdornment })] }), helperText && !error && (_jsx(HelperText, { children: helperText })), error && (_jsx(HelperText, { isError: true, children: error }))] }));
 }

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    children: React.ReactNode;
+    required?: boolean;
+}
+export declare function Label({ children, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -0,0 +1,38 @@
+'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';
+import { css } from '@emotion/react';
+const StyledLabel = styled.label `
+  font-family: var(--font-heading);
+  font-weight: var(--font-bold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  ${props => props.required && css `
+    &::after {
+      content: '*';
+      color: var(--error);
+      margin-left: 0.25rem;
+    }
+  `}
+`;
+export function Label(_a) {
+    var { children, required } = _a, props = __rest(_a, ["children", "required"]);
+    return _jsx(StyledLabel, Object.assign({ required: required }, props, { children: children }));
+}

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

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

package/dist/components/Label/index.js

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

package/dist/components/Link/Link.js

@@ -19,7 +19,7 @@ const StyledLink = styled.a `
   justify-content: center;
   font-weight: 700;
   text-decoration: none;
-  transition: all 0.15s ease;
+  transition: all var(--duration-fast) var(--ease-in-out);
   cursor: pointer;
   
   /* Default Variant */

package/dist/components/Modal/Modal.js

@@ -9,13 +9,13 @@ const ModalContext = React.createContext({ onClose: () => { } });
 const Overlay = styled.div `
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--z-modal);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+  padding: var(--spacing-md);
   backdrop-filter: blur(4px);
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
   animation: fadeIn 0.2s ease-out;
 
   @keyframes fadeIn {
@@ -34,21 +34,21 @@ const ContentContainer = styled.div `
   }
 `;
 const StyledHeader = styled(Flex) `
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
   border-bottom: var(--border-width) solid var(--card-border);
   background: var(--background);
   
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
     font-weight: bold;
     margin: 0;
   }
 `;
 const StyledBody = styled.div `
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
 `;
 const StyledFooter = styled.div `
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
   border-top: var(--border-width) solid var(--card-border);
   background: var(--background);
 `;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,8 @@
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}
+export declare function Pagination({ currentPage, totalPages, onPageChange, className }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+const PaginationNav = styled.nav `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+`;
+const PageButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  background-color: ${props => props.isActive ? 'var(--primary)' : 'var(--card-bg)'};
+  color: ${props => props.isActive ? 'var(--primary-foreground)' : 'var(--foreground)'};
+  font-family: var(--font-heading);
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: ${props => props.isActive ? 'var(--shadow-sm)' : 'none'};
+
+  &:hover:not(:disabled) {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-sm);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  &:active:not(:disabled) {
+    transform: translate(0, 0);
+    box-shadow: none;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--muted);
+  }
+`;
+export function Pagination({ currentPage, totalPages, onPageChange, className }) {
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    const renderPageNumbers = () => {
+        const pages = [];
+        const maxVisible = 7; // Max buttons to show
+        if (totalPages <= maxVisible) {
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // Complex truncation logic
+            if (currentPage <= 4) {
+                // Near start: 1 2 3 4 5 ... N
+                for (let i = 1; i <= 5; i++)
+                    pages.push(i);
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+            else if (currentPage >= totalPages - 3) {
+                // Near end: 1 ... N-4 N-3 N-2 N-1 N
+                pages.push(1);
+                pages.push('ellipsis');
+                for (let i = totalPages - 4; i <= totalPages; i++)
+                    pages.push(i);
+            }
+            else {
+                // Middle: 1 ... C-1 C C+1 ... N
+                pages.push(1);
+                pages.push('ellipsis');
+                pages.push(currentPage - 1);
+                pages.push(currentPage);
+                pages.push(currentPage + 1);
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+        }
+        return pages.map((page, index) => {
+            if (page === 'ellipsis') {
+                return (_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: _jsx(MoreHorizontal, { size: 20 }) }, `ellipsis-${index}`));
+            }
+            const pageNum = page;
+            return (_jsx(PageButton, { isActive: currentPage === pageNum, onClick: () => handlePageChange(pageNum), "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum));
+        });
+    };
+    return (_jsxs(PaginationNav, { "aria-label": "pagination", className: className, children: [_jsx(PageButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeft, { size: 20, strokeWidth: 2.5 }) }), renderPageNumbers(), _jsx(PageButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, "aria-label": "Go to next page", children: _jsx(ChevronRight, { size: 20, strokeWidth: 2.5 }) })] }));
+}

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

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

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

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

package/dist/components/Popover/Popover.js

@@ -1,7 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { keyframes } from '@emotion/react';
+const popoverScale = keyframes `
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`;
 export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom-start', offset = 8 }) {
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -14,42 +19,60 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         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) {
+        let top = 0;
+        let left = 0;
+        let origin = 'top center';
+        const isTop = placement.startsWith('top');
+        if (isTop) {
             top = triggerRect.top - contentRect.height - offset;
             origin = 'bottom';
+            if (top < 0) {
+                top = triggerRect.bottom + offset;
+                origin = 'top';
+            }
         }
         else {
+            top = triggerRect.bottom + offset;
             origin = 'top';
+            if (top + contentRect.height > viewportHeight) {
+                top = triggerRect.top - contentRect.height - offset;
+                origin = 'bottom';
+            }
         }
-        // Horizontal positioning
-        if (placement === 'bottom-start') {
+        const align = placement.split('-')[1];
+        if (align === 'start') {
             left = triggerRect.left;
+            origin += ' left';
         }
-        else if (placement === 'bottom-end') {
+        else if (align === 'end') {
             left = triggerRect.right - contentRect.width;
+            origin += ' right';
         }
-        else if (placement === 'bottom-center') {
+        else {
             left = triggerRect.left + (triggerRect.width / 2) - (contentRect.width / 2);
+            origin += ' center';
+        }
+        // Edge Config
+        const padding = 16;
+        // Horizontal Clamping
+        if (left + contentRect.width > viewportWidth - padding) {
+            left = viewportWidth - contentRect.width - padding;
         }
-        // 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 < padding) {
+            left = padding;
         }
-        if (left < 16) {
-            left = 16; // 16px padding from left edge
-            if (origin.includes('right'))
-                origin = origin.replace('right', 'left');
+        // Vertical Clamping (Fail-safe)
+        if (top < padding) {
+            top = padding;
+        }
+        if (top + contentRect.height > viewportHeight - padding) {
+            top = viewportHeight - contentRect.height - padding;
         }
         setPosition({ top, left });
         setTransformOrigin(origin);
     }, [isOpen, placement, offset]);
-    useEffect(() => {
+    // Use useLayoutEffect for layout measurements to prevent flash
+    useLayoutEffect(() => {
         if (isOpen) {
             updatePosition();
             window.addEventListener('resize', updatePosition);
@@ -75,17 +98,12 @@ export function Popover({ trigger, content, isOpen, onClose, placement = 'bottom
         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: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, style: { display: 'inline-block' }, children: trigger }), isOpen && typeof document !== 'undefined' && createPortal(_jsx("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)] }));
+                    animation: `${popoverScale} 0.1s ease-out`,
+                }, children: content }), document.body)] }));
 }

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface RadioGroupProps {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function RadioGroup({ name, value: controlledValue, defaultValue, onValueChange, disabled, children, className }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+interface RadioGroupItemProps {
+    value: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function RadioGroupItem({ value, children, disabled, className }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export {};