@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/ui/Button.css

@@ -0,0 +1,89 @@
+.ogx-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ogx-font-family);
+  font-weight: var(--ogx-font-weight-medium);
+  line-height: var(--ogx-line-height-normal);
+  border-radius: var(--ogx-border-radius-md);
+  transition: all var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+  cursor: pointer;
+  user-select: none;
+}
+.ogx-button--small {
+  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm);
+  font-size: var(--ogx-font-size-sm);
+  min-height: 28px;
+}
+.ogx-button--medium {
+  padding: var(--ogx-spacing-sm) var(--ogx-spacing-md);
+  font-size: var(--ogx-font-size-md);
+  min-height: 36px;
+}
+.ogx-button--large {
+  padding: var(--ogx-spacing-md) var(--ogx-spacing-lg);
+  font-size: var(--ogx-font-size-lg);
+  min-height: 44px;
+}
+.ogx-button--text {
+  background: transparent;
+  border: none;
+  color: var(--ogx-grid-row-text);
+}
+.ogx-button--text.ogx-button--primary {
+  color: var(--ogx-color-primary);
+}
+.ogx-button--text.ogx-button--secondary {
+  color: var(--ogx-color-secondary);
+}
+.ogx-button--text:hover:not(.ogx-button--disabled) {
+  background: var(--ogx-grid-header-hover-background, var(--ogx-color-gray-100));
+}
+.ogx-button--text.ogx-button--primary:hover:not(.ogx-button--disabled) {
+  background: var(--ogx-color-primary-light);
+}
+.ogx-button--outlined {
+  background: transparent;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  color: var(--ogx-grid-row-text);
+}
+.ogx-button--outlined.ogx-button--primary {
+  border-color: var(--ogx-color-primary);
+  color: var(--ogx-color-primary);
+}
+.ogx-button--outlined.ogx-button--secondary {
+  border-color: var(--ogx-color-secondary);
+  color: var(--ogx-color-secondary);
+}
+.ogx-button--outlined:hover:not(.ogx-button--disabled) {
+  background: var(--ogx-grid-header-hover-background, var(--ogx-color-gray-100));
+  border-color: var(--ogx-border-color-hover);
+}
+.ogx-button--contained {
+  background: var(--ogx-color-gray-200);
+  border: none;
+  color: var(--ogx-grid-row-text);
+}
+.ogx-button--contained.ogx-button--primary {
+  background: var(--ogx-color-primary);
+  color: var(--ogx-color-white);
+}
+.ogx-button--contained.ogx-button--secondary {
+  background: var(--ogx-color-secondary);
+  color: var(--ogx-color-white);
+}
+.ogx-button--contained:hover:not(.ogx-button--disabled) {
+  background: var(--ogx-color-gray-300);
+}
+.ogx-button--contained.ogx-button--primary:hover:not(.ogx-button--disabled) {
+  background: var(--ogx-color-primary-dark);
+}
+.ogx-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ogx-button:focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: 2px;
+}

package/lib/components/ui/Button.tsx

@@ -0,0 +1,39 @@
+
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'text' | 'outlined' | 'contained';
+    size?: 'small' | 'medium' | 'large';
+    color?: 'primary' | 'secondary' | 'default';
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    variant = 'text',
+    size = 'medium',
+    color = 'default',
+    disabled = false,
+    className = '',
+    children,
+    ...props
+}) => {
+    const classNames = [
+        'ogx-button',
+        `ogx-button--${variant}`,
+        `ogx-button--${size}`,
+        `ogx-button--${color}`,
+        disabled && 'ogx-button--disabled',
+        className
+    ].filter(Boolean).join(' ');
+
+    return (
+        <button
+            className={classNames}
+            disabled={disabled}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};

package/lib/components/ui/Checkbox.css

@@ -0,0 +1,71 @@
+.ogx-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--ogx-font-family);
+}
+.ogx-checkbox-wrapper--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ogx-checkbox__input {
+  appearance: none;
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ogx-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid var(--ogx-checkbox-border, var(--ogx-color-gray-400));
+  border-radius: 4px;
+  background: var(--ogx-checkbox-bg, var(--ogx-color-white));
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  color: white; 
+  flex-shrink: 0;
+}
+.ogx-checkbox__icon {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+  transform: scale(0);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ogx-checkbox__label {
+  margin-left: var(--ogx-spacing-sm);
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-grid-row-text, var(--ogx-color-gray-700));
+  line-height: 1;
+}
+.ogx-checkbox__input:checked + .ogx-checkbox__box {
+  background: var(--ogx-color-primary);
+  border-color: var(--ogx-color-primary);
+}
+.ogx-checkbox__input:checked + .ogx-checkbox__box .ogx-checkbox__icon {
+  transform: scale(1);
+}
+.ogx-checkbox__input:indeterminate + .ogx-checkbox__box {
+  background: var(--ogx-color-primary);
+  border-color: var(--ogx-color-primary);
+}
+.ogx-checkbox__input:indeterminate + .ogx-checkbox__box .ogx-checkbox__icon {
+  transform: scale(1);
+}
+.ogx-checkbox-wrapper:hover:not(.ogx-checkbox-wrapper--disabled) .ogx-checkbox__box {
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 4px var(--ogx-color-primary-light); 
+}
+.ogx-checkbox__input:focus-visible + .ogx-checkbox__box {
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 4px var(--ogx-color-primary-focus);
+}
+.ogx-checkbox-wrapper--disabled .ogx-checkbox__box {
+  background: var(--ogx-color-gray-100);
+  border-color: var(--ogx-color-gray-300);
+  color: var(--ogx-color-gray-400);
+}

