@apptimate/ui 1.0.0

package/src/Select.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+import { ChevronDown } from 'lucide-react';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    options: { label: string; value: string | number }[];
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ label, error, isRequired, options, className, ...props }, ref) => {
+        return (
+            <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+                {label && (
+                    <label className="text-[12px] font-semibold text-foreground-subtle tracking-[0.3px] uppercase">
+                        {label} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+                    </label>
+                )}
+                <div className="relative group">
+                    <select
+                        ref={ref}
+                        className={cn(
+                            "w-full bg-surface-0 border-1.5 border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all focus:border-primary focus:bg-surface-1 appearance-none cursor-pointer",
+                            error && "border-danger-alt focus:border-danger-alt"
+                        )}
+                        {...props}
+                    >
+                        <option value="" disabled>Select an option</option>
+                        {options.map((opt) => (
+                            <option key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </option>
+                        ))}
+                    </select>
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-disabled group-focus-within:text-primary transition-colors">
+                        <ChevronDown size={16} />
+                    </div>
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+Select.displayName = 'Select';

package/src/Table.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface TableProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const Table = ({ children, className }: TableProps) => {
+    return (
+        <div className={cn("w-full overflow-x-auto", className)}>
+            <table className="w-full border-separate border-spacing-0 text-left min-w-[600px]">
+                {children}
+            </table>
+        </div>
+    );
+};
+
+export const THeader = ({ children, className }: TableProps) => (
+    <thead className={cn(className)}>
+        {children}
+    </thead>
+);
+
+export const TBody = ({ children, className }: TableProps) => (
+    <tbody className={cn(className)}>
+        {children}
+    </tbody>
+);
+
+export const TRow = ({ children, className, onClick }: TableProps & { onClick?: () => void }) => (
+    <tr
+        className={cn(
+            "group transition-colors",
+            onClick && "cursor-pointer hover:bg-surface-hover-table",
+            className
+        )}
+        onClick={onClick}
+    >
+        {children}
+    </tr>
+);
+
+export const TCell = ({ children, className, isHeader = false, colSpan, rowSpan }: TableProps & { isHeader?: boolean; colSpan?: number; rowSpan?: number }) => {
+    const Tag = isHeader ? 'th' : 'td';
+    return (
+        <Tag
+            colSpan={colSpan}
+            rowSpan={rowSpan}
+            className={cn(
+                "transition-all",
+                isHeader
+                    ? "bg-surface-0 py-[10px] px-[14px] text-[11px] font-semibold text-foreground-subtle uppercase tracking-wider first:rounded-l-[8px] last:rounded-r-[8px]"
+                    : "py-3 px-2 text-[13px] font-medium text-foreground-1 border-b border-surface-0",
+                className
+            )}>
+            {children}
+        </Tag>
+    );
+};
+
+export const TLoader = ({ rows = 8, cols = 4 }: { rows?: number; cols?: number }) => {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, i) => (
+                <TRow key={i}>
+                    {Array.from({ length: cols }).map((_, j) => (
+                        <TCell key={j}>
+                            <div className="h-4 bg-surface-0 animate-pulse rounded w-full" />
+                        </TCell>
+                    ))}
+                </TRow>
+            ))}
+        </>
+    );
+};

package/src/index.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+export * from './Accordion';
+export * from './Badge';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './Card';
+export * from './Checkbox';
+export * from './ChipInput';
+export * from './Divider';
+export * from './Dropdown';
+export * from './EmptyState';
+export * from './HintIcon';
+export * from './Input';
+export * from './Modal';
+export * from './Pagination';
+export * from './PopConfirm';
+export * from './SearchableSelect';
+export * from './Select';
+export * from './Table';