package/lib/components/ui/Checkbox.tsx

@@ -0,0 +1,66 @@
+
+import React from 'react';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    indeterminate?: boolean;
+    label?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+    indeterminate = false,
+    label,
+    className = '',
+    inputRef,
+    ...props
+}) => {
+    const internalRef = React.useRef<HTMLInputElement>(null);
+
+    // Combine refs
+    const setRef = React.useCallback((element: HTMLInputElement | null) => {
+        internalRef.current = element;
+
+        if (typeof inputRef === 'function') {
+            inputRef(element);
+        } else if (inputRef) {
+            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = element;
+        }
+    }, [inputRef]);
+
+    React.useEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+
+    const wrapperClassNames = [
+        'ogx-checkbox-wrapper',
+        props.disabled && 'ogx-checkbox-wrapper--disabled',
+        className
+    ].filter(Boolean).join(' ');
+
+    return (
+        <label className={wrapperClassNames}>
+            <input
+                ref={setRef}
+                type="checkbox"
+                className="ogx-checkbox__input"
+                aria-label={label || props['aria-label'] || (indeterminate ? 'Select some' : props.checked ? 'Deselect' : 'Select')}
+                {...props}
+            />
+            <span className="ogx-checkbox__box">
+                {props.checked && !indeterminate && (
+                    <svg className="ogx-checkbox__icon" viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+                    </svg>
+                )}
+                {indeterminate && (
+                    <svg className="ogx-checkbox__icon" viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M19 13H5v-2h14v2z" />
+                    </svg>
+                )}
+            </span>
+            {label && <span className="ogx-checkbox__label">{label}</span>}
+        </label>
+    );
+};

package/lib/components/ui/DragHandleIcon.css

@@ -0,0 +1,19 @@
+.ogx-drag-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    color: var(--ogx-grid-header-text);
+    padding: 0 4px;
+    opacity: 0.5;
+    transition: opacity 0.2s, color 0.2s;
+}
+.ogx-drag-handle:hover {
+    opacity: 1;
+    color: var(--ogx-grid-row-text);
+}
+.ogx-drag-handle:active {
+    cursor: grabbing;
+    color: var(--ogx-color-primary);
+    opacity: 1;
+}

package/lib/components/ui/DragHandleIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface DragHandleIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }
+
+export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
+    return (
+        <button
+            type="button"
+            className={`ogx-drag-handle ${className}`}
+            aria-label="Drag to reorder row"
+            {...props}
+        >
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
+                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+            </svg>
+        </button>
+    );
+};

package/lib/components/ui/ExpandIcon.css

@@ -0,0 +1,38 @@
+.ogx-expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--ogx-grid-header-text);
+  transition: color 0.2s ease;
+  border-radius: 4px;
+}
+.ogx-expand-icon:hover {
+  background: transparent; 
+  color: var(--ogx-grid-row-text);
+}
+.ogx-expand-icon:focus {
+  outline: none; 
+}
+.ogx-expand-icon:focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: 2px;
+}
+.ogx-expand-icon svg {
+  display: block;
+  transition: transform 0.2s ease;
+}
+@media (prefers-color-scheme: dark) {
+  .ogx-expand-icon {
+    color: var(--ogx-color-gray-400);
+  }
+  .ogx-expand-icon:hover {
+    background: var(--ogx-color-gray-800);
+    color: var(--ogx-color-gray-100);
+  }
+}

package/lib/components/ui/ExpandIcon.tsx

@@ -0,0 +1,75 @@
+
+import React from 'react';
+
+export interface ExpandIconProps {
+    isExpanded: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    variant?: 'chevron' | 'plus-minus';
+}
+
+export function ExpandIcon({ isExpanded, onClick, variant = 'chevron' }: ExpandIconProps) {
+    return (
+        <button
+            className={`ogx-expand-icon ${isExpanded ? 'ogx-expand-icon--expanded' : ''}`}
+            onClick={(e) => {
+                if (onClick) {
+                    onClick(e);
+                }
+            }}
+            aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+            type="button"
+        >
+            {variant === 'plus-minus' ? (
+                <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    { }
+                    <path
+                        d="M4 8H12"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                    { }
+                    <path
+                        d="M8 4V12"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        style={{
+                            opacity: isExpanded ? 0 : 1,
+                            transition: 'opacity 0.2s ease',
+                            transformOrigin: 'center'
+                        }}
+                    />
+                </svg>
+            ) : (
+                <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    style={{
+                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.2s ease'
+                    }}
+                >
+                    <path
+                        d="M6 4L10 8L6 12"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            )}
+        </button>
+    );
+}

package/lib/components/ui/Input.css

@@ -0,0 +1,59 @@
+.ogx-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-md);
+  background: var(--ogx-color-white);
+  transition: all var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+.ogx-input-wrapper--full-width {
+  width: 100%;
+}
+.ogx-input {
+  flex: 1;
+  padding: var(--ogx-spacing-sm) var(--ogx-spacing-md);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-md);
+  line-height: var(--ogx-line-height-normal);
+  color: var(--ogx-color-gray-900);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.ogx-input::placeholder {
+  color: var(--ogx-color-gray-400);
+}
+.ogx-input__adornment {
+  display: flex;
+  align-items: center;
+  color: var(--ogx-color-gray-600);
+}
+.ogx-input__adornment--start {
+  padding-left: var(--ogx-spacing-md);
+}
+.ogx-input__adornment--end {
+  padding-right: var(--ogx-spacing-md);
+}
+.ogx-input-wrapper:hover:not(.ogx-input-wrapper--disabled) {
+  border-color: var(--ogx-border-color-hover);
+}
+.ogx-input-wrapper:focus-within:not(.ogx-input-wrapper--disabled) {
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 1px var(--ogx-color-primary);
+}
+.ogx-input-wrapper--error {
+  border-color: var(--ogx-color-error);
+}
+.ogx-input-wrapper--error:focus-within {
+  box-shadow: 0 0 0 1px var(--ogx-color-error);
+}
+.ogx-input-wrapper--disabled {
+  background: var(--ogx-color-gray-100);
+  border-color: var(--ogx-color-gray-200);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ogx-input-wrapper--disabled .ogx-input {
+  cursor: not-allowed;
+}

package/lib/components/ui/Input.tsx

@@ -0,0 +1,45 @@
+
+import React from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    fullWidth?: boolean;
+    error?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+}
+
+export const Input: React.FC<InputProps> = ({
+    fullWidth = false,
+    error = false,
+    startAdornment,
+    endAdornment,
+    className = '',
+    ...props
+}) => {
+    const wrapperClassNames = [
+        'ogx-input-wrapper',
+        fullWidth && 'ogx-input-wrapper--full-width',
+        error && 'ogx-input-wrapper--error',
+        props.disabled && 'ogx-input-wrapper--disabled',
+        className
+    ].filter(Boolean).join(' ');
+
+    return (
+        <div className={wrapperClassNames}>
+            {startAdornment && (
+                <div className="ogx-input__adornment ogx-input__adornment--start">
+                    {startAdornment}
+                </div>
+            )}
+            <input
+                className="ogx-input"
+                {...props}
+            />
+            {endAdornment && (
+                <div className="ogx-input__adornment ogx-input__adornment--end">
+                    {endAdornment}
+                </div>
+            )}
+        </div>
+    );
+};

package/lib/components/ui/index.ts

@@ -0,0 +1,15 @@
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+
+export { ExpandIcon } from './ExpandIcon';
+export type { ExpandIconProps } from './ExpandIcon';
+
+export { DragHandleIcon } from './DragHandleIcon';
+export type { DragHandleIconProps } from './DragHandleIcon';